Breadcrumb cocok sekali bagi anda yang sedang belajar dan menggeluti dunia SEO. karena selain membuatnya mudah, breadcrumb ini juga cukup membantu dalam optimasi pencarian. Guna navigasi breadcrumb ini adalah untuk memudahkan pengunjung dalam mengetahui keberadaan sebuah artikel dan sebagainya. dan Navigasi ini biasanya terletak pada bagian atas judul. Oke Artikel kali ini, saya akan menampilkan 2 cara membuat breadcrumb, karena pada template tertentu, kadang kita tidak dapat menemukan kode yang kita cari, untuk penjelasan tentang ini, sudah saya bahas pada postingan sebelumnya yaitu : Mengapa kita tidak bisa menemukan kode HTML blog yang kita cari.
Nah sekarang kita langsung saja ke materi (kayak dosen aja gue :D)

Kira-kira beginilah contoh navigasi breadcrumb tersebut:


Breadcrumb bagi saya selain bagus untuk optimasi SEO juga bisa memperindah tampilan sebuah blog/web. Jadi, bagi saya keberadaannya di blog adalah wajib :)

Begini cara membuatnya :

#CARA PERTAMA

1. Masuk ke blogger.
2. Pilih menu RancanganEdit HTML
3. Centang tulisan Expand Widget Templates










4. Cari kode berikut:

<b:if cond='data:post.title'> 

5. Lalu tambahkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == "item"'>
<a href='http://bloganda.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>
 

Ganti tulisan berwarna merah dengan nama blog anda


 










6.Simpan Template & Selesai



#CARA KEDUA

1. Cari kode ]]></b:skin> 
2. Letakkan kode berikut diatas kode ]]></b:skin>
 


.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
} 



3. Lalu cari lagi kode <div class='post hentry uncustomized-post-template'> dan pastekan kode dibawah ini, tepat dibawah kode <div class='post hentry uncustomized-post-template'> tadi :


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>


Contoh keseluruhan seperti ini:

<div class='post hentry uncustomized-post-template'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if> 



4. Simpan Template & Selesai

NB: untuk cara pertama* Jika ingin menambahkan garis, taruh kode <hr/> di bawah kode <data:post.title/>

Itulah 2 Cara dalam membuat Breadcrumb yang bisa saya sharingkan hari ini.

Nikmati blog anda dengan sentuhan Breadcrumb, selain mempercantik tampilan blog, juga membantu sekali dalam Optimasi SEO pada blog anda.

Semoga membantu


Review:

Judul Breadcrumb juga membantu dalam SEO, inilah 2 cara membuatnya
Deskripsi Breadcrumb cocok sekali bagi anda yang sedang belajar dan menggeluti dunia SEO . karena selain membuatnya mudah, breadcrumb ini juga cukup ...
Author
Author Rating
4/ 5 Suara Dari 1001 Ulasan

Dapatkan artikel menarik lainnya : Klik disini
3 komentar sudah masuk. Silahkan menambahkan tanggapan lain...
Komentari


June 4, 2011 at 8:15 AM  
Like

Ngk Bisa gan caranya....
mungkin Templateku Laen yah.....



June 4, 2011 at 7:46 PM  
Like

@Janual biasanya sih gitu gan, tp kebanyakan bisa kok. coba dicek lg, mgkn ada penempatan kode yang salah. atau baca disini :)



November 25, 2011 at 10:52 PM  
Like

mantap gan,,....

Tuliskan komentar pada form ini :

Adsense Indonesia
Template design by Armin | Cara Online
Powered by Blogger