Cara Mudah Pasang Box Show Hide Di Postingan Blog [Pakai / Tanpa CSS]

Selamat datang lagi sahabat blogger, jika sahabat sedang baca tulisan ini, pastinya sedang ingin memperbaiki atau paling tidak menambah kesempurnaan blog. ya kan?

Sebentar-sebentar, coba saya tebak, anda ingin membuat box show hide karena ingin memasang file kan? misalnya, file PDF, Doc dan lain-lain kan?

Atau hanya ingin memasang tulisan saja? Oke lah, saya tidak ingin berspekulasi dengan tujuan anda, tapi yang jelas, sahabat mungkin sudah kesekian kalinya mencari tutorial ini di halaman pencarian, tapi banyak yang gagal.

Sebelumnya, perlu dijelaskan disini, apa sih sebenarnya box show hide itu? ada apa fungsinya? nah bagi yang tidak tahu, silahkan baca sampai habis. Tapi bagi yang sudah paham, abaikan saja penjelasan saya di bawah ini.

Box Show Hide Atau Box Collapsible Show/Hide

Diperhatikan dari bahasanya, sudah jelas, ini adalah sebuah kotak atau box, yang dapat dengan mudah dibuka dan ditutup.

Artinya, kita bisa memasang beberapa jenis file, misalnya PDF, Doc, atau gambar dengan file jpg, png, gif, atau sekeda tulisan saja, di dalam kotak tersebut, dan dapat dibuka/ ditutup dengan mudah pula.

Tujuan memasang Box Show/Hide ini, biasanya digunakan oleh para pemiliki blog dengan nice download, dengan harapan blognya semakin terlihat profesional.

Fungsi Box Collapsible Show/Hide

Pada dasarnya, pemilik blog tidak ingin membuat pengunjungnya jenuh, bosan, apalagi ingin cepat-cepat tekan tanda x merah di bagian atas alias close. betul kan?

Mereka sebisa mungkin mencoba menarik perhatian para pengunjung, termasuk saat pemiliki blog ingin memasang box ini.

Namun nyatanya, tidak semua tutorial memberikan solusi, tapi justru menyesatkan [bercandra broo]. sakit kan?

Saya sendiri tidak ingin mencegah anda untuk menggunakan box ini, hanya saja anda harusnya tahu apa sih sebenarnya fungsi boc show hide tersebut? berikut sederhananya :

1. Mempercepat Loading Blog, artinya, saat anda memasang file-file dengan kapasitas besar, tentu halaman tersebut harus membaca seluruh bagian, dan itu membutuhkan waktu. Namun, jika sahabat memasangnya di dalam box, maka file tersebut hanya akan terbaca saat pengunjung membukanya.
2. Meringkas dan Mempercantik Blog. Artinya, pengunjung akan lebih suka blog dengan tampilan minimalis, tidak memuat terlalu panjang tulisan / post.

Oke, saya kira itu adalah dua fungsi utama dari box show hide. Jadi, apakah sahabat masih ingin memasangnya di bagian postinga? Jika ya, jangan abaikan tutorial ini. Mengapa?

Sebab, saya akan memberikan dua sekaligus model box show/ hide ada yang tanpa css, ada yang pakai, yang bisa sahabat pilih sesuai kesukaan. menarik bukan?

Cara Pasang Box Show Hide Di Postingan Blog.

Biasanya, anda melihat tutorial yang ada, dimulai dari langkah-langkahnya, baru bagian demo / contoh. kalau sih tidak, dalam tutorial ini, saya akan memberikan contohnya terlebih dahulu.

1. Cara Pertama [Box Show Hide Tanpa Kode CSS]

Contoh, lihat demonya BACA ONLINE KITAB BIDAYAH

Langkah pertama, tentu saja sangat simple, silahkan masuk ke dashbor blog sobat, seperti biasa bikin postingan baru.

Langkah Kedua, gunakan mode HTML, sebelum memasukkan kode berikut ini :

<center>
<div style="margin-top: 5px; margin: 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>INGIN BUKA?</b>: <input onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = '';       
this.innerText = ''; this.value = 'TUTUP'; } else {
this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText =
''; this.value = 'BUKA LAGI'; }" style="margin: 0px; padding: 0px; width: 150px;" type="button" value="TEKAN DISINI" />
</div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;">
<div style="display: none;">
<center>
URL FILE PDF, GAMBAR, TULISAN HALLO BRO, CILUK BAAA DLL
</center>
</div>
</div>
</div>
</center>

Keterangan :

Ganti INGIN BUKA? dengan tulisan pengantar untuk membuka, misanya INGIN BACA? PENASARAN?

Ganti tulisan TUTUP misalnya dengan TUTUP LAGI

Ganti tulisan BUKA LAGI jika ingin meminta pengunjung untuk membuka boc kembali

Ganti tulisan TEKAN DISINI dengan tulisan sesukanya.

Ganti tulisan URL FILE PDF, GAMBAR, TULISAN HALLO BRO, CILUK BAAA DLL dengan file-file atau tulisan kalian.

Langkah ketiga, Simpan, Coba lihat.

2. Cara Kedua [Box Show Hide Pakai Kode CSS]

Contoh, lihat demonya lihat bagian bawah DISINI

Bagaimana cara bikinnya? agak rumit sih, sebab ini pakai kode CSS, tapi tenang, unttk pemasangan nanti kode scriptnya tidak terlalu panjang.

Langkah Pertama, Buka Dashbor blogger

Langkah Kedua, masuk ke TEMA kemudian tekan Edit HTML. Sekedar saran, sebaiknya, copy dulu seluruh kode template sobat dan simpan di notepad, agar jika terjadi kerusakan, bisa dikembalikan lagi.

/* 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}

Langkah ketiga, Cari kode ]]></b:skin> atau </style>, dan letakkan kode CSS di bawah ini tepat sebelum kode ]]></b:skin> atau </style> tersebut.

Langkah Keempat, cari kode </body>, dan letakkan kode script di bawah ini tepat diatasnya

Langkah kelima, Simpan Tema

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

Langkah Keenam, masuk ke bagian postingan, buatlah postingan baru untuk menguji, sudah berhasil apa belum. Jangan lupa, ubah posisi post menjadi HTML terlebih dahulu, dan masukkan kode di bawah ini.

<div id="flippy"><button>BUKA</button></div><div id="flippanel"> CILUK BAA</div>

Keterangan :

Ganti tulisan BUKA, dengan kata-kata anda sendiri, misalnya PENASARAN? TEKAN DISINI

Ganti tulisan CILUK BAA  dengan file, gambar, teks dan lain sebagainya.

Langkah ketujuh, Simpan dan publikasikan, dan lihat hasilnya.

Nah, demikianlah Dua Cara Memasang Box Show / Hide di Postingan Blogger, tentu sahabat bisa pilih antara keduanya, baik yang pakai CSS atau tanpa CSS. selamat mencoba.

Berbagi :