Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog

Telah banyak Kita jumpai Para Master dari situs / website yang membahas tentang Search Engine Optimization (SEO) blog dengan memiliki Menu Navigasi Breadcrumb yang konon punya daya Search Engine Result Page (SERP) yang tinggi di mata search engine seperti Google.Com, Yahoo.Com, Bing.Com, dan lainnya, dibanding dengan yang tidak memakai / menampilkan Menu Navigasi Breadcrumb yang selalu muncul pada setiap Posting pada Artikel-artikel yang telah Kita buat ini.

Cara Membuat atau Menampilkan Menu Navigasi Breadcrumb Diatas Judul Posting Blog tidaklah rumit.

Menu Navigasi Breadcrumb adalah Link Navigasi yang biasanya tampil di atas judul atau title posting dalam modus postingan bukan dalam modus Home seperti terlihat pada blog ini dimana Breadcrumb menampilkan Halaman Depan atau Home » Label » Judul Posting. Seperti pada gambar dibawah ini :
Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog



 

Langsung ke topik bahasan Cara Membuat Menu Navigasi Breadcrumb di Blogger :

  • Log in ke account sobat di blogger.com 
  • Klik tanda panah, lalu pilih Template
  • Sebaiknya lakukan dulu backup template dengan klik Backup / restore atau Cadangkan / Pulihkan, lalu klik download full template.
  • Klik tanda x untuk kembali ke menu template
  • Selanjutnya plih Edit HTML  --> klik Procced atau proses
  • Centang pada Expand Widget Templates
  • Cari kode <b:includable id='main' var='top'>  untuk memudahkan mencarinya gunakan Ctrl +F
  • Hapus Kode diatas dan ganti dengan paste kode di bawah 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' rel='tag'>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;'> &#187; </b:if> 
    </b:loop> 
    &#187; 
    </b:if> 
    <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'/>
  • Selanjutnya sobat blogger cari kode   ]]></b:skin>  dan copy paste kode ini di atasnya :
    .breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:13px;border-bottom:1px dotted #ccc;font-weight:normal}
  • Sampai disini proses Cara Membuat-Menampilkan Breadcrumb Diatas Judul Posting Blog di Blogspot selesai, selanjutnya Save Template.
  • Cek dan lihat hasil dari setiap artikel / postingan Blog Anda. Kalau tidak mncul, mungkin Anda belum membuat / menuliskan Label pada posting atau artikel Blog Anda.

Jadi intinya dalam setiap artikel / posting dari Blog Anda harus lah ada atau di ketikkan Kategori / Label apa yang sesuai untuk pengelompokkan artikel / posting Anda kali ini. Agar pembaca mudah untuk menelusuri setiap postingan / artikel yang telah Anda buat.

Dengan begitu, page view / kunjungan pada halaman posting / artikel Anda juga akan bertambah. Coba saja cek atau daftarkan / register-kan dahulu Blog / Website / Situs Anda di HiStat. Maka Anda akan tahu setiap kunjungan dari para pembaca dengan laporan yang lebih lengkap dan akurat...( koq jadinya promosi yak...??? ™Ќîiîk.·:::D Ќîiîk :D::·. Ќîiîk™ ).
Demikian semoga bermanfaat (",)

7 comments:

  1. berhasil sangat membantu ..gmn caranya supaya huruf hurufnya sedikit besar biar lebih oke thanks

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. maksud saya jika kita klik dari kategori keluar seperti ini
      Home » Posts filed under Obat Herbal
      Showing posts with label Obat Herbal. Show all posts

      Delete

Blog Auto Approve Comments with Chapta (Blog komentar tampil setelah mengisi kode / verifikasi gambar terlebih dahulu).

Mohon menuliskan komentar Mas Mbro Bos dengan bahasa yang baik, tidak mengandung Sara, Pornografi, dan Provokasi Pihak lain.

Terima kasih atas kesediaan Mas Mbro Bos dimanapun berada (",)

Salam,

Follow by Email