Membuat Spoiler pada Postingan Blog Dengan Efek Slide

Membuat Spoiler pada Postingan Blog Dengan Efek Slide - Pada kali ini gwa mau njelasin nih beberapa tutorial blog sederhana yaitu, Memasang Spoiler Pada Postingan kali ini. apasih Spoiler itu? mau tau spoiler itu kaya gimana? yaaa.. seperti ini

BAAA!!

yap bener sekali, biasanya spoiler seperti itu digunakan oleh agan agan kaskuser di Thread mereka tapi yang satu ini dengan menggunakan Efek Slide jadi ada gimananyaa gitu.. xixixi.. Tertarik? yuk langsung aja ke tutorialnya :

• Pertama kita buka Blogger > Template > Edit HTML lalu masukkan kode CSS dibawah ini sebelum kode </style> atau ]]></b:skin> 

#flippy {
    text-align: center;
}
#flippy button {
    background: #aa65c7;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.1s ease-in-out;
}
#flippy button:hover, #flippy button:focus {
    background: #9e4fbf;
    outline: none;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: #f5f5f5;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}

Keterangan :
#aa65c7 : Warna background (tombol)
#fff : Tulisan
#9e4fbf : Warna setelah disentuh
#f5f5f5 : Warna background (halaman)
Jika ingin mengganti warna tersebut bisa liat kode warna yang agan inginkan disini

• Kedua masukin kode jQuery ini ke dalem lubang. eh salah maksudnya silahkan terapkan sebelum kode </body> 

<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

• Ketiga cukup letakkan kode dibawah ini pada Postingan Tab HTML

<div id="flippy"><button>Billy-Art</button></div>
<div id="flippanel">
---ISI SPOILER---
</div>

Seperti Ini

Keterangan : 

• Billy-Art : ganti dengan Judul Spoiler
• ---ISI SPOILER--- : ganti dengan isi Spoiler yang kalian inginkan (Bisa berupa Gambar ataupun Video)

Mudah bukan? semoga bermanfaat buat blogger semuanya! 

Source : http://arlinadesign.blogspot.com/2014/11/memasang-spoiler-di-postingan.html

Tweet