Cara Menciptakan Tombol Hide & Show Paling Gampang Dan Sederhana

Membuat Tombol Hide & Show Paling Praktis dan Sederhana - Hai sahabat blogger, kali ini aku akan membuatkan sedikit pengalaman dikala aku mencar ilmu dan mencoba menciptakan tombol hide and show di dalam postingan. Fungsi dari hide and show (spoiler) yang dimaksud di sini ialah sesuai dengan makna dari kata tersebut, yaitu menciptakan tombol yang dapat dilihat dikala di klik dan juga tersembunyi dikala di klik.

kali ini aku akan membuatkan sedikit pengalaman dikala aku mencar ilmu dan mencoba menciptakan tom Cara Membuat Tombol Hide & Show Paling Praktis dan Sederhana

Adapun tujuan dari pembuatan tombol hide & show ini sangat bermacam-macam sesuai kebutuhan masing-masing. Namun intinya ialah untuk menciptakan postingan atau goresan pena artikel supaya tidak terlalu panjang, menyembunyikan gambar semoga loading blog tidak terlalu berat, dan lain sebagainya. Dan tujuan aku sendiri menciptakan tombol hide & show ialah untuk menyertakan sumber artikel yang aku tulis. Makara dikala tombol di klik maka dari mana sumber artikel yang aku tulis dapat terlihat. Untuk pola jelasnya dapat teman-teman lihat di selesai postingan ini.

Sebenarnya sudah banyak di luar sana para mastah yang menjelaskan menciptakan tombol hide and show secara lengkap. Namun tidak ada salahnya juga kan bila aku ikut berbagi? Paling tidak dapat menjadi dokumentasi aku pribadi, terlebih bermanfaat bagi sahabat yang membutuhkan di sana.

Nah, sebab aku bukan seorang blogger profesional yang hebat bahasa pemrograman web, maka di sini aku hanya akan membuatkan cara menciptakan tombol hide & show yang paling gampang dan sederhana. Kemungkinan besar sangat cocok bagi teman-teman yang gres terjun di dunia blogging yang ingin semakin kreatif mempercantik template blog sendiri.

Langkah Membuat Hide & Show di dalam Postingan


Bagaimana caranya? Sangat gampang kok, yaitu cukup menambahkan jQuery, CSS, dan JavaScript di dalam template serta memanggilnya dengan sedikit instruksi HTML di dalam postingan. Semua kodenya ada di sini dan aku yakin teman-teman dapat eksklusif menerapkannya. Lebih jelasnya silahkan ikuti langkah-langkah berikut:

1. Tambahkan jQuery Library sebelum </head>

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'/>
Karena tutorial yang aku bagikan ini memakai jQuery, maka teman-teman wajib menambahkan jQuery Library di dalam template berapapun versinya. Jika sudah ada maka abaikan saja. Gunakan tombol CTRL + F kemudian ketik instruksi nya untuk mempermudah pencarian.

2. Tambahkan CSS Spoiler berikut sebelum </style>

#sumber button {border: none;font-size: 12px;font-weight: normal;border-radius: 1px;padding: 4px 10px;text-decoration: none;background: #b6c472;color: #fefefe;display: inline-block;transition: all 0.5s linear;cursor: pointer;} #sumber button:hover{background:#a0ad64;color:#fefefe;transition:all 0.2s linear} #sumber button:active{background:#a0ad64;color:#fefefe} #ketsumber {padding: 1px;width: 100%;text-align: left;background: #f5f5f5;border: 0px;padding: 24px;display: none;}
Di atas merupakan pola instruksi CSS untuk tampilan tombol hide & show sederhana yang aku buat. Teman-teman dapat mengembangkan sendiri untuk memperindah tampilan. Makara untuk merubah tampilan sesuai selera dapat teman-teman edit sendiri pada instruksi CSS ini. Semakin kreatif dan inovatif maka semakin manis tampilan tombol yang dihasilkan.

3. Tambahkan JavaScript berikut sebelum </body>

<script type='text/javascript'> //<![CDATA[   $(document).ready(function() {       $("#sumber").click(function() {         $("#ketsumber").slideToggle("normal");       })    }); //]]> </script>
Sekarang tambahkan javascript di atas sempurna sebelum instruksi </body> dan perhatikan antara id atau instruksi pemanggil yang ada pada javascript dan instruksi yang dipanggil yang ada pada CSS, yaitu instruksi #sumber dan #ketsumber keduanya (yang ada di CSS dan javascript) harus sama. Makara bila teman-teman ingin merubahnya maka harus diubah keduanya.

4. Tambahkan HTML berikut di dalam postingan

<div id="sumber"> <button>Sumber</button></div> <div id="ketsumber"> <i>NAMA BLOG, TAHUN, JUDUL ARTIKEL, [online], (alamat blog), diakses tanggal.</i></div>
Langkah terakhir ialah menambahkan instruksi di atas postingan yang HTML (bukan compose) untuk memfungsikan seluruh instruksi yang sudah kita pasang di dalam template. Makara instruksi yang ada pada langkah 1 hingga tiga kita tambahkan dan pasang di dalam template sedangkan pada langkah lima kita tambahkan di dalam postingan dikala menciptakan entri baru. Ingat! tambahkan di HTML bukan di compose.

