SELAMAT DATANG & SELAMAT MENIKMATI BLOG INI

Rabu, 25 Desember 2013

Cara Membuat Menu Navigasi atau Breadcrumb di Blog

Berikut ini saya men-share-kan Cara membuat menu navigasi atau yang biasa disebut - Breadcrumbnavigation menu adalah menu yang dapat membantu para pengunjung blog agar mereka tau sedang mengunjungi kategori atau label apa. Postingan ini sangat banyak ditemui bila kita search di mensin pencari seperti Google. Dan berdasarkan pengalaman pribadi saya, banyak sekali kode atau scrift yang harus dibuat di menu edit HTML. Namun saya mencoba untuk membagikannya kepada sobat yang ringkas saja. Untuk keunggulan atau kekurangannya, berpulang ke sobat semua.


Salain itu dari pengalaman melakukan blogwalking Breadcrumb atau menu navigasi juga dapat mengoptimalkan seo on page. Karna tidak semua template menyediakan Breadcrumb, maka dari itu kita harus membuatnya sendiri.


Untuk sobat yang ingin memasang Breadcrumb di blognya bisa mengikuti Cara Membuat Menu Navigasi/breadcrumb  di Blog berikut ini:
1. Login ke blog sobat.
2. Klik Template
3. Klik Edit HTML dan centang Expand Widget Templates 
4. Cari code ]]></b:skin> kalau mau lebih cepat gunakan Ctrl+f atau F3
5. Copy code di bawah ini lalu letakan tepat di atas code ]]></b:skin>

.breadcrumbs{
padding-left:10px;font-size:95%;
line-height:1.4em;
border-bottom:4px double #cadaef;
}
6. Cari code <b:includable id='post' var='post'> setelah ketemu silahkan sobat copy paste code di bawah ini dan letakan dibawah code <b:includable id='post' var='post'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Anda disini &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Note :
untuk tulisan warna biru “Anda disini &#187” bisa diganti dengan “judul Blog Sobat” dan tulisan warna merah “Home”  bisa diganti dengan laman atau beranda di blog sobat.
7. Klik Pratinjau. Ini untuk memastikan scrift yang dibuat adalah benar.
8. Save Template sobat

selanjutnya silahkan lihat di atas postingan sobat,
jika berhasil menu navigasi akan terlihat di atas postingan sobat.
semoga berhasil ya.

Tidak ada komentar:

Posting Komentar