Wednesday, October 31, 2012

Cara membuat menu Navigasi Breadcrumbs di blog

Cara membuat menu Navigasi Breadcrumbs di blog

Bagaimana Cara membuat menu Navigasi Breadcrumbs blog? Navigasi Breadcrumbs membawa efek positif bagi SEO. Fungsinya agar Googlebot dapat dengan mudah dan lebih cepat mengenali struktur blog Anda dan membantu pengunjung untuk betah di blog anda. Apa itu Navigasi Breadcrumbs? Navigasi Breadcrumbs adalah salah satu menu yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari HOME>>>Category(labels)>>>Sub category(judul postingan). Pembuatan navigasi breadcrumbs berguna juga buat optimasi SEO yaitu membantu memberi kepadatan keyword dan pemetaan pada search engine terutama Google Search. Lihat contoh navigasi breadcrumbs dibawah ini:



breadcrumbs



Untuk membuat Navigasi Breadcrumbs Blog, Anda bisa mengikuti prosedur berikut ini:

1. Login dulu ke akun blogger anda, klik Template --->Edit HTML--->Centang expand widget

2. Cari Kode ]]></b:skin> untuk memudahkan pencarian silahkan tekan CTRL Fdan masukkan code yang anda cari. Kalau sudah ketemu silahkan anda copy paste kode dibawah ini tepat diatas kode ]]></b:skin>.

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

3. Cari lagi kode ini : <b:includable id='main' var='top'>
  Hapus dan ganti dengan kode dibawah ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

3. Simpan dan lihat hasilnya. SELAMAT MENCOBA 


Terimakasih  telah membaca Artikel "Cara Membuat Menu Navigasi BreadCrumbs Blog" Semoga Informasinya dapat membantu dan bermanfaat.

JANGAN LUPA UNTUK VOTE GOOGLE + UNTUK HALAMAN INI. TERIMA KASIH BANTUANNYA
Judul: Cara membuat menu Navigasi Breadcrumbs di blog; Ditulis oleh januarsen silalahi; Rating Blog: 5 dari 5

Ditulis Oleh : januarsen silalahi

Terimakasih atas kunjungan Anda Karena telah sudi membaca artikel Cara membuat menu Navigasi Breadcrumbs di blog. Tidak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar, untuk Itu Silahkan Berikan Kritik dan saran Pada Kotak Komentar Di Bawah. Jika Artikel Bermanfaat, Anda boleh menyebarluaskan atau mengutip artikel Cara membuat menu Navigasi Breadcrumbs di blog dengan cara penyampaian yang berbeda, namun jangan lupa untuk mencantumkan link sumbernya. Diharapkan agar tidak melakukan copy paste. Terima Kasih, Happy Blogging :)

1 comment:

Post a Comment