earth

Guestbook

/* Iklan google ads */

Cara Membuat Navigasi Breadcrumbs Pada Blogspot

Breadcrumbs, makhluk apa pula nih? Saya sendiri kurang begitu ngerti mengapa istilahnya menjadi "remah roti" seperti ini. Tapi menurut wikipedia, breadcrumbs "is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents".

Konon, dengan navigasi breadcrumbs ini dapat meningkatkan SEO. Benar atau tidaknya belum tahu juga, soalnya dalam logika awam seperti saya, breadcrumbs ini sama saja dengan tag yang terdapat di bawah judul artikel (ada juga yang di bawah artikel) dan blog-pager. Namun sekalipun demikian, SC Community tetap memakainya, karena siapa tahu memang benar-benar mampu meningkatkan SEO, kan lumayan juga tuh, hehehe...

Bagi yang belum tahu makhluknya seperti apa, lihat saja navigasi yang terletak di atas judul artikel ini, yang memuat home page, tag (kategori), dan judul artikel.

Jika kamu tertarik dan ingin membuatnya, seperti biasa:
  • Dari dasbor, pilih Template - Edit HTML (untuk amannya, duplikasi template terlebih dahulu).
  • Beri tanda centrang pada Expand Template Widget.
  • Kemudian tambahkan CSS berikut di atas kode ]]></b:skin> :
    .breadcrumbs { 
    padding:0px 5px 5px 0px;
    margin:0px 0px 15px 0px;
    font-size:11px;
    line-height:14px;
    border-bottom:3px double #CCC;
    }
    
    Ukuran (padding, margin, font-size, line-height) sesuaikan dengan template kamu.
  • Selanjutnya cari kode:
    <div class='post'>
    
  • Jika sudah ketemu, tambahkan kode berikut di bawahnya:
    <!--awal breadcrumbs-->
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
    
          <div class='breadcrumbs'>
           Browse &#187;  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
      <b:loop values='data:posts' var='post'>
          <b:if cond='data:post.labels'>
           <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
                  <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                </b:if>
    &#187; <span><data:post.title/></span>
           </b:loop>
          </b:if>
      </b:loop>
          </div>
    
      </b:if>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    
    <div class='breadcrumbs'>
    Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
    </div>
    
    </b:if>
    <b:else/>
      <b:if cond='data:navMessage'>
          <div class='breadcrumbs'>
          <data:navMessage/>
          </div>
      </b:if>
    </b:if>
    <!--akhir breadcrumbs-->
    
  • Setelah itu save, lalu ucapkan Alhamdulillah...

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    3 komentar

    keren blognya bro,,,lawakannya di tunggu http://info-math-kiki.blogspot.com/

    31 Oktober 2012 pukul 20.11  

    Makasih sob, hehee
    aku coba ya gan :)

    ohya, saling kunjung balik yah
    di http://aurigamaulana.blogspot.com

    7 Februari 2013 pukul 16.10  

    kunjungi http://caisarroberto.blogspot.com/

    blog paling seru dan ramai di kunjungi banyak orang.

    10 Februari 2013 pukul 10.12  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler