Cara Memasang Breadcrumb Keren di Blog

Memasang breadcrumb di blog
CARA Membuat, Menampilkan, atau Memasang breadcrumbs yang keren di blog tidaklah begitu sulit. Bagi Anda yang template blognya belum dilengkapi breadcrumbs, Anda bisa mengikuti langkah-langkah memasang kodenya dibawah ini. Namun bagi yang sudah ada, tentu saja tidak perlu lagi memasang kodenya.

Breadcrumb adalah salah satu "trik blogging" yang keberadaannya cukup penting karena menjadi navigasi yang berisikan kategori atau label postingan dan biasanya diawali dengan link menuju "Home".

Bagi Anda yang belum tahu, yang mana sih breadcrumb itu? Jadi breadcrumb itu adalah navigasi blog berupa "judul kecil" yang biasanya terletak di atas judul postingan blog. Biasanya breadcrumb ini membentuk susunan "Home » Label/Kategori » Judul Postingan".

Contohnya? Anda bisa lihat navigasi berupa "judul kecil" di atas judul postingan yang sedang Anda baca ini. Breadcrumb-nya adalah:  Home / Blogging / Desain Blog / Cara Memasang Breadcrumb Keren di Blog 

Dengan keberadaan breadcrumb dalam sebuah blog, maka akan memudahkan pengunjung/pembaca untuk kembali ke halaman depan (tinggal klik pada "Home") atau bisa juga menemukan postingan lainnya dengan label yang sama (tinggal klik "Blogging" atau "Desain Blog".

Cara Membuat/Memasang Breadcrumb di Blog


Inilah cara terbaik untuk memasang breadcrumbs di blog. Kode-kode dibawah ini dari Maskolis, dijamin deh kode berikut tidak akan membuat breadcrumbs menggantikan Permalink postingan blog Anda di pencarian google.

1. Klik "Template" > "Edit HTML"
3. Cari (Tekan tombol Ctrl+F) kode ]]></b:skin>
4. Copy + Paste kode berikut ini tepat sebelum  kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; 
line-height:1.4em; border-bottom:1px dotted #ccc}

5. Cari kode <div class='post hentry'> dan Copas kode berikut ini tepat setelahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'>
<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>

6. SAVE Template!

Cukup Mudah bukan cara memasang breadcrumb di Blog? Jika cara di atas belum berhasil, coba cara alternatif berikut ini.

Cara Alternatif Memasang Breadcrumb di Blog


1. Letakkan kode di bawah ini  tepat di atas kode ]]></b:skin>

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

2. Lalu cari dan ganti kode <b:includable id='main' var='top'> dengan kode di bawah 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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</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'/>

3. SAVE Template!

Kalo masih gak muncul-muncul juga breadcrumb-nya. Coba lagi nih, katanya sih Breadcrumb yang SEO Friendly.

Breadcrumb Blogspot SEO Friendly


1. Taruh kode berikut ini di atas kode ]]></b:skin> 

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

2. Cari kode <b:includable id='main' var='top'> 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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</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'/>

Nah, Itulah Cara Memasang Breadcrumb di Blog. Tapi, pentingkah keberadaan breadcrumb bagi SEO Blog? Nanti akan dibahas di postingan berikutnya. Bila postingan ini bermanfaat, jangan lupa Like dan Bagikan ke teman Anda.

Terimakasih!

0 comments

Post a Comment

Contact Form

Name

Email *

Message *