Powered by Blogger.
Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Cara Pasang Widget IP Adress Pengunjung

Halo!!! Kali ini saya akan memberi tahu bagaimana cara memasang widget IP Adress pengunjung blog anda, untuk itu ikuti langkah-langkah berikut.

1. Loggin blogger.
2. Masuk ke Tata Letak.
3. Klik Add Gadget, lalu pilih HTML/JavaScript
4. Copy kode dibawah ini, lalu pastekan ke dalam kotak HTML/JavaScript


<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>

Atau,


<a href="http://www.123myip.co.uk/cometo/?en"><img 
src="http://www.123myip.co.uk/ip-address/?size=468x60" border="0"

5. Klik Save Template , dan lihat hasilnya.

Sekian dulu tutorial dari saya.

Tertanda,
Tio Rendika Yeremia Sitanggang




Cara Membuat Template Blog Menjadi SEO Friendly

Cara Membuat Template Blog Menjadi SEO Friendly



















Hallo teman-teman!!! Kali ini saya akan memberi tahu, bagaimana sih caranya supaya template blog kita menjadi template SEO Friendly. Ikuti langkah - langkah dibawah ini ya...

1. Masuk ke dashboard blog anda.

2. Klik rancangan, lalu pilih Edit HTML

3. Merubah Page Tittle dengan cara :
    1). Cari kode <title><data:blog.pageTitle/></title> dengan cara ketik CTRL+F.
    2). Ganti kode diatas dengan kode dibawah ini.
       <b:if cond='data:blog.pageType == "item"'>
       <title><data:blog.pageName/> | <data:blog.title/></title>
       <b:else/>
       <title><data:blog.pageTitle/> | Kata kunci anda | Kata kunci anda </title>
       </b:if
       ( Catatan : Ganti kata yang berwarna merah dengan kata kunci yang anda inginkan )

