Cara memasang box show hide dipostingan blog

Faronesia.com - Hallo blogger, selamat datang dan selamat belajar ngeblog hehe. Ok kali ini kita akan membahas tutorial yang bersangkutan dengan blog lagi yaitu cara membuat box show/hide pada postingan. Sebelum ke tutorialnya, apasih box show/hide? Apa fungsinya? Nah jika anda belum tahu mari simak penjelasan berikut ini.

Pengertian box show hide
Dari namanya saja menggunakan bahasa inggris yang artinya kotak atau box yang dapat dengan mudah dibuka maupun ditutup. Artinya, anda bisa memasang file, pdf, jpg, gif atau hanya sekedar tulisan teks didalam kotak tersebut. Dengan menggunakan box show hide agar blog semakin terlihat semakin cantik serta dinamis dan nampak profesional.

Admin kira para pembaca sudah faham dengan yang telah disebutkan diatas mengenai pengertian secara singkat dan fungsi dari box show/hide yang tutorialnya akan kita bahas. Sebagai tambahan, tutorial ini melibatkan pemasangan kode css, java script dan lainya maka dari itu admib berharap agar teliti dalam penerapan tutorial ini. Untuk meminimalisir rusaknya kode template akibat salah peletakan kode sebaiknya backup terlebih dahulu template blog anda.

Cara memasang box show hide dipostingan blog
  • Masuk dashboard blog milik anda
  • Masuk ke menu tema lalu klik edit html
  • Cari kode ]]></b:skin> atau atau </style>
  • Tempelkan kode dibawah ini tepat diatas kode ]]></b:skin> atau kode </style>
/* Animation */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
#flippy{text-align:center;margin:auto;display:inline}#flippy button{background:#fff;background-image:linear-gradient(to right,#34ea78 0%,#2da7e3 51%,#34ea78 100%);background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s}#flippy button:hover,#flippy button:focus{background-position: right center;outline:none;opacity:1;color:#fff}#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}#flippanel img{background:#f5f5f5;margin:10px auto}
  • Lalu silahkan anda cari kode </body>
  • Letakkan kode dibawah ini tepat diatas kode </body>
<script>
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
</script>
  • Simpan template tersebut
  • Lalu buatlah postingan baru pada blog lalu klik mode html, selanjutnya tempelkan kode dibawah ini
<div id="flippy"><button>BUKA</button></div>
<div id="flippanel">FARONESIA adalah situs resmi yang menyajikan informasi seputar internet dan teknologi rekomendasi terbaik dengan berbagai konten seru dan mudah dipahami</div>
Keterangan:
TEKS BERWARNA MERAH adalah kalimat perintah untuk membuka box tersembunyi, anda bisa mengubahnya sesuai selera.
TEKS BERWARNA KUNING adalah kalimat isi yang tersimpan pada box/kotak tersebut, anda bisa mengubahnya sesuai selera.
  • Publikasi postingan yang telah anda buat, dan lihat hasilnya.
Untuk pelengkap dari tutorial ini maka admin juga menyediakan demonya pula, silahkan klik dibawah ini
Nah demikianlah cara memasang box show hide dipostingan blog, mudah sekali bukan? Selamat mencoba. Jangan lupa share artikel ini jika bermanfaat dan berikan komentar terbaikmu tentang artikel ini.
Show comments
Hide comments

1 Response to "Cara memasang box show hide dipostingan blog"

  1. Keren dah tombol demonya, tutorialnya pun jelas, siap dipraktekin roni, makasih.

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel