26 October 2013

Home » » Membuat Auto Breadcrumbs di Blog

Membuat Auto Breadcrumbs di Blog

Written By AdukCampurAduk on 26 October 2013 | Saturday, October 26, 2013

 
image   Cara Membuat Auto Breadcrumbs untuk setiap postingan artikel yang ada diblog. Berfungsi untuk menampilkan letak kategori atau label di semua postingan artikel secara otomatis. Breadcrumbs juga bertujuan untuk menjadikan blog SEO Friendly dan yang pasti membuat tampilan sedikit lebih cantik dengan adanya Breadcrumbs pada setiap artikel. Font Beradcrums ini cenderung lebih kecil, jadi tidak terlalu banyak memakan tempat di blog dan letaknya persis di atas Judul artikel. Untuk Contoh bisa dilihat di atas Judul artikel di blog ini.

Cara Membuatnya :
1. Login ke Blogger.com
2. Masuk ke rancangan atau design
3. Backup template anda terlebih dahulu untuk berjaga-jaga kalau proses pengkodingan gagal
4. Pilih edit HTML
5. Klik sembarang pada kumpulan code, dan tekan Ctrl+F untuk menampilkan kotak pencarian
6. Cari code ]]></b:skin> di kotak pencarian dan tekan enter untuk mencari
7. Masukan code berikut di diatas code ]]></b:skin>
.breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}


8. Cari code <b:includable id='main' var='top'>
9. Masukan code berikut di atas code <b:includable id='main' var='top'>
<b:includable id='breadcrumbs' var='post'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 
<p class='breadcrumbs'>
 
<span class='post-labels'>
 
<b:if cond='data:post.labels'>
 
Anda Berada di&#160; :
 
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
 
<b:loop values='data:post.labels' var='label'>
 
<b:if cond='data:label.isLast == &quot;true&quot;'>
 
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
 
</b:if>
 
</b:loop>
 
<b:if cond='data:post.title'>
 
&gt; <b><data:post.title/></b>
 
</b:if>
 
</b:if>
 
</span>
 
</p>
 
</b:if>
 
<!-- End of Breadcrums Hack -->
 
</b:includable>
 


10. Cari lagi code <b:loop values='data:posts' var='post'> biasanya terdapat banyak code tersebut, pilihlah code paling atas atau yang pertama kali ditemukan.
11. Dan Masukan code berikut tepat di bawah code <b:loop values='data:posts' var='post'>
<b:include data='post' name='breadcrumbs'/>

12. Save Template dan lihat hasilnya
Share this article :

0 comments:

Post a Comment

 
Support : Facebook
Copyright © 2013-2015. Aduk Campur Aduk - All Rights Reserved
Proudly powered by Blogger