Demikian cara menciptakan tombol hide & show (spoiler) paling gampang dan sederhana yang dapat aku bagikan. Bagaimana? Praktis kan? Bisa jadi susah bila sahabat hanya membacanya saja, dan menjadi sangat gampang apabila sahabat eksklusif mempraktekannya.

Baca juga:

Seperti apa pola hasil dari penerapan seluruh instruksi di atas? Karena postingan ini aku ambil dari beberapa sumber, maka aku sertakan juga sumbernya sekaligus menjadi pola fungsi dari tombol hide & show yang ada di atas. Silahkan lihat sumber di bawah.

  • Kompi Ajaib, 2014, Show Hide Content Dengan Jquery Di Postingan, [online], (https://mughir.blogspot.com//search?q=cara-membuat-banyak-blockquote-keren), diakses tanggal 31 Desember 2017.
  • Arlina Design, Memasang Spoiler di Postingan, [online], (https://mughir.blogspot.com//search?q=cara-membuat-banyak-blockquote-keren), diakses tanggal 31 Desember 2017.

Komentar

Posting Komentar

Postingan populer dari blog ini

Dalil Lengkap Ihwal Peringatan Maulid Nabi Muhammad Saw

Gambar
Dalil perayaan maulid Nabi – Ketika cahaya tauhid mulai padam di muka bumi ini, maka hanya ketebalan kegelapan yang hampir saja menyelimuti logika manusia, layaknya mendung yang menutupi terangnya cahaya matahari. Di sana tidak tersisa orang-orang yang bertauhid kecuali hanya segelintir yang masih mempertahankan nilai pedoman ke-tauhid-an. Maka Allah SWT dengan Rahmat-Nya mengutus seorang Rasul untuk mengakhiri kegelapan itu. Datanglah Nabi Muhammad SAW sebagai Rasulullah yang merupakan bukti terkabulnya doa Nabi Ibrahim as sebagai kekasih Allah dan sebagai bukti kebenaran isu gembira sesuai yang disampaikan oleh Nabi Isa as. Pada bulan Rabi’ul Awal yang penuh dengan berkah dan rahmat ini, seluruh masyarakat Islam di penjuru dunia dengan penuh cinta menyambut hari kelahiran Nabi Muhammad SAW, yakni tanggal 12 Rabi’ul Awal. Seluruh umat muslim berlomba untuk mengambarkan rasa cinta kepada Nabi Muhammad SAW dengan melaksanakan amalan yang tidak berseberang dengan syariat islam. Sep
Baca selengkapnya

Inilah 5 Perbuatan Tegesa-Gesa Yang Menerima Pahala

Gambar
Perbuatan tergesa-gesa yang diperbolehkan dan menerima pahala - Sebagaimana kita ketahui bahwa perbuatan tergesa-gesa merupakan suatu perbuatan yang tidak baik pada akhirnya. Gegabah dalam melaksanakan suatu hal hanya akan membuahkan hasil yang jauh dari harapan. Sedangkan di dalam menjalani kehidupan, kita tentu selalu mengharap yang terbaik kedepannya. Oleh lantaran itu, untuk memilih sebuah keputusan harus benar-benar dipikir dengan matang. Jangan hingga salah mengambil langkah. Sebab, selain berdampak buruk pada hasil, juga akan berakibat fatal pada kehidupan masa depan. Penyesalan pun akan selalu menghantui pikiran. Bahkan di dalam Islam, secara tegas membuktikan bahwa perbuatan tergesa-gesa yaitu merupakan perbuatan syetan. Setiap perbuatan syetan niscaya mengarah kepada keburukan dan akan menjerumuskan insan pada kesesatan, kegelapan, serta kejelekan. Namun, tahukah kalian bahwa ada 5 perbuatan tergesa-gesa yang menerima pahala? Ya, ternyata Islam pun menunjukkan pengecu
Baca selengkapnya

Mengapa Langit Berwarna Biru Kok Tidak Ungu?

Gambar
Masih ingatkah kalian dengan lagu pelangi? Bukan lagu laskar pelangi ataupun lagu pelangi di matamu. Melainkan lagu pelangi-pelangi alangkah indahmu yang sering kita nyanyikan dikala masih duduk di Taman Kanak-kanak. Lagu yang diciptakan oleh eang AT Mahmud ini mengenalkan kepada kita semua bahwa pelangi itu berwarna merah, kuning, hijau, dan langit itu berwarna biru. Namun di usia itu pernahkah kita bertanya kenapa langit berwarna biru? Kenapa tidak merah, kuning, atau hijau? Langit berwarna biru itu merupakan takdir Sang Pencipta yaitu Allah SWT. Sama menyerupai kenapa warna air bahari harus biru kok tidak putih. Semua itu sudah ditakdirkan Yang Maha Pencipta. Jawaban menyerupai ini mungkin bisa diterima namun puaskah dengan tanggapan tersebut? Tentu saja tidak. Banyak juga yang mengambarkan bahwa langit berwarna biru disebabkan oleh pantulan warna air bahari yang juga bernarna biru. Jika kita melihat perbandingan prosentasi daratan dan lautan yaitu 71% untuk lautan dan 29%
Baca selengkapnya