-->

How to Install Cool Spoilers on Blog Posts

How to Install Cool Spoilers on Blog Posts 

 Adding spoilers to your blog can also add systemality to your blog, these spoilers are certainly very responsive and mobile friendly pleasing to the eye.

What is the function of this spoiler? This spoiler button is used to bring up for example the table of contents and the contents of the text which usually according to the author is important or can be other such as pictures or videeo.

How to Install Cool Spoilers on Blog Posts
First, my friend first goes to Blogger > Themes > Edit HTML copy the CSS code below and paste it directly above the code ]]><b:skin>or</style>

/* Spoiler */
#flippy{text-align:center;margin:auto;display:inline}
#flippy button{background:#fff;background-image:linear-gradient(to right,#34ea78 0%,#2da7e3 51%,#34ea78 100%);background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:500;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s}
#flippy button:hover,#flippy button:focus{background-position:right center;outline:none;opacity:1;color:#fff}
#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}
#flippanel img{background:#f5f5f5;margin:10px auto}


Then install the JQuery code copy the code below and paste it directly above the code </body>or&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
//Spoiler
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
//]]>
</script>


Save your theme and then put it on your post, copy the code below and paste it in your article post.

<div id="flippy"><button>Klik untuk melihat semua</button>
<div id="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>


If you have click click, try to see the results, friend.

Okay that's all I can say about How to Install Spoilers in Blog Posts Very Cool Thank you for visiting, hopefully useful for all of you.

Baca juga

Post a comment