Cara Memasang Tombol Drop Down Dalam Postingan Blog

Cara memasang menu drop down atau show hide dalam postingan blog ini sengaja saya buat sebenarnya untuk blog saya sendiri yang nantinya akan saya terapkan kedalam beberapa artikel yang saya buat. Trik ini biasa juga dikenal dengan istilah load div on click. Ini karena cara kerjanya adalah memunculkan text yang dibungkus oleh <div></div> ketika diklik.

Show hide dalam postingan merupakan jenis tampilan menu yang ketika diklik akan memunculkan tulisan yang tersimpan didalamnya dan disembunyikan oleh script khusus dan pengaktivannya dilakukan melalui pemanggilan kode HTML yang terpasang pada halaman posting.

Menu drop down ini sebenarnya mirip dengan menu drop and down pada widget default blogger, seperti pada menu sidebar Archive blog ataupun mirip dengan show hide kolom komentar.

Cara ini merupakan cara optional, yang artinya boleh Anda terapkan dan boleh juga tidak. Saya sengaja membuat tutorial ini untuk saya terapkan di beberapa artikel yang saya buat.

Trik show hide multi div ini menggunakan jquery untuk menjalankan perintahnya. Multi div maksudnya adalah menggunakan beberapa jenis div yang saling berhubungan, Jadi nantinya ketika Anda melakukan klik pada div yang satu, maka otomatis div selanjutnya yang masih terbuka akan tertutup secara otomatis.

Keuntungan Menggunakan Menu Drop Down Postingan

Ada banyak keuntungan yang bisa Anda dapatkan dengan menggunakan trik ini,  termasuk merapikan tampilan dalam postingan. Drop down ini juga biasanya digunakan untuk sebuah artikel daftar atau list tentang seusatu yang banyak yang akan membuat tampilan blog jadi panjang kebawah. Maka dengan bantuan script ini, konten artikel yang panjang tersebut dapat disembunyikan dan dimunculkan lagi ketika di klik.

Cara Memasang Menu Drop Down Dalam Postingan

Pemasangan ini berlaku untuk banyak kode div, artinya, Anda bebas untuk meyembunyikan konten yang Anda sukai sesuai dengan keinginan, karena trik ini berlaku sebagai multi div sehingga setiap kode div yang Anda buat bisa menggunakan trik ini untuk memberlakukan script show hide.

Berikut ini adalah langkah-langkah maupun proses pemasangan menu show hide dalam postingan blog.

1. Silakan login pada akun blogger Anda

2. Masuk ke Theme Lalu pilih edit HTML

3. Pastekan kode dibawah ini diatas / sebelum kode ]]></b:skin> atau </style>

.dropdown-container {
    display: none;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.dropdown-content {
    padding: 10px;
    margin: 0 auto;
    background-color: #ccc;
}

.dropdown-button {
    background-color: #ddd;
    width: 100%;
    cursor: pointer;
    margin: 0 auto;
    padding: 5px 0
}

.dropdown-button span {
    padding: 10px
}

Kode CSS diatas merupakan kode yang sangat sederhana, silakan Anda ubah sesuai dengan style Anda sendiri

4. Selanjutnya, tambahkan kode script berikut ini sebelum </body> atau &lt;!--</body>--&gt;
Kode Javascript

<script>//<![CDATA[$(document).ready(function(){
    $(".dropdown-button").click(function(e) {
      e.preventDefault();
      var $div = $(this).next('.dropdown-container');
      $(".dropdown-container").not($div).slideUp();
        if ($div.is(":visible")) {
            $div.slideUp();
        }  else {
           $div.slideDown();
        }
    });
    $(document).click(function(e){
        var p = $(e.target).closest('.dropdown').length
        if (!p) {
              $(".dropdown-container").slideUp();
        }
    });   
});//]]></script>

5. Tahap terakhir adalah penambahan Kode HTML dalam postingan yang akan kita buat menu drop and down atau show and hidenya.
Tambahkan kode dibawah ini setiap kali Anda ingin membuat show hide paragraf post

<div class="dropdown">
    <div class="dropdown-button"><span>TULISAN PADA TOMBOL</span></div>
  <div class="dropdown-container">
      <div class="dropdown-content">ISI KONTENNYA DISINI</div>
  </div>
</div>

Untuk contoh penerapan dan hasilnya, bisa Anda lihat pada halaman codepen saya dibawah ini

• Result

Demikian artikel tutortial kali ini dari dewa plokis tentang cara menyembunyikan konten tertentu dalam postingan dan akan memunculkannya kembali setelah onclick tombol drop down.

Sumber : https://www.kompiajaib.com/2014/10/membuat-toggle-multi-div-content-di.html

Share