How to add Donation Button On blog

This is a nice way for users to reward you for your work. Paypal donation button help you to receive donation very easily.

Adding a Paypal Donation Button
Sign into your Paypal account and if you don’t have one you can get a free paypal account here.
Login into your Paypal account with your paypal E-mail address and password:
Click on ‘Merchant Services’ Tab available in the Top Menu
When you scroll down your window, you will see a ‘Donations’ link in the ‘PayPal Website Payments Standard’ heading Section.
Clicking on the ‘Donate’ link will take you a form where you are asked to fill some information’s like Organization name/service, Donation ID (optional).
Click on 'Customize Appearance' in order to use your own image for the button. You may use one of the images above if you like.
After Filing the required information click on ‘Create Button’ link.
Now you will see some HTML Code, copy it

Adding HTML code into Blogger blog:
Sign in into your Blogger Blog and Click on the ‘Layout’ link in your dashboard
Click ‘Add a Gadget’ link and select ‘HTML/JavaScript’ option
Now paste the HTML code that you copied from your Paypal account and save it.
Now open your blog and you will see the ‘Paypal Donate’ button in your blogspot blog sidebar. You can display Donate button wherever you want on your blog like blog Header, footer or its sidebar

How To Add Snow Effect On The Blogger blog Area

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

</head>


And immediately Before it, paste this code:

<script type='text/javascript'>
// <![CDATA[

var snowStorm = null;

