Make Spioler Button To Open Articles In Blog

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

In this edition article I will share an awesome beauty that you can install on your blog, beauty in the form of buttons that are very impressive animation. I'm sure if you've seen on the blog you visit, let alone you are a Blogger who work in the field of web coding or tutorial blog have often found in various blogs that you visit.

Spioler button using CSS style or simple and equipped with Google font type, here I am using the Open Sans font. CSS enough for you planted into your blog template, while for enough HTML to be put, and you adjust in static pages or articles that you post using HTML mode (Not Compose). Posts default on this button is the "Spoiler", but can be changed into the word you want to suit your needs such as "View" "Open".

Here is the tutorial ?
1. Login to Blogger ? Theme ? Edit HTML and place the following CSS above / before the ]]></b:skin> tags ?

/******************************************
Spoiler Button By www.BloggerDiscreet.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 Theme.

2. Place the following HTML static pages or articles that you post ?

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
Please change this sentence to sentence you.
</div>

3. Ready.

Alhamdulillaah, I think it just enough that I can convey to you in this article.

Note

If you have any questions, please your ask Admin via comment!
Thank You.

Share

Feel free to share this article with your friends on social media, so that they too can benefit from this article!

Alhamdulillaah
Inshaa Allaah, hope my article can help you all!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!