Add Facebook Popup Like Box in Blogger

Facebook has turned into the main online networking administration on the Internet playing host to more than 1.3 billion clients; of those, 800 million login to their dashboard bolsters at any rate once a day. On account of the limitless number of dynamic clients on administrations like Facebook, getting new perusers as a blogger or substance supplier has ended up less demanding than at any other time in recent memory.

Demo: How to Add Facebook Popup Like Box Widget In Blogger

With a specific end goal to create a powerful advanced battle, you totally must exploit social networking by doing things like coordinating Facebook on Blogger. Email advertising can be valuable, yet it accompanies confinements that could restrain your blog's potential. Maybe the most huge issue is that messages don't accompany a face or identity like Facebook does.

Also Read: Add Facebook Pop Like Box With Timer In Blogger

Add Numbered Page Navigation Widget In Blogger

Have you seen "Older Posts" and "Newer Posts" navigation links in your homepage and archive pages? You have this kind of links to access your pages since Blogger doesn't have any built-in function on page numbering.Here's an excercise on the best way to include numbered page route utilizing Javascript to a Blogger/ blogspot blog.

 You can choose any of the 7 separate styles that I have specified beneath. In this tweak, I will show you  the best way to include numbered page navigation using Javascript to a Blogger/ Blogspot blog. You can choose any of the 7 separate styles that I have specified beneath.

Advantage of Using Page Numbered Navigation:

Page numbered Navigation  could help our website guests to explore faster (bounce starting with one page then onto the next page or click on a particular page) and know the total number of posts distributed.

Adding Numbered Page Navigation to Blogger

We will divide this tutorial into two steps.
Adding The CSS.
Adding The Script.

Now let's see how to add the CSS style for  your page navigation.

1. Adding The CSS

Go to Blogger Dashboard > Template > click on the Edit HTML button
Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.
Type or paste the following tag inside the search box and hit Enter to find it:

]]></b:skin>

Now choose one of the following numbered page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Style 2:

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style 3:

 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

Style 4:

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Style 7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

Note: if you want to hide the "First" and "Last" buttons add this line below the CSS code:

.firstpage, .lastpage {display: none;}

2. Adding The Script

Now find (CTRL + F) this tag:

</body>

UPDATED! Working version for more than 500 posts:

Add the following script just above it:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://bloggingtipsandtrix.googlecode.com/svn/new-page-navigation.js"/>
</b:if>
</b:if>

Configuration

After installing, you might want to change these default settings:

perPage: 7,
numPages: 6,
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.

numPages: how many pages will be shown in the page navigation (6)

To replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.

Labels fix:

By default, Blogger will show 20 posts on label pages. To make this widget appear on label pages, we will have to cut down this down to the value that we gave for the perPage variable.

Find each occurrence of the following code snippet:

expr:href='data:label.url'

Replace it with this one below:

expr:href='data:label.url + "?&amp;max-results=7"'

Here 7 is the number of posts to be displayed per page.
Click on the Save Template button and that's it! Enjoy!
Reference:helplogger

Flash Animated Label Cloud Widget For Blogger

Hello there! I was thinking to change the way I presented my labels and finally found  a way to make it. This is called flash animated label cloud  for blogger and this is awesome compared to show blogger  labels in alternatively. This widget works on  Word Press, and now it is available for Blogspot blog.

In this widget, we access label tags randomly by your mouse hover in flash mode to see the animation begin, the labels are animated around a sphere.  And the beauty of this widget is you can customize very easily.

 Have a glance of  my sidebar to see the live demo!

Flash Animated Label Cloud Widget For Blogger 

Go to Blogger Dashboard >> Lay-out
Click the Add a Gadget button
Select HTML/Javascript button
Inside the box, paste the code below

