Halaman blog ini akan terus mengalami perubahan dan akan terus disempurnakan. Penambahan artikel serta konten-konten terbaru termasuk driver, game dan software terbaru akan terus dilakukan. Tampilan akan lebih optimal jika anda menggunakan Mozilla Firefox Internet Browser. Jangan Lupa Install Adobe Flash Player dan Java Runtime Environment agar hasil lebih baik.
Download Free & Full Version Software hanya di sini yang paling seru!
--> Pelajari Cara Download di Web ini <--

Membuat Navigasi Breadcrumb

Saya telah memasang Navigasi Breadcrumb pada blgo saya. Cukup sederhana sih sebenarnya tapi navigasi ini sangat membantu untuk menemukan artikel dan mengetahui dimana letak halaman yang sedang dikunjungi.

Navigasi Breadcrumb sangat mirip fungsinya dengan address bar pada windows explorer, namun pada Navigasi Breadcrumb kita tidak dapat menuliskan alamat yang akan dituju secara manual.

Untuk membuatnya login ke akun blogger anda. Masuk ke bagian Design, Edit html kemudian cari kode seperti dibawah ini (sesuai dengan template yang anda gunakan):

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */


Letakkan kode CSS berikut dibawah kode tersebut.
Kode CSS-nya:
.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

Sehingga kodenya tampak seperti ini:
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */
/* Breadcrumb
========================== */
.breadcrumb {
padding:5px 5px 5px 0px; 
margin: 0px 0px 10px 0px; 
font-size:90%; 
line-height: 1.2em; 
border-bottom:3px double #e6e4e3;
}

Selanjutnya cari kode <b:if cond='data:post.title'> dan pasang kode breadcrumb ini di bawahnya:
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

Kurang-lebihnya peletakan kode adalah seperti ini,
<b:if cond='data:post.title'>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<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>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

Save template dan lihat hasilnya!

Anda dapat melukukan modifikasi sendiri terhadap kode tersebut, sehingga anda dapat menciptakan kreasi baru sesuai dengan keinginan anda. Semoga bermanfaat!

0 comments:

Posting Komentar