Menghias Breadcrumb Navigasi dengan Tambahan CSS

Diposting oleh putu on Senin, 03 Mei 2010


Informasi terbaru Menghias Breadcrumb Navigasi dengan Tambahan CSS
Navigasi Breadcrumb tidak hanya untuk menambah ke elokan sebuah blog, menurut banyak ahli SEO, Search Engine Optimasi, Navigasi Breadcrumb selain memberikan keterangan kepada pembaca dimana posisi artikel yg dibacanya, juga menaikkan posisi  link link sebuah blog di Search Engine Google.
Itu alasan mengapa Breadcrumb wajib dipasang oleh sebagian blogger, selain alasan untuk menambah indah halaman blog. Namun apa pun itu, postingan tentang Breadcrumb ini untuk melanjutkan Postingan sebelumnya, Membuat Navigasi Breadcrumb Blog Yang Tepat.

Disana sudah kita bahas panjang lebar tentang cara membuat Breadcrumb yang tepat. Namun di artikel tersebut belum dijelaskan cara memperindah Breadcrumb Navigasi yg dibuat, yg ada hanya satu peta link tanpa ada garis penghias dibawahnya atau sebagainya.

Jika tutorial Membuat Navigasi Breadcrumb Blog Yang Tepat kemarin di praktekan, maka hasilnya  Breadcrumb yg muncul tanpa hiasanya dibawahnya. Karna di Tutorial kemarin tidak ada penambahan kode CSS. Nah inti dari postigan hari ini adalah menghias Breadcrumb yg kemarin kita bahas.
Untuk menampilkan Bredcrumb ,Letakan kode berwarna merah dibawah ini dibawah kode <b:if cond='data:post.title'> pada template blog.

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>Home</a> »
<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 != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if>

Untuk menambah garis dibawah Breadcrumb, seperti dilakukan oleh banyak blogger, tambahkan kode CSS dibawah ini sebelum kode ]]></b:skin> 
.posisi {
width:100%;
height:auto;
margin-bottom:5px; /* jarak antara Breadcrumb dengan Judul posting */
float:left;
font-size:13px ;
border-bottom:3px double #dcdcdc; /* jenis border, tebal border, dan warna border */
}

catatan: border-bottom:3px double #dcdcdc; adalah jenis garis/border. Double adalah garis lipat. untuk tutotial Border lengkap bisa baca disini.

Memanggil CSS yg kita buat untuk Breadcrumb. Tambahkan HTML dari CSS yang baru kita buat, seperti ini >> <span class='posisi'></span>. Kemudian, Apitlah HTML Breadcrumb dengan kode barusan hingga menjadi seperi dibawah ini.
<b:if cond='data:post.title'>
<span class='posisi'><b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>Home</a> »
<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 != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if></span>

Namun, hiasan yg kita buat sudah terlihat pada halaman utama, padahal Breadcrumb baru tampilnya setelah Next Page, ini malah akan membuat halaman utama jadi ada garis tak jelas diatas judul postingan.

Untuk itulah perlu ditambahkan kode yang akan membuat CSS baru akan dipanggil ketika pada halaman selanjutnya, kode yang digunakan adalah seperti dibawah :

<b:if cond='data:blog.pageType == &quot;item&quot;'></b:if> .
Letakan hingga menjadi seperti ini:

<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><span class='posisi'><b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>Home</a> »
<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 != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</b:if></b:if></span>

Perhatikan masing masing peletakan dengan benar, atau template tidak bisa di tutup dan tak menjadi. Untuk menambah warna latar belakang Breadcrumb bisa tambahkan kode background seperti ini: background:warna backgroud;..
Oke selamat mencoba..
Tinggalkan komentar anda tentang Menghias Breadcrumb Navigasi dengan Tambahan CSS

0 komentar:

Posting Komentar