<script type="text/javascript">
/*<![CDATA[*/
var bloggingtipsandtrixFlashLabelSettings = {
    blogurl        : "http://codes2tipsandtricks.blogspot.com/",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 12,
    speed          : 100,
    width          : 250,
    height         : 300,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="https://bloggingtipsandtrix.googlecode.com/svn/flash-label-cloud.js"></script>

You can customize the above code only those highlighted one like the blog URL (replace it with your blog url), color of the text, background color, size of the text, speed, width and its height.

Click Save and you're done!

Smoke Effect On Mouse Clicking

Hello brothers out there! have you seen a smoke effect upon mouse clicking  on any part of the blog you  had visited try this this very simple tutorial to make some difference of your blog!

Demo:Smoke Effect Upon Mouse Click

Go to Blogger Dashboard
Click  Template >> Edit HTML
Look for the code below

Click  Template >> Edit HTML
Look for the code below

</head>

Just above that code, paste the code below,

<script type="text/javascript">
// <![CDATA[
var smokeyness=100; // how much smoke is on the screen (more will slow the script down)
var density=40; // how 'big' is the smoke

/****************************
* JavaScript Smokey Cursor  *
* Bloggingtipsandtrix  *
****************************/

var swide=800;
var shigh=600;
var toke=new Array();
var tokex=new Array();
var tokedx=new Array();
var tokey=new Array();
var nicotine=new Array();
var mousedown=false;
var x=400;
var y=300;
var sleft=sdown=0;
var ie_version=(navigator.appVersion.indexOf("MSIE")!=-1)?parseFloat(navigator.appVersion.split("MSIE")[1]):false;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(puff);

function puff() { if (document.getElementById) {
  var i, fag;
  for (i=0; i<smokeyness; i++) {
    fag=document.createElement("div");
    toke[i]=fag.style;
    toke[i].position="absolute";
    toke[i].backgroundColor="transparent";
    toke[i].font="bold "+density+"px Tahoma, Geneva, sans-serif";
    toke[i].color="rgba(234,234,234,0.033)";
    toke[i].zIndex="9999";
    toke[i].pointerEvents="none";
    toke[i].visibility="hidden";
    fag.appendChild(document.createTextNode(String.fromCharCode('0x25CF')));

    document.body.appendChild(fag);
    tokey[i]=false;
  }
  set_scroll();
  set_width();
  setInterval(drag, 50);
}}

function drag() {
  var c;
  if (mousedown) for (c=0; c<smokeyness; c++) if (tokey[c]===false) {
    toke[c].left=(tokex[c]=x-density/2)+"px";
    toke[c].top=(tokey[c]=y-density)+"px";
    toke[c].visibility="visible";
    tokedx[c]=(c%2?1.5:-1.5)*Math.random();
    nicotine[c]=80;
    break;
  }
  for (c=0; c<smokeyness; c++) if (tokey[c]!==false) smoke_rising(c);
}


document.onmousedown=function(){set_scroll();if(ie_version)setTimeout('mousedown=true', 51);else mousedown=true;};
document.onmouseup=function(){mousedown=false};

function smoke_rising(i) {
  var cancer;
  tokey[i]-=4+i%3;
  tokex[i]+=tokedx[i]-0.5+Math.random();
  if (tokey[i]>sdown-density*2 && tokex[i]>sleft && tokex[i]<sleft+swide-density && (nicotine[i]+=2)<256) {
    cancer=nicotine[i].toString(16);
    cancer="#"+cancer+cancer+cancer;
    if (ie_version && ie_version<10) toke[i].filter="Glow(Color="+cancer+",Strength="+Math.floor(nicotine[i]/5)+")";
    else if (ie_version) toke[i].textShadow='#000000 0px 0px '+Math.floor(nicotine[i]/5)+'px';
    else toke[i].textShadow=cancer+' 0px 0px '+Math.floor(nicotine[i]/5)+'px';
    toke[i].top=tokey[i]+"px";
    toke[i].left=tokex[i]+"px";
  }
  else {
    toke[i].visibility="hidden";
    tokey[i]=false;
  }
}

document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}

window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
// ]]>
</script>

Save your template and you're done.Congratulations!
Before I will finish this tutorial  try to visit related topics below:

1. How To Add Snow Effects In Blogger

2.Add Comet Or Shooting Star Effect In Blogger

3. Add Groovy Effect In Blogger

4. Adding Star Space Warp Effect In Blogger

God Bless And More Power!!!

Reference;Mf2fm

How To Make Any Widget Sticky

Making any widget sticky adds the chance of your blog's special content to be more popular and eye catching like your subscription box, social networking offerings, menu tabs and search box.

This  tweak is applicable to any gadget/widget  that has an ID, just locate the specific widget in your blog and get its ID.

You can see it live in my sidebar as you scroll down this page.

Making Any Widget Sticky

Go to Blogger Dashboard >> Template >> Edit HTML
Look for the code below

</body>

Paste the following code above the </body> tag in your template.

