Cara Membuat Dan Memasang Menu Breadcrumbs

Blog || Breadcrumbs kalo diterjemahakan bebas ke bahasa Indonesia bearti remah roti. Tidak salah, breadcrumbs navigation itu seperti jejak yaitu merupakan bantuan navigasi yang digunakan dalam user interface di website. 

Hal ini memberikan pengguna cara untuk melacak lokasi mereka dalam sebuah website. Istilah ini berasal dari jejak remah roti yang ditinggalkan oleh Hansel dan Gretel di dongeng populer. (Wikipedia)

Banyak para sesepuh blogger yang menganjurkan untuk memasang breadcrumbs Apa alasannya?

Alasannya adalah karena breadcrumbs akan membantu blog kita menjadi lebih SEO friendly. Breadcrumbs memungkinkan kategori yang ada pada blog kita menjadi kata kunci untuk artikel yang kita post-kan dengan tag/ label yang berkaitan. 

Konsepnya seperti ini, misalkan blog temen-temen mempunyai kategori "review film" yang berisi postingan temen-temen mengenai review film terbaru. 

Ketika ada seseorang yang memasukan query pada search engine "review film", maka search engine akan menampilkan banyak postingan dalam kategori revie film tersebut. 

Maka memasangan breadcrumbs akan membantu blog temen-temen untuk lebih mudah terindeks search engine, apalagi jika postingan temen-temen relefan dengan kategori yang temen-temen sematkan.

Nah berikut ini langkah-langkah untuk memasang breadcrumbs pada blog:

Cara Membuat Dan Memasang Menu Breadcrumbs

 Cara Membuat Dan Memasang Menu Breadcrumbs

Login ke blog temen-temenMasuk Rancangan, Edit HTMLKlik checkbox expand template widgetBiar lebih aman saya sarankan temen-temen mem-backup template (lewat link download template lengkap)Temukan kode:

/* Breadcrumbs */.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

Tambahkan Kode Css tersebut Sebelum ]]></b:skin> atau </style>

Cari Kode Html Di Bawah Ini

Caranya kalian klik dimana mana saja di html nya Lalu kalian Klik Ctrl+f di keyboard kalian lalu kalian paste kode di bawah ini lalu klik enter

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

Lalu Kalian Tambahkan Kode Html ini Tepat Di Bawah Kode Di Atas

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Terakhir Klik Simpan Tema