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.


How to Create Rounded Images with CSS

Do you want to display circular images on your website? With CSS3, this can be done with in few seconds. You can use CSS border-radius property to make rounded images. Just add below CSS code into your style-sheet.
.img-rounded {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

If you are using Blogger, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Now when you want to make an image circular, just add "img-rounded" CSS class into it. Look at the example below:
<img class="img-rounded" src="" />

Rounded Images with CSS


How to add Pinterest Button - Hover Effect

Pinterest Button
One of the easiest and most important things any website can do to help people to discover their stuff on Pinterest is to install the Pin It button. The Pin It button makes it super simple for people to save and share things they find on your site.
These Pins link back to your website and increase the spread of your content across Pinterest.
The Pin It button is easy to integrate. You just copy and paste a few lines of HTML and JavaScript into your pages, and you're ready to go.

Find  </body>, that is on the bottom of some blogs, ussually custom blog templates and imidiatly above that, post this code:

<script data-pin-hover='true' src='//' type='text/javascript'/>

That's all and I hope you'r satisfied because it's simple but great. Thank you for reading and please share if you like it. 


How to Add Image Gallery with Thumbnails to Blogger

How to Add Image Gallery
For those who would like to show pictures in an image gallery, here's a gallery made with JavaScript and CSS that includes some thumbnails with which you will be able to pick different images on mouse click.

With the help of CSS, we can then place the <img> element to make it appear at the same position for each thumb and we'll be able to style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and assigns an "active" class name to the <li>.

Step 1. Log in to your Blogger dashboard, go to Template > Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Inside the search box type </head> and click enter to find it.
Step 4. Now pick one of the styles below and copy the code below it:

<style type='text/css'>#image-gallery {display: none;}#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}#jquery-gallery img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}#jquery-gallery, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}</style>

 Style 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}

Note: The display: none; of the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to count the width of the thumbnail (80px) plus the margins between them. The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails.

Step 5. Paste the code that you copied earlier just bellow the </head> tag.

Step 6. Just above the same </head> tag, add this script:

<script type='text/javascript'>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
this.className = 'active';
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
gal.addEvent(window,'load', function() {
Basically what this script does is to look if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do when they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in a larger container.

Step 7. Save the changes by clicking on the Save template button.

And finally, here's the HTML code. This is a normal list with the image-gallery ID, enclosed within a DIV with a relative position to avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to Layout and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post or page within the HTML section.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>

Note: if elements on your page overlap with this gallery, you might need to add the height declaration after the position: relative; The value of height depends on the size of your gallery.


 <div style="position:relative; height: 500px;"> 

Change IMAGE-URL1 with the image URL.

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>

Here you need to replace the page-URL text with the URL of your page/post
Few tips:

To add space for more rows, increase the 100px value from this line:
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}

Save your widget and Happy Blogging.

How to Add jQuery i CSS3 Magnifying Glass

Idea came by surfing web and saw on some site how they made this awesome effect. There is similar effect on my blog, maybe better, but this one isn't bad at all on contrary, you will see and you will lke it 100%. Take a look at the site I mentioned above, you may find some solution how to implement this hack. You have to know CSS, HTML i jQuery for this. Here is one way  - Zoom Effect 1  ,read it, it's cool. The only diference is in codes and style. This one is a little harder for beginners.
 Magnifying Glass

 <img class="magniflier" src="" width="460"/>

Replace "image.jpg" with your image URL

.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;

CSS gives you style and make Magnify

$(function() {
  var native_width = 0;

  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {
    magniflier: $('.magniflier')
  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass'); = $(div);
  // All the magnifying will happen on "mousemove"
  var mouseMove = function(e) {
    var $el = $(this);
    // Container offset relative to document
    var magnify_offset = cur_img.offset();
    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY -;
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
    else {;
  var magnify = function(e) {
    // The background position of will be
    // changed according to the position
    // of the mouse over the img.magniflier
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass
    var rx = Math.round(mouse.x/cur_img.width()*native_width -*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height -*-1;
    var bg_pos = rx + "px " + ry + "px";
    // Calculate pos for magnifying glass
    // Easy Logic: Deduct half of width/height
    // from mouse pos.
    // var glass_left = mouse.x - / 2;
    // var glass_top  = mouse.y - / 2;
    var glass_left = e.pageX - / 2;
    var glass_top  = e.pageY - / 2;
    //console.log(glass_left, glass_top, bg_pos)
    // Now, if you hover on the image, you should
    // see the magnifying glass in action{
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
  $('.magniflier').on('mousemove', function() {;
    cur_img = $(this);
    var large_img_loaded ='large-img-loaded');
    var src ='large') || cur_img.attr('src');
    // Set large-img-loaded to true
    //'large-img-loaded', true)
    if (src) {{
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
    // When the user hovers on the image, the script will first calculate
    // the native dimensions if they don't exist. Only after the native dimensions
    // are available, the script will show the zoomed version.
    //if(!native_width && !native_height) {
      if (!'native_width')) {
        // This will create a new image object with the same image as that in .small
        // We cannot directly get the dimensions from .small because of the
        // width specified to 200px in the html. To get the actual dimensions we have
        // created this image object.
        var image_object = new Image();
        image_object.onload = function() {
          // This code is wrapped in the .load function which is important.
          // width and height of the object would return 0 if accessed before
          // the image gets loaded.
          native_width = image_object.width;
          native_height = image_object.height;
'native_width', native_width);
'native_height', native_height);
          //console.log(native_width, native_height);
          mouseMove.apply(this, arguments);
'mousemove', mouseMove);

        image_object.src = src;

      } else {
        native_width ='native_width');
        native_height ='native_height');
    //console.log(native_width, native_height);
    mouseMove.apply(this, arguments);'mousemove', mouseMove);
  });'mouseout', function() {'mousemove', mouseMove);

Final Words. 
If you want to get back your pictures to normal, without magnifying, simply switch   <img class="magniflier"  to normal code which was before you added this one.

That's it, if you can handle, please, lieve a comment, that would be so valuable, if not, we will try to find some solution, jQuery and CSS are hard to manage but nothing is impossible. Happy Blogging dear friends !