Cara Menciptakan Navigasi Breadcrumbs Di Blogger

Breadcrumbs merupakan sebuah garis kontrol yang dipakai sebagai alat bantu navigasi pada sebuah tampilan antar muka aplikasi. Breadcrumbs berfungsi sebagai keterangan bagi pengguna biar sanggup dengan gampang melacak lokasi file dalam program, dokumen, dan web atau blog. Pada sebuah web atau blog breadcrumbs biasanya muncul secara horizontal pada bab atas web, diatas judul posting atau pun dibawah judul header. Sehingga pengguna sanggup dengan gampang 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 sanggup menyebabkan evaluasi yang baik bagi para pengguna, khususnya menyebabkan 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 sajian Template > Edit Template.

3. Cari kode ]]></b:skin> atau </style> ( pilih salah satu aja ) dan simpan arahan 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 arahan <b:includable id='main' var='top'> dan ganti dengan arahan 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 kalau anda memasang Label atau Kategori pada setiap posting artikel yang anda buat. Makara jangan lupa untuk selalu menyertakan label atau kategori pada setiap posting artikel anda, itu akan menciptakan pengunjung gampang untuk mencari artikel yang mereka cari berdasarkan kategori yang mereka inginkan.

Demikian tutorial cara menciptakan 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.

Sumber http://asikitubelajar.blogspot.com

Share this post