Menambah Avatar ( Photo ) Di Setiap Judul Posting

Wednesday, February 21, 2007

Kalau lagi malas2nya semua jadi mempet..mau nulis ngak ada ide..di paksain juga nantinya tidak imajinatif dan terkesan asjad alias asal jadi..sambil merem melek,-ti peperekeut,…. atau mencari ruang dan suasana yang imaginer meminjam istilah sastrawan tetep saja nihil :-(…walaupun pada kenyataanya tulisan itu sendiri hanya untuk komsumsi pribadi,- namanya juga daeri.;-)
Namun karena takut boring atau bete,- sambil menunggu datang nya ilham, ane coba2 permak ini blog, dengan ilmu dan kemampuan bahasa yang terbatas tentunya.:-$ Ternyata betul lho, mengedit itu emang pekerjaan yang mengasyikan,- kayaknya ane sudah ketularan gilenya om jhoni yang selalu menutak-atik blognya, sampai pabalatak tah blog na teh.
Salah satunya yang menarik dari pekerjaan mengedit, atau ane lebih suka menyebutnya mempermak blog, ialah ketika ane gagal dalam mengeksekusi bahasa html atau css sesuai yang kita inginkan. Semakin gagal semakin mengasyikan,- sampai kesetanan lupa sholat, lupa makan, lupa tidur, lupa kalau layanan speedy ane sudah Over Quota … tapi anehnya ngak lupa sama utang mah.
Contohnya hasil dari meng Make Over ane punya blog adalah di setiap judul, ane kasih icon kepala ane, - bukan mau narsis lho, cuman sayang wajah segini gantenganya, sayang kalau ngak di mangfaatin ( hix..hix…hix..).
Kalau sudah berhasil lega rasanya,- sama persis nikmanya ketika kita buang hajat yang kebelet :-D…namun prosesnya itu sampai dua hari, gagal dan gagal maning :-( maklumlah rada gatek sih-
Oke deh, ane akan kasih lihat cara mengeditnya,- mudah2an ada yang lebih tahu cara mengeditnya ,dengan cara yang lebih gampang dari ini…dan yang perlu di ingat saya pake bloger beta lho.
Beginilah ane mengeditnya .pertama karena ingin menambahkan icon kecil di setiap judul, maka yang ane cari adalah bagian judul postnya, biasanya sih sintak css nya di tulis begini :

.post {
margin:8px 0 24px 0;
}
.post h3 {
font-weight:normal;
font-size:140%;
color:$postTitleColor;
margin:0;
padding:0;

itu aturan umum kode blog css yang ane punya , kemudian karena ane kepingin ada icon kecil di setipa judulnya ane tambahin kode css nya seperti ini :

background:url("http://i120.photobucket.com/albums/o190/jaloewig/tweety00.gif") no-repeat 3px .0em;

jadi kalau di gabungin seperni ini ;

.post {
margin:8px 0 24px 0;
}
.post h3 {
font-weight:normal;
background:url("http://i120.photobucket.com/albums/o190/jaloewig/tweety00.gif") no-repeat 3px .0em;
font-size:140%;
color:$postTitleColor;
margin:0;
padding:2px 14px 2px 29px;

kemudian yang perlu di perhatikan adalah nilai padding dari judul itu, coba lihat nilai padding kode awal dan setelah digabungin, berubah kan nilainya.
Dan perlu di perhatikan juga nilai kode dari icon nya, yakni ; 3 px menunjukan margin kiri dan 0em rata atas, artinya kalau mau di kebawahin icon nya tinggal ditambah saja nilainya.
Begitulah kira2 cara mengedit ane punya blog. Dan ane tidak lupa nyiapin icon nya yang di buat dari photoshop dengan ukuran tinggi 15 px dan lebar 15 px. ;-)

5 comments:

cun said...

wuah!!! elmu neh! nemu elmu!!! ... sekalian aku pinjam pakai boleh? sekalian aku link yah?
*nunggu jawaban dari Jaloe* ...

Anonymous said...

hehehe.. itu asyiknya ngedit ya? kalo gagal bisa gak berhenti, cari sampe ketemu.

wah ilmunya boleh nih dicoba, thanks.

EnDah Rezeki said...

Asyikk... dah aku coba, makasih. bagus banget. tinggal yang read morenya itu gimana? ajarin dunk....

Nieke,, said...

hurray!!! akhirnya aku bisa..!!! duh, makasie ya mas jaloee atas ilmunya,, sering2 d ;) hehe,, xD

Anonymous said...

pengen coba ah....