Showing posts with label How to. Show all posts
Showing posts with label How to. Show all posts


How to Create Full Screen Preloading Effect

How to Create Full Screen Preloading Effect

In this tutorial, We will learn how to create full screen simple,clean preloading effect by html/css/image. Sometimes your website contents taking more times to loading. That's can be frustration of your readers. By adding full screen preloading effect, it can reduce readers frustration.

When readers visit your site, they will see it. Then after full website page content load, it will be removed. You can add it anywhere by choosing any image. We created this script by simple way so that you can understand easily. Read from A to Z carefully.

HTML - You need to add following html code after <body> tags

<div id='preloader'>
   <div id='status'>
      <img alt='' height='64' src='images/preloader.gif' width='64'/>
First div id preloader we used for full page screen background color and Second div id status we used for set up image. You will fully understand when you will see css code. You can replace default preloader image url by creating a new one as your like and replace this default image url from html.

CSS - You need to add following css code in your css file

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222222;
    z-index: 99999;
    height: 100%;
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;

Your preloader image size must be 64x64. If your image background color white or other, you can use same color for full page screen from #preloader css code by replacing #222222 background color code.

Javascript - You need to add following javascipt code


 $(window).load(function() {




$("#status").fadeOut("slow"); This code will first fade out the loading animation.
$("#preloader").delay(500).fadeOut("slow").remove(); This code will fade out the whole DIV that covers the website.


How to Create a Demo Page with Download/Demo Buttons Toolbar on Blogger

Blogger platform always stands at the top for best user interface. Many features are not inbuilt in Blogger, but they can built manually that too in simple steps. When we compare this feature with WordPress, always Blogger will wins. Now here I’m with a new superb tutorial based on Demo page with Download/Demo Button toolbar on Blogger. Quite Interesting..? This below part of this article will describe about the steps to add this new feature on Blogger.

How to Make a Demo Page with Toolbar on Blogger
Step 1: Go to Blogger and Create a static page with the title Demo Page.
Step 2: Switch to HTML mode and add next content in that page and then click publish.
<div height="100%" id="iframe-container" width="100%">
body { padding: 0!important; background: none!important; }
#iframe-container { overflow: hidden; background: none!important; }
#frame { border: 0; }
<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
<script> = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only
var query =;
query = query.replace("url=", "");
$('#frame').attr('src', query);
var str = $('#iframe-container').html();

Step 3: Then navigate to Template → Edit HTML.
Step 4: Then search for the ]]></b:skin> tag on your blog template.
Step 5: Then add the below code just above the ]]></b:skin> tag or </style>

