Tutorial :Buat Auto Hide Menu
Korang tau tak apa itu auto hide menu? Cuba tengok gambar kt atas ni. Inilah yang dinamakan auto hide menu. Auto hide menu ni digunakan bagi menampakkan blog kita nampak lebih kemas. Tak ada adalah list yang berjela2 panjangnya dan visitor yang datang pon boringkan.
Tutorial kali ni nak share dengan korang macammana nak buat auto hide menu ni. Apa2 pun mula2 kredit dulu lah pada silampuneon untuk tutorial ni. First time nampak auto hide menu ni pun kt blog ni. Tq yekk...
Tapi tutorial ni dah disesuaikan dengan blog ni lah. Korang boleh tukar ikut kesesuaian korang k.
1. Pergi ke Dashboard > Design > Edit HTML
2. Cari code berikut dengan CTRL + F
3. Letakkan kod di bawah dan letakkan di atas kod yang korang cari di step 2 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>
5. Pergi ke Dashboard >Layout >Add A Gadget >HTML/Javascript.
6. Copy kod di bawah ni dan letakkan pada HTML/Javascript.
<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> <h4>[+/-] POPULAR POST</h4></a></ul>
Note :
- Pada perkataan berwarna merah korang boleh tukarkan dengan tajuk yang korang nak.
- Pada perkataan berwarna hijau, make sure sama kalau tak auto hide menu tak berfungsi. Tapi letakkan perkataan yang berlainan untuk setiap menu. Contohnya kalau menu pertama korang letak keyword, kt menu kedua tu letaklan banner atau apa2 perkataan yang korang nak.
- Pada perkataan berwarna biru, letakkan kod widget korang macam contoh di atas. Boleh ditambah ikut kesesuaian korang k.
<ul class="texthidden" id="keyword">
<center> LETAKKAN KOD WIDGET KORANG KT SINI *</center>
*</center>
</ul>
<ul><a href="javascript:void(0);" onclick="expandcollapse('button')"> <h4>[+/-]PESERTA CONTEST</h4></a></ul>
<ul class="texthidden" id="button">
<center><li><a href="http://teanyh.blogspot.com/2011/04/you-wannitcome-and-get-it-contest.html">cikblogger</a></li></center>
*</center>
</ul>
<center> LETAKKAN KOD WIDGET KORANG KT SINI *</center>
*</center>
</ul>
<ul><a href="javascript:void(0);" onclick="expandcollapse('button')"> <h4>[+/-]PESERTA CONTEST</h4></a></ul>
<ul class="texthidden" id="button">
<center><li><a href="http://teanyh.blogspot.com/2011/04/you-wannitcome-and-get-it-contest.html">cikblogger</a></li></center>
*</center>
</ul>
Note :
- Pada perkataan berwarna merah korang boleh tukarkan dengan tajuk yang korang nak.
- Pada perkataan berwarna hijau, make sure sama kalau tak auto hide menu tak berfungsi. Tapi letakkan perkataan yang berlainan untuk setiap menu. Contohnya kalau menu pertama korang letak keyword, kt menu kedua tu letaklan banner atau apa2 perkataan yang korang nak.
- Pada perkataan berwarna biru, letakkan kod widget korang macam contoh di atas. Boleh ditambah ikut kesesuaian korang k.
0 comments: