Cara Membuat Navigasi Breadcrumb Di blogspot

Cara Membuat Navigasi Breadcrumb Di blogspot - Breadcrumb berfungsi untuk menginformasikan pengunjung blog tentang lokasi halaman/posting yang mereka lihat (Contoh :Home » Lirik Lagu » Lirik Lagu Alone by Bee Gees) dan pengunjung bisa mengklik halaman diatas posting tersebut seperti kategori posting maupun kembali ke homepage.

Penggunaan breadcrumb dalam sebuah blog ini sangat saya sarankan karena akan membuat blog lebih menarik. walaupun demikian mungkin ada dari saudara yang tidak suka dengan pemasangan breadcrumb juga tidak masalah, suka-suka...

Oke,, tidak usah banyak basa-basi, berikut adalah langkah-langkah dalam membuat navigasi breadcrumb di blogspot:
Login Blogger
2. Masuk ke Template >> Edit HTML

3. Cari kode ]]></b:skin> ( Gunakan ctrl + F ). setelah ketemu silahkan copy kode dibawah ini, lalu taruh di atas kode ]]></b:skin> .

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


 4. Setelah itu cari kode <b:include data='top' name='status-message'/> 
Setiap template berbeda,terkadang kode <b:include data='top' name='status-message'/> ini ada dua, Jika di template anda terdapat 2 kode maka cari kode yang dekat dengan kode <data:defaultAdStart/> .
letakan kode <b:include data='posts' name='breadcrumb'/> ini tepat dibawah <b:include data='top' name='status-message'/> .

Jika di template anda kode <b:include data='top' name='status-message'/>  ini hanya terdapat satu,maka cari kode <b:includable id='post' var='post'> . Setelah ketemu letakan kode<b:include data='posts' name='breadcrumb'/>  ini tepat dibawah kode <b:includable id='post' var='post'>.

5. Lalu Cari kode <b:includable id='main' var='top'> Setelah ketemu letakkan kode dibawah ini diatasnya kode tersebut.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url' rel='tag'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url' href='' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' href='' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; All posts
<b:else/>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl'><span itemprop='title'>Home</span></a></span> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


6. Klik preview jika tidak error langsung klik SIMPAN.

Setelah itu cek disini ( gunakan link artikel, bukan link blog )


Demikian adalah tutorial cara membuat navigasi breadcrumb di blogspot, semoga bermanfaat dan majulah blogger Indonesia.