Cara Membuat Navigasi Breadcrumb Pada Blogspot

Cara Membuat Navigasi Breadcrumb Pada Blogger ~ pada ulasan kali ini saya akan berbagi bagaimana membuat navigasi Breadcrumb pada blog yang berflatform blogspot. cara ini sebenaranya merupakan bagian dari SEO On Page blogger yang nantinya mempermudah search engine untuk menavigasi artikel yang telah kita buat sehingga bisa lebih cepat terindex di google.

artikel anda nantinya akan mendapatkan navigasi ketika muncul di search engine. seperti gambar dibawah ini:

 

Baiklah bagi teman-teman yang ingin membuat navigasi Broadcrumb ikuti langkah-langkah berikut ini:

• Login ke Dashboard Blogger
• Masuk ke tag template dan pilih Edit HTML
• Selanutnya centang Expand Widget Template
• Tekan ctrl+F untuk melakukan Pencarian dan Cari kode ]]></b:skin> 
• lalu letakkan kode berikut ini tepat diatas kode]]><</b:skin>
  
  
  .breadcrumbs{
        margin-left:10px;
        padding: 5px 0;
        border-bottom: 1px dotted;
        line-height:1.4em;
        }

• Selanjutnya cari kode  <b:include data='top' name='status-message'/> di blogger biasanya terdapat 2 kode diatas, pilih kode yang berdekatan dengan kode <data:defaultAdStart/> dan letakkan kode dibawah ini tepat dibawah kode  <b:include data='top' name='status-message'/>
  <b:include data='posts' name='breadcrumb'/>
  
  
• selanutnya cari kode <b:includable id='main' var='top'> dan letakkan kode dibawah ini tepat dibawahnya
  
  <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>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>

• Setelah selesai, silahkan preview dulu, jika tidak terdapat error silahkan save template anda dan buatlah artikel baru dan lihatlah hasilnya di search engine
• selesai

Demikianlah cara membuat navigasi Breadcrumb Pada Blogspot, untuk artikel Tentang SEO lainnya Klik Disini

Posted in: Blog