Cara Membuat Breadcrumb di Blog

Cara Membuat Breadcrumb di Blog, mungkin anda sering melihat dibeberapa blog yang memiliki tambahan navigasi dibagian atas setiap halaman posting mereka. Ya navigasi menu itu dikenal dengan nama breadcrumb yang memiliki fungsi untuk memudahkan pengunjung dalam menelusuri setiap halaman pada blog sesuai dengan kriteria label/kategori postingan.



Nah karena breadcrumb ini berisikan label dari setiap postingan, mulai sekarang jangan lupa untuk selalu memberi label pada setiap postingan dan sesuaikan nama label dengan isi dari postingan karena ternyata breadcrumb ini salah satu cara search engine dalam mengindex halaman kita.

Yuk kita mulai cara membuat breadcrumb di blog :

• Login ke blogger
• Pada tampilan dashboard pilih menu template
• Pilih edit HTML, jangan lupa centang expand widget tempalte
• Cari kode ]]> gunakan ctr+F untuk memudahkan pencarian.
• Pasangkan kode dibawah ini tepat di atas kode ]]>
  

  .breadcrumbs {padding:5px 5px 5px 5px; margin: 0; font-size:90%; line-height: 1.4em; border-bottom:1px dotted #ddd;}

  
  *) kode diatas adalah style / bentuk tampilan dari breadcrumb, bisa anda ganti sesuai selera anda
• Kemudian cari kode <b:include id="main" var="top"> gunakan lagi CTR+F untuk mempercepat pencarian
• Setelah ketemu ganti kode tersebut dengan kode dibawah ini
  

  <b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType == "static_page"'>
  <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
  <b:else/>
  <b:if cond='data:blog.pageType == "item"'>
  <!-- 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'>
  » <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
  </b:loop>
  » <span><data:post.title/></span>
  </div>
  <b:else/>
  <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
  </b:if>
  </b:loop>
  <b:else/>
  <b:if cond='data:blog.pageType == "archive"'>
  <!-- breadcrumb for the label archive page and search pages.. -->
  <div class='breadcrumbs'>
  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
  </div>
  <b:else/>
  <b:if cond='data:blog.pageType == "index"'>
  <div class='breadcrumbs'>
  <b:if cond='data:blog.pageName == ""'>
  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
  <b:else/>
  <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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'/>

• Terakhir simpan template anda, dan breadcrumb anda berhasil dibuat

Sekian cara membuat breadcrumb di blog, semoga dengan menempatkan breadcrumb di halaman setiap postingan membuat blog anda lebih cepat terindex oleh mesin pencarian.

Browse More Articles

Tweet

Written by Unknown

Kami melayani pembuatan berbagai macam web aplikasi sesuai kebutuhan anda, dapatkan harga terbaik dan jasa amanah dari kami."Menerima dengan sumringah dan mengerjakan penuh amanah"