Hai kali ini saya mempunyai request dari teman saya,
"bagaimana membuat kotak buka tutup yang keren?"
Maksudnya spoiler ya ,owh oke deh tampilannya
Seperti di bawah ini.
Nah bagaimana sobat?
Oke deh kita langsung saja,Install Script,CSS,dan HTMLnya
Letak di HTML di sebelah Composse ya sobat :)
<script type="text/javascript" src="http://faceblog-evolutions.googlecode.com/files/jquery.gallery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<style type="text/css">
#panel { color:#000; background: #E9FBE9; height: 200px; padding: 10px; display: none; }
.slide { margin: 0; padding: 0; border-top: solid 5px #52e052;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl9JTvLOuqZHYA5Dy64RDynpmJ1GUrdYoTV7sdtxGbnzYRvKixwFSvFKN8bewfQz5t8Lr5UHxT_gAEYAGWCZUGVndz1-lMFYMKHWta8FkeDNITFPAim_zLNbFhRBt7LJDYzM5-H1nF4DF-/s154/Faceblog+Evolutions.png) no-repeat center top; }
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1HeGHMX-cClI3jG74SSmi-ZmZqfrc1ylE8r9d2qlyCEJUOHBaaxkWGeHv2bnm4PfexUnrYcPk83-WM1gNCdYHcdRNycmbeDoVIydmZKA0akzLBGzEI32wv01P_H9nKV3KuEedQIBcjtfR/s70/white-arrow.gif) no-repeat right -50px;
text-align: center; width: 144px; height: 31px;
padding: 10px 10px 0 0; margin: 0 auto; display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #000; text-decoration: none; }
.active { background-position: right 12px; }
</style>
<div id="panel">
GANTI DENGAN TEKS/DESKRIPSI YANG DI INGINKAN
</div>
<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
Semoga bermanfaat :)
Title : Spoiler Simple di Blog
Description : Hai kali ini saya mempunyai request dari teman saya, "bagaimana membuat kotak buka tutup yang keren?" Maksudnya spoiler...
