Tutorial Breadcrumb Di Blogspot

Firstly korang tau tak apadia breadcrumb? jangan plak korang pikir pasal makan plak mantang2 ada ayat bread kat situ kihkih...So yang taktau meh saya gtau kat korang

Breadcrumb yang berada kat atas posts. Macamnie..

Tutorial Breadcrumb Di Blogspot


Breadcrumb salah satunya untuk mencantikkan blog dan yang lebih penting lagi supaya search engine mudah mencari laman blog korang itu menurut master SEO. Lain2 hal plak menambah trafik...

Nie salah satu contoh my entri yang dah terindex di google

Tutorial Breadcrumb Di Blogspot
untuk terindex di google perlu tunggu 1minggu atau lebih untuk blog terindex di google. For my blog 5hari dah terindex.


#nota: Kena letak label di setiap posts.

Now cara membuat breadcrumbnya...

  • Pergi kat dashboard
  • Klik Template
  • Klik Edit HTML
  • Klik Proceed
  • Kemudian korang tick kat Expand Widget Templates

Cari code ]]></b:skin>

dah jumpa code tadi letak code dibawah nie diatas code tadi
.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Contoh...
Tutorial Breadcrumb Di Blogspot

Seterusnya korang cari code ini
<b:includable id='main' var='top'>

Letak plak code dibawah nie dibawah code tadi
<b:include data='posts' name='breadcrumb'>

contoh...
Tutorial Breadcrumb Di Blogspot


Terakhir cari code ini
<b:includable id='commentDeleteIcon' var='comment'>

letak code dibawah nie diatas code tadi
<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>

contoh...
Tutorial Breadcrumb Di Blogspot


Tutorial Breadcrumb Di Blogspot


pastu korang preview dulu bila takde error baru korang save template

  • untuk view ur breadcrumb korang klik mana2 entri korang pastu tengok kat atas ur posting dah ada breadcrumb

  • untuk checking supaya breadcrumb terindex di google check kat Rich Snippets Testing Tool
  • guna url posting korang..
  • (kena tunggu 1minggu atau lebih)

11 comments:

  1. nice ttorial dah cube menjadi TQ..

    ReplyDelete
  2. rjin nye bieaz.. maseh cikgu..hehe

    ReplyDelete
  3. dah lama cari tutorial nie thanks dik.menjadi..

    ReplyDelete
  4. Baca entry tengah2 hari ni macam blur je..memang teringat breadcrumbs as in food..hehehe..

    :-)

    ReplyDelete
    Replies
    1. tu arr lagi2 tghari...hahaha food je dalam fikiran kih3

      Delete
  5. Lama dah tak bermain dgn koding2 nih....pening gak kepala dibuatnya...hehehe

    ReplyDelete
    Replies
    1. hahaha yg dah lama xmain koding2 nie yg best....

      Delete
  6. http://buatduitfree2014.blogspot.com jom singgah

    ReplyDelete