Cara Mudah Membuat Breadcrumb di Blogger




Cara Mudah Membuat Breadcrumb di Blogger

Cara Mudah Membuat Breadcrumb di Blogger

Sebelumnya saya membahas topik mengenai Cara Membuat Mega menu Desktop DanVertical Slide Menu Mobile namun untuk sore ini akan saya membahas breadcrumb bi blog, tentunya akan menjadikan tampilan blog menjadi lebih bagus dan lebih SEO Friendly. Untuk cara pembutannya pun saya rasa sangat lah mudah dan bisa di lakukan walau anda seroang blogger pemula seperti saya tidak paham dengan kode HTML. hehe

Sebelum kita menerapkan cara pemasangannya untuk membuat breadcrumb pada blog anda, saran saya sebaiknya untuk mengetahui kegunaan dari breadcrumb tersebut. Breadcrumb adalah menu navigasi yang terlihat kecil yang biasanya ada pada judul artikel biasanya letak Breadcrumb tersebut sebelah kiri atas judul ya .

#FUngsi Dari Breadcrumb

  • Kegunaanya untuk melihat tempat artikel yang saat ini kita lihat.
  • Agar blog mudah untuk di crawl dan di index oleh google atau lainnya
  • Tampilan  blog akan terlihat profesional dan lebih SEO pastinya
  • Dan bisa memudahkan pembaca atau pengunjung untuk kembali ke Home atau ke artikel yang terkait dengan yang kita baca. Ini tidak jauh beda sama halnya dengan label dan Artikel Terkait. Bisa di baca di Cara membuat tampilan artikel terkait dan cara membuat label .
Nah setelah kita mengetahui kegunaannya dan manfaatnya sekarang  anda bisa membuat breadcrumb  dan perhatikan baik-baik agar anda bisa paham pada saat menerapkan langkah- langkah cara pemasangannya nanti di blog anda.  
Di bawah ini adalah contoh Demo video gambar gif breadcrumb.

Membuat Breadcrumb di Blogger

1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
3. Kemudian salin kode di bawah ini dan paste di atas kode ]]></b:skin>
.breadcrumbs{width:auto; padding: 5px 0; color: #666; border-bottom: 1px dotted #ccc;; font-size:12px; font-weight:400;margin-top:5px}
4. Untuk tahapan selanjutnya anda bisa mencari lagi kode seperti di samping ini <b:includable id='main' var='top'>
5. Jika sudah ketemu anda ganti kode yang telah di cari tadi sebelumnya. Langsung anda ganti kode tersebut dengan kode yang sudah di sediakan 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'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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'/>
6. Jika sudah anda lakukan seperti langkah-langkah penjelasan di atas, maka anda klik Save Template. Dan lihat hasilnya dengan cara klik pratinjau template atau halaman Blog anda Refresh.
7. Nah jika berhasil akan sama seperti contoh gambar yang di atas.

Demikian pula penjelasan saya pada malam ini, semoga anda bisa berhasil dalam mengikuti langkah- langkah seperti penjelasan di atas. Jangan lupa anda ikuti terus pada artikel berikutnya admin akan update kembali dengan pembahasan topik yang berbeda pula. jadi jangan sampai kelewatan update panduan terbaru dari mizipediacom

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.

Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>

+ Follow
Join on this site

with Google Friend Connect