Pasang Breadcrumb Blog

Posted on

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.

Gravatar Image
Seorang blogger yang sedang mempelajari perkara-perkara berkaitan blog, SEO dan bisnes online. Ingin berkongsi apa saja yang dirasakan sesuai di blog personal ini. Jom follow Rossaimi di Facebook, Twitter, dan juga Google+.