• img
Home » Blogger Tutorial » HTML » Cara Membuat Navigasi Breadcrumb di Blogger

Cara Membuat Navigasi Breadcrumb di Blogger

blog sauted | Senin, 18 April 2011 | 19:39

Sejenak arahkan pandangan anda ke bagian atas posting ini! Tepatnya di atas judul artikel yang sedang anda baca. Anda akan melihat tautan link seperti ini: Browse >> Home >> Blogger >> Cara Membuat Navigasi Breadcrumb di Blogger.

Navigasi Breadcrumb merupakan salah satu plugin milik Wordpress, tetapi tidak tertutup kemungkinan untuk diterapkan juga di blogspot. Fungsi Navigasi Breadcrumb adalah untuk memperindah tampilan halaman/artikel, memudahkan pembaca menelusuri halaman blog, dan mengoptimalkan halaman blog di Search Engine Optimization (SEO).

Langkah - langkah Membuat Navigasi Breadcrumb di Blogger atau Blogspot adalah sebagai berikut:

• Login ke Blogger
• Masukkan Email dan Sandi anda
• Klik Rancangan
• Pada Rancangan klik Edit HTML
• Jangan lupa Download Tamplate Lengkap
• Beri tanda centang di kotak kecil di samping Expand Template Widget
• Kemudian cari kode ]]></b:skin>
Tips: Untuk mempercepat pencarian gunakan tombol (Ctrl+F)
• Copy kode dibawah ini dan paste di atas kode ]]></b:skin>

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

• Selanjutnya cari kode <div class='post hentry uncustomized-post-template'>
• Copy kode dibawah ini dan paste di bawah kode <div class='post hentry uncustomized-post-template'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <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>
<b:else/>

• Klik Simpan Template
• Buka blog anda dan pilih salah satu artikel
• Lihat sekarang hasilnya

Source: jamarisonline.blogspot.com

Saat ini SAHABAT berada di area blog sauted dengan artikel Cara Membuat Navigasi Breadcrumb di Blogger.
<< >>