Tutorial Letak Icon Comel Pada Sidebar Blog (Bullet List) -UPDATE
Tutorial lagi. Harap korang suka tutorial kali ni request dari FIZ yang nak tahu macam mana nak letak icon yang comel atau bergerak/animation pada list bullet sidebar. List bullet sidebar tue macam mana ek?? Haa ni contohnya dalam box kaler biru tue;
STEP 1
DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE
***Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.
STEP 2
Klik “CTRL+F” ataupun “F3” untuk cari code ni;
.sidebar ul li {
atau
.sidebar li {
STEP 3
Contoh full coding seperti dibawah tapi setiap orang maybe akan berlainan coding sikit ye. Pada url yang di boldkan tue korang letak la url image yang korang suka tue. Korang boleh google untuk icon animation atau cari kat GLITTER-GRAPHIC.COM.
.sidebar ul li {background:url(“http://dl7.glitter-graphics.net/pub/718/718447wgph44su7s.gif”) no-repeat 2px .25em;margin:0;padding:0 0 3px 16px;margin-bottom:2px;text-indent:7px;line-height:1.3em;}
atau
.sidebar li {background:url(“http://dl7.glitter-graphics.net/pub/718/718447wgph44su7s.gif“) no-repeat 2px .25em;color:#000000;border-bottom:2px solid #FFFFFF;border-top:2px solid #FFFFFF;border-right:2px solid #FFFFFF;border-left:2px solid #FFFFFF;margin:0;}
***incase pada coding korang takde code background:url, korang just tambah je code tue di dalam coding sidebar { }
***cari size yang kecil supaya bila masuk icon bullet pada sidebar tue comel 🙂
STEP 4
Klik Preview dan save jika tiada sebarang error pada coding ye
STEP 5
Tak habis lagi tau. Kalau korang nak icon tue terpapar pada sidebar, ada satu lagi step iaitu pada sidebar bloglist korang tue iaitu untick pada icon. Stepnya;
DASHBOARD>DESIGN>EDIT TEMPLATE>BLOGLIST GADGET KORANG>untick pada ICON>SAVE>SAVE
Selamat Mencuba ye! Sesiapa nak request tutorial boleh tapi biarlah yang ada/pernah ada pada blog cik tom. Jangan pulak korang request something yang takde blog pada blog ni ye. Kerana segala tutorial di buat based on experience and try error.
UPDATE (27/12/2010, 4.00pm)
pada yang tak jumpa langsung coding sidebar tue…cuba step ni pulak;
STEP 1
klik ctrl+f atau F3 untuk cari ".post blockquote {"
STEP 2
sila copy code+paste code di bawah sebelum code step 1;
.sidebar ul li {background:url("http://dl7.glitter-graphics.net/pub/718/718447wgph44su7s.gif") no-repeat 2px .25em;margin:0;padding:0 0 3px 16px;margin-bottom:2px;text-indent:7px;line-height:1.3em;}
***Pada url yang di boldkan tue korang letak la url image yang korang suka tue.
STEP 3
preview n save kalau tiada error coding.
****************************************
selamat mencuba…tapi ingat backup dulu sebelum buat incase tak menjadi.. Kalau still tak boleh jugak cik tom surrender sebab dah pening tengok coding korang. huk3 ;))
p/s: pada yang dah request tutorial tunggu ye. entry akan datang.
p/s2: dah jadi blog tutorial pulak. Takpelah dari takde idea nak update kan 🙂
Sharing is caring
thank you cik tom. miza nak cuba lah. hehe 🙂
bagus gak nie.. nanti nak cuba lah
ml da cari..tp xde pon .sidebar ul li atau .sidebar li
=(
mybe html ml bbeza.isk2
bgus cik Tom.
Akak nak try buat jugak…tapi tengah cari templete dan header yg baru….kalu ader masa…he he he…
cayalah ciktom. pandai main edit2. bagus2. keep it up.
hebat cik tom ni..
wah..ramai jugak orang request..ok ferry nak request jugakk!!
cara-cara membuat template sendiri..tom study je ye..nanti ferry tinggal tiru je..
cik tom… thanks for the tips… really help me!! 😀
wahhh~ thank you cik tom~ ^_^
x jumpe pun code tuh..
cm ne ni.. adeih. =.=
panjang lak step dia..yg semalam pun tak terbuat2 lagik..hehe
nati akak nk suh ciktom tulun buat bole??..hehe..akak kn fobia bab2 expand wigdet nih..huhu
dni nak try 😀
cik tom.. mummy fara buat tak jadi la.. huhuhu.. macam mana nie? tolong leh?
comel icon tu~
akk…x de la yg code first uh .sidebar li { atau satu agi uh…
nak cube nak cube! hehe 😀
p/s:ciktom dapat award tau..meh ambik kat blog saya k? 🙂
http://lurvemyblog.blogspot.com/2010/12/good-friends-are-always-close-to-heart.html
ciktom..nak tanye kalau gune template designer mmg takleh nak buat ke tutorial ni?sbb saya cari .sidebar li { tak jumpe pun..yg kod lg satu tu pun tak jumpe. 🙁
cik tom mcm na nk yg kepala dia 2????
heheheheh.Harap2 cik tom paham.sya xtaw nk ckp mcm na la >_<
heheh thanx cik tom nk cba gakla nt..
nk tnye caner nk wt icon yg gerak2 dlm shoutmix, da lme cbe tp xleyh jgk huuu
wahhh…thank u cik tom yg disayangi…hihi…
cik tom, amni nyer phone num…
016-8789437… sorry lambat bagitau.. sibuk sikit bila dah weekend.. hehe
leh terjah selalu lagi pun tengah cari new job heehe
rasanya mummy pakai template designer kot, sebab tu tak leh buat.. dua2 code yang cik tom bagi tu pun tak jumpa, yang jumpa lain.. cuba buat tapi tak jadi..
ada lapang nanti akak nak cuba la..
nak cuba tutorial yang ada ni kena betul2 lapang..
tak boleh buat dalam keadaan tergesa2 kan cik tom..
cik tom mmg best
xlokek ilmu
tqvm cik tom leh kak nor praktikkan
suka tuto nie,..!naty nak try buat lahh,..hehe~
thankx cik tom,..!
pada yang tak jumpa langsung coding sidebar tue…cuba step ni pulak;
step 1
klik ctrl+f atau F3 untuk cari ".post blockquote {"
step 2
sila copy code+paste code di bawah sebelum code step 1;
.sidebar ul li {
background:url("http://dl7.glitter-graphics.net/pub/718/718447wgph44su7s.gif"😉 no-repeat 2px .25em;margin:0;padding:0 0 3px 16px;margin-bottom:2px;text-indent:7px;line-height:1.3em;}
step 3
preview n save kalau tiada error coding.
selamat mencuba…tapi ingat backup dulu sebelum buat incase tak menjadi..selamat mencuba ye!!
da try buat da..
tengs for da tips..
b'guna sngt2..
🙂
cik tom..tiga2 kod yg cik tom bg..tiga2 sab x jumpe.. 🙁
akak tak berani la ciktom..huhu,nnt benda lain lak jadi..hehe
Cik tom.. nanti mummy cuba yer.. Kalau tak leh jugak.. surrender la mummy nampaknya.. huhuhu.. anyway thanks for the tutorial..
wah..best la tuto ni cik tom..hee
Tuk WP ada cik tom?
bagus2 ada tutor nie, lain kali bole cuba:)
cik tom semakin maju…best2!smt maju jaya…lama tak singgah sini..
saya tak pandai edit template..tolonggg
psstt..saya ada rahsia
nice tutorial cik tom~
cik tom ! macam mane nak buat scroll untuk code banner ae ? ala ! macam cik tom buat untuk banner ciktom tu… paham la ! plzzzz ! sy tak tau nie…
argh!!!!
TIDAK!!!
SAYA DAH KETINGGALAN ZAMAN!!!
ciktom dah berwajah baru!!!
argh!!!!
SYABAS CIKTOM!
cikTom.. sy teringin nih nak make up blog comel2. tapi surrender lah sebab selalu tewas ngan coding2. haihhh~
salute la kat cikTom. keep it up ye 🙂
terbaikla cik tom~! 😀
yeayyy nanti buleh cuba 🙂
Hoho..
Terbaek dr cik Tom..
heee.mekasih cik tom! nanti nak teghaii la jugak 🙂
salam
cik tonm lepas komen ek…
huhu
nice sharing cik tom
dah lama dah carik tutorial ni. thanks cik tom!
hye CT dah lunch ke blm?CT nti kite nk buat ye tutorial ni tp kena join segmen bor Ben dulu,jap lg kite dtg sini lg…huhu..
cik tom,kalau ikut code yg ciktom bagi 2,berjaya..tp sy cube crik code icon sndr..bile letak code yg sye jmp,bullet list 2 xkuar dkt sidebar..
ke sye slh amik code.hehe
ni code yg sye jmp dkt website yg ciktom bg
http://www.glitter-graphics.com/graphics/495759
salah ya ciktom?hehe..sye xtau nk amk code yg mane =p
hrp ciktom dpt bg tnjuk ajr..maaf ya sshkan ciktom
haaa~ nihla tuto yg sy tercari2~ tapi cik tom.. ketiga2 coding tuh sy xjumpa ..
dari :
.sidebar ul li {
.sidebar li {
.post blockquote {
tiga2 tuh xder.. cane? FYI saya gunakan template blogger awesome inc tuh.. pls pls pls ciktom~ 🙂
cik tom sy da pandai wt bnde ala yg banner tu.. tengs sebab tuto cik tom.. care2 ade pon.. sy nak curi banner ciktom okey ! bye !
xbuat lg nanti akak buat….
wa… nice.. nanti aibaks nak wat gak. kene cari gamba dulu ni..
ciktom..dah menjadik..yeayy!thanks tau. 😀
kagum la cik tom…nk bookmark dulu entry ni..nnti nk edit….nk wat entry ni gak leh? credit to cik tom…..
pada yang cakap ketiga2 coding still tak jumpa jugak tue…buat masa ni cik tom tekde penyelesaian masalah tue lagi ye…nati cik tom cuba cr..tp kalau x sorry ye…
@pearl jade: psl soalan pearl tue..mmg silap url yg pearl amik…url tue mesti ada "http;//" dan ".gif" kat belakang untuk icon animation dr glitter-graphic…sori busy..xsmpt nak bls satu2…huhu…
@decrewz: takdelah utk wp sebab cik tom lgsg xreti coding wp…sori ye…yg blogspot ni pun still merangkak..huhu
@shah noor: sorry tak faham la soalan shah noor??
@amna qadeeja: tutorial masukkan image shoutmix ada dalam list tutorial cik tom..cuba lihat ye…
erk 1 lagi cara yang maybe korang boleh cuba incase ke 3-3 code dalam entry tue takde ialah;
.sidebar ul li {
background:url("http://dl7.glitter-graphics.net/pub/718/718447wgph44su7s.gif"😉 no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}
sebelum code;
.sidebar h2 {
cuba buat..menjadi x??tp jgn lupa backup dl template tue sebelum mencuba dan 1lg…untick pd icon bloglist di gadget sidebar..xdpt jgk hurm..pening…hahahhaah..
cik tom! mekaseh sbb reply kat blog sy~ aa~ dh buat jadi! 😀
tapi icon tuh muncul kat semua widget kat sidebar.. bukan kat bloglist jer.. cane ek cik tom? srry susahkan cik~ haha 🙂
@mr.ix: boleh je..share la..
@burp: muncul semua??mmg la sbb tue kan bullet untuk sidebar..so pe2 yg ade kena mengena dgn code tue akan keluar..huhu..sori blur skang..nati kalau ade penyelesaian baru cik tom bgth ye…
Thanks for some quality points there. I am kind of new to online , so I printed this off to put in my file, any better way to go about keeping track of it then printing?
cik tom.kite wt jd..tp pic nyer ue brtindih ngn tulisan..pic yer ue bkn kt tepi list ue
@nabilah:
1) cuba cari gambar lain yg size kecil…
2) awk adjust sendiri saiz gmbr tue (kecilkan) guna software edit gmbr….
3) atau cuba try n error..adjust coding padding..ni cnth pd coding blog cik tom dari ;
padding:0 0 3px 16px;
ke ->
padding:0 5px 3px 16px;
code 5px tue boleh cuba adjust2 sehinggalah jarak icon dgn ayat ok dan tak bertindih lg..
p/s: sori lmbt reply
@nabilah: 3 cara yg cik tom tunjuk kat atas tue pilihan bg nabilah nak pilih mana satu yg mudah ye..slmt mencuba…
terima kasih cik Tom. akhirnya jd jgk 🙂
thanks cik tom…
Follow la saya erk..
Nice blog Cik Tom..
rajin2 komen kat post saya nanti yer..
trimas
cedih~~
dah buat tp tak berjaye pon
menarik..saya ada blogspot mahu juga sesekli ia bertukar wajah hee..
pasni blh ajar cam ner nak ubah header plk ya geeee
wah menarik nih.. ada masa nk try gak la..hehe
Jom baca entri terkini InGkLaTe …Aku Terima Nikahnya
selamat mencuba ye…boleh cuba time weekend..hee 🙂
Cik Tom, tengs sebab buat tutorial ni.
Saya dah cuba buat, dan dah menjadi…cuma nak tanya, camna nak ketengahkan sedikit icon comel tu, sbb macam terlindung sedikit.
Kalau Cik Tom x berapa faham soalan saya, boleh Cik Tom tengok di belog saya, sebab sy pun tatau nak explain camna.
http://yanfie.blogspot.com/
Tengs. ^_______^
Jom baca entri terkini Yanfie …♥ Serabut & Kusut ♥
salam, ciktom,,
tutorial ni sgt membantu ! trme asih 🙂
Jom baca entri terkini nadia …Renovate my blog
salam, ciktom,,
tutorial ni sgt membantu ! trme kasih 🙂
thanks! 😀
http://salwaismail.blogspot.com
ur wlcm 😉
kenapa saya buad tak boleh eh ? saya nakkkkkkkkk 🙁
Jom baca entri terkini maia maness …birthday boyy 😀
kat step no. berapa yang tak boleh buat??
comel2…camne nak buat mesej apabila orang na copy di entri…:)
minta tolong ye <3
Jom baca entri terkini waniey …Ha ha da dapat idea da…
Tutorial untuk disable right klik keluar alert..
STEP 1
Klik Dashboard –> Design –> Edit HTML –> Add a Gadjet –> HTML/Javascript
STEP 2
Copy Paste code kat bawah;
<script language="JavaScript">
<!–
var message="HARAP MAAF TAK BOLEH COPY!!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// –>
</script>
**perkataan “HARAP MAAF TAK BOLEH COPY!!” boleh ubah pada perkataan waniey suka..
STEP 3
Save dan lihat hasil..good luck!
salam..huhu tQ byk y asma blja kt blog cumel ni~
wslm..sama2 asma..
cik tom..kita xdpt cari la code url tu…da try tmbah tp still xjd..huhu…sdeynya… da cara laen lagi x???
kalau xjumpa cari code seakan2 code dalam entry ini..
Cik Tom, help me..x jumpe langsung kod sume tu..huhuhu sidebar li, sidebar ul, post blockquote sume takde..harap boleh membantu. 🙂
sori ye lmbt respon..blh pm ciktom terus kt email> tomatogurl86@gmail.com..