function SnowStorm() {

  // --- PROPERTIES ---

  this.flakesMax = 1500;           // Limit total amount of snow made (falling + sticking)
  this.flakesMaxActive = 150;      // Limit amount of snow falling at once (less = lower CPU use)
  this.animationInterval = 33;    // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
  this.flakeBottom = null;        // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect
  this.targetElement = null;      // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference
  this.followMouse = true;        // Snow will change movement with the user's mouse
  this.snowColor = '#fff';        // Don't eat (or use?) yellow snow.
  this.snowCharacter = '&bull;';  // &bull; = bullet, &middot; is square on some systems etc.
  this.snowStick = true;          // Whether or not snow should "stick" at the bottom. When off, will never collect.
  this.useMeltEffect = true;      // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
  this.useTwinkleEffect = false;  // Allow snow to randomly "flicker" in and out of view while falling
  this.usePositionFixed = false;  // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported

  // --- less-used bits ---

  this.flakeLeftOffset = 0;       // amount to subtract from edges of container
  this.flakeRightOffset = 0;      // amount to subtract from edges of container
  this.flakeWidth = 8;            // max pixel width for snow element
  this.flakeHeight = 8;           // max pixel height for snow element
  this.vMaxX = 5;                 // Maximum X velocity range for snow
  this.vMaxY = 4;                 // Maximum Y velocity range
  this.zIndex = 0;                // CSS stacking order applied to each snowflake

  // --- End of user section ---

  // jslint global declarations
  /*global window, document, navigator, clearInterval, setInterval */

  var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
return o.addEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
return o.attachEvent('on'+evtName,evtHandler);
  });

  var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) {
    return o.removeEventListener(evtName,evtHandler,false);
  }:function(o,evtName,evtHandler) {
return o.detachEvent('on'+evtName,evtHandler);
  });

  function rnd(n,min) {
    if (isNaN(min)) {
 min = 0;
}
    return (Math.random()*n)+min;
  }

  function plusMinus(n) {
    return (parseInt(rnd(2),10)==1?n*-1:n);
  }

  var s = this;
  var storm = this;
  this.timers = [];
  this.flakes = [];
  this.disabled = false;
  this.active = false;

  var isIE = navigator.userAgent.match(/msie/i);
  var isIE6 = navigator.userAgent.match(/msie 6/i);
  var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
  var isWin9X = navigator.appVersion.match(/windows 98/i);
  var isiPhone = navigator.userAgent.match(/iphone/i);
  var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
  var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false);
  var screenX = null;
  var screenX2 = null;
  var screenY = null;
  var scrollY = null;
  var vRndX = null;
  var vRndY = null;
  var windOffset = 1;
  var windMultiplier = 2;
  var flakeTypes = 6;
  var fixedForEverything = false;
  var opacitySupported = (function(){
    try {
 document.createElement('div').style.opacity = '0.5';
    } catch (e) {
 return false;
    }
    return true;
  })();
  var docFrag = document.createDocumentFragment();
  if (s.flakeLeftOffset === null) {
s.flakeLeftOffset = 0;
  }
  if (s.flakeRightOffset === null) {
s.flakeRightOffset = 0;
  }

  this.meltFrameCount = 20;
  this.meltFrames = [];
  for (var i=0; i<this.meltFrameCount; i++) {
this.meltFrames.push(1-(i/this.meltFrameCount));
  }

  this.randomizeWind = function() {
    vRndX = plusMinus(rnd(s.vMaxX,0.2));
    vRndY = rnd(s.vMaxY,0.2);
    if (this.flakes) {
      for (var i=0; i<this.flakes.length; i++) {
        if (this.flakes[i].active) {
          this.flakes[i].setVelocities();
}
      }
    }
  };

  this.scrollHandler = function() {
    // "attach" snowflakes to bottom of window if no absolute bottom value was given
    scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10));
    if (isNaN(scrollY)) {
 scrollY = 0; // Netscape 6 scroll fix
}
    if (!fixedForEverything && !s.flakeBottom && s.flakes) {
      for (var i=s.flakes.length; i--;) {
        if (s.flakes[i].active === 0) {
     s.flakes[i].stick();
}
      }
    }
  };

  this.resizeHandler = function() {
    if (window.innerWidth || window.innerHeight) {
      screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset;
      screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight);
    } else {
      screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset;
      screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
    }
    screenX2 = parseInt(screenX/2,10);
  };

  this.resizeHandlerAlt = function() {
    screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset;
    screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight;
    screenX2 = parseInt(screenX/2,10);
  };

  this.freeze = function() {
    // pause animation
    if (!s.disabled) {
      s.disabled = 1;
    } else {
      return false;
    }
    for (var i=s.timers.length; i--;) {
      clearInterval(s.timers[i]);
    }
  };

  this.resume = function() {
    if (s.disabled) {
       s.disabled = 0;
    } else {
      return false;
    }
    s.timerInit();
  };

  this.toggleSnow = function() {
    if (!s.flakes.length) {
      // first run
      s.start();
    } else {
      s.active = !s.active;
      if (s.active) {
        s.show();
        s.resume();
      } else {
        s.stop();
        s.freeze();
      }
    }
  };

  this.stop = function() {
    this.freeze();
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'none';
    }
    removeEvent(window,'scroll',s.scrollHandler);
    removeEvent(window,'resize',s.resizeHandler);
    if (!isOldIE) {
      removeEvent(window,'blur',s.freeze);
      removeEvent(window,'focus',s.resume);
    }
  };

  this.show = function() {
    for (var i=this.flakes.length; i--;) {
      this.flakes[i].o.style.display = 'block';
    }
  };

  this.SnowFlake = function(parent,type,x,y) {
    var s = this;
    var storm = parent;
    this.type = type;
    this.x = x||parseInt(rnd(screenX-20),10);
    this.y = (!isNaN(y)?y:-rnd(screenY)-12);
    this.vX = null;
    this.vY = null;
    this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type)
    this.vAmp = this.vAmpTypes[this.type];
    this.melting = false;
    this.meltFrameCount = storm.meltFrameCount;
    this.meltFrames = storm.meltFrames;
    this.meltFrame = 0;
    this.twinkleFrame = 0;
    this.active = 1;
    this.fontSize = (10+(this.type/5)*10);
    this.o = document.createElement('div');
    this.o.innerHTML = storm.snowCharacter;
    this.o.style.color = storm.snowColor;
    this.o.style.position = (fixedForEverything?'fixed':'absolute');
    this.o.style.width = storm.flakeWidth+'px';
    this.o.style.height = storm.flakeHeight+'px';
    this.o.style.fontFamily = 'arial,verdana';
    this.o.style.overflow = 'hidden';
    this.o.style.fontWeight = 'normal';
    this.o.style.zIndex = storm.zIndex;
    docFrag.appendChild(this.o);

    this.refresh = function() {
 if (isNaN(s.x) || isNaN(s.y)) {
// safety check
return false;
 }
      s.o.style.left = s.x+'px';
      s.o.style.top = s.y+'px';
    };

    this.stick = function() {
      if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) {
        s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
      } else if (storm.flakeBottom) {
   s.o.style.top = storm.flakeBottom+'px';
 } else {
        s.o.style.display = 'none';
   s.o.style.top = 'auto';
        s.o.style.bottom = '0px';
   s.o.style.position = 'fixed';
        s.o.style.display = 'block';
      }
    };

    this.vCheck = function() {
      if (s.vX>=0 && s.vX<0.2) {
        s.vX = 0.2;
      } else if (s.vX<0 && s.vX>-0.2) {
        s.vX = -0.2;
      }
      if (s.vY>=0 && s.vY<0.2) {
        s.vY = 0.2;
      }
    };

    this.move = function() {
      var vX = s.vX*windOffset;
      s.x += vX;
      s.y += (s.vY*s.vAmp);
      if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check
        s.x = 0;
      } else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) {
        s.x = screenX-storm.flakeWidth-1; // flakeWidth;
      }
      s.refresh();
      var yDiff = screenY+scrollY-s.y;
      if (yDiff<storm.flakeHeight) {
        s.active = 0;
   if (storm.snowStick) {
          s.stick();
   } else {
     s.recycle();
   }
      } else {
   if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
     // ~1/1000 chance of melting mid-air, with each frame
     s.melting = true;
     s.melt();
     // only incrementally melt one frame
     // s.melting = false;
   }
   if (storm.useTwinkleEffect) {
 if (!s.twinkleFrame) {
if (Math.random()>0.9) {
     s.twinkleFrame = parseInt(Math.random()*20,10);
   }
 } else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible');
 }
   }
      }
    };

    this.animate = function() {
      // main animation loop
      // move, check status, die etc.
      s.move();
    };

    this.setVelocities = function() {
      s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
      s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
    };

this.setOpacity = function(o,opacity) {
 if (!opacitySupported) {
return false;
 }
 o.style.opacity = opacity;
};

    this.melt = function() {
 if (!storm.useMeltEffect || !s.melting) {
s.recycle();
 } else {
if (s.meltFrame < s.meltFrameCount) {
 s.meltFrame++;
 s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
 s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
 s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
} else {
 s.recycle();
}
 }
    };

    this.recycle = function() {
      s.o.style.display = 'none';
      s.o.style.position = (fixedForEverything?'fixed':'absolute');
      s.o.style.bottom = 'auto';
      s.setVelocities();
      s.vCheck();
 s.meltFrame = 0;
 s.melting = false;
 s.setOpacity(s.o,1);
 s.o.style.padding = '0px';
 s.o.style.margin = '0px';
 s.o.style.fontSize = s.fontSize+'px';
 s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
 s.o.style.textAlign = 'center';
 s.o.style.verticalAlign = 'baseline';
      s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
      s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
      s.refresh();
      s.o.style.display = 'block';
      s.active = 1;
    };

    this.recycle(); // set up x/y coords etc.
    this.refresh();

  };

  this.snow = function() {
    var active = 0;
    var used = 0;
    var waiting = 0;
    var flake = null;
    for (var i=s.flakes.length; i--;) {
      if (s.flakes[i].active == 1) {
        s.flakes[i].move();
        active++;
      } else if (s.flakes[i].active === 0) {
        used++;
      } else {
        waiting++;
      }
      if (s.flakes[i].melting) {
   s.flakes[i].melt();
 }
    }
    if (active<s.flakesMaxActive) {
      flake = s.flakes[parseInt(rnd(s.flakes.length),10)];
      if (flake.active === 0) {
        flake.melting = true;
      }
    }
  };

  this.mouseMove = function(e) {
    if (!s.followMouse) {
 return true;
}
    var x = parseInt(e.clientX,10);
    if (x<screenX2) {
      windOffset = -windMultiplier+(x/screenX2*windMultiplier);
    } else {
      x -= screenX2;
      windOffset = (x/screenX2)*windMultiplier;
    }
  };

  this.createSnow = function(limit,allowInactive) {
    for (var i=0; i<limit; i++) {
      s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10));
      if (allowInactive || i>s.flakesMaxActive) {
   s.flakes[s.flakes.length-1].active = -1;
 }
    }
    storm.targetElement.appendChild(docFrag);
  };

  this.timerInit = function() {
    s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]);
  };

  this.init = function() {
    s.randomizeWind();
    s.createSnow(s.flakesMax); // create initial batch
    addEvent(window,'resize',s.resizeHandler);
    addEvent(window,'scroll',s.scrollHandler);
    if (!isOldIE) {
      addEvent(window,'blur',s.freeze);
      addEvent(window,'focus',s.resume);
    }
    s.resizeHandler();
    s.scrollHandler();
    if (s.followMouse) {
      addEvent(document,'mousemove',s.mouseMove);
    }
    s.animationInterval = Math.max(20,s.animationInterval);
    s.timerInit();
  };

  var didInit = false;

  this.start = function(bFromOnLoad) {
if (!didInit) {
 didInit = true;
} else if (bFromOnLoad) {
 // already loaded and running
 return true;
}
    if (typeof s.targetElement == 'string') {
 var targetID = s.targetElement;
      s.targetElement = document.getElementById(targetID);
      if (!s.targetElement) {
   throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
 }
    }
if (!s.targetElement) {
 s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body);
}
    if (s.targetElement != document.documentElement && s.targetElement != document.body) {
 s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
}
    s.resizeHandler(); // get bounding box elements
    s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported
    fixedForEverything = s.usePositionFixed;
    if (screenX && screenY && !s.disabled) {
      s.init();
      s.active = true;
    }
  };

  function doStart() {
 s.start(true);
  }

  if (document.addEventListener) {
    // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
    document.addEventListener('DOMContentLoaded',doStart,false);
    window.addEventListener('load',doStart,false);
  } else {
    addEvent(window,'load',doStart);
  }

}

