How to create a spoiler box with CSS in Blogger

Spoiler box or spoiler box?

Spoilerbox or Spoilerbox, a function for showing and hiding information about content using buttons. Usually this spoiler box can often be found on various discussion forum websites,

In general, spoiler boxes are created using JavaScript or jQuery, which use, or are often referred to as, the open-close display style Demonstrate and Hide. In fact, Spoiler Box or Spoiler Box can also only be created with CSS styles. Especially in my opinion, if only using CSS can make the blog load easier.

In this article, the author is going to share a short tutorial How to Create a Cool Spoiler Box Using CSS on Blogger. If you are interested in installing the Spoiler Box on your blog or website, you can refer to the tutorial below right away.

How to Create a Cool Spoiler Box Using CSS on Blogger

1. Sign in to Blogger – Choose Topic – To edit HTML code.

2. Copy and paste the following CSS code before the code ]]> or

/* Spoiler Box Pure CSS */.ignielSpoiler {    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;}.ignielSpoiler .tombol {    background:#3498db; /* Warna tombol */    color:#fff; /* Warna tulisan di tombol */    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;}.ignielSpoiler .tombol:focus {    pointer-events:none;}.ignielSpoiler .tombol:before {    content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;}.ignielSpoiler .tombol:focus::before {    content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */    background:#cc0000; /* Warna tombol ketika spoiler terbuka */}.ignielSpoiler .isi {    background:#e4e4e4; /* Warna background isi spoiler */    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;}.ignielSpoiler .tombol:focus + .isi {    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;

3rd Save topic.

4. Enter the calling code below in your post. Posts – New Entries – Selection mode HTML code.

Tulis konten yang ingin disembunyikan disini.

5. Item ready in Publish.

Here is the view and preview Cool spoiler box with CSS on Blogger installed in Blogger.

This is the guide How to Create a Cool Spoiler Box Using CSS on Blogger that the author shares with all of you. If there is something about this article that is not understood. Don’t hesitate to comment below. Hope it’s useful.






Leave a Reply

Your email address will not be published.