Cara Memasang Box Show Hide File Di Postingan Blog

Sebelum masuk ke tutorialnya, mungkin Anda masih belum mengetahui apa sih sebenarnya box show hide itu dan apa fungsinya? Nah, bagi Anda yang tidak tahu, silahkan baca artikel ini dari awal sampai akhir. Tapi, bagi Anda yang sudah paham, Anda boleh menskip langsung ke tutorialnya yaitu cara memasang box show hide di postingan blog.

Box Show Hide, apabila diperhatikan dari arti bahasanya, jelas sekali kalau ini adalah sebuah kotak atau box yang dapat dibuka dan ditutup. Jadi, bisa dikatakan kalau Box Show Hide merupakan widget untuk memasang beberapa jenis file ke dalam suatu box, seperti file PDF, Doc, JPEG, PNG, dan GIF, atau hanya sekedar teks saja, dan nantinya box berisikan file tersebut bisa Anda buka atau pun tutup dengan mudah.
Biasanya blog-blog berniche download yang menggunakan Box Show Hide ini. Selain blog bisa terlihat lebih profesional, memasang Box Show Hide di blog juga jadi sebagian usaha yang patut dicoba untuk menarik perhatian pengunjung blog agar tidak cepat bosan dan ingin segera menekan icon close yang ada di bagian atas. Contohnya saja, blog Anda adalah blog yang fokus men-share ebook (buku elektronik) berbentuk PDF, ZIP, maupun Doc.

Dengan Box Show Hide, pengunjung blog Anda bisa memilah dan memilih lagi supaya hanya mengakses ebook-ebook tertentu sesuai kebutuhan mereka. Tanpa harus terganggu dengan file ebook lainnya yang tidak sesuai.
Fungsi lain dari Box Show Hide yaitu mempercepat loading blog. Kenapa begitu? Waktu loading untuk memuat seluruh bagian halaman bergantung pada kontennya, jika konten ditaruh file berkapasitas besar bukan tidak mungkin akan berakibat loading lama. Nah, Anda bisa mengakali ini dengan menaruh file di dalam box, proses loading lebih cepat karena file hanya dimuat jika pengunjung membukanya. Terakhir, blog juga dapat terlihat lebih rapi dan cantik karena tidak menampilkan postingan yang terlalu panjang.

Cara Memasang Box Show Hide File Di Postingan Blog
Cara Memasang Box Show Hide File Di Postingan Blog

Baca Juga : 7 Aplikasi untuk Melihat Unfollow IG Paling Recommended

Oke, itu dia pengertian dan fungsi Box Show Hide. Selanjutnya masuk ke tutorial membuatnya. Di bawah ini Cara Memasang Box Show Hide File Di Postingan Blog yang bisa Anda coba menggunakan kode CSS.

1. Langkah pertama, tentunya masuk ke akun Blogger Anda.

2. Kemudian, silahkan pergi ke kemu “Tema” atau “Template”.

3. Klik “Edit HTML”.

4. Cari kode ]]></b:skin> atau </style> dan letakkan kode CSS di bawah ini tepat di atas kode tersebut.
/* 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}

5. Setelah itu, cari kode </body> dan letakkan skrip kode berikut ini tepat di atasnya.
<script>
$(document).ready(function(){$(“#flippy”).click(function(){$(“#flippanel”).slideToggle(“normal”)})});
</script>

6. Simpan.

7. Setelah itu, silahkan pergi buat postingan baru dan masuk menggunakan mode HTML. Lalu, masukkan skrip kode di bawah ini.

<div id=”flippy”><button>Buka Di Sini</button></div><div id=”flippanel”>www.contohfile.com</div>

Keterangan :

– Ubah kata-kata Buka Di Sini dengan kata-kata Anda sendiri. Misalnya, Buka Di Sini, Penasaran?, Download Di Sini, Klik Di Sini, dan lain sebagainya.

– Ganti www.contohfile.com dengan alamat URL file Anda.

8. Simpan dan lakukan pratinjau untuk melihat hasilnya. Jika sudah dirasa pas, silahkan publish postingan Anda.

Demikian Cara Memasang Box Show Hide File Di Postingan Blog. Selamat mencoba.

Baca Juga : Cara Memperkuat Sinyal Wifi Android Tanpa Aplikasi yang Ampuh

Previous Post
Next Post
Bagikan:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *