Membuat Google Breadcrumb

Posted by Zulfan Heri on Jumat, 01 Juni 2012






Cara Membuat Google Breadcrumb - Sahabat Blogger semua sudah tahu blom tentang Google Breadcrumb itu apa.? Nah, sedikit penjelasan tentang Google Breadcrumb navigation adalah suatu bentuk navigasi konten blog kita sedemikian rupa sehingga bisa membantu pengunjung lebih mudah untuk menjelajah konten blog. Biasanya navigasi breadcrumb ini diletakkan di atas judul artikel. Breadcrumbs biasanya muncul secara horizontal di bagian atas sebuah halaman web, biasanya ada di bawah bar judul atau header. Breadcrumbs menyediakan link penghubung kembali ke halaman sebelumnya setiap user menavigasi antar link untuk menuju ke halaman yang aktif atau halaman induk dari halaman yang aktif. Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Sebuah tanda yang lebih besar dari (>) sering berfungsi sebagai pemisah hirarki, meskipun dapat menggunakan simbol lainnya (seperti »atau>), serta beragam grafik.

Breadcrumbs biasanya terlihat seperti ini:
Home page >> Nama Kategori >> Judul Postingan
atau
Home page: Nama Kategori: Judul Postingan

Sudah mengertikan Apa Itu Google Breadcrumb, Nah untuk selanjutnya Dodol Blog akan coba memberikan cara Membuat Google Breadcrumb di Blogspot. OK langsung saja ke tutorialnya.

1. Login ke akun Blogger

2. Klik Tata Letak / Layout

3. Klik Edit HTML
4. Klik Tombol Expand Widget Templates
5. Silahkan cari kode <b:include data='top' name='status-message'/> Biasanya terdapat    Dua, Silahkan Paste Kemudian letakkan kode dibawah ini tepat diatasnya (Supaya tidak bingung Paste Di atas keduanya)

    <b:include data='posts' name='breadcrumb'/>

    6. Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'> .


    <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>

    7. Sekarang cari  ]]></b:skin> , kemudian copy paste kode dibawah ini tepat diatas     
    ]]></b:skin> .

    .breadcrumbs{margin-left:10px;padding: 5px 0;border-bottom: 1px dotted; line-height:1.4em;}

    8. Simpan Template Sahabat blogger. Nah untuk cek berhasil tidaknya Silahkan cek di Rich Snippets Testing Tool , Cukup sekian semoga Tutorial ini Bisa Bermanfaat. Hargailah karya orang lain.!!! Jangan asal Copas. Jadilah Blogger Sebenarnya Bukan Blogger Copas. :D

    Penulis : Zulfan Heri ~ Share All Tutorial, Tips, Tricks About Blog and SEO

    Artikel Membuat Google Breadcrumb Ini Diposting Oleh Zulfan Heri. Terimakasih Atas Kunjungan Anda Serta Kesediaan Anda Membaca Artikel Ini. Kritik Dan Saran Dapat Anda Sampaikan Melalui Kotak Komentar. Kebijakan Dan Privasi

    :: Dodol Blog ::

    { 8 comments... Read Them Below or add one }

    Om Beb mengatakan...

    1. tks, tutorial BC na berhasil sy terapkan
    2. sy submit http://kapalkita.blogspot.com di rich snippet test tool, ada "Warning: Missing required field "updated"." tulisan merah.. lalu sy copas ke google, ketemu bahasannya di zimbio dot com. tp sy ga begitu ngerti krn zimbio ga begitu jelas paparannya bagi saya. yg sy baca dari zimbio adalah "Google tries to present users with the most useful and informative search results" This warning appear under the heading ‘Extracted rich snippet data from the page’ – ‘hfeed’ and ‘hentry’ in the Google Webmaster Tools Rich Snippets Testing Tool.

    gimana ya solvingnya teman? tks a ton

    Derbie mengatakan...

    Sepertinya Itu Dari Template, Dan Juga Bisa Menutup kemungkinan Dari Update Atikel Yang Kawan Postingkan, Coba Kawan Translate Ke Mbah Google...

    ani mengatakan...

    setelah aku ikuti saran agan ko blog aku masih ky dlu

    ani mengatakan...

    setelah aku mengikuti sarn dari agan ko blog aku masih ky biasa ci gan

    Nissan Bandung mengatakan...

    Saya Harap jangan CoPas Blog saya tanpa izin,, Trims. . .

    Nissan Bandung mengatakan...

    Maaf Gan,, salah komen,, mestinya komentar bwat bLog yg disebeLah :-D

    Emha Mint mengatakan...

    makacih kang ...manfaat banget

    Andre Kocak mengatakan...

    Wihh Bermafaat Banget Tuh ^_^ ..
    Jgn Lupa Mampir Ke Blog saya..
    Salam Blogwalker

    Poskan Komentar

    Silahkan sahabat berkomentar sesuai dengan artikel postingan di atas. Apabila ada postingan yang rusak atau tidak bisa terbaca mohon beritahu di Komentar ini.Trimakasih telah berkunjung & berkomentar

    Penting... Maaf,Tidak Diizinkan Memberikan Atribut Pada Komentar Anda..