BUKAN TUTORIAL >> Auto Slide Widget

Salam 1Malaysia Semua

Pagi ini ammboi nak memenuhi permintaan rakan kita untuk ajar macam mana buat AUTO SLIDE WIDGET. Ammboi tak berapa pandai sangat bab-bab tutorial ni. Tapi ammboi gagahkan diri jugak la nak buat benda ni. Harapnya anda yang membaca dan cuba membuatnya fahamlah.

Sebenarnya dah 3 kali ammboi buat tutorial ni. Tapi tak tahulah keberkesanannya pada korang yang membacanya. Tak faham? hehehe...ammboi akan cuba sebaik mungkin.

Tutorial Bina Kotak Iklan
Tutorial Buat Widget Bacalah
Tutorial Buat Horizontal Tab Menu

BUAT AUTO SLIDE WIDGET

Apa itu auto slide widget ni? Ianya macam yang ammboi guna untuk sembunyikan CBOX dan SHOUTBOX kat tepi blog ammboi ni. Nak buat ni ammboi belajar dekat blog brother KROLE. Kalau korang tak faham apa yang ammboi buat kat bawah ni boleh lah korang jenguk blog dia yer.

STEP 1

Korang LOGIN BLOG - DESIGN - EDIT HTML
Pastikan korang tick pada EXPAND WIDGET TEMPLETE
TEKAN Ctrl + F cari kod ni


</head>


Pastu Paste kan kod dibawah diatas kod 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>


Hasilnya akan jadi macam pic kat bawah ni :

STEP 2

Lepas tu korang cari kod h2 { dan korang paste kan kod kat bawah ni selepas tanda }


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;



}


Hasilnya akan jadi macam pic kat bawah ni :

SEKARANG BOLEH SAVE TEMPLATE



STEP 3

Korang pegi DESIGN - ADD a GADGET - HTML / JAVASCRIPT
Paste kan kod bawah ni dalam tu.


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


Nota : 

1- EDIT NAMA KEYWORD ---->>> Keyword (pastikan dua-dua keyword ni sama)
2- EDIT NAMA TAJUK ---->>> web blog
3- EDIT CODE WIDGET ----->>> dalam link.com

Contoh macam kat bawah ni.

SAVE dan SIAP!

p/s : ada masalah tanya yer...