Thursday, January 07, 2016
Cara Membuat Spoiler Dalam Postingan Blog
Artikel kali ini saya akan membahas tentang cara membuat spoiler di dalam posting blog dengan mudah. Pada dasarnya memasang atau membuat spoiler di dalam posting adalah untuk menyembunyikan sebuah gambar berukuran besar atau kode script yang kita tulis tidak terlalu panjang dan terlihat rapi. Selain itu, dengan menggunakan spoiler dalam posting dapat membuat penggunjung blog kita merasa penasaran apa yeng ada di balik tombol spoiler bila di klik dan bisa mempercepat loading blog.
Sebenarnya trik ini sudah lama dipakai oleh para blogger, tapi tidak ada masalah saya hanya ingin berbagi pengetahuan untuk anda semua yang sedang ingin mengembangkan blognya. Langsung saja kita ketahap pembuatanya, sebagai berikut:
Sebenarnya trik ini sudah lama dipakai oleh para blogger, tapi tidak ada masalah saya hanya ingin berbagi pengetahuan untuk anda semua yang sedang ingin mengembangkan blognya. Langsung saja kita ketahap pembuatanya, sebagai berikut:
Cara memasang Tombol spoiler di dalam blog
Pertama-tama anda masuk ke dalam dasbhoard blog anda.
Kemudian klik Template>> Edit HTML, lalu anda cari kode ]]></b:skin> setelah ketemu pastekan kode di bawah ini tepat diatasnya.
Baca : cara membuat widget related post fast loading
Untuk memangil Jquery di atas, setiap kali anda ingin menyembunyikan gambar atau tulisan dalam posting gunakan metode HTML bukan Compose, lalu anda simpan dan letakan dimana yang anda inginkan.
Anda ganti tulisan warna biru sesuai selera anda dan gunakan kode di atas setiap ingin membuat spoiler dalam posting. Simpan kode di atas di notepad atau document anda.
Saya rasa sampai di sini dulu semoga bermanfaat.
#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;}Setelah langkah di atas sudah, selanjutnya anda cari kode </body> tempatkan kde di bawah ini tepat di atasnya.
Simpan Template anda.<script>$(document).ready(function() {$("#flippy").click(function() {$("#flippanel").slideToggle("normal");});});</script>
Baca : cara membuat widget related post fast loading
Untuk memangil Jquery di atas, setiap kali anda ingin menyembunyikan gambar atau tulisan dalam posting gunakan metode HTML bukan Compose, lalu anda simpan dan letakan dimana yang anda inginkan.
<div id="flippy"><button>Spoiler</button></div>Catatan:
<div id="flippanel">
Tempat tulisan untuk di sembunyikan
</div>
Anda ganti tulisan warna biru sesuai selera anda dan gunakan kode di atas setiap ingin membuat spoiler dalam posting. Simpan kode di atas di notepad atau document anda.
Saya rasa sampai di sini dulu semoga bermanfaat.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment