SimpleSukses.com

Home Page » Navigasi » SEO Onpage » Tutorial » Cara Bikin Breadcrumb
Sabtu, 27 Juli 2013

Cara Bikin Breadcrumb

Cara Bikin Breadcrumb di Blogspot.

Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertianbreadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).



Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 


Jadi simple-nya seperti ini : 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, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.


Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.


  • Langsung tuju Edit HTML.

  • Klik Expand Template Widget.

  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    /* breadcrumbs

    ----------------------------------------------- */

    .breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:4px double rgb(224, 224, 224); font-weight:bold; font-family:Tahoma; height:auto;}

    .breadcrumbs a, 

    .breadcrumbs a:visited{color:#222; font-size:11px;  font-weight:bold; font-family:Tahoma; height:auto;}

    .breadcrumbs a:hover{color:blue;font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

  • Setelah itu, cari kode seperti ini :
    <b:includable id='main' var='top'>


  • Lalu ganti kode berikut <b:includable id='main' var='top'> dengan kode berikut:
    <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>Browse »

    <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>

    Browse » <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> Browse » <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>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>

    </span> &#187; <span>All posts</span> 

    <b:else/> 

    <span>Browse »<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'/>
    Simpan Template.

Cara Bikin Breadcrumb di Blogspot.

Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertianbreadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).



Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 


Jadi simple-nya seperti ini : 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, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.


Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.


  • Langsung tuju Edit HTML.

  • Klik Expand Template Widget.

  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    /* breadcrumbs

    ----------------------------------------------- */

    .breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:4px double rgb(224, 224, 224); font-weight:bold; font-family:Tahoma; height:auto;}

    .breadcrumbs a, 

    .breadcrumbs a:visited{color:#222; font-size:11px;  font-weight:bold; font-family:Tahoma; height:auto;}

    .breadcrumbs a:hover{color:blue;font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

  • Setelah itu, cari kode seperti ini :
    <b:includable id='main' var='top'>


  • Lalu ganti kode berikut <b:includable id='main' var='top'> dengan kode berikut:
    <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>Browse »

    <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>

    Browse » <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> Browse » <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>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>

    </span> &#187; <span>All posts</span> 

    <b:else/> 

    <span>Browse »<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'/>
    Simpan Template.

  • Blogging is not about earning. Its about serving the Humanity.
  • Don't choose Blogging as your profession, unless you really have no choice!!!
  • Education is the most powerful weapon which you can use to change the world.
  • The Lift is too shorT, Live it or be dead.
  • It's fine to celebrate success but it is more important to heed the lessons of failure.
  • You can't have a light without a dark to stick it in.
  • If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.
Cara Bikin Breadcrumb

Template Toko Online Blogspot
Ditulis oleh : Nur NASA
Rating Blog : 4.5 POIN dari 5 POIN
Terima kasih atas kunjungannya.
Semoga artikel ini bermanfaat bagi Anda.

Link Artikel:
https://template-toko-online-untuk.blogspot.com/2013/07/cara-bikin-breadcrumb.html

Silakan baca Artikel Terkait dibawah ini:

Beri Komentar dengan:
Atau
Pilih yang Anda Suka!

1 komentar :