snowStorm = new SnowStorm();
// ]]>
</script>

<script type="text/javascript"> snowStorm.snowColor = '#99ccff'; // blue-ish snow!? </script>


If You Want to Change the color of snow than you can change code in red.

Demo

Add Facebook static widget to blog

1. Go to your blogger dashboard >> Layout.
2. Click on Add a Gadget >> select HTML/JavaScript from list
Copy The below code and Replace facebook.com/theinternetsurfer with your facebook username, save and you are done

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".tislikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.tislikebox{background: url("http://3.bp.blogspot.com/-YwBHQWHKtfo/Tw2Ewd7XpQI/AAAAAAAAAOc/Nwjd9y_JzjA/s1600/facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.tislikebox div{border:none;position:relative;display:block;}
.tislikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.tislikebox span a{color: #808080;text-decoration:none;}
.tislikebox span a:hover{text-decoration:underline;}
</style><div class="tislikebox" style=""><div><a href="http://theinternetsurfer.blogspot.com/" rel="dofollow" target="_blank" title="theinternetsurfer"> </a><a href="http://theinternetsurfer.blogspot.com/" rel="dofollow" target="_blank" title="theinternetsurfer"></a><a href="http://theinternetsurfer.blogspot.com/" rel="dofollow" target="_blank" title="Techtunes"></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/theinternetsurfer&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Demo

See the Video DEMO Below

Make links to open in a new window

If you have lots of external links and you want your readers to external links in new window and not willing to manually do it for each link by adding target="_blank" then follow the below steps:

Go to Blogger > Template

Backup your template

Click "Edit HTML"

Just above </head> paste the following script:


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

<script>
//<![CDATA[
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
     if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
});
//]]>
</script>

Note: Please do not add jQuery library(Code in blue) If you have already added  to your template.
Hope this script proves helpful for most of you. If any Problem persist please comment below.

How to change mouse cursor in blogger blog to animated cursors

How to change mouse cursor in blogger blog to animated cursors.One of the best way to add extra fun to your blog is, changing mouse cursor on your blog. Changing the mouse cursor in blogger or blogspot blogs is very easy.This tutorial will help you to change the mouse cursor of your blog to animated cursors.Many bloggers are asking such kind of questions but there is no tutorial available on the internet.I created this post because there are a blogger friend who asked how to change the pointer / cursor on the blogger. This you can do to decorate the look of blog.





How to add HTML-CSS-Javascript Codes to your Blog ?

This is very simple and easy you only follow below steps and add this widget in your blog.

Step 1 Log-in to your Blogger account.

Step 2 Backup your Template.

Step 3 Click on The Template>> Edit HTML>> Proceed.

Step 4 Now find [by pressing Ctrl + F ] this code in the template:

</head>

And immediately Before it, paste this code:

