Cara Membuat Breadcrumb Navigation Blogspot

Sebelum membahas cara membuat breadcrumb navigation blogspot sebaiknya kita mengetahui terlebih dahulu apa itu breadcrumb. Breadcrumb navigation adalah rantai navigasi yang menunjukan lokasi dimana judul suatu halaman posting berada pada label tertentu. Contoh breadcrumb navigation dapat Anda lihat diatas halaman ini kira-kira seperti ini bentuknya: Home>>Label1>>Label2>>Judul Posting. Breadcrumb navigation sangatlah penting untuk di aktifkan pada template blog Anda karena breadcrumb navigation ini akan membantu search engine menjadi lebih mudah dalam melakukan crawling dan indexing seluruh konten di blog Anda.

Berikut ini cara pemasangan navigasi breadcrumb untuk blogspot:

Pertama login ke blogger.com, setelah login ikuti panduan berikut:

* Setelah masuk halaman dasbor/dashboard, klik "Design" atau "Rancangan". Dari halaman Tata Letak/Layout Klik "Edit HTML".

* Tandai dengan ceklist pada kotak disamping tulisan "Expand Widget Template".

* Cari kode seperti ini:
<b:include data='top' name='status-message'/> di template Anda.

* Ganti dengan kode berikut:

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

* Cari kode seperti ini:

<b:includable id='main' var='top'>

* 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'>

* Cari kode seperti ini: ]]></b:skin> dan 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>

* Save template, lihat hasilnya dengan cara mengklik salah satu judul posting Anda

Sumber: panduan dan tutorial gratis


You might also like:

• Pengertian Search Engine Optimization - SEO
• Pengertian SEO off Page pada Website atau Blog
• Pengaturan Blog Pada Blogspot
• Pasang Meta Keyword dan Description Tag Blogspot
• Optimalisasi Judul Blog - Blogspot SEO Friendly Title
• Pengertian SEO on Page Pada Website atau Blog
• Cara Membuat Breadcrumb Navigation Blogspot
• Link Exchange - Tukeran Link Yuk Kawan