kroleZONE: Tutorial Auto Slide Menu Di Sidebar

Saturday, November 20, 2010

Tutorial Auto Slide Menu Di Sidebar

Assalamualaikum dan salam sejahtera kepada semua blogger,mesti korang semua nak blog korang nampak kemas dan tidak serabut kan?so hari ini krole ingin membuat tutorial bagaimana hendak membuat "auto slide menu" di sidebar korang,bagi menjimatkan ruang dan membuatkan blog korang nampak lebih kemas blog,apa auto slide menu???krole pun tak tahu nak terangkan maca mana cuma krole boleh bagi contoh~tu yang kat sidebar krole~kalau korang rasa elok dan mantap sila ikut tutorial yang krole buat ini yer~seperti biasa krole akan cuba buat tutorial ini sesimple yang boleh agar mudah difahami.

kepada blogger nadzirah,krole harap wak paham dengan tutorial krole ni yer~heeeee.mula-mula apa yang korang perlu buat adalah download full template anda sebagai backup sekiranya tutorial ini tidak berfungsi~

langkah pertama : Login > Design > Edit HTML >Expand Widget

langkah kedua : cari code </head> ataupun <head> dan copy code dibawah ini~kemudian pastekan diatas code </head> tadi.

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

langkah ketiga : cari code h2 { dan tambahkan codedibawah ini selepas }

h4 {

background: #ffff00;

color: #666666;

margin-left: -1px;

margin-right: -1px;

margin-top: 0px;

margin-bottom: 1px;

padding-left: 10px;

padding-bottom: 5px;

padding-top: 5px;

border: 2px solid #996666;

font-size: 11px;

}

langkah keempat : save template anda dan kemudian pergi ke design>>page elements>>add a gadget>>HTML untuk memasukkan menu slide tadi di sidebar korang~pastekan saja code dibawah ini yer~

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] Web Blog</h4></a></ul>



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



<li><a href="http://link.com">Link 1</a></li>



</ul>

peringatan :
wana merah=mesti samakan namanya cam kat atas tu "keyword"so id pun kena taip "keyword"...korang le tukar apa-apa je tapi mesti sama yer.

warna hijau=merupakan tajuk dikotak anda~

warna biru=boleh tukar kepada code gambar,shoutmix atau macam-macam lagi,ikut kesukaan anda~

langkah kelima : save dan preview~sekiranya ada itu tandanya anda dah berjaya,yeahhhh!!!

p/s : selamat mencuba~