Cara Membuat Breadcrumbs di Blog
Maret 19, 2013
Cara membuat Breadcrumbs di blog. Breadcrumbs penting untuk memudahkan pengunjung mengetahui letak halaman yang sedang dibaca pada blog. Dengan adanya Breadcrumbs, dapat diketahui sebuah posting terletak di dalam kategori dan sub-kategori apa. Selain itu, Breadcrumbs juga diketahui dapat membantu proses SEO, agar search engine dapat mengetahui navigasi laman di dalam blog. Cara membuatnya cukup mudah kok, Berikut ini saya paparkan cara membuat Breadcrumbs.
1. Login di Blogger, lalu masuk ke pengaturan Template.
2. Pilih Edit HTML (Saran saya, sebelumnya back-up template kamu terlebih dahulu untuk menghindari kesalahan)
3. Centang Expand Widget Templates
4. Cari kode ]]></b:skin>
5. Copy kode di bawah ini, lalu paste 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;}
<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'/>
4 comments
Tutorial yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com
BalasHapusTerima kasih agan :)
BalasHapusKunjungan Balik yah http://kopfi-official.blogspot.com/
Maksutnya back up itu apa?
BalasHapusMaklum baru belajar..
Di bagian pengaturan template, di sebelah kanan atas ada tulisan "Backup/Restore". Backup fungsinya u/ mendownload template blog kita.
HapusSebelum mengedit HTML template, dianjurkan download dulu template blog kita, supaya nanti kalau setelah diedit malah terjadi kesalahan bisa dikembalikan dengan me-restore (mengembalikan spt semula) template kita.
Caranya template yg sudah didownload diupload kembali dg klik Backup/Restore, lalu upload.
Semoga ngerti yah.. hehe (o)