Home » , , » Cara membuat show/hide sederhana di blog simple

Cara membuat show/hide sederhana di blog simple

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(){
$(&quot;.flip&quot;).click(function(){
$(&quot;.panel&quot;).slideToggle(&quot;slow&quot;);
});
});
</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..
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

2 komentar:

  1. minta bantuannya...
    klau 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

    ReplyDelete
    Replies
    1. itu mah lewat template sob, search di template ganti dech

      Delete

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger