Cara Memasang Navigasi Breadcrumb pada Blogspot

Tweet

Jadilah yang pertama untuk membagikan tutorial maupun tips dalam artikel ini kepada teman-teman anda.

Cara Memasang Navigasi Breadcrumb pada Blogspot - Apakah diantara anda ada yang bertanya-tanya, apa yang dimaksud dengan breadcrumb itu sih? Saya sedikit jelaskan ya, breadcrumb ialah navigasi yang terdiri dari label-label, yang terletak di bagian atas postingan. Kegunaan dari breadcrumb ini untuk menunjukkan urutan isi halaman dari rootnya (Home) hingga ke postingan yang bersangkutan. Menu navigasi ini hanya akan muncul pada halaman postingan, label, dan arsip saja, dan tidak ditampilkan pada halaman homepage. Dengan adanya menu navigasi breadcrumb ini akan membantu para pengunjung blog anda untuk melakukan navigasi, misalnya untuk kembali ke bagian sebelumnya atau ke halaman homepage dengan cepat.

Sedikit menyinggung artikel saya sebelumnya tentang cara memasang meta tag description dan meta keyword, untuk saat ini search engine kurang begitu memperhitungkan peranan dari meta keyword lagi. Nah menurut beberapa sumber terpercaya, selain masih memperhitungkan fungsi dari meta tag description, search engine juga memerhitungkan peranan dari label(kategori) yang ada pada blog anda. Oleh karena itu, semakin revelan sebuah label dengan isi postingan yang bersangkutan, maka postingan tersebut akan semakin berpotensi untuk dapat tampil pada halaman pertama hasil pencarian search engine. Hal ini tentu baik untuk meningkatkan SEO blog anda. Breadcrumb sendiri dapat menambah kepadatan keyword dalam halaman postingan anda, mengingat letaknya berada di bagian atas halaman postingan.

Lalu bagaiman cara membuat menu navigasi breadcrumb, sekaligus cara memasang menu navigasi breadcrumb di blogger template ini? Simak baik-baik tips berikut dari ind-Template yaaa...

1. Masuk ke dashboard blog anda. Pilih Template. Kemudian pilih Edit HTML.
2. Cari (CTRL + F) kode ]]></b:skin> dan tambahkan kode berikut

.navigasiBreadcrumbs {
&nbsp padding: 5px 5px 5px 0px;
&nbsp margin: 0px 0px 15px 0px;
&nbsp font-size:95%;
&nbsp line-height:1.4em;
&nbsp border-bottom:3px double;
}

3. Setelah itu cari (CTRL + F) kode berikut <b:include data='top' name='status-message'/>. Sudah ketemu? Letakan kode di bawah ini setelah kode <b:include data='top' name='status-message'/>. Tekan enter di akhir baris kode tersebut. Setelah ganti baris, tambahkan kode berikut ini

<b:include data='posts' name='navigasiBreadcrumbs'/>

Biasanya ada 2 kode <b:include data='top' name='status-message'/> di dalam template sebuah blog. Pilih yang atas yaaa... Jika ternyata setelah sampai langkah ke 5 menu breadcrumb belum muncul, anda dapat mencoba dengan memindahkan kode di atas ke tempat yang kedua.
4. Setelah itu, cari kode berikut ini <b:includable id='main' var='top'>. Setelah anda menemukannya, letakan kode dibawah ini tepat di atas kode yang tadi...

<b:includable id='navigasiBreadcrumbs' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<p class='navigasiBreadcrumbs'>
<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"'>
<p class='navigasiBreadcrumbs'>
<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='navigasiBreadcrumbs'>
<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>

5. Pastikan kode di atas anda pastekan ditempat yang tepat. Perhatikan baik-baik instruksi yang saya berikan dimana seharusnya kode tersebut diletakan. Jika anda ragu-ragu, sebaiknya anda membackup template anda terlebih dahulu. Jika semua langkah sudah dilakukan, anda dapat menyimpan kode tempalte yang telah anda edit, lalu buka salah satu postingan dari blog anda dan amati bagian atas postingan. Seharusnya menu breadcrumb sudah muncul di atas postingan anda.

Begitulah tips cara memasang dan membuat menu navigasi breadcrumb untuk blog yang dapat saya bagikan, tetap berlangganan artikel-artikel dari saya untuk mendapatkan update informasi terbaru ya... Oiya, hampir kelupaan, untuk menu navigasi breadcrumb ini sudah saya sertakan ke dalam semua template yang telah saya share pada blog ini. Jadi, jika anda menggunakan template dari ind-Template, anda sudah tidak perlu repot-repot menambahkan kode di atas lagi, karena template yang saya bagikan sedapat mungkin sudah saya tambahkan code-code untuk meningkatkan SEO blog anda. Anda dapat mendownload koleksi template saya di download template blogger indonesia gratis. Selamat nge-blog teman-teman...

---

Terimakasih telah membaca artikel kami, Cara Memasang Navigasi Breadcrumb pada Blogspot yang diterbitkan oleh ind-Template. Jika anda menyukai artikel ini silahkan untuk melakukan link back dengan memasang kode dibawah ini. Atau dengan membagikan ( merekomendasikan ) artikel ini melalui jejaring sosial. Copy Paste diijinkan dengan syarat memasang kode dibawah ini sebagai link back aktif. Saya akan melakukan DMCA Complaint jika anda melakukan copy paste tanpa mengikuti ketentuan yang berlaku!
<a href="http://ind-template.blogspot.com/2014/02/cara-memasang-navigasi-breadcrumb-pada-blogspot.html">Cara Memasang Navigasi Breadcrumb pada Blogspot</a>

---