Cara Cepat Membuat Read More Button Tanpa Pindah Halaman

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan membahas  mengenai bagaimana cara membuat tombol read more tanpa pindah ke halaman lain. Apa maksudnya? Biasanya, tombol read more akan membawa kita menuju suatu halaman postingan yang kita kehendaki tetapi bagaimana jika kita ingin supaya tombol read more hanya menampilkan suatu teks singkat tanpa pindah halaman. Untuk membuat tombol tersebut kita akan menggunakan show and hide button. Tombol ini berfungsi untuk menampilkan dan menghilangkan teks pada widget.

 

Berikut beberapa langkah mudah untuk membuat tombol tersebut.

 1. Log in ke akun blog anda > Pada dashboard pilih Layout > Pilih posisi dimana anda akan meletakkan widget > Add a gadget > pilih HTML/Javascript > Copy dan paste kode HTML berikut

                                    <script type="text/javascript"> function toggle() { var x = document.getElementById('btn') var y = document.getElementById('show_hide') if (y.value=='Show More') { x.style.display = 'block' y.value='Show Less' } else { x.style.display = 'none' y.value='Show More' } } </script> <input id='show_hide' type='button' value='Show More' onclick="toggle()" "></button> <span id='btn' style='display:none'>Teks anda diketik disini</span>

 2. Save dan lihat hasilnya

Selamat, anda telah berhasil membuat sebuah tombol read more tanpa pindah halaman. Untuk menampilkan gambar diatas read more button, anda hanya perlu menambahkan <img src="http://urlgambaranda.jpg"/>

Jika anda ingin mengganti tampilan tombol yang digunakan, silakan ikuti langkah-langkah berikut

 1. Pada dashboard pilih Theme> Edit HTML

 2. Kemudian cari ]]></b:skin> atau </style> lalu copy dan paste kode CSS berikut tepat diatas tag tersebut

                                    #show_hide{ position:relative; height:22px; width:100%; padding:0 10px; color:#000; background-color:#c39a19; font-size:12px; font-weight:500; border:none; cursor:pointer; } #show_hide:hover{ background-color:#d4a81f } #btn{ display:none; font-family:'Tahoma',san-serif; font-size:13px; color:#000 }

3. Save Template

Saya percaya mungkin banyak dari anda yang telah mencari artikel mengenai bagaimana cara membuat read more/show more button di mesin pencarian. Tetapi, sebagian besar pasti akan menemukan artikel untuk membuat read more button untuk menuju suatu halaman bukan tanpa pindah halaman. Nah, kemudian ada juga yang mencari show/hide button. Anda pasti akan menemukan serupa dengan yang saya ajarkan tetapi artikel tersebut menggunakan dua tombol dalam sebuah widget. Jadi, satu tombol berfungsi untuk menampilkan sedangkan tombol lainnya berfungsi untuk menghilangkan. Semoga tutorial kali ini dapat membantu anda membuat read more button. Terima kasih telah membaca.

loading...