Cara Memasang Breadcrumb Google di Blogspot / Blogger

* Langkah pertama sobat login dulu ke blog, itu pasti. kwa kwa kwa,,

    * Seperti biasa, kita langsung menuju halaman Design [Rancangan] » Edit HTML » Ceklis Expand Widget Templates (jangan lupa selalu backup template sebelum editing). Jika sobat menggunakan tampilan baru, silahkan klik Template » Edit HTML » Lanjutkan » Ceklis Expand Widget Templates.

    * Jika sobat telah memasang kode breadcrumb sebelumnya, silahkan delete [hapus] dulu.

    * Kemudian sobat cari kode <b:include data='top' name='status-message'/> biasanya ada 2 kode tersebut. Kalau sudah di temukan, silahkan paste kode berikut ini tepat di atasnya (paste aja di atas 2 kode yang sobat temukan biar tidak bingung).

    <b:include data='posts' name='breadcrumb'/>

    * Sekarang cari kode <b:includable id='main' var='top'> dan kalau sudah ketemu, paste kode berikut tepat di atas kode <b:includable id='main' var='top'>

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

Sampai tahap ini silahkan simpan template sobat. Taraaaaaa, sobat berhasil Membuat Breadcrumb Google di Blogger.

Untuk mempercantik Breadcrumb google yang sudah sobat buat, sekarang tambahkan sedikit sentuhan CSS berikut ini yang perlu sobat tambahkan di atas kode ]]></b:skin>

    .breadcrumbs{

          margin-left:10px;

          padding: 5px 0;

          border-bottom: 1px dotted;

          line-height:1.4em;

          }

Itu saja artikel blogger kali ini dan mudah-mudahan bermanfaat buat para sobat blogger. Happy blogging..