Cara Membuat Breadcrumb (Navigasi Postingan) di Blog

Bagikan :

Tweet

Advertisement

Cara Membuat Breadcrumb (Navigasi Postingan) di Blog - merupakan salah satu cara untuk membuat tampilan blog kita cantik salah satunya dan juga teknik SEO dasar yang perlu diketahui oleh para blogger pemula (seperti saya ini..hehehe...) adalah dengan membuat Breadcrumb atau Navigasi postingan artikel kita sehingga memudahkan pembaca untuk melihat dari kelompok mana asal postingan tersebut. Hal ini seperti terlihat pada blog edukatif saya yang khusus membahas matematika seperti pada gambar di bawah ini. 
 

Untuk membuat Breadcrumb (Navigasi postingan) di blog, teman - teman blogger bisa mengikuti langkah - langkah berikut:

1. Login ke blogger.
2. Klik Template
3. Klik Edit HTML dan centang Expand Widget Templates
4. Cari code ]]></b:skin> kalau mau lebih cepat gunakan Ctrl+f
5. copy code di bawah ini lalu letakan tepat di atas code ]]></b:skin>


/*--Membuat breadcrumb--*/
.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}

6. Cari code <b:includable id='post' var='post'>
7. Setelah ketemu silahkan teman-teman blogger copy paste code di bawah ini dan letakan di bawah code <b:includable id='post' var='post'>

 <b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

8. Jangan lupa save Template-nya yah.. :)

Demikian tutorial  Cara Membuat Breadcrumb (Navigasi postingan) di Blog  (hasil contekan sana - sini,,hehehe....).. Semoga bermanfaat..

Tag : Tips n Trick, Tutorial Blog