Tutorial Buat Scroll Dalam Bloglist Kemaskan Blog

Cik tom nak buat tutorial ni berdasarkan pertanyaan adik nurul dan puteriiqaizyan, bagaimana untuk scroll box dalam bloglist?? Scroll dalam bloglist ni bagus untuk kemaskan blog dan senang nak lihat list blog dengan hanya secara scroll. Kalau show all akan meleret panjang ke bawah.

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 find apa nama tajuk bloglist korang tue. Contohnya kat blog cik tom β€œkerja dan kerja”.

STEP 3

Bila dah jumpa cari keyword ini di bawah coding “kerja oh kerja”.



<div class='widget-content'>

 

STEP 4

Sila copy+paste code di bawah dan gantikan pada code di step 2.


<div class='widget-content' style='overflow:auto; width:ancho; height:100px;'>
***code yang di boldkan tue , korang boleh adjust untuk berapa ketinggian yang disukai.

STEP 5

Klik Preview dan save jika tiada sebarang error pada coding ye.

*********************************

Sebenarnya tutorial ni based on tutorial yang mish buat untuk scrollbox bagi blogarhieve. Cik tom tengok lagi senang coding cara ni compare dengan cara cik tom ajar untuk tutorial blogarchive sebelum INI. So, cik tom try and error dengan apply pada bloglist pulak. Selamat mencuba ye πŸ™‚

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 @

