How to create a cool spoiler alert box in blogger website - Peak Fiction

How to put spoiler button in blogger with only css

A spoiler box is a box that functions to hide content and only appears when the user clicks on the button. Generally, the spoiler box appears in an open/close style, some call it show/hide. Most are made using Javascript or jQuery because it is easier. But you can make a spoiler box open and close on a blog just using CSS. Why do you have to use the CSS version? Yes, because minimal use of Javascript on blogs is good. Make loading faster. This also explains that simple onclick events can be done with CSS.

Preview

How to add spoiler alert box in blogger 

To add a cool spoiler alert box in blogger just follow these steps below:

1. CSS

The main thing that must be done in creating a pure CSS spoiler box (show / hide) is of course to add the CSS code first. Add the following code ABOVE ]]></b:skin> or </style>.

/* Spoiler Box Pure CSS by Peak Fiction*/

.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:'Look Spoiler'; /* Text to open button */

    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;

}

.ignielSpoiler .tombol:focus::before {

    content:'Close Spoiler'; /* Text to close button */

    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;

}

2. Html

This HTML code functions to call the spoiler box. Use the following code in a post every time you want to use a spoiler.

<div class="ignielSpoiler">

    <div class="tombol" tabindex="0"></div>

    <div class="isi">

        <!-- Isi Spoiler -->

        Write the content you want to hide here.

    </div>

</div>

It's simple to make a spoiler box button with the blog post above. I really like using CSS more than Javascript. If there is a Javascript function that can be replaced by CSS, why not try it. Let's just make the blog lighter.

Reference: Igniel