Cara Pasang Breadcrumb Yang Terindeks Google

Cara Blogger Breadcrumb

Kali ini saya akan memberi tutorial kepada sahabat Blogger cara memasang breadcrumb agar terindeks Google. Tutorial ini saya dapatkan dari Maskolis, tapi rubah sedikit gaya Breadcrumbnya.
Ok, apakah sobat semua mengetahui apa itu breadcrumb, kalau sobat tidak tahu apa itu Breadcrumb, saya akan jelaskan sedikit.
Breadcrumb menurut Maskolis adalah "Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat.", dan juga dapat memudahkan pengunjung untuk mengetahui posisinya dalam suatu artikel, menurut Maskolis, Breadcrumb ini berfungsi untuk memudahkan web/blog kita untuk terindeks di Google, karena 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.
Itu tadi adalah pengertian dan fungsi dari Breadcrumb, sekarang kita akan mencoba mempraktekannya.
Ikuti cara berikut :
- Cara agar kita bisa mendesainnya, sobat Cari Kode ]]></b:skin
- Lalu masukan kode dibawah ini
.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:11px;line-height:1.4em;border-bottom:2px solid #f6f6f6;}

Note :
Tulisan yang diwarnai warna merah bisa sobat ganti, itu adalah ukuran Font dari Breadcrumb.
Jika sobat ingin menghilangkan garis bawahnya, sobat bisa hilangkan kode border-bottom:2px solid #f6f6f6; .

- Setelah memasukan CSS diatas, Sobat Cari kode  <div class='post hentry'>
- Lalu Masukan kode berikut dibawahnya
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' expr:title='data:label.name' 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>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>

Note :
Yang saya tandai warna merah itu berupa Title, jika Cursor Pointer kita geser diatas Link label, maka titlenya akan muncul.

Demikian tutorial dari saya, untuk sumbernya, sobat bisa lihat di Artikel Maskolis disini.

Artikel Terkait

  • Cara Paling Mudah Dapat Komentar Artikel Blog Kali ini, saya akan coba memberi tips kepada sobat blogger yang kesulitan mendapatkan komentar dari pengunjung yang datang ke blog kita. Karena, sayang sekali jika pengunjung b ...
  • Template Paktani Untuk Blog Film Kali ini saya akan membagikan sebuah template hasil project subuh saya secara GRATIS, template yang sangat cocok untuk kawan yang punya blog untuk sharing khusus film/anime. A ...
  • Membuat Daftar Menu Dengan Toggle Oke sebagai awalan saya ingin memberitahu bahwa toggle yang dimaksud bukan angka togel yah =D. Kali ini singkat saja, saya akan memberikan sebuah tutorial tentang cara membuat ...
  • Menambahkan Effect Hover Pada Blockquote .post blockquote:hover{margin:5px 10px 10px 20px;padding:30px 15px 10px;line-height: 1.6em;color: #333;background: #fff;border-left: 10px solid #b20000;text-decoration:none; ...
  • Fungsi CDATA Dalam JS dan CSS Jika kamu sering mengotak-atik CSS maupun JS atau mungkin cuma drag and drop kode dari orang lain kamu terkadang akan menemukan yang namanya CDATA atau tertulis // <![CDATA ...