×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

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 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>
<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.
Buka komentar
Tutup komentar
  1. Keren dah tombol demonya, tutorialnya pun jelas, siap dipraktekin roni, makasih.

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup