Cara Membuat Navigasi Breadcrumbs Di Blogger

Breadcrumbs merupakan sebuah garis kontrol yang digunakan sebagai alat bantu navigasi pada sebuah tampilan antar muka aplikasi. Breadcrumbs berfungsi sebagai keterangan bagi pengguna agar dapat dengan mudah melacak lokasi file dalam program, dokumen, dan web atau blog. Pada sebuah web atau blog breadcrumbs biasanya muncul secara horizontal pada bagian atas web, diatas judul posting atau pun dibawah judul header. Sehingga pengguna dapat dengan mudah menelusuri sebuah blog, untuk kembali ke titik awal pencarian atau menemukan struktur induk halaman tersebut.

Tipe dasar sebuah breadcrumbs :

Home > Blog > Cara Membuat Navigasi Breadcrumbs Di Blogger

Atau

Home >> Blog >> Cara Membuat Navigasi Breadcrumbs Di Blogger

Dengan ditambahkannya breadcrumbs pada web atau blog bisa menjadikan penilaian yang baik bagi para pengguna, khususnya menjadikan web tersebut terlihat dikelola secara profesional oleh para pengguna. Lalu bagaimana cara membuat breadcrumbs pada blog dan web? Langsung saja kita ikuti langkah-langkahnya berikut ini.

Membuat Breadcrumbs Di Blogger

1. Masuk ke akun blog anda.

2. Masuk ke menu Template > Edit Template.

3. Cari kode ]]></b:skin> atau </style> ( pilih salah satu aja ) dan simpan kode ini diatasnya:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

4. Lalu cari kode <b:includable id='main' var='top'> dan ganti dengan kode berikut ini.

<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'/>

5. Simpan template.

Hasilnya akan terlihat bila anda memasang Label atau Kategori pada setiap posting artikel yang anda buat. Jadi jangan lupa untuk selalu menyertakan label atau kategori pada setiap posting artikel anda, itu akan membuat pengunjung mudah untuk mencari artikel yang mereka cari menurut kategori yang mereka inginkan.

Demikian tutorial cara membuat breadcrumbs di blogspot dengan mudah, semoga bermanfaat dan membantu anda. Jangan lupa untuk berkomentar di kotak komentar yang telah disediakan, dan update artikel terbaru melalui facebook dan email Asik Itu Belajar. Terima kasih telah berkunjung di blog ini.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest