Trik Blogging - Pada postingan sebelumnya kita telah membahas tentang Kode Css jenis border.
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'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
- Langkah kedua menempatkan CSS kodenya, tepat dia atas tag ]]></b:skin>
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>
Sekian..
minta bantuannya...
BalasHapusklau untuk menampilkan kode css yg disembunyikan?kasus saya ingin menghilangkan This post was written by: Franklin Manuel
dan mengganti 'Pilihan lain' di akhir post, thanks bangetjwbannya.. kasus di blok saya di bawah ini..
http://www.mayherbal.blogspot.com/2012/11/herbal-sarang-semut-myrmecodia_1195.html
itu mah lewat template sob, search di template ganti dech
Hapus