Cara Memperganteng Blog Pager/Navigasi Halaman Blogspot
Untuk menciptakan navigasi halaman blog dengan tampilan yang luar biasa ganteng seperti ini, pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML.
Cari kode yang tampak seperti ini:
]]></b:skin>
atau seperti ini:
</style>
Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
#blog-pager {line-height:40px !important}
#blog-pager-older-link a,
#blog-pager-newer-link a,
#blog-pager a.home-link {
padding:5px 10px;
margin:2px 7px;
text-align:center;
background:#278100 url('http://4.bp.blogspot.com/-445SkQ6EG9g/TkIRpduys0I/AAAAAAAAAqI/1uUZnx_-3FY/s1600/rumput.png') repeat-x 0 -1px;
border:2px solid white;
text-decoration:none;
font:normal bold 13px Arial,Sans-Serif;
color:white;
text-shadow:1px 1px 1px #278100,0 0 5px #278100;
-webkit-box-shadow:0 1px 3px #aaa;
-moz-box-shadow:0 1px 2px #aaa;
box-shadow:0 1px 2px #aaa;
-webkit-border-radius:.5em;
-moz-border-radius:.5em;
border-radius:.5em;
}
#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
#blog-pager a.home-link:hover {
position:relative;
top:-1px;
color:black;
background-position:0 0;
}
#blog-pager-older-link a:active,
#blog-pager-newer-link a:active,
a.home-link:active {
position:relative;
top:1px;
background-position:0 -2px;
}
Klik Simpan Template.
Warna dominan yang disarankan untuk mengimbangi tampilannya adalah: #f5f8d8
Hasil tampilan akhirnya kira-kira akan tampak seperti ini:
18 Comments:
ane mmintany dari tombol k text =="
mminta tombol k text ini mah text k tombol haha =="
bingung mas ==" mengembalikan logika gmna sy gk ahli dalam css
Wah mas ini ada2 aja kreasinya, krenzz banget nih mas, rumpur aja bisa jd backgroundnya, hehe..!!
mas kalo tulisan posting lama di ganti gambar sajo gimana caranya?
@Bayu Aldi Yansyah: Pelajari dulu artikel ini » Klik!
Lalu ganti kata berikutnya/sebelumnya menjadi <img src='URL Gambar' />
siapa yang mau bantu masangin huaaaaaaaaaaaa :'( #nangis darah
hmmm sering liat ahh -_-
Boleh juga tuh, tinggal ganti gambar atau background yang kita suka.
aq pake ya sob..., thx ilmux gan :)
mas, saya mau bertanya...
cara ngilangin "Widget by Abu Farhan" di widget paginator 3000 nya itu gimana yah? Bantuannya yah :)
@Farid Wajdi Kardbri Kurang tahu. Mungkin pake line-height:
#blog-pager {
line-height:30px;
overflow:hidden;
}
udah ketemu mas, cuma nambahin kode :
a[href="http://www.abu-farhan.com"]{display:none !important;}
}
di atas ]]>
wah,,kalau ane backgroundnya ane kasih dengan warna gradasi,,soalnya kalau pakai gambar loadingnya lama B)
SITUS TERBAIK MENURUT SAYA MENGENAI TUTORIAL,SEMUANYA WORK TUTORIALNYA PAKE HATI :-bd SALUT BANG. Jangan Lupa Jalan Kesini http://bram-movie.blogspot.com/ semuanya Tutor dari Situs ini 0:)
gan kalau pengen mindahin pager nya di bawah postingan gmn ? makasih ^_^
Tambahkan kode ini di atas <div class="comments" id="comments">
<b:include name='mobile-nextprev'/>
oke gan makasih nanti saya coba :-bd
Post a Comment
<< Home