Tutorial Buat Auto Slide Menu (Hide Show) Untuk Kemaskan Sidebar (UPDATED)

Assalamualaikum dan Salam Sejahtera pada semua……

Cik tom buat tutorial ni khas atas permintaan shag. Blogger lynn dll juga yang pernah tanya cara buat auto slide menu (jenis hide show) bagi kemaskan sidebar blog.

Kepada yang tak faham apa tue autoslide menu ialah contohnya seperti di sidebar cik tom yang tajuk “Purple Tomato”. Di mana segala isi/info dalam tue cik tom hide kan (sembunyi) dan bila korang klik pada kotak “Jom curik Banner Cik Tom”, secara automatik akan tunjukkan (show) kandungannya. Seperti yang di tunjukkan gambar di bawah.

autoslide menu

********AMARAN TUTORIAL NI PANJANG & MUNGKIN AGAK PENING. SO SILA TARIK NAFAS PANJANG SEBELUM FOLLOW UP TUTORIAL NI*******

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

Tekan keyboard, CTRL+F secara serentak.Cari code </head>, dan tambahkan coding ni di atas/sebelum code </head>

<style type=”text/css”> .texthidden {display:inline} .shown {display:block} </style>Β  <script type=”text/javascript”> document.write(‘<style>.texthidden {display:none} </style>’); </script> <script type=”text/Javascript”> function expandcollapse (postid) { whichpost = document.getElementById(postid); if (whichpost.className==”shown”) { whichpost.className=”texthidden”; } else { whichpost.className=”shown”; } } </script>


STEP 3

Tekan keyboard, CTRL+F secara serentak.Cari code h2 {

*setiap orang mungkin berlainan. contoh coding di blog cik tom ialah ;

h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; }

STEP 4

Sila tambah coding di bawah pada akhir penutup coding di STEP 3: }


h4 { background: #ffdddd; color: #000000; margin-left: -1px; margin-right: -1px; margin-top: 0px; margin-bottom: 1px; padding-left: 10px; padding-bottom: 5px; padding-top: 5px; border: 2px solid #000000; font-size: 11px; } 

Pada code di atas korang boleh ubah mengikut kesukaan seperti;


1) Background, color, border-korang boleh ubah pada code warna yang korang suka kat SINI.

2) Semua nombor2 tue pun korang boleh adjust sendiri untuk kecil/besarkan mengikut kreativiti masing2 ye.

3) Cadangan sebaiknya selepas semua menjadi baru la korang adjust color dan size tue ye. huhu πŸ˜‰


STEP 5Β 
Klik SAVE TEMPLATESTEP 6Klik pada PAGE ELEMENTS>ADD A GADGET>HTML/JAVASCRIPT
*Ini ialah step untuk buat di sidebar pulak.STEP 7Copy dan paste coding di bawah ke dalam gadget html/javascript

 

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>TAJUK MENU</h4></a></ul>Β 

<ul class="texthidden" id="keyword">

DI TENGAH2 CODING NI BOLEH MASUKKAN APA-APA CODING SEPERTI CODE LINK BLOG/TOP POST/TOP COMMENT/CODE BANNER DLL.
</ul>

(*penting penutup code)

 

Β 

***Perhatian perkataan keyword pada onclick=”expandcollapse (‘keyword‘) dan <ul class=”texthidden” id=”keyword“> mestilah sama. Sekiranya korang nak ubah nama lain boleh jugak untuk auto slide menu yang ke 2 dan ke 3 dengan ubah pada nama seperti keyword2, banner, comment atau lain-lain. Tapi janji mesti sama perkataan pada kedua-duanya.

Contoh untuk buat 2 autoslide menu di dalam kotak gadget sidebar yang sama;


<ul><ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>TAJUK 1</h4></a></ul>
<ul class=”texthidden” id=”keyword”>
CODE TOP COMMENTAR WIDGET/APA-APA CODE SUKA
</ul></ul>
<ul><ul><a href=”javascript:void(0);” onclick=”expandcollapse(‘ciktomcomel’)”> <h4>TAJUK 2</h4></a></ul>
<ul class=”texthidden” id=”ciktomcomel”>
CODE TOP COMMENTAR WIDGET/APA-APA CODE SUKA