<style type='text/css'>
body, a:hover {cursor: url(http://4.bp.blogspot.com/--UM8l3-_B-c/UnJRGCQN7MI/AAAAAAAAAPU/e9zCNq3-Q1I/s1600/ve.gif), progress;}</style>

Save it and you are done.

Note: To change the cursor image just change the image link in red
Demo

Add Facebook Popup Widget To Blogger

1. Go to your blogger dashboard >> Layout.
2. Click on Add a Gadget >> select HTML/JavaScript from list
Copy The below code and Replace facebook.com/theinternetsurfer with your facebook username, save and you are done

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

<style>
#tisback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#tis-exit {
width:100%;
height:100%;
}
#tisbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#tisclose {
float:right;
cursor:pointer;
background:url(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/tisclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>

<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#tisback').delay(100).fadeIn('medium');
$('#tisclose, #tis-exit').click(function(){
$('#tisback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='tisback'>
<div id='tis-exit'>
</div>
<div id='tisbox'>
<div id='tisclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/theinternetsurfer&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit"><a href="http://www.theinternetsurfer.blogspot.com">Facebook Popup Widget</a></span></center>
</div>
</div>

See Demo

Add rotating social widget to your blog

You can easily get a rotating social widget  for your blog by following these simple steps. Without any delay, let's get it done

1. Go to your blogger dashboard >> Layout.


2. Click on Add a Gadget >> select HTML/JavaScript from list

Copy the following code and edit with your username, save and you are done.

<div class="widget-container">          
<div class="textwidget"><style>
p#tis_socialicons img {

    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#tis_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

</style> <center>
<p id='tis_socialicons'>
<a href='http://feeds.feedburner.com/blogspot/wVrIVV' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;http://1.bp.blogspot.com/-4suOkcJcrEY/UOpZSLOgEAI/AAAAAAAALHQ/Bfo2GP16lVk/s1600/rss.png&apos;' src='http://1.bp.blogspot.com/--VKL86l-Jb8/UOpZTI1QdYI/AAAAAAAALHc/pobvypvYAkY/s1600/rss-inactive.png'/></a>
<a href='https://twitter.com/dinternetsurfer' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;http://4.bp.blogspot.com/-1-MHoTTgPNo/UOpZa9PAwuI/AAAAAAAALHo/khEpCb1lAK0/s1600/twitter.png&apos;' src='http://2.bp.blogspot.com/-vfdnT942AG0/UOpZbVIg7-I/AAAAAAAALH0/f1yb38pRaBg/s1600/twitter-inactive.png'/></a>
<a href='http://www.facebook.com/pages/The-Internet-Surfer/156574417869598' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;http://1.bp.blogspot.com/-KB8iKLter1I/UOpY-36lZzI/AAAAAAAALGI/XNGi27H5UaA/s1600/facebook.png&apos;' src='http://4.bp.blogspot.com/-cr9boutcy-s/UOpZATc-69I/AAAAAAAALGU/-OJr2yI988k/s1600/facebook-inactive.png'/></a>


<a href='https://plus.google.com/103492692116147972276' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;http://1.bp.blogspot.com/-iDS8TSF6atk/UOpZBRDDbYI/AAAAAAAALGg/IPL4upm_zgI/s1600/google-plus.png&apos;' src='http://2.bp.blogspot.com/-80lPTxcgo0c/UOpZPjm3eBI/AAAAAAAALGs/gNMX65WTC_U/s1600/google-plus-inactive.png'/></a>

<a href='http://www.pinterest.com/dinternetsurfer' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;http://3.bp.blogspot.com/-l16hOlygfME/UOpZQaHRQHI/AAAAAAAALG4/Ank4It2IZcE/s1600/pinterest.png&apos;' src='http://1.bp.blogspot.com/-LIVfFyuMd6Y/UOpZRHWUq3I/AAAAAAAALHE/txTdlnAwSrs/s1600/pinterest-inactive.png'/></a>

</p></center>


See Demo 

Create Blogger Post summary with rotating thumb

Step 1 - Back up your template!
It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries with rotating thumbnails

Login your blogger account and go to Template -> Edit HTML and find:

</head>

You can use Control+F to find to find these word.

Paste the below code above </head>

 <!-- rotating thumb summary The Internet surfer(theinternetsurfer.blogspot.com) -->
<style type='text/css'>
.post-body {
        padding: 0 0 10px 0;
      }
      .thumb-post img {
        padding: 4px;
        margin:0 0 0 15px;
        width: 72px;
        height:72px;
        background: #fff;
        border: 3px solid #008ABD;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px; border-radius: 50px;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
      .post:hover:hover .thumb-post img {
        border: 3px solid #cccccc;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);
      }
    </style>

<script type='text/javascript'>
      var thumbnail_mode = &quot;no-float&quot; ;
      summary_noimg = 300;
      summary_img = 280;
      img_thumb_height = 100;
      img_thumb_width = 110;
    </script>
    <script type='text/javascript'>
      //<![CDATA[
      function removeHtmlTag(strx,chop){
        if(strx.indexOf("<")!=-1)
        {
          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);
            }
          }
          strx = s.join("");
        }
        chop = (chop < strx.length-1) ? chop : strx.length-2;
        while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
        strx = strx.substring(0,chop-1);
        return strx+'...';
      }
      function createSummaryAndThumb(pID){
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");
        if(img.length<=0) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="http://2.bp.blogspot.com/-nhuSf1wkkdE/Ui3oc1dvxKI/AAAAAAAAAD8/y_tXuUdXEHU/s1600/folder.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          var summ = summary_noimg;
        }
        if(img.length>=1) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          summ = summary_img;
        }
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
      }
      //]]>
    </script>

Now Find <data:past.body/> and Replace it with below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>

 Customizing the snippet

You can customize the read more by changing the values of the variables below:

summary_img = specify the number of characters  you want to show in the summary, with thumbnail.
summary_noimg = specify the number of characters you want to show in the summary, when there is no thumbnail.

img_thumb_height = specify the thumbnail height.

img_thumb_width = specify the thumbnail width.

Add floating social widget with box count To Blogger

It had lot of popular media sites like Facebook, Pinterest, twitter and many other. It will definitely boost the traffic of your blog.

You can easily get a floating widget with box count tray for your blog by following these simple steps. Without any delay, let's get it done.

1. Go to your blogger dashboard >> Layout.

2. Click on Add a Gadget >> select HTML/JavaScript from list.


Demo

 Add the following code, save and you are done.



   <!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:03px;top:300px;">

<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>

<a class="addthis_button_tweet" tw:count="vertical"></a>

<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>

<a class="addthis_counter"></a>

</div>

<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script>

<!-- AddThis Button END -->

How to add related post below blog posts?

Displaying related posts beneath each of your post is good to get more views and visitors will remain on your blog for long time.

Follow the below steps to get this widget on your blog

Login to your Blogger accout.
Go to Dashboard>Template>Click on Edit HTML.
Now find </head>
Copy and paste the below code above </head>.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script><script type='text/javascript'>
//<![CDATA[
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.media$thumbnail.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 {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg";}

}

if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[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(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!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;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');

i++;


if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}

}
document.write('</div>');

relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);

}

