Follow Me

Installing Spoilers in Posts

Installing Spoilers in Posts

Installing Spoilers in Posts - This time I will share simple tips on how to make spoilers with slide effects on blog posts.

Here's how to apply it:

First, open blogger> Template> Edit HTML> Apply the CSS code below before </style> or ]]></b:skin> and for the jQuery code to apply before </body>

button.flippy{background:#aa65c7;color:#fff;text-align:center;margin:0 auto;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;box-shadow:0 3px 0 0 #883da7;vertical-align:middle;cursor:pointer;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}

$(".flippy").on("click", function(){

Then apply the code below in posting the HTML tab

<div class="centerflip"><button class="flippy">Cekidot</button>
<div class="flippanel">

Examples of applications can be seen here:

So for the tips this time, hopefully useful.
Next Post Previous Post
No Comment
Add Comment
comment url