68 thoughts on “Tutorial Buat Scroll Dalam Bloglist Kemaskan Blog

  • December 25, 2010 at 10:53 am
    Permalink

    Alhamdulillah..
    time kaseh sgt2 cik tom :))

    harituh iqa da gugel.tp berbelit2 sume.huhu

    Reply
  • December 25, 2010 at 11:16 am
    Permalink

    terima kasih tom..

    Reply
  • December 25, 2010 at 11:25 am
    Permalink

    yes…time kaseh cik tom..rara nk tuto nie la..hehe

    Reply
  • December 25, 2010 at 11:31 am
    Permalink

    Thanks untuk info ni..bolehlah ellen buat ni..hehe..thks Tom..

    Reply
  • December 25, 2010 at 11:41 am
    Permalink

    Tq cik tom. JZ dah buat untuk blog list n popular post. bes! bes! πŸ™‚

    Reply
  • December 25, 2010 at 11:56 am
    Permalink

    thanks cik tom =)

    Reply
  • December 25, 2010 at 12:35 pm
    Permalink

    salam cik tom,

    kak ati nak tahu mcm mana nak letak
    nuff dekat header
    dah byk kali buat tak boleh lah

    cik tom..tlng ajar ASAP yer
    TQ in advance ^_^

    Reply
  • December 25, 2010 at 12:38 pm
    Permalink

    nak cubelah..ehehe.;)tengkiup sis^^

    Reply
  • December 25, 2010 at 12:39 pm
    Permalink

    Thanks cik tom,dah berjaya buat…hehe

    Reply
  • December 25, 2010 at 12:42 pm
    Permalink

    nice2.macam wat scroll box kat archive erk

    Reply
  • December 25, 2010 at 12:55 pm
    Permalink

    bgus neh cik Tom, klu emiey nk buat, emiey rujuk sini la..yg kotak banner tu pun rujuk cik Tom, cntik kan, ehehe πŸ˜€

    Reply
  • December 25, 2010 at 12:58 pm
    Permalink

    salam cik tom.eh da xde baling tomato.hehe
    ciktom,thanx byk2 ya.muax!!
    dah lame crik bnda ni..=)

    Reply
  • December 25, 2010 at 1:03 pm
    Permalink

    dni pun guna ni πŸ™‚

    Reply
  • December 25, 2010 at 1:23 pm
    Permalink

    mekaseh cik tom yer…:)

    Reply
  • December 25, 2010 at 1:23 pm
    Permalink

    salam.hai cik tom, alisya cuba juga..thanks 4 this tutorial..very helpful.. πŸ™‚

    Reply
  • December 25, 2010 at 1:40 pm
    Permalink

    salam

    syira pun buat gak tutor ni πŸ™‚

    cik tom, comel blog, syira baru rancang nak design blog 2011 yang lebih gempak dengan header yang ada gambar sepatu hijau, sekali cik tom dapat baca idea syira…wawawa…

    tapi memang comel…cerah mata gitu πŸ™‚

    Reply
  • December 25, 2010 at 2:01 pm
    Permalink

    thanx cik tom,da jadi heheh ;D

    Reply
  • December 25, 2010 at 2:01 pm
    Permalink

    hai cik tom..
    mamat dah try dh code2 yg cik tom bgi..
    Tapi xda apa2 yg jadi pun..
    mamat dah try bnyak kali..
    mcam2 cara mamat mamat try guna code yg cik tom bgi..
    tapi ttap ada 2 entry..

    Reply
  • December 25, 2010 at 2:12 pm
    Permalink

    Rajin Cik Tom saya ni

    Reply
  • December 25, 2010 at 4:22 pm
    Permalink

    ika pnah blaja mcm mna nak buat scr0ll b0x nih tp dh tlupe..nsib baik cik t0m bwat tut0rial lg..huhu..tenkiu!

    Reply
  • December 25, 2010 at 5:28 pm
    Permalink

    tq so much cik tom…. muahhhsss…. menjadi akhirnya…. itu hari wat ilang abihhh… huhuhu… tq again….

    Reply
  • December 25, 2010 at 7:27 pm
    Permalink

    salam cik tom…dah berubah waja blog…cantik…

    info bgus….berguna…
    tq

    Reply
  • December 25, 2010 at 7:40 pm
    Permalink

    yuhuu Cik Tom berjaya jugak kite buat tutorial ni.Yang ni tak png kpla berbanding utk banner tu.huhu sampai skrg tak setting lagi.Tq 4 this info sayang Cik Tom

    Reply
  • December 25, 2010 at 11:33 pm
    Permalink

    nak try jugak la nanti. thanks cik tom πŸ™‚

    Reply
  • December 25, 2010 at 11:36 pm
    Permalink

    CIK TOM !BLOG BARU ! TAK PASAN PON ! MERAH TU ! ! SUKE2.. kite pon blog baru jugak ! hee!

    Reply
  • December 26, 2010 at 12:21 am
    Permalink

    bley jgk tmbh blockquotes n tkr color kn??..

    Reply
  • December 26, 2010 at 1:38 am
    Permalink

    tq cik tom πŸ™‚

    Reply
  • December 26, 2010 at 3:34 am
    Permalink

    tq cik tomato…..
    leh x cik tomato tlng ajar cra nk bt blog ni fuhhhhhhh……..
    cth mcm blog cik tomato..cntk la ska…kaler dh x saket mata…heheheheeheheheh

    Reply
  • December 26, 2010 at 4:07 am
    Permalink

    mcm best pulak buat mcm ni..
    nti free boleh lah try πŸ™‚

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

    cik tom..
    dulu akak tengok ada tutorial buat top comenttar kat blog cik tom ni..
    tapi semalam akak godek2 tak jumpa pulak..
    ciktom buang ke??

    Reply
  • December 26, 2010 at 6:25 am
    Permalink

    tq cik tom! dh buat. wee~

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

    cik tom. nk tnye pulak. cm ne cik tom letak pic tomato tuh kt sidebar?

    Reply
  • December 26, 2010 at 7:40 am
    Permalink

    toturial menarik neh..thanks cik tom…
    syg cik tom…muah!

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

    cik tom… untuk bloglist ad x jadi la… knp ek? sama je kan caranya?

    Reply
  • December 28, 2010 at 3:35 am
    Permalink

    tengs cik tom!
    dah buat dan berjaya dengan jayanya

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

    terima kasih cik tom..

    mamaema dah cuba dah…

    Reply
  • December 29, 2010 at 6:57 pm
    Permalink

    sy dh lama cari ni! thanx cik tom! πŸ˜€

    Reply
  • January 1, 2011 at 6:49 am
    Permalink

    thanks cik tom. dah try dh. πŸ™‚

    Reply
  • January 1, 2011 at 11:35 am
    Permalink

    thanx cik tom!yna pn nk wt cmni gk sblum ni sbb tgok blog org laen nmpk kmas ble wt ni tp yna xtaw n mcm sush..

    nice share.t nk cbe la..klu xfhm lg,yna tye eh!:)

    Reply
  • January 10, 2011 at 10:24 am
    Permalink

    salam cik tom .

    code yang dlm step 4 tu
    nak paste dekat mana satu .

    Reply
  • January 11, 2011 at 10:54 am
    Permalink

    @NanaCinvent:step dalam no 4 tue…nana gantikan pada code no 3…kiranya nana delete code dalam no 3…pastu gantikan dengan step no 4..faham dan boleh buat x??

    Reply
  • January 12, 2011 at 11:40 am
    Permalink

    cik tom…dla curik tuto ni..tq sgt2..dah jd..sayang cik tok ketat2..hehe

    Reply
  • January 13, 2011 at 8:16 am
    Permalink

    huhuh .okay2 .dah jadi .nampak lg kemas .tp kalau nak lebarkan tk boleh ke .

    Reply
  • January 15, 2011 at 8:38 am
    Permalink

    thanks so much cik tom! dah tak panjang blog sy πŸ™‚

    Reply
  • January 15, 2011 at 4:07 pm
    Permalink

    @NanaCinvent: nak adjust lebar boleh je…

    pada coding;

    width:ancho;

    sila tukar pada

    width:300px;

    **300px tue boleh ubah pada mana kelebaran nana suka…

    selamat mencuba…

    Reply
  • January 21, 2011 at 12:50 pm
    Permalink

    terima kasih cik tom…saya dah cuba,ok…

    Reply
  • January 22, 2011 at 6:15 am
    Permalink

    Yeyyy.. dah wat dah… thnx… XD

    Reply
  • February 20, 2011 at 3:41 am
    Permalink

    cik tom!

    saya pun dah buat…thanks…

    tak de la nampak berjela ja blog archieve tue.hehe

    Reply
  • March 16, 2011 at 2:14 am
    Permalink

    Thanks Cik Tom…;)
    dah lama cr tuto ni..ehehe.

    Reply
  • May 12, 2011 at 11:02 pm
    Permalink

    CIKTOM,

    template yang baru ni tak boleh buat la pulak…keluar camni ha

    “Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message: Open quote is expected for attribute “{1}” associated with an element type “class”.

    Error 500

    kenapa ek?
    Jom baca entri terkini ikhyar dee …– BOLEH BUAT DUIT JUGAK NIEMy Profile

    Reply
    • May 13, 2011 at 8:08 pm
      Permalink

      cik tom rasa sama ada blogger yang problem or code yang dimasukkan xlengkap..cuba follow satu persatu step ni ye..kalau still tak jadi or ada masalah bgth la ye..

      Reply
      • October 5, 2011 at 5:24 pm
        Permalink

        ku jgk buat kuar sama cm yg ikhyar bgtau tu..napa yer..??padahal dh copy paste sama code yg cik tom bg tue..camner nie cik tom..

        Reply
        • October 6, 2011 at 2:16 pm
          Permalink

          xdapat jugak?ciktom dah adjust balik entry ni..maybe ada error masa copy code…fara cari perkataan contoh bloglist fara “ONLY GA”..pastu follow up step 3 untu cari code dan seterusnya..cuba sekali lagi dapat x??sbb cik tom dh tgk blog fara mmg sama je coding..

        • October 7, 2011 at 10:08 am
          Permalink

          salam..cik tom, fara dh buat jadi..tq..tp napa list dlmnya bertindinh yer..dan bila gerakkan scroll tu dia x gerak..nampak x elok..fara buang je x buat scroll tu..tp nak buat jgk utk list catatan dan perkongsian tu..camner yer..help leh..hiii

        • October 27, 2011 at 1:20 pm
          Permalink

          untuk list “catatan dan perkongsian” tue pun caranya sama je…just follow step dalam entry tutorial ni..cuma tukar step yg kena search tue tukar search :”catatan dan perkongsian”..selamat mencuba n good luck!

  • June 23, 2011 at 10:20 am
    Permalink

    tak menjadi..please help me πŸ™

    Reply
  • November 8, 2011 at 5:27 pm
    Permalink

    thanx cik tom!hee
    jadi la..!

    Reply
    • November 27, 2011 at 1:02 pm
      Permalink

      apa yang tak jumpa ye..boleh bagitahu detaill..

      Reply
  • January 11, 2012 at 10:21 pm
    Permalink

    xda code “F3” ?? cm ne nk cri??

    Reply
    • January 14, 2012 at 6:31 pm
      Permalink

      salah faham ni..bukan cari code F3..tapi iela klik kat keyboard laptop/notebook “F3”..ada x?bila klik “F3” akan kuar box kat atas belah kiri..nanti taip code yang nak dicari..automatik akan tunjuk secara highlight..

      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.

Optimization WordPress Plugins & Solutions by W3 EDGE