#view {
padding: 0;
margin: 0;
border: 0;
position: fixed;
top: 50px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 93%;
background:url( center center;
transition:all .4s ease-out;
#tab-demo {
left: 0;
font:normal 13px Arial, sans-serif;
.closebutton {
background:#66af33 url( 15px 50%;
padding:0px 20px 0px 50px;
a.closebutton {color:white;text-decoration:none;}
.closebutton:hover {background:#579c26 url( 15px 50%}
.dlbutton:hover {background:#579c26 url( 15px 50%}
.dlbutton, a.dlbutton {
background:url( 15px 50%;
padding:0px 20px 0px 55px;
.demologo, a.demologo {
background: url( left center;
font-family:Oswald, Arial, Sans-serif;

Step 6: Now search for <body> tag. Then add code  below just after <body> tag.
<b:if cond='data:blog.url != &quot;;'>

Step 7: Now, Replace the URL with your demo blog page URL and go ahead!

Step 8: Now search </body> tag on your template and add the below code just above </body> tag
<b:if cond='data:blog.url == &quot;;'>
<script type='text/javascript'>
function getQueryVariable(variable) {
    var query =;
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
    return (false);
window.onload = function() {
 var url  = getQueryVariable("url");
 var download  = getQueryVariable("download")
 document.getElementById('view').src = url;
 document.getElementById('dl').href = download;

<div id='tab-demo'>
<a class='demologo' href=''>Template Demo</a>
<a class='dlbutton' href='' id='dl'>Download</a>
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;);0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a>
<iframe id='view'/>
body {

Step 9: Now again replace the URL with Download link or Demo link of your blog page and Save your template. That’s it! We have completed 95% of implementing the demo page with toolbar on Blogger. Now it’s time to add the download/demo link on that toolbar.

Step 10: Just add the below coding in the place where you need to show up your Download/Demo button in your post on HTML section. =Download here

Step 11: Replace the links with your Demo and Download pages URL.


How to Add Jumbo Social Share Bar with Counters in Blogger

Are you looking to add a Jumbo social share bar in Blogger? Why it is called a Jumbo Social Bar? What's the catch? You might have seen those nice looking social sharing buttons that show the total number of social shares counts that your particular post or page has received. Today in this article, we will show you how to add jumbo social sharing bar with counters in blogger.
- by MBL Networks

What is Jumbo Social Share Bar?
This social share bar work like social share bar. It consists of a big Ajax build counter that counts overall shares for your posts and pages.

You can check out the demo if this widget here.

To add Jumbo Social bar we will be using a plugin called donReach social plugin that is flexible, easy to customize, responsive and more over it is FREE. They are one of the most lightweight and user-friendly social share buttons which will certainly increase your social signals and shares.

Add Jumbo Social Share Bar with Counters in Blogger

The very first thing you need to do is to take a backup of your Blogger template, just to be on safe side if anything goes wrong. Hint: (Go to Blogger >> Template >> Backup/Restore >> Download Full Template).

To add Jumbo social share bar, Go to Blogger >> Template >> Edit HTML and Search for the ]]></b:skin> tag. After finding the ]]></b:skin> tag, just above it paste the following code:

/* Jumbo Social Share Bar */

.don-share .don-share-total .don-count {
font-size: 40px;
text-align: center;
font-weight: 600;
color: #ff0036;
border-right: 1px solid #eee;
padding-right: 18px;
margin-right: 20px;
margin-bottom: 0;
.don-share .don-share-total .don-count:after {
line-height: 30px;
color: #a6a6a6;
font-weight: 300;
font-size: 12px;
text-transform: capitalize;
content: "Share";
.don-btn {
background-image: none;
box-shadow: none;
.don-share i {
border: 0!important;
text-align: center;
width: auto;
font-size: 16px; margin-bottom:10px;
.don-share .don-share-total:after {
display: none;
.don-share .don-share-total {
line-height: 45px;
margin: 0;
.don-share [class*=' don-share-'],
.don-share [class^=don-share-] {
margin: 0px 10px 0px 0;
.don-share {
margin: 15px 0px 15px 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;

Now to install the donReach social plugin, in the Blogger Template editor search for </head> and just above it paste the following JavaScript code:

<script type='text/javascript'>
(function() {
var dr = document.createElement('script');
dr.type = 'text/javascript'; dr.async = true;
dr.src = '//';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);

Finally to display the Social share bar, paste the below code anywhere you want it to appear in your blog. Ideally, users like it to display either below or above the post content. To display it above post content and below post title, in the template editor search for <data:post.body/> and just above it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='don-share' data-limit='3'>
  <div class='don-share-total'/>
  <div class='don-share-facebook'/>
  <div class='don-share-twitter'/>
  <div class='don-share-pinterest'/>

Currently, the widget show 3 share buttons but you can add more buttons as per your needs. Check out the examples at donReach page.

Once everything is done, press Save template button and you have successfully added Jumbo Social Share bar in Blogger.


How to Add jQuery "Back To The Top and Go to the Bottom" Arrows


Not only It looks beautiful, but is very useful for bloggers, blogs and websites. And all the other platforms that have a long leash.
It's easier to click down and without hassle and scrolling you are on the bottom of the page. Or reverse. You do not need to know HTML at all and is easy to install and works on all blogs and browsers. Even on Wordpress and tumblr-in. 

Now I will give you a demo codes and how to install it. It's over for a minute.

1) Find ]]><b:skin> tag 
2) Above it immediately, add the following code:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
padding:7px; /* Distance between the border and the icon */
border:1px solid #CCC; /* Border Color */
background: white url( no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
cursor: pointer;
border-radius: 3px 3px 3px 3px;
padding:7px; /* Distance between the border and the icon */
border:1px solid #CCC; /* Border Color */
background: white url( no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
cursor: pointer;
border-radius: 3px 3px 3px 3px;

Now look for the </body> tag (usually at the bottom of the page, use CTRL + F)
Add the following code above it:
<script src='' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$(window).bind('scrollstart', function(){
$(window).bind('scrollstop', function(){
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
- If you alredy have jQuery installed,remove the red line of code.
- In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

That's it. It's easy and works everywhere. Thank you and Happy Blogging


How To Add Related Posts Widget To Blogger with Thumbnails

Related Posts Widget To Blogger with Thumbnails

Here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Adding the Related Posts Widget to Blogger 

Step 1. Log in to your Blogger account  and go to Template > Edit HTML

Step 2. Click anywhere inside the code area and press the CTRL + F keys:

Step 3. Search for this piece of code adding it inside the search box (hit Enter to find it)


Step 4. Copy and paste the below code just before/above the </head> tag:

<!--Related Posts with thumbnails ScriptsnStart-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
#related-posts h2 {
    margin-top: 10px;
#related-posts .related_img {
    border:4px solid #B2B2B2;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out;
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 24px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
#related-posts .related_img:hover{
#related-title:hover {
    text-decoration: underline;
<script type='text/javascript'>
imgr=new Array();imgr[0]="";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<;k++){if([k].rel=='alternate'){[k].href;break}}for(var k=0;k<;k++){if([k].rel=='replies'&&[k].type=='text/html'){[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]=''}for(var k=0;k<;k++){if([k].rel=='alternate'){relatedUrls[relatedTitlesNum][k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
<!--Related Posts with thumbnails Scripts End-->

- to change the width and height of thumbnails, modify 200px and 120px values in red
- to change the color and size of related posts titles, change the value in blue
- remove the line in violet if you want the related posts to be displayed both in homepage and post pages.

Step 5. Find the line below (you will find two times, but you need to stop at the second one):
<div class='post-footer'>

Step 6. Just above that line, paste next code:

  <!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != &quot;true&quot;'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=3&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=3;
            var relatedpoststitle=&quot;Related Posts:&quot;;
<!-- Related Posts with Thumbnails Code End-->

 - change the 3 value from max-results=3 with the number of posts you want to be displayed
- if you want the related posts to be displayed on homepage too, then remove the lines in violet

If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </includable>  tag which can be found above this line (CTRL + F to find it):

<b:includable id='postQuickEdit' var='post'>

Step 7. Save the Template and that's it. Now the Related Posts widget should appear below each blog post that has labels on it. Enjoy!


How to Remove "Subscribe to Atom" & "Subscribe to Posts"

Since I have lot of blogs that are not custom always to meet the "Subscribe to Atom"or "Subscribe to Atom"
Actually not really worth a  thing and even bother because you have a million options to subscribe

For those who don't know, let me show you how to get rid of it:

First to get rid of Atom 
1. Go to template --> Edit HTML --> Click Ctrl +F to find next code
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>

Remove this line 
<b:include data='feedLinks' name='feedLinksBody'/>

That's all for "Posts Atom" - no more POSTS to show

Now let's find "Comments Atom"

Image can be very tricky, it's hard to see if you looking something fast. It is slightly diference between "Post Comments" and "Posts (Atom) barelly can see diference.

For this, find next code ( It wan't harm your blogger, no worry)

<div class='feed-links'>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><> (<data:f.feedType/>)</a>

Remove entire line and you will not see code anymore.

That's all. Hope it's usefull for someone


How to install "Back to the Top" button with smooth scrolling

This is really  great thing for the long posts, articles or whatever you have on your blog / website so this is really more than helpful and so easy to integrate into the system, at least in blogger will not be a problem, or any other platform because it works on jQuery system so it's everything in perfect order.

The role and function of the button back to top itself is quite important that makes it easy for visitors who want to go back to the top of the page mengscroll by simply clicking a button. Note: If an existing template back to top button, please remove it first.
So let's start and finish very quickly:

Log in to Blogger, then click the Edit HTML, save the following code after the <head> or before </head> tag.

<link href='//' rel='stylesheet'/>

If fontawesome already added in your template then ignore it.

2 - Save the below css before ]]></b:skin> or </style>CSS
.smoothscroll-top {
    transition:all 0.5s ease-in-out;
.smoothscroll-top:hover {
    transition:all 0.2s ease-in-out;
} {
.smoothscroll-top i.fa {

3 - Save the below JQuery and HTML before </body>Tag
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
<script type='text/javascript'>

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
        } else {

    $('.smoothscroll-top').on('click', scrollToTop);

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop =;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);

There you go... Just add these codes and that's it. If you have a problem, leave a comment. If you like, please Like, share, etc...


How to Add Border around image in blogger posts

Are you looking to add border in your blogger post's images? Then you are at right place, as this article will explain about the same that how you can add border around an images in your blogger posts using CSS. This will take just 5 minutes to done as it is too simple and easy. Just follow the easy steps given below to add border to your blogger posts images.

Go to blogger dashboard >Template > Edit HTML
Press CTRL + F  to enable search box  and search for ]]></skin> tag.
After finding the skin tag, just above it paste the following code:

.post img {
    border:5px solid #d2d2d2;

- You can change color of the border by changing #d2d2d2 with any other alter hex color.
- If you want to increase the blank space of your border just increase higher number with 2px in above code.
You can also use different types of borders in your images, following are some border types that you can use in above code.
  1. solid: Defines a solid border
  2. dotted: Defines a dotted border
  3. dashed: Defines a dashed border
  4. double: Defines two borders. The width of the two borders are the same as the border-width value
  5. groove: Defines a 3D grooved border. The effect depends on the border-color value
  6. ridge: Defines a 3D ridged border. The effect depends on the border-color value
  7. inset: Defines a 3D inset border. The effect depends on the border-color value
  8. outset: Defines a 3D outset border. The effect depends on the border-color value
 Once you are done with the customization, Click Save Template   and you're done!


How to Add Zoom Effect To Your Blog Images On Mouse Hover

CSS is really very powerful and useful tool today , We can different types of the effects to images , buttons and text on your Blog. It very easy and simple to implement on Blogger blogs. In the previous post we discussed about adding rollover effect to your images on your Blogger blog. Now we are going to discuss about adding zoom over effect to Blogger images .

Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.

1. Log in to Blogger
2. Now go to "Template" 
3. Find next code (CTRL + F) ]]></b:skin> and just above him, add next code:
.zoomeffect img{
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;

.zoomeffect img:hover{
opacity: 1;

Click on Save template

How To Activate On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!


How To Add JQuery Pop-Up Facebook Like Box To Blogger

Before adding this, Widget you need to instal jQuery Plugin. If jQuery Plugin is already installed on your Blog then just follow the steps below  and install the widget,but if not,then Go To Blogger Dashboard >> Click On Template >> and Search for </Head> tag , now copy the below script and paste it above
<script type="text/javascript" src=""></script>

  • After instaling the jQuery Plugin To Your Blog Follow the below steps
  • Go To Blogger Dashboard
  • Click On Layout
  • Now Click On Add a Gadget

  • Now a Box will Popup
  • Select HTML/JavaScript There
  • Now another Box will popup
  • Now Copy the below Script and make the specific changes and paste it into the HTML/JavaScript Box 
<style type="text/css">#makingdifferentpopup{
position: fixed;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
#makingdifferentpopup h1{
background:#6d84b4 url( 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
z-index: 99999;
.grabthis a{
color: #000;
.grabthis a:hover{
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>

<div class="htmlarea"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" style="border:none; overflow:hidden; width:400px; height:250px;"></iframe>
<div class="grabthis">By <a href="" target="_blank">Get This Widget!</a></div>

<div id="mdfooter">Please wait..<span>10</span> Seconds <a href="#" id="mdclose" onclick="return  false;">Cancel</a></div>
<!-- End popup -->

  1. Replace freebloggerthemes in the script with your Own Facebook Fan page username.
  2. For changing the Time Interval, change var sec = 10 with your Own Desire time.
  3. If you are interested in changing the height and width of the Box Change 250 and 400 in the Script
  4. For Changing The Text "Join us on Facebook" just change the text with your Own.
  5. Change The Text "Cancel" with your Desire text
  6. Now Copy the Script and paste it into the box 
  7. Now hit Save and that's it 
Credit - "MakingDifferent"

Adding this jQuery Popup will force your Readers to like your Fan page and as a result you can increase your Fan page Likes,Share your Beautiful Ideas with us and if you have any Question ask us, stay Blessed , Happy Blogging.