Kali ini saya akan memberi tips lagi untuk sobat blogger yaitu bagaimana cara
membuat panel show/hide yang lebih sederhana. Show/hide atau biasa di
sebut spoiler, sangat berguna kala kita memposting sebuah artikel,
terutama artikel yang banyak mengandug gambar. Gambar dalampostingan
akan disembunyikan dan hanya bisa di buka ketika kita mengklik tombol
buka.
Kalau begitu tanpa basa - basi lagi kita langsung saja Tutorial blogspot nya :
- Langkah pertama copy code berikut dan tempatkan tepat di bawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
Langkah kedua menempatkan CSS kodenya, tepat dia atas tag ]]></b:skin>
<script type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:black;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}Kemudian Save template anda.- Langkah terakhir tinggal menepatkan kode berikut di antara tag <body> dan </body> atau bisa juga di sidebar.
<div class="panel">
<p>TEKS ANDA DISINI!</p>
<p>TEKS ANDA DISNI!</p>
<span style="float: left; font-size: 80%;">Widget by <a href="http://christiantatelu.blogspot.com/">IDE BAGUS</a></span>
</div>
<p class="flip">show/hide</p>Selesai.............Selamat berpuyeng ria wkwkwkwkwwk....Soalnya gua juga punnyeng Tapi berhasil...
0 komentar:
Posting Komentar