Spoiler unik yang saya berikan kali ini tentunya berbeda dari tutorial membuat spoiler yang sudah saya tulis sebelumnya, jika anda belum mengetahui cara membuat spoiler, ada baiknya jika anda sempatkan waktu terlebih dahulu membaca Cara Membuat Spoiler di Postingan Blog .
Pada posting terdahulu, saya memberikan anda spoiler dengan bentuk seperti ini ;
Pada posting terdahulu, saya memberikan anda spoiler dengan bentuk seperti ini ;
Contoh Spoiler :
Sedangkan pada posting kali ini, saya akan berikan untuk anda spoiler dengan penampakan sebagai berikut ;
Lorem ipsum dolor sit amet, ciyus miapah? consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Bagi yang belum tau cara membuatnya, mari ikuti langkah langkah berikut ;
1. Masuk ke edit HTML template anda
2. Salin kode berikut di bawah kode <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
3. Save template
Selanjutnya saat membuat posting baru, masuk ke mode HTML kemudian copy script berikut ;
Klik Untuk Membuka Kode
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#ffffff;
border:solid 1px #c3c3c3;
}
#panel
{
padding:15px;
display:none;
}
</style>
<body>
<div id="flip"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhl8nFERlWtOwKUkdUUL_cnIsdLyVB7m0rdOIoy8DsVNc39UQ_xCDFGtB2h91of2PmdjzVmJt9gN4MTzDbkx8evqY9bhuwhltCFO1POHFYeYWJlF3v91JxoO7HikhKFYEpeRny708os4/s1600/button_blue_eject+-+Copy.png" title="klik di sini" alt="code spoiler"/> </div>
<div id="panel"> Tuliskan isi spoiler anda di sini </div>
</body>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#ffffff;
border:solid 1px #c3c3c3;
}
#panel
{
padding:15px;
display:none;
}
</style>
<body>
<div id="flip"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhl8nFERlWtOwKUkdUUL_cnIsdLyVB7m0rdOIoy8DsVNc39UQ_xCDFGtB2h91of2PmdjzVmJt9gN4MTzDbkx8evqY9bhuwhltCFO1POHFYeYWJlF3v91JxoO7HikhKFYEpeRny708os4/s1600/button_blue_eject+-+Copy.png" title="klik di sini" alt="code spoiler"/> </div>
<div id="panel"> Tuliskan isi spoiler anda di sini </div>
</body>
Tidak ada komentar:
Posting Komentar