Image Spoiler With Simple Animation For Blogger

Image Spoiler With Simple Animation For Blogger

Comments: 0
data:blog.title
blogger widget

we often use Spoiler effect or show hide effect in our Blogger template. This is useful for hiding multiple image and which can be visible by clicking on an spoiler button. The main effectively of this widget is to loading the Blog post fast. Because if you Blog post contain 5/10 images then it will take longer time to load, so image spoiler is the solution to control loading speed. So in this tutorial I will show you image Spoiler effect or show hide effect where you will able to hide multiple images and visitors can view by click on Spoiler button. Just follow the below steps-
Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3
 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

#image-spoiler {text-align:center;}
#image-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#image-spoiler button:hover, #image-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}
.spoilerrow {-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.spoilerrow img{-webkit-backface-visibility:hidden;margin-bottom:15px;max-width:100%;}
.spoilerrow br {display:none;}

Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 6 Copy the script from below and Paste it above/before </head> 

  
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//Image Spoiler widget by www.bloggerspice.com
$(document).ready(function(){$("#image-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

Customization

  • If you template already contain latest Jquery then you don't have to add the below jquery file.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
Step 7 hit the Save template button.

HOW TO MAKE IT WORK?

For using this Custom button you have to add the code in HTML view while writing a Blog post. Just write a post and from Post Editor Select HTML mode. Now add the below code-

 
<div id="image-spoiler"><button>Spoiler with Image</button></div><div id="spoilerpanel"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src=" IMAGE URL HERE " style="border: none;" /></a></div>
</div></div>

Customization

  • To add Images on Spoiler just replace IMAGE URL HERE with your image link
  • For adding multiple image just add the whole code twice. Just like below-
 
<div id="image-spoiler"><button>Image Spoiler</button></div><div id="spoilerpanel"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src=" IMAGE URL HERE " style="border: none;" /></a></div>

<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE " style="border: none;" /></a></div>
</div></div>



show and hide image

After adding the spoiler image then publish your post and check it a Image Spoiler button will be visible and click on it to view the images. 

Speak Your Mind

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *