Cara membuat breadcrumb di blog

Breadcrumb (navigation)

Dalam meningkatkan page ranking web/blog  di mesin pencari yang disediakan para situs situs terkemuka di dunia maya, seperti google. para bloger begitu juga dengan webmaster selalu mengoptimalkan situs mereka dalan mesin pencari karena banyaknya persaingan yang tiap detiknya berubah ubah. Untuk mengoptimalkan page ranking halaman web/blog di mesin pencari, para pakar IT memikirkan untuk membuat suatu script yang dapat mengoptimalkan halaman web/blog di mesin pencari yang mereka sebut dengan BREADCRUMB atau dapat juga disebutkan dengan Navigasi dalam bahasa kita. Menurut wikipedia pengertian dari Breadcrumb ( Navigation ) adalah sebagai berikut :
Breadcrumbs biasanya muncul secara horizontal di bagian atas halaman web, sering di bawah judul bar atau header. Mereka menyediakan link kembali ke halaman sebelumnya setiap user navigasikan melalui untuk sampai ke halaman ini atau dalam hirarki struktur situs-halaman induk dari yang sekarang. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri.  A lebih besar daripada-tanda ( > ) sering berfungsi sebagai pemisah hirarki, meskipun desainer dapat menggunakan mesin terbang lainnya (seperti  » atau >), serta sebagai berbagai perawatan grafis.

Halaman Depan Halaman > halaman Section > Ayat
atau
Home page :  Bagian halaman :  Halaman Ayat
atau
home page : bagian halaman 1 : bagian halaman 2

Tehnik pembuatan Breadcrumb ini berpungsi untuk pengindexan lebel dari kategori artikel yang telah kita posting. Jadi pengertian sehari harinya agar kategori dalam postingan yang kita buat terindex oleh mesin pencari dan dapat meningkatkan page ranking dari blog kita.
Login ke Blogger
Pilih Template  lalu pilih  Edit HTML
Kemudian cari kode  ]]></b:skin> ( tekan Ctrl+F untuk mempermudah pencarian code )
Copy code dibawah kemudian pastekan code tersebut tepat di atas kode ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;

font-size:12px;border-bottom:1px;font-weight:normal;

border-bottom-style: double;background-color: #666666;

}

Code CSS nya sudah terpasang, sekarang kita memanggil scripnya untuk menampilkan dihalaman.

Setelah itu cari code  <b:includable id='main' var='top'> 

Kalo sudah ketemu gantikan code <b:includable id='main' var='top'>  dengan code yang 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' expr:title='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Without category</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'/>

Breadcrumb ini berpungsi untuk meningkatkan SEO dari situs yang menerapkannya, oleh karena itu dalam postingan kali ini saya merasa hal ini sangat dibutuhkan bagi pengguna blog begitu juga dengan sobat bloger saya.

Sekarang silahkan untuk mengecek breadcrumbs anda di :

  http://www.google.com/webmasters/tools/richsnippets

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 9:00 PM