Terbaru - Disclaimer - Privacy Policy - Contact Us - Daftar Isi

» » Cara Membuat Navigasi Breadcrumb

Cara Membuat Navigasi Breadcrumb

Bookmark and Share
cara membuat breadcrumb, breadcrumb, breadcrum
cara membuat breadcrumb di blogspot. Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan.

Navigasi Breadcrumb,, dianjurkan oleh Google dalam SEO. Anjuran untuk pemasangan breadcrumb di suatu situs tercantum dalam ebook yang dikeluarkan Google berjudul “Search Engine Optimization Starter Guide tentang SEO BreadCrumb”. Dengan adanya breadcrumb ini pengunjung dapat dengan mudah menjelajahi tautan yang berhubungan dengan postingan yang di tampilkan. Terlepas benar atau tidaknya breadcrumb ini berpengaruh kepada seo, tapi menurut teman-teman breadcrumb ini sedikit berpengaruh dalam sudut pandang navigasi blognya.

Apa salahnya kalau mencoba, sekarang adalah waktunya mempraktekkan apa yang kita akan pelajari hari ini.
mangga... bang...
Cara Memasang Breadcrumb di Blogger / Blogspot, Untuk langkah-langkahnya, silakan ikuti petunjuk di bawah ini :

    * Sign in ke http://blogger.com dengan akun Anda
    * Pilih layout -> edit html
    * Beri tanda centang pada Expand the Widget Templates
    * Cari kode seperti ini :

    <b:include data='top' name='status-message'/>

    * Gantikan dengan yang ini :

    <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>

    * Lalu cari kode seperti ini :

    <b:includable id='main' var='top'>

    * Gantikan dengan yang ini :

    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>

    * Yang terakhir, cari kode seperti ini :

    ]]></b:skin>

    * Lalu gantikan dengan yang ini :

    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>

    * Save Template dan lihat hasilnya :D
    * Semoga berhasil dan tetap semangat dalam melakukan sesuatu dan ingat! Jangan tergesa-gesa. dipersembahakan oleh SEOlho.


Materi Pelajaran Terkait:

di 02.18 - Label: , -