Modifikasi breadcrumbs blogspot
Merasa bosan dengan tampilan navigasi breadcrumb yang begitu-begitu saja? Dengan memanfaatkan deklarasi
position:fixed;
kita bisa membuat sebuah objek (dalam hal ini navigasi breadcrumb) menjadi melayang. Untuk membuatnya lakukan beberapa langkah berikut ini:- Masuk ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
- Salin kode pemodel di bawah ini, kemudian letakkan di atas kode
]]></b:skin>
atau</style>
:.alaihumcrumb { position:fixed; z-index:1000; top:0; left:0; background:#333; width:98%; color:#ccc; border-bottom:2px solid #999; padding:1px 1% 1px 1%; -webkit-box-shadow:0 0 7px #000; -moz-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; } .alaihumcrumb a, .alaihumcrumb a:visited, .alaihumcrumb a:active { color:#fff; } .alaihumcrumb span.kanan { float:right; }
- Kemudian carilah kode yang tampak seperti ini:
<a expr:name='data:post.id'/>
TIP: tekan CTRL + F kemudian ketik expr:name='data:post.id' untuk mempermudah pencarian.
Salin kode di bawah ini, kemudian letakkan tepat di atas kode<a expr:name='data:post.id'/>
:<b:if cond='data:blog.pageType == "item"'> <div class='alaihumcrumb'> <a expr:href='data:blog.homepageUrl'>Beranda</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/> <span class='kanan'> Konten Lain di Sini </span> </div> </b:if>
Dalam sebuah template blogspot terkadang terdapat satu atau dua buah kode<a expr:name='data:post.id'/>
. Jika apa yang telah kamu lakukan tidak menunjukkan hasil, cobalah untuk meletakkan kode tersebut di atas kode<a expr:name='data:post.id'/>
yang kamu temukan berikutnya. - Klik Simpan Template.
Sedikit Penyesuaian:
- Kamu bisa mengganti
Beranda
denganHome
atau yang lainnya. Letakkan juga konten lain seperti jam dinding, jumlah komentar, jumlah posting atau yang lainnya di dalam wilayah kekuasaan<span class='kanan'> ... </span>
keren sob Breadcrumbnya, ijin cobain sob
BalasHapus