Cara Membuat Breadcrumbs di Blogspot

 Tutorial blogspot

cara membuat breadcrumbsCara membuat breadcrumbs di blogspot merupakan salah satu teknik yang digunakan untuk membuat sebuah blog atau website disukai search engine. Terbukti Google lebih mengutamakan blog dengan adanya kemudahan navigasi.

Setelah sebelumnya dijelaskan mengenai cara membuat breadcrumbs di wordpress, maka kali ini akan saya jelaskan mengenai penerapannya di blogspot. Ternyata tidak hanya wordpress yang dapat dimodifikasi menggunakan breadcrumbs akan tetapi blogspot juga bisa.

Setelah membaca komentar dari salah seorang pengunjung, kemarin langsung coba-coba menerapkan cara membuat breadcrumbs di blogspot dan ternyata berhasil, breadcrumbs juga muncul di search engine google. Berikut hasil penerapannya di blogspot saya.

cara membuat breadcrumbs di blogspot

Cara membuat breadcrumbs di blogspot

  1. Buka menu template > edit HTML > procced
  2. Beri tanda centang pada Expand Widget Templates
  3. Lakukan backup sebelum mengedit tempalte
  4. Kemudian cari kode <b:include data=’top’ name=’status-message’/>,gunakan ctrl F untuk memudahkan pencarian. Lalu tambahkan kode dibawah ini sebelum/diatas kode <b:include data=’top’ name=’status-message’/>tersebut.
    <b:include data='posts' name='breadcrumb'/>

    Jika dalam pencarian terdapat dua kode yang sama, tambahkan juga kode diatas sebelum kode <b:include data=’top’ name=’status-message’/> yang ke dua.

  5. Kemudian tambahkan juga kode dibawah ini tepat diatas 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'>
    <b:if cond='data:label.isLast == &quot;true&quot;'>
    &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
    </b:if>
    </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>
  6. Untuk mempercantik tampilan breadcrumbs anda dapat menambahkan kode CSS berikut setelah kode ]]></b:skin>.
    .breadcrumbs{
    background:#F6F8F2;
    line-height:16px;margin:0px 0px 2px 0px;border:1px solid #b0aeae;padding:3px 2px 3px 14px;
    font-size:10.5px;box-shadow:2px 2px 2px #b3b3b7;-moz-box-shadow:2px 2px 2px #b3b3b7;-webkit-box-shadow:2px 2px 2px #b3b3b7;letter-spacing:0em;
    font-family:"trebuchet ms",sans-serif;}
  7. Gunakan Google Richsnippet Tool untuk melihat hasil breadcrumbs yang telah dibuat berhasil atau tidak.
  8. Jika sudah, anda harus menunggu beberapa waktu agar tampilan breadcrumbs tampil di search engine google.

Cara membuat breadcrumbs di blogspot dapat digunakan untuk membuat navigasi pada blog anda. Blog dengan kemudahan navigasi akan jauh lebih SEO friendly dibanding blog yang tidak memiliki navigasi.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

One Response

Leave a Reply