<script>
// Sticky widget by Bloggingtipsandtrix
//<![CDATA[
btat_makeSticky("YOUR_WIDGET_ID");
function btat_makeSticky(elem) {
    var btat_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    btat_sticky.parentNode.insertBefore(scrollee, btat_sticky);
    var width = btat_sticky.offsetWidth;
    var iniClass = btat_sticky.className + ' btat_sticky';
    window.addEventListener('scroll', btat_sticking, false);
    function btat_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            btat_sticky.className = iniClass + ' btat_sticking';
            btat_sticky.style.width = width + "px";
        } else {
            btat_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

<style>
.btat_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative\9 !important;}
</style>

However, if you want not to touch the template, you can simply paste it in a HTML/Javascript (in Blogger) or a Text widget (in WordPress).

Note: If you choose this process, make sure you position this widget below (after) the widget that you want to make sticky.

Get the ID of the widget or element you want to make sticky and replace it in the ("YOUR_WIDGET_ID"). For example let's say the widget ID is HTML12, then code in the line would become:

btat_makeSticky("HTML12");

Preview before saving.

Customization:

Styling for the sticky widget while it's sticking can be applied in  between the line <style>....</style>
like the background, box-shadow, margin, etc.
Enjoy!
Credits from Bloggersentral

How to Add Snow Effects in Blogger

Falling snow effect is cool for blog not only for Christmas season but even in other seasons as well . The effects are in  white dots that would float down the page but  you can  also customize the color of the snow .We will make this tweak more simple than other tutorials. Just follow the steps below.

Demo: Falling Snow Effects

 How to Add Snow Effects in Blogger

Go to Blogger Dashboard
Click  Template >> Edit HTML
Look for the code below

</head>

Just above that code, paste the code below

<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var flakes=100; // number of flakes
var colour="#ffffff"; // colour of flakes
var slush=20; // set to '0' for no slush or otherwise set to height at which slush melts
var over_or_under="over"; // set to "over" for snow to always be on top, or "under" to allow it to float behind other objects

/***************************\
*     Let It Snow Effect    *
*   Bloggingtipsandtrix   *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var slss=new Array();
var slsh=new Array();
var swide, shigh, boddie;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(baby_its_cold_outside);

function baby_its_cold_outside() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  i=boddie.style;
  i.position="fixed";
  i.top="0px";
  i.left="0px";
  i.overflow="visible";
  i.width="1px";
  i.height="1px";
  i.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<flakes; i++) {
    flks[i]=createDiv(3, 3, colour);
    flkx[i]=3*Math.floor(Math.random()*swide/3);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
flks[i].style.zIndex=(over_or_under=="over")?"1001":"0";
    boddie.appendChild(flks[i]);
  }
  setInterval("let_it_snow()", speed);
}}

function createDiv(height, width, colour) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min-3;
  shigh=sh_min;
  if (slush) {
    if (swide/3>slss.length) for (i=slss.length; i<swide/3; i++) {
      if (!slsh[i]) slsh[i]=3;
      slss[i]=createDiv(slsh[i], 3, colour);
      boddie.appendChild(slss[i]);
    }
    for (i=0; i<swide/3; i++) {
      slss[i].style.height=slsh[i]+"px";
      slss[i].style.top=shigh-slsh[i]+"px";
      slss[i].style.left=3*i+"px";
    }
    if (i<slss.length && slss[i].style.left!="-3px") for (; i<slss.length; i++) slss[i].style.left="-3px";
  }
}

function let_it_snow(c) {
  var i, x, o=0, z=0;
  for (i=0; i<flakes; i++) {
    flky[i]+=fldy[i];
x=Math.floor(flkx[i]/3);
    if (slush) {
      o+=slsh[x];
      if (flky[i]>=shigh-slsh[x]) {
        if (x<swide && slsh[x]>slsh[x+1]+3) x++;
        else if (x>0 && slsh[x]>slsh[x-1]+3) x--;
        slss[x].style.top=shigh-(slsh[x]+=3)+"px";
        slss[x].style.height=slsh[x]+"px";
flky[i]=shigh;
 }
    }
    if (flky[i]>=shigh || flkx[i]>swide) {
 flky[i]=0;
 fldy[i]=2+Math.floor(Math.random()*4);
 flkx[i]=3*Math.floor(Math.random()*swide/3);
 flks[i].style.left=flkx[i]+"px";
 z++;
}
flks[i].style.top=flky[i]+"px";
  }
  if (o>flakes*slush) for (i=0; i<slsh.length; i++) if (slsh[i]>3) slsh[i]--;
  if (z || o>flakes*slush) set_width();
}
// ]]>
</script>

Note: Just change the color #ffffff to change the color of the snow.
Save Template and you're done with the tutorial.
From mf2fm