Cara membuat BreadCumbs di Blog Dengan Mudah || Blogger

Cara membuat BreadCumbs di Blog Dengan Mudah || Blogger

Selamat malam sahabat blogger,kali ini saya mau berbagi cara membuat breadcumbs pada blog,namun sebelumnya apakah sahabat sudah tahu apa breadcumbs itu ?
Breadcrumb atau breadcrumb trail adalah bantuan navigasi yang dipakai untuk mengetahui jejak asal dari lokasi dalam sebuah bog/website, program atau dokumen.
contoh breadcumbs itu seperti ini :

nah,,jika sudah tahu bentuk nya,sekarang cari tahu fungsi nya.

fungsi breadcumbs pada blog sangat lah membantu dalam peningkatan SEO dan meningkatkan daya SERP yang tinggi.karena otomatis membuat search engine membuat blog kita lebih mudah mengindeks blog kita.

oke,langsung saja untuk membuat breadcumbs di blog ikuti tutorial nya dibawah ini :

1. Masuk ke blogger.com -> Template -> Edit HTML -> centang (kasih tanda tik) Expand Widget Template.

Tips:
(i) Cara mencari kode di template blogger, tekan CTRL+F -> masukkan kode yang dicari dikotak yang tersedia.
(ii) Dalam meng-copy kode, klik "View Plain" -> copy kodenya.

2.
a. Cara kode berikut:

<b:include data='top' name='status-message'/>

b. Ganti dengan kode berikut:

<b:include data='top' name='status-message'/>  
<b:include data='posts' name='breadcrumb'/>  

3. a. Cari kode berikut: <b:includable id='main' var='top'>
b. Ganti dengan kode berikut:

<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>  
<b:includable id='main' var='top'>  

4.
a. Cari kode berikut:

]]></b:skin>

b. Ganti dengan kode berikut:

.breadcrumbs {  
padding:5px 5px 5px 0px;  
margin: 0px 0px 15px 0px;  
font-size:95%;  
line-height: 1.4em;  
border-bottom:3px double #e6e4e3;  
}  
]]></b:skin>

5. Klik Simpan Template. Selesai.

oke,semoga artikel ini bermanfaat gan !!

Share this post