Kemas Blog Sikit

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

Letak TAJUK 1 kat sini

(Ruang ini untuk korang letak apa-apa kod yang korang nak letak)

Letak TAJUK 2 kat sini

(Ruang ini untuk korang letak apa-apa kod yang korang nak letak)

Letak TAJUK 3 kat sini

(Ruang ini untuk korang letak apa-apa kod yang korang nak letak)

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