Wednesday, November 3, 2010

Icon Comel Di Post Title Kamu!

Eh eh excitednya nak buat tutorial. Hari itu di formspring ada budak comel request macamana nak cantikkan blog.I pun bukanlah pandai sangat tapi kalau berlakon macam pandai tu senang saja. Haha. Jadi pada hari ini Kakak Bunga (wah, kakak terus!) ingin mengajarkan kepada adik - adik semua bagaimana mahu meletak icon comel di post title blog adik - adik semua! (=_=)"

Perhatikan post title Kakak Bunga ;


Jadi objektif kita pada hari ini adalah ingin menghasilkan post title begitu ya. Ada gambar bintang, gambar ayam, gambar nenek kita pun boleh.

Baiklah adik - adik, begini caranya, pergi ke Dashboard ►Layout ► Edit HTML ►lepas itu tick di box EXPAND WIDGET TEMPLATE. Lepas itu tekan Ctrl+F dan carikan code ini :




Bila sudah jumpa, adik - adik pastekan code ini ;


Selepas code;
Berwarna ungu kalau mahu gambar berada di atas tajuk
Berwarna merah kalau mahu gambar berada di kiri tajuk
Berwarna biru kalau mahu gambar berada di kanan tajuk
Berwarna hijau kalau mahu gambar berada di bawah tajuk

Ok, ini Kakak Bunga bagi contoh code yang bakal kelihatan sekiranya Kakak Bunga mahukan gambar icon comel berada di kiri post title ya ;


Ha. Mudah bukan. Sebelum save sebarang perubahan backup template dahulu atau preview dahulu untuk melihat hasilnya. Selamat mencuba adik -adik!! Tinggalkan komen kalau baik hati. (T__T)

credit : BLOGBULK

24 comments :

Saya Markonah Kepoh! said...

oh! senangnya. sungguhlah saya ni kurang ilmu. thnx cikgu.

p/s: cikgu kiut!

Cik Puan Bunga said...

sila cuba buat yaa! (:

I pun belajar dari bloggers lain! hihi!

nurulazham said...

Eii..benci!
rasanya dah ikot sepenuh hati, tapi tak jadi..kesian saya! huhu

Cik Puan Bunga said...

mula2 memang begitu, lama - lama nanti ia akan berjaya!! cuba lagi! cuba lagiii!

nurulazham said...

yatt, cuba tengok..ikon tu jadi kat atas tajuk..dah ikut mcm yatt bagi tu...tak jadi la...

nurulazham said...

yatt, cuba tengok..ikon tu jadi kat atas tajuk..dah ikut mcm yatt bagi tu...tak jadi la...

Cik Puan Bunga said...

Dah tengok. (cute jugak walaupun dia bertenggek kat atas.haha) pic tu besar sangat kot? cuba pg glitter graphics amik gif yang mini.. yat rasa sebab gambar tu besar kot... kot la.. sebab yat punya bintang kan tecik jep.huhuhu! by the way blog sekarang sudah suci murni adabi yeeee! santekkkk!

FaTmA LiYaNa said...

k.bunge..mane nak dapat code gambo yang kite nak2?..

Cik Puan Bunga said...

http://www.glitter-graphics.com/

(:

KeNanGan MengGamiT kALbU said...

saya buat tak jadi... die hbq... klu img.. kne > @ />

Cik Puan Bunga said...

aikkk?serious??yang lain berjaya?anda tidak - mengapa???? sudah expand widget???

nOah said...

akak. tak jumpalah code tuh..camne ekh??

oya nazira said...

erm..tak boleh...dok error ja... camna ek??

oya nazira said...

setiap kali buat..die dk tulis error ja....camna ek??

Cik Puan Bunga said...

noah - jangan lupa tick kat box expand widget template (:

oya - error??? code tu jumpa tak??ok oya bagi akak url gambar yg oya nak letak, nanti akak buatkan code tu (:

FaraSyeera said...

kakak, saye sudah buat. tapi tak menjadi. makenye boleh tak kakak bunga tlg ? isk isk.

http://www.glitter-graphics.com/graphics/66176


mahu image yg ini....

Cik Puan Bunga said...

Bagi emel...

FaraSyeera said...

wuwuwu...dah jadi yayyy! godek godek dpt juge. =)

Cik Puan Bunga said...

Congrats! (:

Jiaa :) said...

tolong sayaaaaaa . tak dapat erorr jee .boleh tolong tak ? :(

Cik Puan Bunga said...

@Jiaa :)Bg code pics yang nak diletak kay. emelkan kat akak flowerbabebee@yahoo.com

Jiaa :) said...

Dah hantar email . hope boleh tolong :(

Sue Hamiza said...

wah teacher yatt kenape sy buat xdpt2..X dpt cari code tu.. dah tick expand widget pun x boleh.:( Ouh.

Cik Puan Bunga said...

@Sue HamizaCuba code neh kay :

.post h3 {
margin:15px 0 0px;
padding:0px 0 7px 30px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
font: $posttitlefont;
text-shadow: 2px 2px 3px #333;
background:url("URL GAMBAR AWAK") top left no-repeat;
}