Seni Menjadi Pedagang Online 728x90
Tukang Tidur Main Youtube 728x90

Senin, 13 Agustus 2012

Cara Membuat Breadcrumbs / Informasi Posisi Pengunjung

Diposting oleh Admin Gobbloger 2:34 PM
بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

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
  1. Login di Blogger
  2. Pilih Template
  3. Pilih Edit HTML (lebih baik back up template dulu untuk menghindari kesalahan)
  4. Centang Expand Widget Templates
  5. Kalau sebelumnya anda sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama
  6. Kemudian cari kode ]]></b:skin>
  7. 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;}
  1. Kemudian cari kode <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
  2. 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 == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <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.
 

  • Share On Facebook
  • Digg This Post
  • Stumble This Post
  • Tweet This Post
  • Save Tis Post To Delicious
  • Float This Post
  • Share On Reddit
  • Bookmark On Technorati

YOUR ADSENSE CODE GOES HERE
Comments
0 Comments

Have any question? Feel Free To Post Below:

Silahkan memberikan komentar mengenahi blog ini untuk saling berbagi

Archive

 

Bacaan Gobbloger

Batman Begins - Help Select

Daftar Pengunjung

© 2012 SOFTECHNOGEEK. All Rights Reserved.