</ul></ul>

 


***untuk buat lebih dari 1 auto slide menu, korang just copy+paste coding di STEP 7 pada sidebar SAHAJA. Tak perlu edit or copy di EDIT HTML.

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

 


Macam mana korang faham tak cara olahan tutorial ni? Kalau tak faham jangan segan2 tanya. hehe ;))

Credit 1: redboy

Credit 2: padinno

UPDATED 21/11/2010

SOALAN 1: Encik bell dan hafizah tanya apa itu autoslide menu?

JAWAPAN: Cik tom dah update jawab di perenggan ke-2 entry ni dengan gambar sekali. Sila baca ye πŸ˜‰

SOALAN 2: Fatin tanya contoh nak wat pasal banner di sidebar sy.. cume x phm kat step 7.. if sy ade more than 1 banner code, saye kene repeat copy paste the whole code in step 7 untuk banner code yang len or simply put the ul code between the banner code.

JAWAPAN: Kalau fatin nak letak banyak banner dalam 1 autoslide menu je, fatin just simply letak semua code banner between the code tue je. Tak perlu copy paste whole code dalam step 7. Copy paste whole step 7 tue just incase kalau fatin nak buat autoslide menu ke 2,3 so on.

SOALAN3 : Kak ati tanya cik tom dah buat tutorial untuk top pengomen atau tak?

JAWAPAN: Sorry akak. Cik tom tak buat akak.. tapi akak boleh tengok code tue dengan klik di SINI. Kalau tak faham boleh tanya direct dengan cik tom. πŸ˜‰

SOALAN 4: Cik mas tanya cm ne nk wat sidebar mcm cik tom..cik mas nk tau title sidebar kaler pepel 2…cantik n kemas…cm ne ek nk wat…
JAWAPAN: Sebenarnya theme cik tom ni cik tom amik dari redboy yang telah lengkap dengan sidebar camtu. Cik tom just adjust warna je. Kalau cik mas nak boleh tanyakan redboy. Kalau cik mas nak adjust sidebar title bagi berwarna macam cik tom boleh lihat tutorial kat SINI.

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 @

