Cara Membuat Breadcrumbs / Informasi Posisi Pengunjung

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Kalau yang ini barusan dapat sumbernya langsung saya posting. Saya yang gobblog ini dapat contekan kode CSSnya dari http://bloggerpeer.blogspot.com mengenahi cara membuat Breadcrumbs. Pada blog tersebut saya temukan dengan judul Cara Membuat Breadcrumbs Terindex/Diindex Google. Dan ini yang membuat saya tertarik.

Awalnya saya sendiri bingung dengan istilah ini, karena tidak tahu namanya pada waktu saya melakukan pencarian di google saya menggunakan kata kunci cara membuat alamat posting pada blog. Google sendiri sempat kebingungan dalam mencari kata kunci tersebut he..he, Hah..dasar gobblog.

Oke! Breadcrumbs adalah keterangan untuk menginformasikan kepada pengunjung blog atau website mengenai posisi mereka saat ini. Contoh seperti gambar yang saya temukan seperti ini :

Dengan menggunakan breadcrumbs, pengguna juga dapat menelusuri path yang telah dilaluinya sampai berada di posisi saat ini sehingga pengguna dengan mudah dapat kembali ke halaman sebelumnya. Breadcrumbs memberikan jalan bagi pengguna untuk mengetahui halaman-halaman yang pernah dilewatinya. Breadcrumbs merupakan salah satu kelengkapan navigasi suatu blog, hal ini untuk membantu pengunjung (pembaca) dalam menelusuri satu demi satu halaman blog atau website.

Sudah jelas kan?

Sekarang saya akan memaparkan cara pembuatanya

Login di Blogger
Pilih Template
Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
Centang Expand Widget Templates
Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
Kemudian cari kode ]]></b:skin>
Copy kode di bawah ini dan paste tepat 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;}

Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
Ganti kode <b:includable id='main' var='top'> dengan kode yang 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"'>

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

Jangan lupa simpan template dan klik pratinjau untuk menengok hasilnya

Sekian hasil copas gobbloge.blogspot.com untuk berbagi.

Tags: Belajar Blogspot