Pasang Breadcrumb Blog

Pasang breadcrumbs di blog. Aktiviti minggu ini masih lagi tertumpu kepada penambahbaikan struktur SEO pada blog rossaimi. Almaklumlah domain baru ini perlu ditambahbaik supaya lebih mesra SEO. Dengan pemasangan breadcrumb diharapkan dapat memudahkan crawler mengenali struktur sesebuah blog. Alhamdulillah dah berjaya dipasang.
pasang breadcrumb blog
Pernyataan di google webmaster berkenaan dengan breadcrumb adalah sebagaimana berikut:
When you mark up breadcrumb information in the body of a web page, Google can identify it and use it to understand and present the information on your pages in our search results.
Sedikit perkongsian sekiranya ada yang ingin memasangnya pada blog anda. Tutorial ini hanyalah untuk pengguna platform blogger sahaja. Bila menggunakan blogger semuanya nak kena buat manual sendiri. Lainlah kalau guna wordpress macam-macam plugin ada.

Cara memasang breadcrumb di blog

  1. Login blogger.com, pilih template kemudian EDIT HTML.(PERHATIAN!!! Sila buat backup terlebih dahulu)
  2. Cari kod ]]></b:skin>. Kalau nak senang guna CTRL F untuk cari kod tersebut.
  3. Letakkan kod di bawah ini di atas kod ]]></b:skin>
  4. .breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}
  5. Selepas itu cari kod <b:includable id='main' var='top'> dan gantikan dengan kod seperti di bawah:
  6. <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>
    <b:includable id='main' var='top'>
    <b:include data='posts' name='breadcrumb'/>
  7. Klik SAVE dan tengok keluar tak breadcrumb sepertimana gambar kat atas tadi
Semoga perkongsian pasang breadcrumb di blog ini bermanfaat untuk semua dan mudah-mudahan blog anda lebih mesra SEO.

22 Responses to "Pasang Breadcrumb Blog"

  1. nice entri bro. boleh ni cuba. :)

    ReplyDelete
    Replies
    1. Terima kasih bro. Insha allah berhasil.

      Delete
  2. breadcumb ini memang sebuah trick SEO yang memberi dmapak besar bila dikesan oleh google btw thanks sudah berkunjung ke Metrolisa ada nama denaihati di senarai itu karena kami memang bersahabat dengan denaihati meski beda negara

    ReplyDelete
    Replies
    1. Terima kasih Gan Munir Ardi kerana sudi berkunjung ke sini. Bisa mengeratkan silaturrahim antara tetangga.

      Delete
  3. apa tujuan benda ini di pasang ? heeeee kalau wordpress tak bolehlah yer uh...

    saya suka blog ini latar dan susun atur .teruskan berblog ya ;)

    ReplyDelete
    Replies
    1. Tujuan breadcrumb dipasang ialah untuk memudahkan crawler dan pembaca melihat struktur artikel di blog tersebut.

      Delete
  4. ya..saya suka perkongsian ini..terbaik gitu!

    ReplyDelete
  5. Perghhh kelaut ni kalau saya buat..haru biru jadinya..hahaha...tambah-tambah saya ni memang malas kot nak buat menda ni..hahahaha..terima kasih bro kongsikan..

    ReplyDelete
  6. huh pening dok main koding ni, masih berponir biji mata dok setting blog examspa.info
    ok ada masa nanti nak juga isi kod ni


    ps: bro cuba baiki hompage blog ni, sikit je lagi kena baiki, "missing keywords tag" tu... kalau ada ni memang power blog ni nnati... saya x pandai jg ni :)

    ReplyDelete
    Replies
    1. Buat pelan-pelan bro. Buat masa sekarang memang aku tak pasang keyword kat homepage tu. Mungkin sikit masa lagi. By the way thanks kerana mengingatkan bro.

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. salam, boleh explain tak breadcrumb tu apa?

    ReplyDelete
    Replies
    1. Wassalam. saya ada terangkan detail sikit di artikel Apa itu Breadcrumb. Semoga terjawab.

      Delete
  9. baik jugak kalu di cuba nie..:)

    ReplyDelete
    Replies
    1. Elok dicuba untuk SEO on page blog bro.

      Delete
  10. Maknanya breadcrumb ni akan ikut category / tag yang kita buat la ye?

    ReplyDelete
    Replies
    1. Ya. Akan ikut kategori atau label yang kita buat jadi saya cadangkan jangan terlalu letak banyak label untuk satu artikel.

      Delete
  11. Menarik ni...boleh cuba..info berguna.. :)

    ReplyDelete
  12. Memang POWER sahabat!!

    Sekarang masih lagi #1 teratas google sejak 10 mac 2014... TERBAIK!!

    ReplyDelete