Beranda » Tutorial Blog » Cara Membuat Navigasi Breadcrumb di Blog

Cara Membuat Navigasi Breadcrumb di Blog

T Diposting oleh pada 10 March 2012
F Kategori
b Belum ada komentar
@ Dilihat 278 kali
Cara Membuat Navigasi Breadcrumb di Blog.Sobat Darmanto,agak lama juga yah Catatan saya ini tidak membuat tutorial blog.Nah pada catatan saya kali ini,saya akan berbagi catatan mengenai Cara membuat navigasi breadcrumb di blog.Membuat navigasi breadcrumb adalah salah satu navigasi yang saat ini banyak dipakai oleh hampir semua blog maupun website.Keberadaan Navigasi breadcrumb yang digunakan  sebagai ‘user interface’ yang memungkinkan pengunjung  dapat mengetahui halaman artikel yang sedang mereka baca.Biasanya Navigasi breadcrumb berbentuk tulisan/link yg menjelaskan posisi dan keberadaan sebuah artikel tetapi ada juga yang berbentuk gambar .Navigasi breadcrumb biasanya terdiri dari Halaman depan, Label/Kategori dan Isi artikel dan biasnya dipisahkan dengan  tanda >> atau tanda >.Contoh navigasinya seperti tulisan dibawah ini::
Halaman depan > Label/Kategori > Isi Artikel.
Bagian Halaman depan dan Label akan dpasang  link yg sebagai tombol kembali supaya  memudahkan pengunjung  blog dalam memilih Artikel yang lain.Ok sobat Darmanto semua,yok langsung saja saya bagikan catatan Cara membuat navigasi breadcrumb diblog sebagai berikut ini.Langkah yang pertama adalah:
1.Login ke dasbor  blogger
2.Klik Rancangan
3.Lalu pilih Edit HTML
4.Dan jangan lupa Expand Widget Templates
Copy kode CSS dibawah ini dan pastekan sebelum kode ]]></b:skin>
#breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:10px;
line-height: 1.4em;
border-bottom:1px dotted #CCCCCC;Setelah itu cari kode  <b:if cond=’data:post.title’>  dan pastekan kode berikut ini diatasnya.Bila ada dua kode,moke pastekan saja di kode yang pertama:

<b:if cond=’data:blog.homepageUrl == data:blog.url’> <b:else/> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <div class=’breadcrumbs’> Browse &gt; <a expr:href=’data:blog.homepageUrl’>Home</a> &gt; <b:if cond=’data:post.labels’> <b:loop values=’data:post.labels’ var=’label’> <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a> <b:if cond=’data:label.isLast != &quot;true&quot;’> , </b:if> </b:loop> </b:if> &gt; <data:post.title/></div> </b:if> </b:if>
·         Terakhir lakukan pratinjau dulu,bila berhasil maka simpan  template.Ok sobat semua,itulah catatan saya mengenai Cara membuat navigasi breadcrumb di blog.Semoga berhasil dan bermanfaat.
Diposting oleh

Owner CV. Studio Web, sebuah perusahaan jasa pembuatan website SEO, jasa desain blog, google adwords, jasa SEO profesional. Hubungi CS Kami telpon/SMS/WA: 082310361484 (Puspa) untuk respon layanan cepat

Belum ada Komentar untuk Cara Membuat Navigasi Breadcrumb di Blog

Silahkan tulis komentar Anda

Your email address will not be published. Required fields are marked *

*

a Artikel Terkait Cara Membuat Navigasi Breadcrumb di Blog

Cara Membuat Komentar Admin Blog Berbeda Warna

Cara Membuat Komentar Admin Blog Berbeda Warna

T 7 July 2012F A Darmanto SEO

Cara membuat komentar Admin blog berbeda warna pada Threaded Comment.Threaded Comment atau Sistem Komentar Baru Blogger dengan Reply adalah penerapan sistem komentar baru sudah di terapkan oleh blogger.com.Dari model komentar seperti itu,tentunya para sobat mungkin ada yang ingin membuat komentar... Selengkapnya

Cara Membuat Artikel Tidak Bisa di Komentari

Cara Membuat Artikel Tidak Bisa di Komentari

T 4 August 2013F , A Darmanto SEO

Terkadang bagi sebagian blogger ada yang ingin membuat Artikel tidak bisa di komentari.Nah bagaimana sie cara membuat artikel tidak bisa di komentari? Pertanyaan ini sudah lama di request oleh sobat Darmanto dan baru pada catatan kali ini saya sempat membuatkan... Selengkapnya

Membuat Recent Post Yang Menarik

Membuat Recent Post Yang Menarik

T 17 July 2012F A Darmanto SEO

Membuat Recent Post Yang menarik.Membuat Recent post atau postingan terakhir adalah salah satu cara agar beberapa postingan terakhir blog kita bisa di ketahui oleh para pengunjung blog kita.Biasanya pada sebuah blog,widget recent post adalah salah satu widget favorit yang banyak... Selengkapnya

+ SIDEBAR

Ada Pertanyaan? Silahkan hubungi customer service kami untuk mendapatkan informasi lebih lengkap mengenai jasa/produk kami.