mas template

Cara Memasang Breadcrumb di Blogspot


Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).


Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}
  • Setelah itu, cari kode seperti ini :
    <div class='post hentry'>
  • Letakkan kode berikut ini tepat setelah kode <div class='post hentry'>
    <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'>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>
    Simpan Template.

Itu dulu teman-teman penjelasan dari saya, waktu sudah menunjukkan jam 23.41 menit WIB, jadi udah waktunya tidur nih. Besok saya akan lanjutkan kembali dengan tutorial yang lain.

Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

27 comments:

  1. langsung dipasang...........wkkwkwkwkw

    ReplyDelete
  2. sip mas... udah tak ganti dengan breadcrum yang ini.. n sukses

    ReplyDelete
  3. maskolis.. cara bikin label bisa muncul di SE google gmn zaw? ky punya mas kolis... kok gak judulnya yg muncul

    ReplyDelete
  4. Bagaimana kang jika ingin diletakkan di bawah kotak komentar...
    Tolong ya...

    ReplyDelete
  5. kok ditemplate bawaan mabah google ga muncul ya ??

    ReplyDelete
  6. Selamat petang Mas Kholis...tentu dah buka puasa kan...smoga amal ibadah mas Kholis, keluarga dan teman2 dilipat gandakan Allah SWT. Sekedar sharing Mas...kalo pake template Johny Classiclite cara diatas sering gagal...udah saya coba berkali-kali...tapi setelah kode html yang ke dua saya tempatkan persis dibawah <div class='post hentry'> baru breadcrumbsnya mau muncul.

    ReplyDelete
  7. @Yuni Sulistyaningrum:
    Selamat petang juga mbak, makasih koreksinya, ini tutorial lama yang belum diupdate, nanti saya update langsung

    ReplyDelete
  8. mas mau tanya ? kenapa kalo kita klik pas labelnya, breadcrumbnya enggak muncul ? terima kasih.

    ReplyDelete
  9. dah saya coba gan, cuma kok di bawah breadcrumb ada tulisan ini: itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    ngilanginya gimana gan?

    ReplyDelete
  10. oke gan dah saya coba, tapi saya,gak ngerti hasilnya apa udah oke atau belum, bisa tolong bantu ngeceknya gan di: http://flex-hitam.blogspot.com

    ReplyDelete
  11. Langsung saya praktekkan mas kolis, terima kasih atas ilmu yang bermanfaat ini.

    ReplyDelete
  12. gan mohon masukan
    http://inspirationforworld.blogspot.com/

    ReplyDelete
  13. mas, template johnny ganteng storenya blum dikasih ini ya.

    ReplyDelete
  14. trims infonya gan,terus berkarya
    semoga sukses.

    ReplyDelete
  15. info bagus gan, sangat bermanfaat bagi saya. Ditunggu kedatangannya di www.ankurniawan.blogspot.com

    ReplyDelete
  16. berkat tutorial dari Anda,saya sudah pasang bredcrumb di Blog saya yang sederhana.
    terima kasih Mas Maskolis dan sukses teruuuus.

    ReplyDelete
  17. artikel yang bermanfaat makasih ya gan massssskolis http://www.inilahmisteri.blogspot.com

    ReplyDelete
  18. Maskolis, saya minta tolong bantu desain breadcrumbs blog hxxp://ragam-beritaku.blogspot.com/

    Template yg sudah lama saya pakai mengandung breadcrumb bawaan, tapi ketika saya atur dengan CSS tampilannya tanpa border-bottom dan font-size tidak mau disesuaikan.

    Mohon bantuannya :)

    ReplyDelete
  19. bantuin dunk maskolis buat bredcrumbs di h**p://experience51.blogspot.com pas nyari ** tidak ketemu,, krim ya ke pchq25@gmail.com

    maksih :)

    ReplyDelete
  20. thanks atas info nya gan
    ditunggu kunjugan baliknya http://www.thecyberbatik.blogspot.com

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger