Post navigation

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

Posted on by

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.

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

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

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

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

  3. tuto untuk buat ape tu ?

    tom boleh tnye x ?
    umu bape ae ?
    hehhe !

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

  5. yes yes dah lama cari tutorial ni. tapi tak berkesempatan nak buat lagi. nanti kalau boleh buat hana bagitau cik tom eyy :)

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

  7. Yay! Thanks, Cik Tom. Nanti Shag try buat okay. Kalau sesat jalan, Shag tanya Cik Tom. Thanks once again, Sweet! ;)

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

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

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

  11. ciktom…saya ade masalah nak letak kod banner2 tu..kenape bile tekan kotak tu, tak keluar pun bannernye? saya salah kt mane?pls ajar.. :)

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

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

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

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

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

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

  18. @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 :)

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

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

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

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

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

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

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

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

  23. 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”.
    SBK recently posted..Tutorial Moving TabMy Profile

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

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