4. Tambahkan Meta Tag dengan cara :
    1). Cari kode  <b:skin><![CDATA[/*
    2). Copy kode dibawah ini di atas kode <b:skin><![CDATA[/*
         <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
         <meta name='Author' content='Nama Sobat'/>
         <meta name='description' content='Deskripsi singkat tentang blog sobat'/>
         <meta name='keywords' content='keyword1, keyword2, keyword3, dst'/>
         <meta name='language' content='id'/>
         <meta name='geo.position' content='-5;120'/>
         <meta name='geo.country' content='id' />
         </b:if>
          ( Catatan : Ganti kata yang berwarna merah dengan identitas blog anda )

5. Pasang Breadcrumbs dengan cara :
    1). Cari kode ]]></b:skin>  dengan cara ketik CTRL+F
    2). Copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>
       .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
    3). Kemudian cari kode <b:includable id='main' var='top'> dengan cara ketik CTRL+F.
    4). Ganti kode <b:includable id='main' var='top'> dengan kode yang dibawah ini.
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<!-- breadcrumb for the post page --> 
<b:loop values='data:posts' var='post'> 
<b:if cond='data:post.labels'> 
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> 
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> 
<b:loop values='data:post.labels' var='label'> 
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 
</b:loop> 
&#187; <span><data:post.title/></span> 
</div> 
<b:else/> 
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div> 
</b:if> 
</b:loop> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;archive&quot;'> 
<!-- breadcrumb for the label archive page and search pages.. --> 
<div class='breadcrumbs'> 
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span> 
</div> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<div class='breadcrumbs'> 
<b:if cond='data:blog.pageName == &quot;&quot;'> 
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span> 
<b:else/> 
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span> 
</b:if> 
</div> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:if> 
</b:includable> 
<b:includable id='main' var='top'> 
<b:include data='posts' name='breadcrumb'/>

6. Pasang widget Related Post dengan cara :
    1). Cari kode <data:post.body>  dengan cara ketik CTRL+F
    2). Copy kode dibawah ini letakkan dibawah <data:post.body> 
<b:if cond='data:blog.pageType == "item"'> 
<div class='similiar'> 
<span class='box'> 
<div class='widget-content'> 

<h3>Artikel Terkait</h3> 
<div id='data2007'/><br/><br/> 
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; 
var maxNumberOfPostsPerLabel = 4; 
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 6; 
maxNumberOfLabels = 100;
function listEntries10(json) { 
var ul = document.createElement(&#39;ul&#39;); 
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
json.feed.entry.length : maxNumberOfPostsPerLabel; 
for (var i = 0; i &lt; maxPosts; i++) { 
var entry = json.feed.entry[i]; 
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) { 
if (entry.link[k].rel == &#39;alternate&#39;) { 
alturl = entry.link[k].href; 
break; 
var li = document.createElement(&#39;li&#39;); 
var a = document.createElement(&#39;a&#39;); 
a.href = alturl;
if(a.href!=location.href) { 
var txt = document.createTextNode(entry.title.$t); 
a.appendChild(txt); 
li.appendChild(a); 
ul.appendChild(li); 
for (var l = 0; l &lt; json.feed.link.length; l++) { 
if (json.feed.link[l].rel == &#39;alternate&#39;) { 
var raw = json.feed.link[l].href; 
var label = raw.substr(homeUrl3.length+13); 
var k; 
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; 
&quot;); 
var txt = document.createTextNode(label); 
var h = document.createElement(&#39;b&#39;); 
h.appendChild(txt); 
var div1 = document.createElement(&#39;div&#39;); 
div1.appendChild(h); 
div1.appendChild(ul); 
document.getElementById(&#39;data2007&#39;).appendChild(div1); 
function search10(query, label) {
var script = document.createElement(&#39;script&#39;); 
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; 
+ label + 
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;); 
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); 
document.documentElement.firstChild.appendChild(script); 
}
var labelArray = new Array(); 
var numLabel = 0;
<b:loop values='data:posts' var='post'> 
<b:loop values='data:post.labels' var='label'> 
textLabel = &quot;<data:label.name/>&quot;;
var test = 0; 
for (var i = 0; i &lt; labelArray.length; i++) 
if (labelArray[i] == textLabel) test = 1; 
if (test == 0) { 
labelArray.push(textLabel); 
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
labelArray.length : maxNumberOfLabels; 
if (numLabel &lt; maxLabels) { 
search10(homeUrl3, textLabel); 
numLabel++; 
</b:loop> 
</b:loop> 
</script> 
</div> 
</span></div>
</b:if>

7. Matikan Setting Archive dengan cara :
   1). Cari kode <head> dengan cara ketik CTRL+F
   2). Letakkan kode berikut diatas kode <head>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/ </b:if>

8. Ganti Tag Heading dengan cara :
   1). Cari kode 

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
   2). Ganti kode yang berwarna merah dengan h1, lalu tambahkan kode diatas, diatas kode ]]></b:skin>

9. Tambahkan kode rel=canonical dengan cara :
   1). Cari kode <head>
   2). Letakkan kode berikut dibawah kode <head>

<link expr:href='data:blog.url' rel='canonical' />

10. Klik Save Tempate.

Itulah langkah-langkah supaya blog anda menjadi SEO Friendly.
Sekian dan terimakasih.

Tertanda,
Tio Rendika Yeremia Sitanggang

Cara Membuat Tulisan Berjalan

Kali ini saya akan mengajarkan anda bagaimana cara membuat tulisan berjalan.Untuk itu ikuti langkah-langkah di bawah ini.

1. Pergi ke menu Tata Letak 
2. Klik Add Gadget, pilih HTML/JavaScript
3. Copy paste kode di bawah ini
<marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

Nb:
1. Ganti "Contoh Tulisan Berjalan" dengan kata-kata yang anda inginkan.
2. Gerakannya bisa kalian ubah dengan cara ganti kata left dengan:
    Right  = Kanan
    Up     = Atas
    Down = Bawah
3.Kecepatannya dapat anda ubah denagn cara mengubah angka 2 dengan angka lain, semakin tinggi     angkanya, semakin cepat kecepatannya.

Sekian tutorial dari saya, terimakasih

Tertanda,
Tio Rendika Yeremia Sitanggang

Cara Buat Berita Berjalan

Berita berjalan adalah cuplikan berita pendek yang mewakili berita secara keseluruhan sehingga bisa memberikan informasi terbaru kepada pengunjung blog arbakid tentang peristiwa yang sedang terjadi saat ini dan pada akhirnya pengunjung dari blog tidak akan ketinggalan informasi terbaru.

Kali ini saya akan menjelaskan cara membuat berita berjalan.
1. Pergi ke menu template
2. Pilih Edit HTML, lalu pilih Lanjutkan
3. Centang tanda Expand Template Widget
4. Cari ]]></b:skin> dengan cara tekan Ctrl + F
5. Copy kode ini di atas kode ]]></b:skin>
#berita {
position:fixed;_position:absolute;bottom:0px; center:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
6. Lalu cari kode </body>
7. Copy kode ini diatas kode </body>
<div id=' berita '>
<iframe allowtransparency='true' frameborder='0' height='17' id='NewsWindow' marginheight='0' marginwidth='0' scrolling='no' src='http://www.elshinta.com/v2003a/scrolling.htm' style='background-color: transparent;' width='1200'/>
</div>
8. Save Template


Tertanda,
Tio Rendika Yeremia Sitanggang



Buat Arsip Blog Dalam Bentuk Scroll

Ingin membuat Arsip Blog dalam bentuk scroll? Kali ini saya akan mengajarkan anda bagaimana cara membuat Arsip Blog dalam bentuk scroll.

Ikuti langkah-langkah dibawah ini.
1. Pergi ke menu template.
2. Pilih Edit HTML, pilih lanjutkan.
3. Centang tanda Expand Template Widget
4. Cari ]]></b:skin> dengan cara tekan Ctrl + f
5. Copy kode ini diatas kode ]]></b:skin>


#BlogArchive1 .widget-content{
height:300px;
width:auto;
overflow:auto;

Seperti ini














6. Simpan template


Tertanda,
Tio Rendika Yeremia Sitanggang

Cara Buat Baca Selengkapnya



Baca Selengkapnya adalah suatu cara untuk memotong postingan supaya postingan nya terlihat tidak terlalu panjang di halaman utama. Kali ini saya akan menjelaskan tentang langkah - langkah membuat readmore.

1. Pilih template
2. Pilih Edit HTML, lalu pilih Lanjutkan
3. Centang tanda Expand Template Widget
4. Cari </head> dengan tekan Ctrl+f
5 . Copy kode ini diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
  
 Seperti ini






6. Selanjutnya cari <data:post.body> dengan tekan Ctrl + F
7. Lalu hapus <data:post.body>, ganti dengan

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Baca Selengkapnya</a></span>
</b:if>
Seperti ini



8. Simpan Template


Tertanda,
Tio Rendika Yeremia Sitanggang


Pasang Widget Facebook


Ingin menambah widget halaman facebook di blogger??



Kali ini saya akan mengajarkan anda bagaimana cara menambah widget halaman facebook.
Ikuti langkah-langkah dibawah ini :

1. Copy kode dibawah ini lalu paste kan ke add gadget


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGyCGJ6rG9iP0_LgXjIlWg6blT6uiOls-trJDVx7wYTy7Q15HQIp052bwqZPf0aYuvB9pSYBRfDarIB84ixKijOuBeKPy9OumAQ1Mgk9AWYO8oPGNz1w0VvrqnhnBdWLtmh2Xjg2ExwG7T/s150/w2b_facebookbadge.pn") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;down:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F#&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="*">Nama Facebook Pemilik Halaman</a></span></div></div>


Nb : - Ganti tanda  dengan username Fan Page Facebook 
         Belum ada Username ?? Buat lah melalui www.facebook.com/username
       - Ganti tanda  dengan url blog anda
       - Ganti Nama Facebook Pemilik Halaman dengan nama facebook anda

Gimana gampang kan??


Tertanda,
Tio Rendika Yeremia Sitanggang

Cara Membuat Menu Drop Down Dengan CSS3

Kali ini saya akan membahas bagai mana cara membuat Drop Down Menu dengan CSS3, banyak orang yang pingin mendesai Blog nya dengan Menu Drop Down yang keren dan bagus,nah ini kesempatan baik bagi para blogger untuk memasang menu Drop Down ini yang menggunakan CSS3 ini di blog kamu, cara nya membuat nya sangat mudah, dan tidak ribet, dan jika kamu pernah melihat artikel Cara Membuat Menu Horizontal Drop Down di bog ini, dan mengalami kesulitan atau kegagalan coba sekarang gunakan Menu Drop Down CSS3 yang satu ini.

Berikut Cara Membuat Menu Drop Down Dengan CSS3 :

1. Add Gadget > HTML Java Script, copy kode di bawah ini.

<style>
/*------ CSS3 Drop Down Menu By www.lukas-trys.blogspot.com ---------*/
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href="*">Home</a></li>
li><a href="*">About Me</a>
<ul>
<li><a href="*">Contact Me</a></li>
<li><a href="*">Pasang Iklan</a></li>
</ul>
</li> 
<li><a href="*">Berita</a>
<ul>
<li><a href="*">Berita</a></li>
<li><a href="*">Kriminal</a></li>
<li><a href="*">Olahraga</a></li>
</ul>
</li>
<li><a href="*">Informasi</a>
<ul>
<li><a href="*">Indonesia</a></li>
<li><a href="*">Unik</a></li>
<li><a href="*">Kesehatan</a></li>
</ul>
</li> 
<li><a href="*">Rohani</a>
<ul>
<li><a href="*">Kesaksian</a></li>
<li><a href="*">Renungan</a></li>
</ul>
</li> 
<li><a href="*">Teknologi</a>
<ul>
<li><a href="*">Gadget</a></li>
<li><a href="*">Teknologi</a></li>
</ul>
</li>
<li><a href="*">Tutorial Blogger</a></li>
</ul>

2. Save.


Nb : - Ganti tanda * dengan Url yang di tuju.
        - Anda dapat merubah menu sesuai keinginan anda


Tertanda,
Tio Rendika Yeremia Sitanggang

Kunci Gitar

Tentang Blog Ini

free web site traffic and promotion
Link Blogger Pemula Backlinks Generator GratisBelajar Bisnis Online Untuk Pemula

Entertainment Blogs
Entertainment blogs



free counters