Efek Toggle JQuery



Pernahkah Sobat always-sharing.com Melihat Blog Dengan sistem Show Hide Widget ? pasti pernah dong apalagi buat yang Sering Blogwalking ... eittsss tp jangan salah Paham dulu sobat ,ini bukan Seperti Punya saya , Melainkan Ada Backgroundnya , kita bisa gonta-ganti Warna Backgroundnya , Maaf ya sobat kalo ga ada contohnya , soalnya takut blog ane tambah berat , eitss lagi nih , jangan khawatir sobat , ini ga berat kok ane ga mau pasang soalnya biar blog tambah WUZZZZZZZ WUZZZZZZ WUZZZZZZ kalo di buka sama orang yang Koneksinya Lola Sperti saya , Dan Ram CPU nya yang kecil , apalagi jika kita memakai Browser Mozilla Firefox... Yah Udah lah everythings its gonna be ok , mari kita coba ya sobat ... Caranya Gampang banget,


Copas kode berikut ke HTML/Javascript.

<div class="post-body entry-content" id="post-body-6402279781121287089">
<style type="text/css">
.sh-hd{background:#9D0053;width:190px;padding:5px;height:160px;}
</style><script type="text/javascript">
$(document).ready(function(){$(".bukatutup").click(function(){$(".sh-hd").toggle(500);});});
</script><br />
<div class="jqwrapper">
<button class="Showhide">Show/Hide</button><br />
<br />
<div class="sh-hd" style="display: block;">
Konten di Sini</div>
</div>
<div style="clear: both;">
</div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
</span>
<span class="post-timestamp">
</span>
<span class="post-comment-link">
</span>
<span class="post-icons">
<span class="item-control blog-admin pid-1964225859">

</span>
</span>
<br />
<div class="post-share-buttons goog-inline-block">
</div>
</div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location">
</span>
</div>
</div>
nah di sana kan ada Warna Merah , Input Code yang mau di show hide Widgetnya , Contoh saya mau meng-show hide widget bernama Blablablabla , dan jadinya akan Seperti di bawah ini , liat ya ...

<div class="post-body entry-content" id="post-body-6402279781121287089">
<style type="text/css">
.sh-hd{background:#9D0053;width:190px;padding:5px;height:160px;}
</style><script type="text/javascript">
$(document).ready(function(){$(".bukatutup").click(function(){$(".sh-hd").toggle(500);});});
</script><br />
<div class="jqwrapper">
<button class="Showhide">Show/Hide</button><br />
<br />
<div class="sh-hd" style="display: block;">
<a href:blablablabla"title'blablablabla'blablablabla></a></div>
</div>
<div style="clear: both;">
</div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-author vcard">
</span>
<span class="post-timestamp">
</span>
<span class="post-comment-link">
</span>
<span class="post-icons">
<span class="item-control blog-admin pid-1964225859">

</span>
</span>
<br />
<div class="post-share-buttons goog-inline-block">
</div>
</div>
<div class="post-footer-line post-footer-line-3">
<span class="post-location">
</span>
</div>
</div>

Klik Save.dan lihat Widget Sobat , ...


Responses

0 Respones to "Efek Toggle JQuery"

Posting Komentar

•Sangat Saya Hormati Jika Anda Meninggalkan Komentar di Blog ini

•Mohon Maaf Blog ini Tidak Terima Komentar yang Mengandung Sara , Spamming , Flamming

•Kritik Dan Saran Dari Pembaca Semoga Bisa Membantu Memajukan Blog Ini

Regards : ~Sofyan_oZ~

 

Statistic Blog's



Free Page Rank Tool
Return to top of page Copyright © 2012 Always-Sharing | Blogspot Tutorial | From Zero To Hero | Template by HackTutors