Cara membuat tombol visible content di blog

Hai semua selamat datang kembali di blog Kak Ryan, pada kesempatan kali ini saya mau berbagi bagaimana cara membuat tombol visible content. Sebelumnya saya jelaskan terlebih dahulu apa itu tombol visible content dan apa saja manfaatnya.

Tombol visible content ada adalah tombol button biasa, jika teman-teman belum pernah melihatnya akan saya contohkan dibawah ini deh. Tombol ini digunakan juga oleh blog klikmania.net

Fungsinya tidak lain untuk menampilkan keseluruhaan konten yang kita buat. Misalnya kita menulis artikel yang pajang banget, jika tulisan tersebut dimuat langsung pasti bakalan bikin orang ilfil. Dengan tombon invisible kita bisa menampilkam cuplikan pertama saja, jika orang tertarik membaca lebih lanjut dia bisa mengklik baca selengkapnya. Coba klik demonya:

Manfaat lainya adalah meningkatkan klik iklan, karena konten yang ditampilkan pada saat pengunjung masuk hanya sekedar cuplikan artikel pertama saja. Namun iklanya tetap ada, besar kemungkinan pengunjung akan mengklik iklan, karena iklan jauh dominan ditampilkan dibandingkan konten.

Sangat mudah sekali untuk membuatnya, kalau kamu memahami konsep dasar javascript maka kamu akan bisa membuatnya tersendiri. Saya menggunakan metode show hide div dengan sedikit kode pada satu artikel. Dalam penerapanya tetap saya membutuhkan javascript.

Jadi cara kerjanya gini, ketika user mengklik tombol baca lebih lanjut maka konten artikel akan ditampilka selengkapnya lalu tombol buttonya kita hilangkan. Sebelumnya ide ini sudah lama ada, saya bisa membuatnya karena terinpirasi dari blog klikmania.net

Baca juga : Cara membuat tombol toggle dengan HTML chekbox

Kalau mau bikin diblogger mau tidak mau kamu harus membuat artikel dengan mode HTML. Silakan salin saja kode yang sudah saya rakit dibawah ini, kalau kamu paham koding bisa modifikasi sedikit. Tapi kalau tidak paham saya sarankan agar tidak mengeditnya.

Disini isi dengan pembukaan atau artikel cuplikan.


<button id="cx13" onclick="ewe('bacayah')" style="border-radius:3px;padding:6px;border:none;width:80%;text-align:center;font-weight:bold;font-size:18px; 
margin-top:10px; color:#fff;background-color:#FFAE48;width:100%;">Baca Selengkapnya</button>
<script> function ewe(target){
var huz= "cx13";
document.getElementById(huz).style="display:none"; document.getElementById(target).style="display:block";} </script>
<div id="bacayah" style="display:none">

Isi dengan artikel panjang kamu sob

</div>

Cukup salin dan isi saja kode diatas, bagaimana mudah bukan? Saya hanya menggunaka kode javascript untuk menampilkan elemen div serta menyembunyikan button. Kamu bisa menggunakan berbagai metode untuk membuatnya, idenya hanya terinpirasi dari orang lain.

Lagian saya sudah memahani prinsip dasar koding, cara kerja koding jadi saya paham cara membuatnya tinggal mearangkan seutas kode saja. Tahu nggak kode diatas saya susun dalam waktu 20 menit saja, sebenarnya sudah jadi dalam beberapa menit. Tapi entah menapa saya malah menambahkan desain css pada tombolnya agar kelihatan menarik hehe.

Kode diatas tidak saya aplikasikan pada blog ini, karena tidak menyenangkam rasanya. Saya lebih suka konten saya dibaca banyak orang daripada menyulitkan orang untuk membaca. Jika kamu ingin membagikan ulang kodenya jangan lupa berikan hyperlink ke halaman ini sebagai sumber.

Bisa menggunakan link dofollow maupun nofollow, bebas yang penting kita bisa saling menghargai karya. Sebelum kamu pergi dari situs ini aku ada artikel spesial mungkin kamu tertarik membacanya. Silakan dilihat sob:

Baca ini : Cara membuat spilit page seperti tribunnews

Ningkatin CTR : Cara membuat iklan melayang mgid untuk meningkatkan pendapatan

Content visible button apakah aman?

Aman sob, karena kita tidak melalukan modifikasi apapun pada iklan. Konten juga masih bisa dibaca oleh mesin pencari, hanya saja kita mengatur dengan css agar browser menyembunyikan sebagian elemen. Tertrik ingin belajar lebih lanjut? kamu bisa belajar di wc3school.com silakan ketkikan kata kunci "how to make show hide div"

Ada banyak varian kode yang bisa dicoba silakan sobat aplikasikan sesuai dengan keinginan masing-masing. Kode diatas sengaja saya buat sederhana, sehingga bisa diaplikasikan diberbagai halaman jadi tidak hanya pada blogger saja.

Manfaat tombol visible content

Bagi kamu yang tidak ingin meletakan terlalu banyak iklan dalam sebuah artikel. Agar bisa meningkatkan CTR tombol ini bisa digunakan, karena pada saat pengunjung datang ke blog mu mereka akan melihat iklan terlebih dahulu sebelum melihat konten. Agar pengunjung bisa melihat konten mereka harus mengklik tombil visible.

Cara ini sudah diterapkan oleh blog klikmania.net dan aman-aman saja. Untuk hasilnya saya belum mengetahuinya, katanya sih bisa meningkatkan CTR. Tombol ini hanyalah konsep sederhana saya membuatnya dari javascript show hide div yang kemudian dimodifkasi agar bisa seperti tombol show hide div. Sengaja tampilanya kaku karena saya menggunakan javascript standard, alasan utama kenapa begitu karena sudah banyak website yang mulai meninggalkan penggunaan jquery.

Mengingat google sudah mulai mengalihkan perhatianya ke halaman mobile yang lebih banyak pengaksesnya. Saya juga sudah menyesuakan blog ini agar bisa bersahabat dengan ponsel, mudah dijelajah dan ringan. Nggak percaya, scroll saja sampe bawah kamu gak bakalan ketemu batas halaman wkwkwk🤣🤣🤣

Tertarik : Cara membuat website layanan video streaming sederhana

Jika kamu suka membaca tulisan saya yang lain jangan berhenti disini. Lanjutkan boss hehehe.😂