Tambahan Icon Pada Post Footer

Posted By anasku
Terinspirasi dari blognya pencuri code yang bernuansa Seo Contest sapa lagi kalau bukan blognya kang noval, dalam blog kang noval tersebut post-footernya menarik karena ada tambahan Iconya, jadi post footer akan kelihatan sedikit lebih expressif.
Jika belum tau apa itu post footer area lihat aja gambar diatas, Nah post footer adalah informasi dari postingan yang kita tulis di blogger yang tempatnya dibawah postingan kita, dalam post footer area terdapat infromasi-informasi tentang postingan yang ada diatasnya, misalnya siapa penulisnya, jam berapa dipublikasikan, sudah ada berapa komentar, artikel tersebut masuk dalam kategori apa dan juga yang lainya.

Gimana apakah Anda ingin membuat post footer area Anda lebih expressif dengan tambahan Icon?
Ikuti petualangan saya dibawah ini.

Seperti biasa yaitu masuk menu Layout (tata letak) lalu masuk meni Edit HTML.

taruh code CSS dibawah ini diatas code ]]></b:skin>




/* post fotter
---------------------------*/
.post-author {
background: url(http://i296.photobucket.com/albums/mm169/anasku/profile.gif) no-repeat;
padding-left: 20px;
color: #c70823;}
.post-timestamp {
background: url(http://i296.photobucket.com/albums/mm169/anasku/jam.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-labels {
background: url(http://i296.photobucket.com/albums/mm169/anasku/forder-biru.png) no-repeat;
padding-left: 25px; margin-left: 10px;
}
.comment-link {
background: url(http://i296.photobucket.com/albums/mm169/anasku/comment-icon.gif) no-repeat;
padding-left: 15px; margin-left: 10px;
}
.post-backlinks {
background: url(http://i296.photobucket.com/albums/mm169/anasku/favorit.gif) no-repeat;
padding-left: 15px;
}

Kalau sudah tinggal Save dan jadi deh...

Nah code yang berwarna merah diatas adalah URL gambar... bisa kamu ganti dengan gambar sendiri, ingat sesuaikan ukuranya..

Nah gimana caranya gampang kan??

jika ada pertanyaan silahkan tanya aja gak usah malu-malu okey.
Artikel Terkait untuk "Tambahan Icon Pada Post Footer"


29 comments:

Bontangers said...

pertamaaaax,....
keyennn,...

Bontangers said...

Keep post bro,..
aku selalu menunggu post baru mu,...
success!

Jaloee said...

yuuuu.. mantep lanjut terus

DavidMIqbal said...

Wah bagus nech buat nambah ilmu..he...he...

Piyen said...

keren.... keren...

Anonymous said...

anas, ini khusus untuk blogspot?

Unknown said...

ijin nandain ilmunya dengan ngebookmark Suhu...

Anasku said...

@cena
Iya ini buat blogspot... kan yang full edit HTMLnya hanya blogspot... yg gratisan... :D

fansblogs said...

Hi.. kami mengundang anda untuk mengelola komunitas yang kami dirikan Di Sini

Anonymous said...

lanjut lanjut :)

Anonymous said...

Sip sip sip
Boleh langsung dicoba?--nunggu permittion dulu :D

Kristina Dian Safitry said...

desainan yang cantik....

Testing Blog ni lho! said...

jazakallahu khairan katsira

Anonymous said...

waduh maaf ya templatenya udah saya ganti :D tapi di blog utama masih ada ko :D makasih linkbacknya :D.. maaf benar2 ga tahu jadi ya templatenya aku rubah deh :D

nduge's said...

nuhun pisan akang guru...

baru aku coba2 semua jurus2 dari akang guru

semoga nanti bisa KATAM

Arie Prastyo said...

om, ganti icon pada Post foto gimana??
maunya sih aq ganti pkek foto aq..
gmna??
tolong kirim jawabannya di e-mail aq yah...
arie_zona24@yahoo.co.id
Thanks sebelome.................http://www.geocities.com/luq_anas/smiley/smiley-wink.gif

Anonymous said...

Siiip nih postingannya..!!!!

Rey said...

mantap, tambah ilmu lg neh...
klo mau hanya tulisan saja yang keluar gimana bro..??? Tolong ya...
Trims b4

HEXAGRAM said...

boz mau minta tolong koq blog ku ga bisa ya coment nya..????
:J
cara ngaturnya gimana...???
ni alamat blog ku
http://hexagram-konveksi.blogspot.com/

rizeman said...

Makasih bro buat artikelnya yg keren... :D

FourTeen said...

Bagus mas..
Perlu dicoba nie!!
Makasih mas buat tutornya nie!

M. Ihsan said...

makasih.... :)

M. Ihsan said...

makasih :)

Kitty said...

thnks

music improvisation said...

bgus juga klo ditambah icon2 semacam itu..

Suka Suka Blog said...

Bisa diaply disemua template ga bos?

Unknown said...

thank sob,,

http://rama999.blogspot.com

obat kutil kelamin said...

kalo navigasi gimana ya gan

obat kutil kelamin ampuh said...

ok gan dicoba, makasih yahhh

Post a Comment

 

Site Info

Add to Technorati Favorites
Visitor Online
Check PageRank

Recent Comments

Tutorial Jitu - Blog Info, Gadget-Widget, Blogspot tutorial, blog hack, free template, SEO And Blog tips : Admin By Luqman Khoirul Anas