Membuat Tombol Spoiler Untuk Membuka Tulisan Di Blog

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Pada artikel kali edisi kali ini saya akan membagikan suatu keindahan yang mengagumkan yang dapat anda pasang pada blog anda, keindahan berupa tombol yang sangat mengagumkan yang bersifat animasi. Saya yakin kalau anda pernah melihat pada blog yang anda kunjungi, apalagi anda seorang Blogger yang berkiprah dibidang coding web atau tutorial blog tentu sudah sering anda temukan di berbagai blog yang anda kunjungi.
Tombol spioler ini menggunakan gaya atau CSS yang sederhana dan dilengkapi dengan jenis font Google, disini saya menggunakan font Open Sans. Untuk CSS cukup anda tanam kedalam template blog anda, sedangkan untuk HTML cukup anda letakkan dan anda sesuaikan didalam halaman statik atau artikel yang akan anda posting dengan menggunakan mode HTML (Bukan Compose). Tulisan bawaan pada tombol ini adalah "Spoiler", namun dapat anda ubah menjadi kata yang anda inginkan sesuai dengan keperluan anda misalnya "View" "Open". Untuk lebih mudah anda fahami dapat anda lihat pada tutorial berikut, dan berikut adalah contoh tombol spoiler ⇩

Silahkan anda ganti kalimat ini dengan kalimat anda.

Berikut adalah tutorialnya 1. Login ke Blogger > Tema > Edit HTML dan letakkan CSS berikut diatas / sebelum tag ]]></b:skin> ⇩

/******************************************
Spoiler Button By www.BloggerAutodidact.com
******************************************/
#flippy {text-align:center;}
#flippy button {background:#e36f60;color:#fff;margin:10px auto;vertical-align:middle;
cursor:pointer;padding:10px 14px!important;font-weight:700;font-size:15px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;
border:double #fff;transition:background 0.1s ease-in-out;}
#flippy button:hover, #flippy button:focus {background:#d46456;outline:none;}
#flippanel {padding:1px;text-align:left;background:#f9f9f9;border:0px;}
#flippanel {padding:24px;display:none;}

Save Tema.

2. Letakkan HTML berikut dalam halaman statik atau artikel yang akan anda posting ⇩

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
Silahkan anda ganti kalimat ini dengan kalimat anda.
</div>

3. Selesai.

Alhamdulillaah, saya rasa cukup ini saja yang dapat saya sampaikan kepada anda dalam artikel kali ini.

Note

Jikalau ada pertanyaan, silakan anda bertanya kepada Admin melalui komen!
Terima Kasih.

Silakan anda kongsikan artikel ini kepada rakan-rakan anda di media sosial, supaya mereka juga boleh mengambil manfaat daripada artikel ini!

Alhamdulillaah
Insyaa Allaah, semoga artikel saya dapat membantu rakan-rakan!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!

About Admin Blogger Autodidact

Belajar Blog Secara Autodidact