//]]>
</script></b:if>




Now find this below code

<div class='post-footer'>

Copy the below code and paste it above <div class='post-footer'>



<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>

Save your template and You are done.

Note: To change number of post change max-results=6

How to backup,upload or restore your blogger template ?

Once you have customized your Blogger template to your requirements, Now it's good time to back up this template because if something goes wrong with this template you can restore it or even share it with other Blogger users.

How to backup your template ?

To back up an existing Blogger template login to your blogger account and go to the Template section of your Blogger dashboard.

Click the "Backup/Restore" button in the top right corner of the page:

This will bring up a window which appears like this:

Click the "Download full template" button which will prompt you to save the xml file template to your computer.


How to restore or upload a new Blogger template ?
Again, go to the Template section and click the Backup/Restore button.

This time, click the Choose file button to locate the XML file you would like to upload as your Blogger template and click Upload.

Once the file has uploaded, you'll receive a message saying that your template upload was successful and you are done!.

Feel free to comment below!!!!!!!

How to add Contact form in blog

Blogger finally released it's own Contact Form gadget/widget! Hence, you no longer have to rely on third-party services for a contact form.

This "official" Contact Form widget from Blogger is robust and easy-to-implement. It will beautifully fit into your blog's sidebar.

Why add a Contact Form?

To get feedback, You should always give your visitors an easy way to contact you. By adding a Contact Form, your visitors can contact you directly from your blog itself!

If you are passionate about blogging, it's needless to say that your visitors' suggestions, questions and feedback should be invaluable to you!

Steps to implement:

1. Go to your blogger dashboard >> Layout.

2. Click on Add a Gadget >> select More Gadgets from the left-menu.

3. Click on Contact Form (Mostly it will be the first result).

Blogger Contact Form New!

4. Enter a suitable title and hit Save!

Configure Contact Form Widget

5. Now drag the widget wherever you want. You're done!

How the Contact Form works

The Contact Form has the following input fields: Name, Email and Message. It also has validations which means that if someone doesn't enter the Email or the Message, the form will give an error.

The moment a visitor clicks the "Send" button, all the admins of the blog will automatically get the mail.

Since the message is sent to you in the form of an e-mail, you can reply from your inbox itself!

Advantages of THIS Contact Form

It's officially from Blogger! You don't have to use any third-party code.
You don’t have to reveal your email address on the web.

How to Add this  Contact form on Blog Page
You have learned how to add Blogger's Contact Form to your blog's sidebar.
Now I will teach you how to embed that exact same contact form in  page

 Once you have added the widget to your blog's sidebar, copy the following code:

<form name="contact-form" style="text-align: center;">
<div>
Name: </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<br />
<div>
Email *</div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<br />
<div>
Message *</div>
<div style="text-align: center;">
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</div>
<div>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

</div>
<div style="max-width: 450px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

Paste it wherever you want the Contact Form to appear.

See DEMO Here.

Now you need to Hide contact form from sidebar.

How To Hide contact form from The Sidebar Widget

Go to your blogger dashboard >> Template >> Edit HTML Find the following piece of code:

]]></b:skin>

Paste the following code directly above/before ]]></b:skin>

#ContactForm1{display: none !important;}

and you're done!

Note: 

Widget will still appear in your sidebar.Do not delete contact form widget from sidebar.

Add Floating Social Media Share Buttons Widget To Blogger

Social networking sites has changed the way we communicate with our family, friends and relatives. The same kind of affect is on blogs too. The blogging platform now has become too much social network oriented. To achieve the high traffic for your blogs and to have grasp the larger audience , the bloggers must have social media presence on the web for their blogs.

1. Go to your blogger dashboard >> Layout.

2. Click on Add a Gadget >> select HTML/JavaScript from list.



 Add the following code, save and you are done.


Demo

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_linkedin"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-51f184b5319b19ad"></script>
<!-- AddThis Button END -->

Click here: Add floating social widget with box count To Blogger

How To Remove 'Showing Post With Label' Message From Blogger

When we open any label link in blogger we notice a message "Showing Posts with label xxxxx" above the posts. Like the picture  below

You can Remove this By following the simple steps given below==>

1. Login to your Blogger account
2. Go to blogger admin page | Templates | Edit Html
3. Press Ctrl+F and search ]]></b:skin>
4. Paste " .status-msg-wrap{display:none !important;} " (Do not include quotaions marks ) this code before  ]]></b:skin>

See instructions in image

How to make a blog and start earning money online

In this section we will learn how to make a blog and earn money from a it.This is a step by step and easy to follow guide that will help you setup your own blog from the start. This guide will help you to earn some money from blog.

This guide is for those who are looking for an answer to any of the following question.

Who should use this guide?

How do i make a blog and maintain it.?

How do i earn from it?

Now, starting a blog is easy but in order to be able to successfully monetize the blog, you need to establish the blog. In this guide, I have also covered the topics that help you establish your blog so you can monetize it.

There is a lot of content to go through so find any topic about which you can write.

Getting Started with blog

Choose a Good Domain Name

Setup your blog 

1. First you have to create an account on www.blogger.com. It is free.

2. Now give a name and theme to your blog.

Create your blog posts

There are Three main and important sections in a post that you should fill in before publishing the post

The post titlePost contentLabels

Give the post a nice title.

Add the post content in the content section.

Create a category if a relevant category doesn’t exist.

Publish the post by hitting the ‘Publish’ button.


Adding images to your blog:Best part of using images is the chances of getting searched by a user increase. If you use image in the post, the user better understands and like’s your blog day by day. Images will improve the look of a post giving it the factor of likeness by the user.

Earn money from Blogging

AdSense

When it comes to putting advertisements on your blog to generate income, Google’s AdSense is often the top pick for bloggers. It’s simple to use and doesn’t require you to have a great amount of technical know-how.

To put an AdSense ad on your blog, you pretty much just have to copy and paste the code.

It’s also one of the biggest advertising networks available, so you’ll have a wide range of advertisers to work with. That also means that you can make money from it even if your blog falls into a pretty obscure niche.