Sabtu, 31 Maret 2012

Cara Memasang Breadcrumb

Mungkin sudah banya yang memberikan trik dan tips dari Para Master tentang Cara Memasang Breadcrumb, tapi tak ada salahnya jika saya kembali share tentang Cara Memasang Breadcrumb ini, menindak lanjuti postingan sebelumnya tentang Cara Menghilangkan Error dan Warning Rich Snipperts, yang mana Menu Breadcrumb Navigasi selain Menghilangkan Error dan Warning pada Rich Snippets ini juga berfungsi untuk memudahkan pengunjung mengetahui dimana tempat link yang aktif atau sedang dikunjungi,,,


Gambar 999 Blog


Untuk Cara Memasang Breadcrumb seperti gambar diatas berikut langkah-langkahnya :

  • Masuk ke dashboard  pilih Rancangan Template EDIT HTML
  • Seperti biasa jangan lupa download atau back up template anda
  • centang Expand Template Widget
  • Agar lebih mudah gunakan Ctrl+F untuk melakukan pencariaan kode-kode nya
  • Cari kode   ]]></b:skin> 
  • Tempatkan kode berikut diatasnya
 .breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
  • Kemudian cari kode <b:include data='top' name='status-message'/>
  • Jika ada 2 kode yang sama seperti diatas, tempatkan kode berikut dibawah keduanya
<b:include data='posts' name='breadcrumb'/>
  • Langkah berikutnya, cari kode <b:includable id='main' var='top'>
  • Letakkan kode berikut di atas kode <b:includable id='main' var='top'>
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><!-- No breadcrumb on home page --><b:else/><b:if cond='data:blog.pageType == "item"'><!-- breadcrumb for the post page --><p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
  • Simpan / Save Template anda

Selamat Mencoba

Related Posts:

  • Cara Refresh Blog OtomatisCara Refresh Blog Otomatis ini yaitu apabila didiamkan maka akan merefresh otomatis sendiri, seakan-akan blog sobat ada yang mereview jadi akan menamb… Read More
  • Cara Membuat Label Atau Kategori di BlogLabel atau Kategori ini berfungsi untuk mengelompokan artikel-artikel yang sejenis untuk mempermudah dalam pencarian. Label atau kategori ini sudah di… Read More
  • Cara Menurunkan Alexa Rank Cara Menurunkan Alexa Rank dapat dilakukan dengan berbagai cara, sebenarnya Alexa dapat turun dengan sendirinya apabila blog/web kita menghasilkan ar… Read More
  • Membuat Tombol Read More Lebih BerwarnaMembuat Tombol Read More Lebih Berwarna ini dimaksudkan untuk memperindah tampilan blog, yang mana Readmore/Baca Selanjutnya berfungsi untuk menampilk… Read More
  • Claim TechnoratiClaim Technorati ini untuk memverifikasi kode Technorati untuk membuktikan kita adalah seorang pemilik blog, kode verifikasi ini harus dimunculkan dal… Read More

0 komentar:

Posting Komentar