Membuat Breadcrumbs untuk Blogger; Terbukti Berhasil

Breadcrumbs sangat bermanfaat untuk meningkatkan optimasi search engine. Dan untuk membuat breadcrumbs di blogger sangatlah mudah. Oke, untuk mempersingkat waktu, langsung pada prakteknya saja ya sob.

Oya sob, Breadcumb merupakan salah satu cara optimasi search engine (SEO), namun ada elemen lain yang menentukan pengindekan blog kita, contohnya adalah elemen meta tag. Untuk hal ini, sobat bisa baca di :

Meta Tag, Elemen Penting dalam SEO

Oya, breadcrumbs itu apa sih? Breadcrumbs gampangnya adalah seperti penunjuk jalan/urut-urutan jalan menuju ke alamat url atau judul yang artikel yang kita tuju. untuk lebih jelasnya, lihat gambar dibawah ini ya sob...

Keterangan Gambar: yang ditandai dengan kotak merah itulah yang disebut Breadcrumbs

Dari gambar diatas, sekarang sudah jelas kan yang disebut dengan Breadcrumbs.

Dan untuk membuat Breadcrumbs, ikuti langkah-langkah berikut:

Buka Dashboard --> Template --> Edit HTML
Cari kode: ]]></b:skin> atau </style>, untuk mempercepat pencarian gunakan tombol Ctrl + F
Letakkan kode berikut diatas kode nomor 2:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

4. Selanjutnya cari kode: <b:includable id='main' var='top'> dan ganti dengan kode Berikut ini.

---> Awal Script

<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"'><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"'><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'/>

---> Akhir Script

5. Untuk mengetes kode tersebut bekerja pada blog kita, kita bisa mengeceknya lewat :

Google Developer Testing Tool

Dan bila berhasil, hasilnya akan terlihat seperti gambar dibawah ini ;