Menu Breadcrumbs

Sebelum saya memberitahu cara pembuatan menu breadcrumbs, ada baiknya saya menjelaskan apa itu menu breadcrumbs terlebih dahulu.  Menurut wikipedia : " Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. "


yang intinya : sebuah tampilan link dari page yang terbuka yang menjelaskan dari mana page tersebut berasal. Untuk lebih jelasnya, di page ini menu breadcrumbsnya adalah : Home » Adsense » Menu Breadcrumbs . dari sini, kita bisa tahu bahwa Page "Menu Breadcrumbs" di web saya ini berasal dari label Adsense, dan kemudian berasal dari home page web saya.

Keuntungannya memasang menu ini kedalam blog kita adalah membuat SEO menjadi lebih friendly. Tentunya dengan SEO yang lebih friendly, PV(Page Visitor) dan traffic web kita akan meningkat. Jika agan ingin traffic blog agan tinggi, silahkan klik di sini untuk tutorialnya

Caranya :

1. Pasang label di tiap postingan anda.
2. Buka Dashboard, lalu pilih Tata Letak(Template) dan kemudian pilih Edit HTML, centang tulisan Expand Widget Templates.
3. Back up dulu template anda, untuk berjaga-jaga jika ada kesalahan.
4.Cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian) :

 ]]></b:skin>

5. Letakkan kode berikut tepat diatasnya:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

6. Cari kode berikut lagi (Agan bisa pake Ctrl+F untuk mempermudah pencarian)

<b:includable id='main' var='top'>

7. Hapus kode tersebut dan ganti dengan kode berikut 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'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</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'/>

8. Preview dulu, jika blog agan muncul seperti biasa, save blog agan. Kemudian silahkan cek di salah satu postingan anda. Selamat Menu Breadcrumbs blog anda sudah jadi !

Sekian dari saya, tetap semangat !

Artikel Terkait