Add Image Spoiler With Animation Effect For Blogger

0
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 this widget 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. 
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
Image Spoiler widget is useful for to load your blog/websites posts fast,because it hides multi...
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

You Might Also Like:

We hope this article helped you to learn Add Image Spoiler With Animation Effect For Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Add Image Spoiler With Animation Effect For Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand