Search

Cara Memasang Navigasi Breadcrumb di Blogspot

Mungkin bagi sebagian Blogger sudah tidak asing lagi dengan yang namanya breadcrumb. Breadcrumb adalah semacam elemen navigasi yang berada diatas judul postingan . Memasang atau membuat navigasi breadcrumb adalah salah satu strategi Seo Onpage , bahkan beberapa orang mengatakan, Memasang breadcrumb di blogspot dapat meningkatkan "Seo Score" pada blog itu . :p


Apa sih keuntungan memasang Navigasi Breadcrumb  ?

Seperti saya sebutkan diatas , memasang navigasi breadcrumb akan memberikan dampak postif di blog atau situs anda . Mulai dari meningkatkan Seo Score dan blog anda akan terlihat rapi dimata google robot dan pengunjung.

Kita akan mengambil contoh pada situs Kaskus.co.id , dibawah ini adalah contoh navigasi breadcrumb dari situs tersebut


Dengan adanya Navigasi Breadcrumb yang Seo Friendly itu maka Google akan memunculkan struktur navigasi di dalam pencarian . Gambar dibawah ini adalah contohnya >


Dan dibawah ini adalah contoh situs yang tidak menggunakan navigasi breadcrumb , Google tidak memasukan struktur navigasi blognya di hasil pencarian


Setelah melihat contoh kasus dua situs diatas , saya rasa menggunakan Navigasi Breadcrumb di blogspot membat blog anda terlihat lebih rapi dan terstruktur dimata Google maupun pengunjung .

 Cara Memasang Breadcrumb Di Blogger

Membuat  Breadcrumb di Blogspot sangatlah mudah , tidak perlu java script aneh-aneh berat dan bikin blogkita menjadi lambat . ok , langsung saja saya mulai cara membuat navigasi yang ramah mesin pencari itu :).
  1. Login Ke Blogger
  2. Pilih blog mana yang akan anda pasang navigasi breadcrumbs
  3. Klik "Template"
  4. Langsung Klik tombol "Edit HTML"
  5. Cari kode > ]]></b:skin>  (Klik kolom yang berisi kode HTML lalu ketik "ctrl+f" pada keyboard anda" 
  6.  Setelah ketemu , Pasang kode di nomer 7 diatas kode ]]></b:skin>
  7.  .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  8. setelah selesai , kini saatnya mencari kode <b:includable id='main' var='top'>
  9. Setelah ketemu , anda tinggal menggantinya dengan kode dibawah ini di nomer 10 :
  10. <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'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </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>Arsip untuk<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>Semua Postingan</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posting dengan kategori<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'/>


  11. Seperti biasa,anda tinggal melakukan tugas akhir yaitu menekan tombol "simpan template" dan silahkan melihat hasilnya ^^ (navigasi ini muncul diatas artikel di halaman postingan)
Cara ini insya allah berkerja , karena saya mempraktekan sendiri di blog pribadi saya , Selain itu cara ini telah dipakai banyak blog supaya breadcrumb terindeks google .

 Berikut ini adalah contoh navigasi breadcrumb yang saya pasang :

 jika melihat dihalaman label maka akan muncul seperti gambar dibawah ini :

Selesai juga akhirnya ^o^, semoga tulisan ini bermanfaat bagi semua :))

Wasalam

Selasa, 04 Maret 2014

Cara Memasang Navigasi Breadcrumb di Blogspot

Mungkin bagi sebagian Blogger sudah tidak asing lagi dengan yang namanya breadcrumb. Breadcrumb adalah semacam elemen navigasi yang berada diatas judul postingan . Memasang atau membuat navigasi breadcrumb adalah salah satu strategi Seo Onpage , bahkan beberapa orang mengatakan, Memasang breadcrumb di blogspot dapat meningkatkan "Seo Score" pada blog itu . :p


Apa sih keuntungan memasang Navigasi Breadcrumb  ?

Seperti saya sebutkan diatas , memasang navigasi breadcrumb akan memberikan dampak postif di blog atau situs anda . Mulai dari meningkatkan Seo Score dan blog anda akan terlihat rapi dimata google robot dan pengunjung.

Kita akan mengambil contoh pada situs Kaskus.co.id , dibawah ini adalah contoh navigasi breadcrumb dari situs tersebut


Dengan adanya Navigasi Breadcrumb yang Seo Friendly itu maka Google akan memunculkan struktur navigasi di dalam pencarian . Gambar dibawah ini adalah contohnya >


Dan dibawah ini adalah contoh situs yang tidak menggunakan navigasi breadcrumb , Google tidak memasukan struktur navigasi blognya di hasil pencarian


Setelah melihat contoh kasus dua situs diatas , saya rasa menggunakan Navigasi Breadcrumb di blogspot membat blog anda terlihat lebih rapi dan terstruktur dimata Google maupun pengunjung .

 Cara Memasang Breadcrumb Di Blogger

Membuat  Breadcrumb di Blogspot sangatlah mudah , tidak perlu java script aneh-aneh berat dan bikin blogkita menjadi lambat . ok , langsung saja saya mulai cara membuat navigasi yang ramah mesin pencari itu :).
  1. Login Ke Blogger
  2. Pilih blog mana yang akan anda pasang navigasi breadcrumbs
  3. Klik "Template"
  4. Langsung Klik tombol "Edit HTML"
  5. Cari kode > ]]></b:skin>  (Klik kolom yang berisi kode HTML lalu ketik "ctrl+f" pada keyboard anda" 
  6.  Setelah ketemu , Pasang kode di nomer 7 diatas kode ]]></b:skin>
  7.  .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  8. setelah selesai , kini saatnya mencari kode <b:includable id='main' var='top'>
  9. Setelah ketemu , anda tinggal menggantinya dengan kode dibawah ini di nomer 10 :
  10. <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'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </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>Arsip untuk<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>Semua Postingan</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posting dengan kategori<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'/>


  11. Seperti biasa,anda tinggal melakukan tugas akhir yaitu menekan tombol "simpan template" dan silahkan melihat hasilnya ^^ (navigasi ini muncul diatas artikel di halaman postingan)
Cara ini insya allah berkerja , karena saya mempraktekan sendiri di blog pribadi saya , Selain itu cara ini telah dipakai banyak blog supaya breadcrumb terindeks google .

 Berikut ini adalah contoh navigasi breadcrumb yang saya pasang :

 jika melihat dihalaman label maka akan muncul seperti gambar dibawah ini :

Selesai juga akhirnya ^o^, semoga tulisan ini bermanfaat bagi semua :))

Wasalam