Cara Membuat Navigasi Breadcrumb di Blogger

Cara membuat navigasi breadcrumb di Blogger.com atau situs berakhiran blospot ini saya buat dari hasil pengalaman mencari artikel tentang breadcrumb dan sedikit inovasi sehingga bisa digunakan. Breadcrumb atau navigaasi situs ini adalah salah satu cara untuk optimasi situs agar cepat terindex di SERF (Search Engine Result Page) dan merupakan cara efetif dalam SEO (Search Engine Optimization). Breadcrumb muncul seperti tingkatan menu artikel seperti ini : HOME > Tips > Cara Membuat Navigasi Breadcrumb di Blogger.

Step-step untuk membuat navigasi breadcrumb ini adalah Login ke akun anda di www.blogger.com kemudian masuk ke Design/Rancangan/Templates dan coba pilih Edit HTML, jangan lupa untuk memberikan tanda cek/centang[V] pada kotak Expand Widget Templates.

Setalah muncul dialog box script/program, coba anda cari kode script <div class='post hentry'>, dan letakkan Script 1 tepat dibawah/tepat disebelah kode  <div class='post hentry'> ini. 

Script 1 : 

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

Setelah itu coba anda kembali mencari kode : ]]</b:skin> dan letakkan script dibawah ini tepat diatas kode ]]</b:skin> ini

.breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px;font-size:95%;line-height:1.4em;border-bottom:3px double #cadaef;}

15px --> dapat dirubah, dengan ukuran font sesuai seuai keinginan anda

border-bottom:3px double --> dapat dirubah jenis garis bawah yg akan muncul tepat dibawah nagivasi breadcrumb anda.

Selesai, selamat mencoba dan hanya itu yang saya bisa sampaikan dalam Cara membuat navigasi breadcrumb di blogger.