Home » » Kemas Blog Sikit

Kemas Blog Sikit

EmpayarUtama - Wednesday, August 17, 2011 : 16 comments

Nota: Paparan untuk cerita ni di sidebar dah tak ada sebab aku guna slider; accordian serta multitabs. Tapi demonya masih ada dalam entri. Boleh tekan tajuk-tajuk tu 'live'.

Aku tak berapa gemar guna tajuk tutorial walaupun ini Tutorial untuk Buat Auto Slide Menu (Hide-Show). Ekeleee, tutorial lagi? Bukan apa, korang nampakkan aku dah kemas sidebar tinggalkan beberapa tajuk aja. Kalau boleh follower tu pun aku nak kemas tapi dah cuba tak boleh lorrrr.
Siapa boleh ajar aku cara yang senang ya? Aku kongsilah apa yang aku boleh kongsi. Dah kemas ni aku tengok blog aku ada laju sikit (yea ke? Entah).

Patutnya entri ni aku pos 11 hari lepas tapi tersangkak sebab bagi keutamaan kepada segmen latar belakang hitam putih dan yang lain-lain.

Ok kali ni tutorial paling ringkas aku nak kongsi. Kat sidebar tu dulu aku letak spoiler button tapi cuma boleh guna untuk satu widget aja. Kalau letak lebih dari satu spoiler terus spoil. Tak jadi pulak.

Ini Demonya
Jangan takut tekan Tajuk-tajuk tu takde iklan punya...

Untuk buat Auto Slide Menu (Hide-Show) korang pergi kat blog Cik Tom ikut cara dia. Macam tu je. Senang kan?

Abis dah tutorial aku kali ni.
Ringkas je kan...


Jadi tak?


Boleh? Tak boleh? Kalau tak dapat ikut, ok baru cuba macam yang aku buat:
Ambik kod ni letak kat PAGE ELEMENTS -> ADD A GADGET -> HTML/JAVASCRIPT:
<style type='text/css'>
.texthidden {display:inline}
.shown {display:block; margin-left: -50px;}
h4 {border:1px solid #ccc; background:#eee; color:#cc0000; margin:5px 5px 5px -60px; padding:5px 5px 5px 5px; font-size:12px; }
</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>

<ul>
<ul><a href="javascript:void(0);" onclick="expandcollapse('Tajuk1')"> <h4>Letak TAJUK 1 kat sini</h4></a></ul> <ul class="texthidden" id="Tajuk1"> (Ruang ini untuk korang letak apa-apa kod yang korang nak letak) </ul>

<ul><a href="javascript:void(0);" onclick="expandcollapse('Tajuk2')"> <h4>Letak TAJUK 2 kat sini</h4></a></ul> <ul class="texthidden" id="Tajuk2"> (Ruang ini untuk korang letak apa-apa kod yang korang nak letak) </ul>

<ul><a href="javascript:void(0);" onclick="expandcollapse('Tajuk3')"> <h4>Letak TAJUK 3 kat sini</h4></a></ul> <ul class="texthidden" id="Tajuk3"> (Ruang ini untuk korang letak apa-apa kod yang korang nak letak) </ul>
</ul>


Ada 3 warnakan? Yang merah tu untuk kedudukan paparan, boleh ejas ikut suka. Yang hitam takde warna tu adalah skrip arahan bagaimana akan dipaparkan nanti. Warna biru tu itulah paparannya - Tajuk dan isi kandungan. Mana yang boleh ejas / tukar, cubalah tukar sendiri. Tak cuba tak tau.

Save la, apa lagi. Siap dah.

Tutorial atas ni serta kodnya adalah asas (basic) saja. Nak letak dalam entri pun boleh (eh, aku dah letak kat atas tu hehe). Banyak lagi cara dan peten auto-hide nih seperti perbagai versi multitab begitu juga accordian. Gugel jelah mesti jumpa tutorialnya.

Tak lupa; Selamat Hari Raya IdilFitri Maaf Zahir & Batin dari EmpayarUtama





16 Comments

16 comments:

  1. Patutla aku singgah tadi tak nampak pun aku punya komen...ingat kene riject tadi....

    ReplyDelete
  2. kemas.tp alahai..malas nye nak ubah
    haha

    ReplyDelete
  3. untuk membuka blog ni, aku terpaksa tutup kipas...ringat sangat, takut melayang...hahhaha

    sory, joke aje ekk, jangan marah...nanti kena jual

    ReplyDelete
  4. @~Nana 귀여운~;
    @cikAna;
    @syafiqakarim;
    makasih. Kalau x kena tuka template xdenya aku kemas wakakakak

    @dhinai;
    @iza;
    sori aaa pg td camna ntah tersalah link daaa

    @adlina;
    @tnZackJ;
    agak2 pasang tali teraju boleh naik cam layang-layang tak?

    @blog-tips-kurus;
    aku buatkan kopi o bolehla :)

    ReplyDelete
  5. blog kamoo kemas dowh.blog sye bsepah2,dgn pinky lg!hee

    ReplyDelete
  6. errr...pening...
    tp siyes, belog kamu kemas..

    ReplyDelete
  7. Terbaik .. done :-)
    tq bro wpun penat balik kerja reply email aku :-)

    ReplyDelete
  8. wah banyak jer kerja nak buat hehe EU tlg buat utk eyza tak leh ka hihi...

    ReplyDelete
  9. alamak? xjadi la EU huhu cedey cedey cedey..... :(

    ReplyDelete

Tulisle apa pun, aku baca ^_~