27 Agustus 2009

Pin It

Membuat Show hide Widget

 Membuat Show hide Widget | Khamardos's Blog
bagi-bagi tutorial yuukk !!!

Ok.
bagi yang belum tahu apa itu showhide :
show : Muncul
hide : Sembunyi
wkwkwkkwwkwkwk.....

fungsi dari showhide ini adalah selain untuk mempercantik halaman page blog kita, tapi juga berguna untuk menghemat halaman blog kita ...

baiklah, mari kita mulai tutotialnya...

langkah pertama adalah menginjeksi kan sebuah Js yang berfungsi sebagai Action, adapun Js tersebut adalah







function show_hide(the_box) {
if (document.getElementById(the_box)) {
if (document.getElementById(the_box).style.display == 'none') {
document.getElementById(the_box).style.display = 'block';
}
else {
document.getElementById(the_box).style.display = 'none';
}
}
}



injeksikan file js tersebut ke webhosting kepercayaan anda...
Simpan dengan nama SHOWHIDE.JS

setelah itu...
dari Dasbor -> Tata Letak -> Edit HTML

masukkan kode ini di atas kode : <![CDATA[/*


<script src='http://khamardos.googlecode.com/files/show%20hide.js' type='text/javascript'></script>

Isi http://khamardos.googlecode.com/files/show%20hide.js dengan url js SHOWHIDE.js yang baru anda hosting...

setelah itu klik Simpan Templete ...

Langkah kedua,
Dasbor -> Tata Letak
bila anda ingin menyisipkan kode pada box baru, klik add widget ...
lalu klik Javascript/Html
Kosongkan bagian Judulnya, dan masukkan file dibawah ini pada isi dari widget tersebut !!!

<h2><a href="#" onclick="show_hide('DIV_ID_NYA'); return false"><div title="">JUDUL YANG AKAN TAMPIL</div></a></h2>
<div id="DIV_ID_NYA" style="display: none;">


Isi dengan kode html atau file-file anda !


</div>

contah penggunaan !!!

<h2><a href="#" onclick="show_hide('LINK'); return false"><div title="">LINK SAYA</div></a></h2>
<div id="LINK" style="display: none;">


<font face="Times New Roman" color="red" size="4">Link Me :</font><br/>Semua saling membutuhkan.<br/>
Begitu juga saya, tolong masukkan link saya pada situs anda.
<br/><br/>
<center><a href="http://khamardos.co.cc/" target="_blank"><img border="0" alt="Mufied Blog" width="180" src="http://i655.photobucket.com/albums/uu271/spantibelspku/blog/logo.png" height="80"/></a></center><br/>Copy This Link :<br/><form action="" name="form1" method="post"><textarea onmouseout="hideddrivetip()" onclick="select_all();" ;="" readonly="readonly" onmouseover="ddrivetip('Terima kasih atas bantuannya.<br>Press Ctrl + C','#000000')" cols="20" rows="3" name="type"><a href="http://khamardos.co.cc/" target="_blank"><img border="0" alt="mufied's Blog" width="180px" src="http://i655.photobucket.com/albums/uu271/spantibelspku/blog/logo.png" height="80px"/></a></textarea>
</form>


</div>


Lalu klik simpan, Silahkan liat hasilnya diblog anda !!!


Info from Ojanz and Coco_nk4l
Share To lintasberita.com | Khamardos Blog

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

3 comments:

Klik Untuk Lihat Komentar

!Ryan! on 28 Agustus 2009 04.21 mengatakan...

Wow manstaf nich tutor n perlu dipraktekkan tapi msh blm mudeng hal yg beginian xixixi...:-)

Mufi_ed on 29 Agustus 2009 19.52 mengatakan...

-> Ryan : heheheee,,,, :D
silahkan di coba bro !!! :)

Tanya Gratisan on 9 Februari 2010 22.31 mengatakan...

oke banget sob kalo Show/hide komentar pengunjung seperti blog ini gimana sob... :D

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied