Cara Memasang Breadcrumb di Template Sederhana Blogger

Artikel ini akan membahas cara membuat atau memasang breadcrumb di blog yang akan diterapkan pada template sederhana Blogger atau bisa mencobanya di template yang lain.

Bagi Anda pengguna template sederhana bawaan Blogger yang ingin dipasangi breadcrumb pada tampilan blog, dibawah ini ada cara sederhana tentang bagaimana cara memasang breadcrumb pada template blogspot. Mari kita mulai.

Breadcrumb adalah sebuah label kecil dan judul kecil yang letaknya berada diatas postingan blog, atau berada diatas judul postingan. Tapi Breadcrum yang ke indek dimesin pencari Google letaknya malah sebaliknya jadi ada dibawah atau disamping judul artikel.

Contoh breadcrumb yang muncul di penelusuran Google, kurang lebih akan nampak seperti ini:

carasakrayblog.blogspot.com/.....,home>>panduan blog>>

Yang diberi warna merah adalah contoh kemunculan breadcrumb yang terindek di Google.

Breadcrumb yang dipasang di blog selain berfungsi untuk SEO juga untuk kemudahan navigasi blog, sama halnya dengan memasang related pos dibawah postingan blog memudahkan para pembaca untuk menavigasi blog. Oleh karena itu, memasang menu breadcrumb pada blog cukup penting untuk memudahkan para pembaca menjelajahi semua artikel berdasarkan label yang tertera di menu breadcrumb tersebut.

Untuk mulai memasang menu breadcrumb silahkan copy kode dibawah ini untuk ditetakan atau disimpan diatas kode ]]></b:skin> pada template blog Anda.

breadcrumbs { text-color:#666666; font-size:11px; padding:0 0 6px; margin:0 0 10px; border-bottom:1px solid #ddd; }

Caranya, silahkan masuk ke:

• Blogger
• Tema
• Cadangkan/Pulihkan
• Edit template
• Pastekan kode diatas, diatas kode ]]></b:skin> pada template blog Anda
• Simpan template /Terapkan ke blog

Langkah selanjutnya copy kode dibawah ini dan pastekan tepat dibawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

Langkah terakhir untuk memasang menu breadcrumb pada tampilan blog silahkan copy kembali kode dibawah ini dan letakkan tepat diatas kode <<b:includable id='comment-form' var='post'>

<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='nofollow'>Beranda</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Beranda</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Beranda</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Beranda</a></span> &#187; <span><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' rel='nofollow'>Beranda</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Beranda</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>

Langkah-langkah memasang kode breadcrumb diatas telah melalui uji coba yang diterapkan pada template sederhana bawaan Blogger dan hasilnya support.

Ok, setelah semuanya selasai langkah selanjutnya silahkan cek, apakah menu breadcrumb sudah muncul di blog Anda. Oh ya, tampilan menu breadcrumb ini hanya bisa dilihat melalui tampilan web atau desktop. Dan jangan lupa untuk memunculkan menu breadcrumb diatas postingan blog setidaknya blog Anda sudah membuat 1 atau 2 artikel yang diberi label.

Posted by Sakri

Jika artikel ini cukup bermanfaat silahkan bagikan artikel ini ke:

Facebook Twitter Google+