ADD IMAGE SPOILER WITH ANIMATION EFFECT FOR BLOGGER

Image Spoiler widget is useful for to load your blog/websites posts fast,because it hides multiple image and which can be view by clicking on an spoiler button.The main purpose of thiswidget is to load the Blog Posts fast,image spoiler is the solution to control the loading speed of your website/blog page.In this tutorial i'm going to explain how to add image spoiler with animation effect where you will able to hide multiple images and your visitors can view image by click on image Spoiler button. To grab this widget Just follow the steps mentioned below.

HOW TO ADD STYLISH IMAGE SPOILER WITH ANIMATION EFFECT FOR BLOGGER:

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 by pressing Ctrl+F ]]></b:skin>  

Step 4. Now Copy 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 find </head>  
Step 6. Now Copy from below & 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.bloggersstand.blogspot.com
$(document).ready(function(){$("#image-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

Note:If your Blog/Website Already Contatin above blue line,then no need to copy that line just copy other Code.

Step 7. Now save your template..Done !

HOW TO MAKE IT WORKS?

You have to add the below code in HTML view while writing a Blog post.

<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" style="margin-left: 1em; margin-right: 1em;"><img src=" IMAGE URL" style="border: none;" /></a></div>
</div></div>

CUSTOMIZATION:

• To add Images on Spoiler,replace IMAGE URL from the above code.
• To add Multiple Images on Spoiler Just Add above code twice or thrice,look below for example

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

Now Your Blog/Website have Beautiful Image Spoiler With Animation Effect. 

SUMMARY

How To Add Image Spoiler With Animation Effect For Blogger Blogspot Website Blog,Hide Multiple Images With Imaage Spoiler,Blog Load Fast,Tricks To Increase Blog Speed