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 mungkin 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>Keterangan:
<div id="flippanel">FARONESIA adalah situs resmi yang menyajikan informasi seputar internet dan teknologi rekomendasi terbaik dengan berbagai konten seru dan mudah dipahami</div>
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.
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.