How to add a image/text hide/show (Spoiler) button in blogger - You already know guys, a genuine content is eternally good for every blogger because if you write a genuine content for your blog, then it's helped you to drive more traffic to your blog. However, You can also impress your visitors by adding some special effects to your blog posts and today we're going to share one of them. So today I'm going to show you how you can easily hide your blog text or image with the help of some CSS and Java-scripts. Follow the below simple steps and add this button into your blog without any problem.
How to Add Text/Images Hide/Show Button in Blogger?
First, you just need to go to your blogger dashboard - Login
Now go to the "Template" section and then click on the "Edit Html" button.
After that, find the below code by pressing " Ctrl + F " key together from your keyboard.
]]></b:skin>Now copy the below CSS code and paste it just before ]]></b:skin>
#flippy {text-align:center;}
#flippy button {margin:10px auto;cursor:pointer;font-weight:400;font-family:'Karla',sans-serif;background-color:#383434;color:#fff;padding:10px 20px!important;text-transform:uppercase;border:none;border-radius:3px;opacity:0.95;transition:all 0.3s ease-out;}
#flippy button:hover, #flippy button:focus {outline:none;opacity:1;color:#fff;}
#flippanel {padding:1px;text-align:left;background:#fdfdfd;border:1px solid #eee;}
#flippanel {padding:24px;display:none;}
#flippanel img {background:#f9f9f9;margin:10px auto;}If you want to change the color of the button, then replace the highlighted code with your own or you can use our color code maker tool.
After that, find the below code.
</body>Now copy the below code and paste it just before </body>
<script type='text/javascript'>
// Spoiler
$(document).ready(function() {
$("#flippy").click(function() {
$("#flippanel").slideToggle("normal");
});
});
</script>
After that, just hit on the orange save template button to apply the changes.
Now, whenever you want to add this button into your post, simply switch to HTML mode and paste the below code.
<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
Paste your Code, Text Or Images link Here (ADD CONTENT HERE)
</div>
Replace "Paste your Code, Text Or Images link Here (ADD CONTENT HERE)" with the content that you want to show on click.
That's it! I hope you like this widget! Stay tuned for more blogger tips and tricks! Thanks for reading @Prince
That's it! I hope you like this widget! Stay tuned for more blogger tips and tricks! Thanks for reading @Prince
0 Comment to "Add Text/Images Hide/Show Button in Blogger"
Post a Comment