UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Install Spoiler In Blogger Posts.

This time I will share simple tips how to make the spoiler with a slide effect in the blog post.


The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.

This effect displays a button with text, clicking it will expand the content and on clicking it again will hide the content. It uses a simple script and you can use it anywhere. You can hide whatever you want an image, code, text etc. So today in this tutorial we'll learn that How to Add Spoiler or Hide/Show Button in Blogger.

LIVE DEMO:

Live Demo
Lets talk about how to insert this effect to your specific blog! Follow below Instructions,

Instruction To Follow:

1. Go to Blogger Dashboard→Your Blog
2. Click Template→Click Edit HTML tab
3. Find anywhere inside template </style> or ]]></b:skin>

Step1:

Now,copy the above CSS code and put it above ]]></b:skin>

CSS Code:

#flippy {
    text-align: center;
}
#flippy button {
    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: 3px 0px 0px 0px # 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;
}
#flippanel {
    padding: 1px;
    text-align: left;
    background: # f5f5f5;
    border: 0px;
}
#flippanel {
    padding: 24px;
    display: none;
}

Step2:

You have Done! now add below JQuery code just after </body>

JQuery Code:

<Script>
$ (Document) .ready (function () {
    $ ("# Flippy"). Click (function () {
        $ ("# Flippanel"). SlideToggle ("normal");
    });
});
</Script>

Now,You have successfully inserted this plugin to your blog.

Step3:

Now whenever you want to put this effect to your post copy below HTML code and insert it to Blogger HTML POST EDITOR.

HTML Code:

<Div id = "Flippy"><button> Your Button Text Here </button></div>
<Div id = "flippanel">
--- Put Your Content Here ---
</Div>

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)

Your Result Is Here:See It Live On CodePen,

See the Pen Spoiler di Postingan by Abdullah Malik (@UrduBloggingHub) on CodePen.