Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, May 16, 2013

Cara membuat breadcrumb di blog

cara membuat breadcrumb
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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 9:00 PM

18 comments :

  1. makasih infonya.

    ReplyDelete
  2. thanks bro akhirnya bisa ku pasang di blogku

    ReplyDelete
  3. Tutorial yang sangat bermanfaat gan,... sangat membantu saya dalam proses editing blog blog ane gan,. ternyata kalau mau memahami tidaklah sesulit seperti apa yang dikatan oleh orang2,. salam kenal dari http://jawacyber.blogspot.com

    ReplyDelete
  4. makasih atas pendapatnya sob..salam kenal juga..

    ReplyDelete
  5. tutorial yg bgus dan sgt membantu sy membuat editing pada blog... semoga suksess selalu...

    ReplyDelete
  6. makasih atas pendapatnya sob, salam kenal dari saya..

    ReplyDelete
  7. info unik sangat bermanfaat, breadcrumbs sangat berguna sebagai salah satu alat navigasi di blog...salam dari blog DINAMIKA (http://portaldinamis.blogspot.com)

    ReplyDelete
  8. yup sangat tepat sob, lam kenal dari saya...

    ReplyDelete
  9. Izin simak Bang Rivai,. o yah Bang mau tanya nih
    Gimana cara, nya label Breadcrumb, nya bisa ada 3
    Atau 4 Label.. Kan di template blog saya sudah ada
    Home, dan label yang berkaitan dengan artikel,
    Untuk menambah label lainya gimana caranya Bang..?

    ReplyDelete
    Replies
    1. untuk template yang abang pake itu sudah memakai sistem Breadcrumb otomatis, jadi saat abang buat artikel pasti membuat label, jadi setiap membuat suatu artikel sekalian buat labelnya 2 sampai 3 atau 4 sampai 5 label untuk artikel abang . secara otomatis sistem Breadcrumb akan menghitung dan memunculkan jumlah labelnya bang.

      Delete
  10. terima kasih atas informasi yang bermanfaat ini , sukses selalu

    ReplyDelete
    Replies
    1. sama sama gan thx untuk kunjungannya juga

      Delete
  11. Wih BREADCUMB Seo Nih.Bisa Keindex Di Google Dan Menambah Seo Tentunya.

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog