6/16/2013

Cara Memasang Breadcrum di Blog

Pada posting kali ini saya akan membahas tentang bagaimana Cara Memasang Breadcrum di Blog. Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman web, sering di bawah judul bar atau header. Breadcrum menyediakan link kembali ke halaman sebelumnya setiap user navigasikan melalui untuk sampai ke halaman ini atau dalam hirarki struktur situs-halaman induk dari yang sekarang. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. tanda lebih besar dari pada (>) sering berfungsi sebagai pemisah label, meskipun dapat menggunakan tanda lainnya (seperti » atau >), serta sebagai berbagai perawatan grafis. berikut  contoh gambar breadcrums di Blog :
Cara Memasang Breadcrum di Blog
Breadcrum di Blog
    
    seperti itulah gambar breadcrum , sederhana bukan? yah walaupun sederhana itu juga penting buat SEO di blog dan bisa menjadi keyword atau kata kunci. semakin banyak kata kunci maka blog kita menjadi semakin besar kesempatan blog kita bisa tampil di google  halaman depan. Bila template blog yang masih bawaan biasannya breadcrum ini belum muncul dan harus menambahkan sendiri. oke bagaimana sih cara membuat breadcrum?? ah mudah kok yang penting teliti dan cermat segala sesuatu pasti jadi mudah sama berdoa juga. hehe 
langsung saja berikut langkah Cara Memasang Breadcrum di Blog :
  • Masuk ke akun blog di Blogger
  • Pilih Template pada sidebar kiri
  • Pilih Edit HTML
  • Sebelum edit pastikan backup dulu template blog
  • Jika sebelumnya sudah memasang hapus dulu breadcrum yang lama
  • Cari kode ]]></b:skin>  agar mudah pencet tombol Ctrl+F
  • Copy kode dibawah ini dan  letakkan  diatas kode ]]></b:skin> 
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}
  • Berikutnya carilah kode <b:includable id='main' var='top'> seperti biasa agar mudah pencarian gunakan Ctrl+F 
  • Hapus kode <b:includable id='main' var='top'>   lalu ganti 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 == &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'/>
  
  • Terakhir klik Simpan. buka salah satu postingan untuk cek bredcrumnya dan navigasi breadcrum anda siap terindex oleh mbah Google. 

Bagaimana simpel bukan? Cara Memasang Breadcrum di Blog. Selamat mencoba semoga sukses, sekian dulu dari saya semoga bermanfaat  ^_^
0 Komentar di Blogger
Silahkan Berkomentar Melalui Akun Facebook Anda
Silahkan Tinggalkan Komentar Anda

0 komentar:

Posting Komentar