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;

icon bullet tomato yang comel

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

BLOGLIST KERJA OH KERJA

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

ciktom

Cik tom seorang part time blogger yang sangat sukakan dunia blogging dan buah tomato. Mula menulis blog 15 Julai 2010. Menaip segala ilham dari akal fikiran dan hati ke dunia alam cyber. Sebarang persoalan atau pengiklanan/advertorial/review sila hubungi ciktom; tomatogurl86[at]gmail.com...gantikan [at] dengan @

88 thoughts on “Tutorial Letak Icon Comel Pada Sidebar Blog (Bullet List) -UPDATE

  • December 26, 2010 at 1:30 pm
    Permalink

    thank you cik tom. miza nak cuba lah. hehe 🙂

    Reply
  • December 26, 2010 at 2:34 pm
    Permalink

    bagus gak nie.. nanti nak cuba lah

    Reply
  • December 26, 2010 at 3:13 pm
    Permalink

    ml da cari..tp xde pon .sidebar ul li atau .sidebar li

    =(
    mybe html ml bbeza.isk2

    Reply
  • December 26, 2010 at 3:43 pm
    Permalink

    bgus cik Tom.

    Reply
  • December 26, 2010 at 4:41 pm
    Permalink

    Akak nak try buat jugak…tapi tengah cari templete dan header yg baru….kalu ader masa…he he he…

    Reply
  • December 26, 2010 at 4:50 pm
    Permalink

    cayalah ciktom. pandai main edit2. bagus2. keep it up.

    Reply
  • December 26, 2010 at 4:55 pm
    Permalink

    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..

    Reply
  • December 26, 2010 at 7:22 pm
    Permalink

    cik tom… thanks for the tips… really help me!! 😀

    Reply
  • December 26, 2010 at 7:45 pm
    Permalink

    wahhh~ thank you cik tom~ ^_^

    Reply
  • December 26, 2010 at 7:50 pm
    Permalink

    x jumpe pun code tuh..
    cm ne ni.. adeih. =.=

    Reply
  • December 26, 2010 at 11:23 pm
    Permalink

    panjang lak step dia..yg semalam pun tak terbuat2 lagik..hehe

    Reply
  • December 26, 2010 at 11:29 pm
    Permalink

    nati akak nk suh ciktom tulun buat bole??..hehe..akak kn fobia bab2 expand wigdet nih..huhu

    Reply
  • December 27, 2010 at 12:31 am
    Permalink

    dni nak try 😀

    Reply
  • December 27, 2010 at 1:54 am
    Permalink

    cik tom.. mummy fara buat tak jadi la.. huhuhu.. macam mana nie? tolong leh?

    Reply
  • December 27, 2010 at 1:55 am
    Permalink

    comel icon tu~

    Reply
  • December 27, 2010 at 1:57 am
    Permalink

    akk…x de la yg code first uh .sidebar li { atau satu agi uh…

    Reply
  • December 27, 2010 at 4:21 am
    Permalink

    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. 🙁

    Reply
  • December 27, 2010 at 5:08 am
    Permalink

    cik tom mcm na nk yg kepala dia 2????
    heheheheh.Harap2 cik tom paham.sya xtaw nk ckp mcm na la >_<

    Reply
  • December 27, 2010 at 5:08 am
    Permalink

    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

    Reply
  • December 27, 2010 at 5:31 am
    Permalink

    wahhh…thank u cik tom yg disayangi…hihi…

    Reply
  • December 27, 2010 at 5:37 am
    Permalink

    cik tom, amni nyer phone num…

    016-8789437… sorry lambat bagitau.. sibuk sikit bila dah weekend.. hehe

    Reply
  • December 27, 2010 at 5:51 am
    Permalink

    leh terjah selalu lagi pun tengah cari new job heehe

    Reply
  • December 27, 2010 at 5:54 am
    Permalink

    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..

    Reply
  • December 27, 2010 at 6:46 am
    Permalink

    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..

    Reply
  • December 27, 2010 at 7:01 am
    Permalink

    cik tom mmg best
    xlokek ilmu
    tqvm cik tom leh kak nor praktikkan

    Reply
  • December 27, 2010 at 7:16 am
    Permalink

    suka tuto nie,..!naty nak try buat lahh,..hehe~

    thankx cik tom,..!

    Reply
  • December 27, 2010 at 7:33 am
    Permalink

    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&quot😉 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!!

    Reply
  • December 27, 2010 at 7:39 am
    Permalink

    da try buat da..
    tengs for da tips..
    b'guna sngt2..
    🙂

    Reply
  • December 27, 2010 at 8:07 am
    Permalink

    cik tom..tiga2 kod yg cik tom bg..tiga2 sab x jumpe.. 🙁

    Reply
  • December 27, 2010 at 8:13 am
    Permalink

    akak tak berani la ciktom..huhu,nnt benda lain lak jadi..hehe

    Reply
  • December 27, 2010 at 8:26 am
    Permalink

    Cik tom.. nanti mummy cuba yer.. Kalau tak leh jugak.. surrender la mummy nampaknya.. huhuhu.. anyway thanks for the tutorial..

    Reply
  • December 27, 2010 at 8:31 am
    Permalink

    wah..best la tuto ni cik tom..hee

    Reply
  • December 27, 2010 at 12:05 pm
    Permalink

    Tuk WP ada cik tom?

    Reply
  • December 27, 2010 at 12:48 pm
    Permalink

    bagus2 ada tutor nie, lain kali bole cuba:)

    Reply
  • December 27, 2010 at 1:31 pm
    Permalink

    cik tom semakin maju…best2!smt maju jaya…lama tak singgah sini..

    Reply
  • December 27, 2010 at 2:22 pm
    Permalink

    saya tak pandai edit template..tolonggg

    psstt..saya ada rahsia

    Reply
  • December 27, 2010 at 3:47 pm
    Permalink

    nice tutorial cik tom~

    Reply
  • December 27, 2010 at 4:54 pm
    Permalink

    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…

    Reply
  • December 27, 2010 at 5:06 pm
    Permalink

    argh!!!!
    TIDAK!!!
    SAYA DAH KETINGGALAN ZAMAN!!!

    ciktom dah berwajah baru!!!
    argh!!!!

    SYABAS CIKTOM!

    Reply
  • December 27, 2010 at 5:15 pm
    Permalink

    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 🙂

    Reply
  • December 27, 2010 at 5:23 pm
    Permalink

    terbaikla cik tom~! 😀

    Reply
  • December 27, 2010 at 6:41 pm
    Permalink

    yeayyy nanti buleh cuba 🙂

    Reply
  • December 28, 2010 at 2:07 am
    Permalink

    Hoho..
    Terbaek dr cik Tom..

    Reply
  • December 28, 2010 at 2:24 am
    Permalink

    heee.mekasih cik tom! nanti nak teghaii la jugak 🙂

    Reply
  • December 28, 2010 at 2:57 am
    Permalink

    salam

    cik tonm lepas komen ek…

    huhu

    Reply
  • December 28, 2010 at 4:19 am
    Permalink

    dah lama dah carik tutorial ni. thanks cik tom!

    Reply
  • December 28, 2010 at 5:01 am
    Permalink

    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..

    Reply
  • December 28, 2010 at 5:28 am
    Permalink

    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

    Reply
  • December 28, 2010 at 6:10 am
    Permalink

    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~ 🙂

    Reply
  • December 28, 2010 at 6:44 am
    Permalink

    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 !

    Reply
  • December 28, 2010 at 6:51 am
    Permalink

    xbuat lg nanti akak buat….

    Reply
  • December 28, 2010 at 7:09 am
    Permalink

    wa… nice.. nanti aibaks nak wat gak. kene cari gamba dulu ni..

    Reply
  • December 28, 2010 at 8:37 am
    Permalink

    ciktom..dah menjadik..yeayy!thanks tau. 😀

    Reply
  • December 28, 2010 at 1:44 pm
    Permalink

    kagum la cik tom…nk bookmark dulu entry ni..nnti nk edit….nk wat entry ni gak leh? credit to cik tom…..

    Reply
  • December 30, 2010 at 5:28 am
    Permalink

    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…

    Reply
  • December 30, 2010 at 5:30 am
    Permalink

    @decrewz: takdelah utk wp sebab cik tom lgsg xreti coding wp…sori ye…yg blogspot ni pun still merangkak..huhu

    Reply
  • December 30, 2010 at 5:31 am
    Permalink

    @shah noor: sorry tak faham la soalan shah noor??

    @amna qadeeja: tutorial masukkan image shoutmix ada dalam list tutorial cik tom..cuba lihat ye…

    Reply
  • December 30, 2010 at 5:46 am
    Permalink

    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&quot😉 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..

    Reply
  • December 30, 2010 at 5:59 am
    Permalink

    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 🙂

    Reply
  • December 30, 2010 at 8:27 am
    Permalink

    @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…

    Reply
  • January 3, 2011 at 6:23 am
    Permalink

    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?

    Reply
  • January 22, 2011 at 2:24 am
    Permalink

    cik tom.kite wt jd..tp pic nyer ue brtindih ngn tulisan..pic yer ue bkn kt tepi list ue

    Reply
  • January 29, 2011 at 7:14 pm
    Permalink

    @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

    Reply
  • January 29, 2011 at 7:15 pm
    Permalink

    @nabilah: 3 cara yg cik tom tunjuk kat atas tue pilihan bg nabilah nak pilih mana satu yg mudah ye..slmt mencuba…

    Reply
  • February 10, 2011 at 11:09 am
    Permalink

    terima kasih cik Tom. akhirnya jd jgk 🙂

    Reply
  • February 15, 2011 at 6:24 am
    Permalink

    thanks cik tom…

    Reply
  • February 22, 2011 at 3:24 am
    Permalink

    Follow la saya erk..
    Nice blog Cik Tom..
    rajin2 komen kat post saya nanti yer..
    trimas

    Reply
  • March 14, 2011 at 4:56 am
    Permalink

    cedih~~

    dah buat tp tak berjaye pon

    Reply
  • March 14, 2011 at 6:39 am
    Permalink

    menarik..saya ada blogspot mahu juga sesekli ia bertukar wajah hee..

    pasni blh ajar cam ner nak ubah header plk ya geeee

    Reply
    • April 22, 2011 at 7:35 pm
      Permalink

      selamat mencuba ye…boleh cuba time weekend..hee 🙂

      Reply
  • May 20, 2011 at 3:39 pm
    Permalink

    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 &amp Kusut ♥My Profile

    Reply
  • June 8, 2011 at 6:15 am
    Permalink

    salam, ciktom,,
    tutorial ni sgt membantu ! trme kasih 🙂

    Reply
  • September 19, 2011 at 10:55 pm
    Permalink

    kenapa saya buad tak boleh eh ? saya nakkkkkkkkk 🙁
    Jom baca entri terkini maia maness …birthday boyy 😀My Profile

    Reply
    • October 3, 2011 at 1:54 am
      Permalink

      kat step no. berapa yang tak boleh buat??

      Reply
  • September 23, 2011 at 5:21 pm
    Permalink

    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…My Profile

    Reply
    • October 2, 2011 at 11:42 pm
      Permalink

      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!

      Reply
  • March 3, 2012 at 5:13 pm
    Permalink

    salam..huhu tQ byk y asma blja kt blog cumel ni~

    Reply
  • March 19, 2012 at 5:52 pm
    Permalink

    cik tom..kita xdpt cari la code url tu…da try tmbah tp still xjd..huhu…sdeynya… da cara laen lagi x???

    Reply
    • April 9, 2012 at 1:24 am
      Permalink

      kalau xjumpa cari code seakan2 code dalam entry ini..

      Reply
  • January 24, 2013 at 3:26 am
    Permalink

    Cik Tom, help me..x jumpe langsung kod sume tu..huhuhu sidebar li, sidebar ul, post blockquote sume takde..harap boleh membantu. 🙂

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

error: Content is protected !!