Post navigation

Tutorial Letak Icon Comel Pada Sidebar Blog (Bullet List) -UPDATE

Posted on by

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 :)
********************************************************
klik sini


This entry was posted in tutorial by ciktom. Bookmark the permalink.

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

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

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

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

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

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

  5. 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. :(

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

  7. cik tom, amni nyer phone num…

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

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

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

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

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

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

  13. argh!!!!
    TIDAK!!!
    SAYA DAH KETINGGALAN ZAMAN!!!

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

    SYABAS CIKTOM!

  14. 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 :)

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

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

  17. 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~ :)

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

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

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

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

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

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

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

  24. cik tom! mekaseh sbb reply kat blog sy~ aa~ dh buat jadi! :D
    tapi icon tuh muncul kat semua widget kat sidebar.. bukan kat bloglist jer.. cane ek cik tom? srry susahkan cik~ haha :)

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

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

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

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

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

    pasni blh ajar cam ner nak ubah header plk ya geeee

  30. 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. ^_______^
    Yanfie recently posted..♥ Serabut &amp Kusut ♥My Profile

    • 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!

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

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