Bagaimana Cara Memasang Breadcrumb di Blog
Bagaimana Membuat Breadcrumb pada Blog, supaya breadcrumb tersebut tampil untuk setiap posting artikel Anda. Sebetulnya cara memasangnya tidak terlalu sulit. Fungsi breadcrumb ini termasuk salah satu Tips SEO juga. Karena menurut pembahasan, teknik pemasangan breadcrumb di blog ini, akan mempengaruhi mesin pencari supaya lebih cepat dalam mengenali struktur setiap blog yang dikunjunginya.
Selain itu, pemasangan breadcrumb ini juga merupakan salah satu teknik membuat link antar halaman, sehingga halaman yang satu dengan halaman yang lain dapat saling terhubung. Tentu saja dengan begitu akan memberikan efek yang sangat baik terhadap pagerank blog.
Nah, untuk memasang breadcrumb ini silahkan Anda ikuti caranya sebagai berikut;
Selain itu, pemasangan breadcrumb ini juga merupakan salah satu teknik membuat link antar halaman, sehingga halaman yang satu dengan halaman yang lain dapat saling terhubung. Tentu saja dengan begitu akan memberikan efek yang sangat baik terhadap pagerank blog.
Nah, untuk memasang breadcrumb ini silahkan Anda ikuti caranya sebagai berikut;
- Pertama Login ke akun Blogger Anda.
- Lalu klik menu Template
- Lakukan backup template terlebih dahulu, untuk menjaga jika terjadi kesalahan pada saat menambahkan kode.
- Jika sudak di backup silahkan Anda klik Edit HTML
- Lalu klik Format Template
- Cari kode ]]></b:skin
- Kemudian letakkan kode di bawah tepat di atas kode ]]></b:skin>
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
- Lalu cari lagi kode di bawah ini:
<b:includable id='main' var='top'>
- Sekarang Anda ganti kode di atas tadi dengan kode yang ada di bawah ini
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>
- Jika sudah kemudian klik Simpan Perubahan. Apabila tahap yang Anda lakukan sudah sesuai dengan yang saya jelaskan diatas, maka Breadcrumb seharusnya sudah terlihat seperti contoh pada gambar dibawah ini.
Demikian bagaimana cara memasang breadcrumb pada blog Anda. Tidak terlalu sulit bukan. Itulah posting saya dalam kesempatan ini. Semoga artikel ini ada manfaatnya, dan bisa membantu bagi blogger pemula, karena siapa mengetahui mungkin masih ada yang belum paham mengenai bagaimana cara memasang breadcrumb ini. Terimakasih telah berkunjung ke blog ini.
Saya perhatikan artikel ini tidak ada breadcrumbnya di halaman Google. Sayang sekali karena sudah 1 bulan artikel ini diposting tapi belum muncul navigasi breadcrumbnya di sistem indeks Google search engine.Menurut saya pasti ada yang salah dengan breadcrumb di blog ini. Saya lihat pemisah dua label pada breadcrumb di atas judul artikel ini adalah koma. Seharusnya dua label dipisahkan oleh tanda breadcrumb juga. Mungkin itulah masalahnya. Kalau mbak perlu bantuan, mungkin saya bisa membantu untuk megatasinya.
ReplyDeleteSaya baca satu per satu halaman di blog ini, kok mirip dengan punya mas tama ya...
Delete@oke-Reload
Deletemaaf baru buka pos ini, aduh terimakasih banyak atas koreksinya, setelah di lihat kembali betul mas ada kesalahan pada scrip hanya tinggal mengganti tanda (,) dengan (») sebagai tanda breadcumb yang digunakan. Terimakasih telah berkunjung, koreksinya membantu sekali.
@3office
DeleteTerimakasih telah membaca satu persatu. Jika merasa blog ini mirip blog lain, mungkin itu materinya saja. Untuk materi mungkin banyak sekali blog yang memuat materi yang sama. Tidak melanggar TOS, yang tidak boleh itu COPY PASTE. Semua narasi bahasa yang ditulis di blog ini, murni tulisan dengan narasi saya sendiri. jika memang ada yang merupakan hasil copy paste, silahkan bisa di cek di www.copyscape.com
Contoh banyak sekali blog yang membuat artikel mengenai cara daftar Google adsense. Tapi tentunya dengan narasi yang berbeda, dan itu tidak dilarang, selama bukan copas. Terimakasih telah berkunjung, dan terimakasih atas komentarnya.
Terima kasih triknya, sudah mau berbagi
ReplyDelete@free website
DeleteSama-sama terimakasih sudah berkunjung di blog sederhana ini.
Terimakasih untuk tutorial cara memasang breadcrumnya, dengan cara ini semoga cepat terindex google. Terimakasih ya...
ReplyDelete@Topik
DeleteTerimakasih atas kunjungannya.
makaseh mz wdh saya coba dan berhasil
ReplyDelete@Jaya Prasetya
DeleteSama-sama terimakasih atas kunjungannya.
Kalo misalnya ada 2 label berantakan ga mba ???
ReplyDeleteterima kasih.
http://boomberx.blogspot.com
@Boomberx
Deletetidak juga, asalkan memasang breadcrumb-nya dengan benar dan breadcrumb yang sudah bisa untuk beberapa label.
nah ini dia,kalo cara mengganti breadcrum yang dari bawaan template gimana yah ??
ReplyDeletehttp://mr-strawhat.blogspot.com
@Windows Apps
ReplyDeleteTerimakasih sudah berkunjung.
Penjelasan utk mengganti breadcrum cukup panjang, kalo dijelaskan di komentar ini terlalu panjang. Insyaaloh bila saya sudah ada waktu nanti akan saya buat artikel cara mengganti breadcrumb.
Mohon maaf saya masih sibuk dengan penempatan siswa baru di sekolah tempat saya mengajar, jadi belum sempat update lagi.
udah dilaksanakan mb.tapi koq kayak ndak ada perubahan? sebelumnya terimakasih atas penjelasannya
ReplyDeletenice sob, ane coba nih
ReplyDeletesalam kenal
Saya sudah coba terima kasih nih, ngomong2 untuk penggunaan tanda breadcrumbs nya kode yang ini sudah di update belum ya?
ReplyDelete