Cara Menciptakan Spoiler Di Blog

Baca Juga

Assalamualaikum,,
Cukup usang aku tidak memposting artikel di blog ini, karna sudah masuk kuliah dan kini sudah mulai UAS 😝 jadi aku jarang menciptakan artikel,
cuma memanfaatkan waktu kosong aja.

yoo, pribadi kepointnya karna, masih ada urusan lainnya 😛

1. Login ke Blogger > Template > Edit HTML
2. tambahkan CSS dibawah ini.

 #flippy {text-align:center;} #flippy button {margin:10px auto;cursor:pointer;font-weight:700;background-color:#5a6269;color:#fff;padding:10px 20px!important;text-transform:uppercase;border:none;border-radius:3px;opacity:0.9;transition:all 0.3s ease-out;} #flippy button:hover, #flippy button:focus {outline:none;opacity:1;color:#fff;} #flippanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;} #flippanel {padding:24px;display:none;} #flippanel img {background:#f5f5f5;margin:10px auto;} 

3. kemudian tambahkan JavaScript dibawah ini.

 //Spoiler www.abdurrahim.id $(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})}); 

4. Simpan. Untuk mengfungsikannya, Copy isyarat dibawah ini ke postingan atau halaman statis kalian.

 <div id="flippy"><button>Spoiler</button></div> <div id="flippanel"> --- TAMBAHKAN KONTEN DISINI --- </div> 

Dan lihat hasilnya,
Demo atau Contohnya dapat klian lihat dibawah ini.

Ini pola hasil Spoilernya, sama menyerupai di blog ini. 😀😀😁😂😃😄😅😆😉😊😋😌😌😍😎😏😐😑😒😗😘😬😮😙😲😳

Jika kalian mengalami duduk kasus komen dibawah ae bro.