Cara Membuat Breadcrumbs pada Blog

Hai Sob ? pada tau kagag sih apa itu Breadcrumbs ? Breadcrumbs atau bisa disebut menu navigasi yang dapat membantu pengunjung tentang artikel terkaityang sedang dibaca. Jika anda ingin memasang Breadcrumbs ini anda dapat Follow Langkah berikut.





SCREENSHOOT :

LANGKAH :

• Login ke Blogger.
• Klik menu Rancangan >> Edit HTML (bagi Antarmuka Blogger Lawas) atau
• Klik menu Template >> Edit HTML (bagi Antarmuka Blogge Baru)
• Sebelum mengutak-atik Template anda, anda disaranka untuk mem back up untuk menghindari hal-hal yang tidak diinginkan.
• Setelah mem back up template. jangan lupa centang Expand Template Widget.
• Jika sudah melakukan hal tersebut, langsung cari kode ]]></b:skin>  Agar lebih mudah mencari kode tersebut silakan tekan Ctrl + F.
• Jika sudah ditemukan, silahkan pasang kode berikut tepat diatas 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;}

• Kemudian cari kode <b:includable id='main' var='top'> Agar lebih mudah mencari kode tersebut, silahkan tekan tombol Ctrl + F.
• Ganti kode <b:includable id='main' var='top'> dengan kode dibawah 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'/>

• Jika sudah selesai, tinggal tekan tombol Save / Simpan,

SEMOGA BERHASIL DAN BERMANFAAT ^_^
TESTED By Author Template SOBATSOFTWARE 100 %

---

Mari Kita Saling Menghargai Sesama Blogger Apabila Artikel ini bermanfaat, silahkan saja di share dimanapun. Dengan catatan anda harus menyertakan link sumbernya. Terima Kasih WWW.SOBATSOFTWARE.NET ^_^

---

Related Posts / Artikel Terkait :

Widget by Hoctro | Jack Book

Posted in: Blogger