62 thoughts on “Tutorial Buat Auto Slide Menu (Hide Show) Untuk Kemaskan Sidebar (UPDATED)

  • November 20, 2010 at 4:09 pm
    Permalink

    bes bes cik tom.. tq! πŸ™‚

    Reply
  • November 20, 2010 at 4:24 pm
    Permalink

    Mak hai….panjang betul nasib baik dah tarik nafas ikut arahan,,,,akak akan kaji semula,pelan-pelan..tengah2 malam ni baca pun kena mengeja…

    Reply
  • November 20, 2010 at 4:50 pm
    Permalink

    salam cik tom. thanks sebab bagi tutorial ni.. sy nak wat pasal banner di sidebar sy.. cume x phm kat step 7.. if sy ade more than 1 banner code, saye kene repeat copy paste the whole code in step 7 untuk banner code yang len or simply put the ul code between the banner code. thanks. if xphm soklan ni, jemput dtg ke blog sy.. thanks!

    http://www.fatinmyprobs.blogspot.com

    Reply
  • November 20, 2010 at 6:52 pm
    Permalink

    auto slide menu yg cmne ek cik tom ?

    Reply
  • November 20, 2010 at 10:12 pm
    Permalink

    tuto untuk buat ape tu ?

    tom boleh tnye x ?
    umu bape ae ?
    hehhe !

    Reply
  • November 21, 2010 at 12:13 am
    Permalink

    temkyu cik tom πŸ˜€

    Reply
  • November 21, 2010 at 1:34 am
    Permalink

    salam cik tom

    TQ yer tolong doakan utk anak kak ati hari tu..

    kak ati masih tunngu pemintaan kak ati hari tu..dah terlepas ke yek..

    Reply
  • November 21, 2010 at 2:33 am
    Permalink

    wah thanx cik tom

    Reply
  • November 21, 2010 at 2:33 am
    Permalink

    yes yes dah lama cari tutorial ni. tapi tak berkesempatan nak buat lagi. nanti kalau boleh buat hana bagitau cik tom eyy πŸ™‚

    Reply
  • November 21, 2010 at 2:59 am
    Permalink

    wah2.. patutlah ada trafik dtg dr sini.. rupanya ciktom buat tutor pasal ni.. btw, thanks kreditnya.. ada kod2 dlm tutor yg telah hilang sbb rb pindah ke hosting sendiri.. so, malas nak update.. hehe.. thanks again.. penerangan yg lengkap..

    Reply
  • November 21, 2010 at 4:05 am
    Permalink

    wah!
    belalang nak buat jugak lah
    (xsedar diri kat blog sendiri dah ada benda alah nih)

    huhuhu

    Reply
  • November 21, 2010 at 4:56 am
    Permalink

    thanks cik tom.. really appreciate it!

    Reply
  • November 21, 2010 at 7:26 am
    Permalink

    Camtu kok rupenye

    Reply
  • November 21, 2010 at 10:43 am
    Permalink

    Yay! Thanks, Cik Tom. Nanti Shag try buat okay. Kalau sesat jalan, Shag tanya Cik Tom. Thanks once again, Sweet! πŸ˜‰

    Reply
  • November 21, 2010 at 3:32 pm
    Permalink

    huii rajin buat tutor nanti akk try

    Reply
  • November 23, 2010 at 7:45 am
    Permalink

    dla baru jer nk risik2 tanya..bagus2 tapi xtaw bile nak ejas..tenet kat rmh selow..kat opis jer heaven laju..kat opis paam2la, mana sempat..skodeng skit2 bleyla..heee~~btw, tq cik tom..dla akan link page cik tom kat page dla, baru senang..^__^

    Reply
  • November 24, 2010 at 5:10 am
    Permalink

    inilah tutorial yg ditunggu2. thanks cik tom.

    Reply
  • November 25, 2010 at 1:44 pm
    Permalink

    SELAMAT MENCUBA YE..SEGALA SOALAN CIK TOM JAWAB DI BLOG MASING2 πŸ™‚

    Reply
  • November 30, 2010 at 3:25 pm
    Permalink

    ciktom, cikliyana tak faham yg step 3 tuh, yang suh cari h2 }

    cikliyana dah cari tapi jumpa banyak sangat h2, kompius nak letak kat mana…huhuhuu

    Reply
  • December 1, 2010 at 6:22 pm
    Permalink

    tanx cik tom! πŸ™‚

    Reply
  • December 7, 2010 at 9:45 am
    Permalink

    salaam.. cik tom, haritu buat dah jadi dah.. tapi alih-alih hari ni tak boleh nak klik pulak.. tak kuar ape2.. haritu masa mula-mula buat ok je.. >.<

    Reply
  • December 8, 2010 at 2:52 am
    Permalink

    ciktom…saya ade masalah nak letak kod banner2 tu..kenape bile tekan kotak tu, tak keluar pun bannernye? saya salah kt mane?pls ajar.. πŸ™‚

    Reply
  • December 9, 2010 at 1:34 pm
    Permalink

    die keluar kod banner yg saya letak tapi bannernye tak keluar pulak..blog saya takleh nak bukak lak skang ni.. πŸ™ nanti kalau dah boleh bukak, saya tanye balik k?

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

    akyn berjaya buat tutorial nie..
    eppy sgt2.. tengs cik tom.. syang dier πŸ™‚

    Reply
  • December 26, 2010 at 6:21 pm
    Permalink

    terima kasih cik tom..
    hppy nya sbb jdi..
    dlu xdpat nak buat pun..
    tngok cik tom n akak miss yaty nya….ada bnda ni..
    hehehe
    last2..mamat pun dh ada…
    trima ksih cik tom..

    Reply
  • January 15, 2011 at 9:46 am
    Permalink

    tak jadi lah cik tom. dea kuar link jek, gmbr xde pon. cmne ye?

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

    @noraim: erm psl soalan xmenjadi autoslide menu tue..cik tom nak komen pun xdpt sbb xnmpk cnth yg noraim buat…cuba tunjuk 1 cnth yg dpt cik tom lihat pada sidebar/cuba awk bg coding pe yg awak letak disidebar tue pada entry cik tom yg ni..

    Reply
  • January 16, 2011 at 3:18 am
    Permalink

    oh, bila sy tekan autoslide tuh, dea kuar url banner tuh jek, banner xde.
    ke sy salah buat step ke-7?

    sy gantikan ayatΒ² cik tom yg neh DI TENGAH2 CODING NI BOLEH MASUKKAN APA-APA CODING SEPERTI CODE LINK BLOG/TOP POST/TOP COMMENT/CODE BANNER DLL dgn url banner.

    phm tak?

    Reply
  • January 19, 2011 at 1:53 pm
    Permalink

    @noraim: sori ye lambat reply…cik tom faham…dah betul tue kat step 7 tue kena masukkan code banner…apa coding url yang noraim masukkan?takut silap coding pada banner bukan pada autoslide..

    Reply
  • February 3, 2011 at 6:45 pm
    Permalink

    thank cik tom.. entri nie sgt berguna.. nk tanya lg leh? mcmana cik tom buat hideshow utk sidebar 10 terlatest tue ekh? sy dah follow up komen nie

    Reply
  • February 5, 2011 at 3:15 pm
    Permalink

    @Firdaus Kasim: boleh je nak tanya…hideshow??scroll ek..boleh guna code kat bawah ni;

    <div style='overflow:auto; width:ancho; height:100px;'>

    CODE YANG NAK DIMASUKKAN

    </div>

    **100px tue boleh ubah pada ketinggian mana scroll tue awk nak masukkan…

    slmt mencuba πŸ™‚

    Reply
  • February 5, 2011 at 5:30 pm
    Permalink

    salam kenal cik tom..

    sue dah try beberapa tutorial yg ade dlm blog cik tom ni..
    alhamdulillah.. menjadi jua akhirnya..

    thanx a lot share bnyk ilmu..

    Reply
  • February 10, 2011 at 1:11 pm
    Permalink

    sy masuk kan url yg sy amik dekat blog. ke kena upload kat manaΒ² dulu?

    sori lah, xbpe fhm. huhu.

    Reply
  • February 19, 2011 at 12:34 am
    Permalink

    salam..

    sudah try after edit blog ni.. hihi..
    thanx bg cadangan.. πŸ™‚

    Reply
  • February 20, 2011 at 1:17 pm
    Permalink

    @sue sofian: sama2 ^_^

    Reply
  • February 20, 2011 at 1:24 pm
    Permalink

    @noraim:

    kalau nak buat banner…noraim kena upload dl banner yg dah siap tue kat photobucket/imagehosting or pe2 tmpt storage gmbr…pastu dah siap upload amik url gambar tue…nanti code banner tue camni;

    <a href="URL BLOG"> <img src="URL GAMBAR" height="125" width="125" border="0" alt="banner" /></a>

    kalau nak show code banner tue macam yg cik tom buat kat "jom curik banner cik tom"..follow step dlm tutorial ni;

    http://www.ciktom.com/2010/11/tutorial-masukkan-coding-dalam-entry.html

    Reply
  • March 22, 2011 at 7:34 pm
    Permalink

    ciktom..xleh kecik kan mcm ciktom punya lah…dh puas tukar2 nombor kat widget tu…b4 ni cunndaa ubah no kat h4} kat situ ke tang ubahnye spy jadi kecik autoslide…hope dpt bantu…tengs

    Reply
  • April 4, 2011 at 9:31 pm
    Permalink

    @cunndaa: widget ni akan automatik ikut lebar sidebar yang blog cunndaa…

    Reply
    • April 23, 2011 at 11:06 am
      Permalink

      boleh..tapi cik tom pun masih di peringkat belajar..kalau cik tom dah mahir sikit, cik tom akan buat tutorial ye…

      Reply
    • April 22, 2011 at 8:18 pm
      Permalink

      sori lambat balas sebab biasa cik tom on9 weekend je…cik tom dah tengok dan menjadi ek faris buat..tahniah ye sbb berjaya buat…

      Reply
  • April 26, 2011 at 5:27 pm
    Permalink

    cik tom, ini sesuai ntok templete ape? step 2 i’ve lostt, helpp

    Reply
    • April 27, 2011 at 5:23 pm
      Permalink

      setakat ni ramai yg guna boleh utk design template….nanti cik tom cuba tgk code awk ye..

      Reply
      • April 27, 2011 at 5:29 pm
        Permalink

        cik tom dah tgk…blog awak ade je code head yang dalam step 2 tue..cuba cari balik betul2 ye..nak cari tekan keyboard “ctrl”+”F” dan taip code head macam dalam step 2 dan seterusnya..

        Reply
  • May 5, 2011 at 8:07 pm
    Permalink

    cik tom, macam mana nak buat 4 autoslide dalam kotak gadjet side bar yg sama?? saya buat tak jadi! sedih nya….

    lg satu kalau nak buat autohide untuk popular post, bloglist macam mana?
    terima kasih.

    Reply
    • May 13, 2011 at 4:00 pm
      Permalink

      untuk buat 4 autoslide pada sidebar yang sama, IM hanya perlu copy code tutorial yg di step 7 utk cnth 2 autosilde tue 2kali (copy 2x)..
      untuk autohide popular post..just masukkan je code popular post ke dalam ruangan code yang disediakan…autohide bloglist cik tom susah sbb complicated kena adjust pada code edit html…tapi cik tom just sarankan guna scroll untuk bloglist…boleh refer tutorial tue kat sini; http://www.ciktom.com/tutorial-buat-scroll-dalam-bloglist-kemaskan-blog/

      Reply
  • May 5, 2011 at 8:46 pm
    Permalink

    lagi soalan. hehe. sori cik tom. :p

    saya nak masuk kan widget formspring dekat autoslide tapi tak menjadi.

    kenapa ek?
    Jom baca entri terkini IM …Jika Anda Seorang BloggerMy Profile

    Reply
    • May 13, 2011 at 3:53 pm
      Permalink

      erm sepatutnya menjadi je sebab sebelum ni cik tom pernah masukkan ok..cuba buat satu persatu…or try cek code betul2 ye..

      Reply
  • June 18, 2011 at 10:31 pm
    Permalink

    cik tom, sy da cube buad, tp sampai step 5 na save da ta bole laa, kenape yee? help me plezz πŸ™

    Reply
  • July 12, 2011 at 9:57 pm
    Permalink

    nape xbleh erk..die kua cmni
    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 “type”.
    Jom baca entri terkini SBK …Tutorial Moving TabMy Profile

    Reply
    • July 19, 2011 at 4:29 pm
      Permalink

      maksud kuar error tue ada code yang SBK masukkan tue tak ditutup dengan sebaiknya…cuba follow balik step n tgk btul2 step tue…jgn ada sampai tertinggal mana2 coding…

      Reply
  • August 12, 2011 at 12:18 pm
    Permalink

    errkk….cik tom…nie sebenanye utk ape?? sb sy nie bwu je mule nk wat blog..hehehe

    Reply
    • August 15, 2011 at 5:59 pm
      Permalink

      ini untuk hidekan kita punye sidebar dik…kira untuk jimatkan ruang pada sidebar…so bila klik je pada kotak tue dia akan show kan sidebar yang kita sorokkan…

      Reply
  • September 30, 2011 at 2:58 pm
    Permalink

    wah keren gan, makasih nih infonya…:D
    mampir2 ya gan…….

    salam

    me-chat
    Jom baca entri terkini Me-Chat …Pemenang Program BTBRMy Profile

    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