How to fix Adsense not showing after Redirecting Blogger to custom domain

How to upgrade YouTube, Blogger or other hosted account to show ads on a website

If you signed up for AdSense through a host partner and you’d like to show ads on your own non-host partner website, then you’ll need to provide us with the URL of the site you want to monetize. You can do this via a one-time application form. Here’s how:

YouTube: If you have signed up for AdSense via a YouTube account and you’d like to show ads on other host domains, then you’ll need to provide us with a top-level domain. At this time there's no possibility of monetizing other hosted properties for AdSense accounts created via YouTube without upgrading the account by providing a top-level domain.

1. Sign in to your AdSense account.
2. Click the gear icon   and select Settings.
3. In the sidebar, click Access and authorization.
4. In the “Show ads on other websites” section, enter the URL of the site where you plan to show ads.
5. Click Submit.

6. Finally you need to implement AdSense ad code on the URL that you provided above, on a page that receives traffic.

To implement AdSense ad code, you first need to generate the ad code. You can learn how to implement it on your non-host partner website by following our code implementation guide. Note that your ad units will remain blank until your request has been approved.
Once your request is approved, you’re welcome to place your ad code on any website that you own without any further approvals. If your application is not approved, be assured that ad serving on your host partner site will not be affected. You can continue to monetize your hosted content as normal.

An AdSense hosted account allows you to monetize content that you create on AdSense host partner websites. If you'd also like to implement AdSense on your own website, you'll need to provide us with the URL where you plan to show ads

Hide Content Using Toggle Effect In Blogger

Recently, I made a post on how to make a content spoiler in blogger and many of it have benefited. Although, some of it got confused on its application but at the end they have  arrived at a better result. Today, I am thinking to publish an article on hiding the  blog content using a different code on that previous post.  Take a look at the live below:
Click to see the content

Lorem ipsum dolor sit amet, cum wisi virtute eu, sit illum molestie ne.
Pro ad tollit dictas, ad quo erat eloquentiam, te quis indoctum quo.
Quo no quas legendos prodesset, in ponderum percipitur eam, vim inermis cotidieque ea.
Vis ei labores offendit iracundia, sed ea tantas delenit verterem. In nec delectus pericula.

Duo ex menandri recusabo elaboraret, enim luptatum mei id.
Ius velit dicam consectetuer eu, his tollit nonumes dignissim ne.
Labore commodo expetendis mei at. Dico accusam pri te.

Quaestio consequat cu vel, nec ei tota dolorem definitiones.
Ex cum luptatum convenire, ius ne labores postulant, in alii cibo vivendo quo.
Tation fuisset eu qui. Ut nec altera quodsi audire.
Cum te partem gloriatur, ut his civibus interpretaris, alii nostrum consequuntur in sed.
An quo lorem causae.

Et audiam tritani mea. Integre inimicus qui in, te pri latine prodesset.
Usu audire vocibus lucilius ad, has affert nusquam recusabo id.
At agam putant civibus qui, sed te graecis forensibus, dicta omnium appellantur ius an.
Ei rebum fabulas quo, ius dicit luptatum ut.
Et mucius possit vix, has id eirmod explicari referrentur, vis melius sensibus interpretaris .

Cu mel platonem necessitatibus, in nam appetere torquatos adversarium, cum cu dicta repudiare .
Minim platonem splendide mel te, pro sale doming ei.
Sed cu ferri liber oportere. Tale illud scripserit no usu.
Cu eos diam assueverit comprehensam, ea vix oporteat nominati.

Hiding Content Using Toggle Effect

Go to Blogger Dashboard
Click Post or New Post
Switch your Blogger Post Editor's Page in HTML Mode
Copy and Paste the code below:
Note: If you want to use this effect in most of your posts, you can simply copy the code within the style attributes only and paste it to your Blogger's template above the code ]]></b:skin>

<style>label.code-button { background: #3498db; background-image: -webkit-linear-gradient(top, #168eca, #ddd); background-image: -moz-linear-gradient(top, #168eca, #ddd); background-image: -ms-linear-gradient(top, #168eca, #ddd); background-image: -o-linear-gradient(top, #168eca, #ddd); background-image: linear-gradient(to bottom, #ddd, #2980b9); -webkit-border-radius: 5; -moz-border-radius: 5; border-radius: 5px; font-family: Arial; color: #ffffff; font-size: 12px; padding: 5px 5px 5px 5px; text-decoration: none;}
.checked-selector1, .checked-selector2, .checked-selector3, .checked-selector4 { max-height: 0; max-width: 0; opacity: 0; overflow: hidden; white-space:nowrap;-webkit-transition:all 1.5s ease; -moz-transition:all 1.5s ease; -o-transition:all 1.5s ease; transition:all 1.5s ease; }
input[type=checkbox]:checked ~ .checked-selector1, input[type=checkbox]:checked ~ .checked-selector2, input[type=checkbox]:checked ~ .checked-selector3, input[type=checkbox]:checked ~ .checked-selector4 { max-height: 100%; max-width: 100%; opacity: 1;}
input[type=checkbox] { height: 0; width: 0; opacity: 0; }
</style>

<br />
<center>
<label class="code-button" for="toggle-hidden1">Click to see the code</label></center>
<input id="toggle-hidden1" type="checkbox" />

<br />
<div class="checked-selector1">
Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here Your Text Here
</div>

Save your work and you're done!

Note:
If you have more than one content to hide, you can use the div class below respectively:

<div class=".checked-selector2">
 <div class=".checked-selector3">
 <div class=".checked-selector4 ">

Thanks for the time and God Bless Folks!!!

How To Add Page/Jump Break In Blogger

Most of the blogs have applied a read more link to show a small summary of each post on the homepage rather than showing the whole post content. This has been the another way and the simple way of not displaying the whole content on the homepage or archive page. Blogger offers a feature called 'After the Jump' which makes your large posts appear in the form of small post summary with a read more link that leads you to the full view of the post. In this article, we will show you how to add a page break in Blogger.

Also Read: How To Create Magazine Style With Post Summaries And Thumbnails On Blogger

How to Add page break/jump break in Blogger?

Blogger  Dashboard >> Edit a Post >>.
Now you have to decide where you want  to place the jump break in the content and place the mouse cursor at that location. (Please see the image below)

Once you have successfully placed your cursor on a location, click the Insert Jump Break toolbar icon in the toolbar.

Now you’ll notice a gray bar separating your content. This is the exact place where your post summary would look alike.

Once you have successfully placed the jump break, you are good to publish or Update your posts and that’s it.
Also Read: How to add show-hide effect or content spoiler in Blogger

Final Words:

On some other way, we hope this tutorial  have helped you in learning how to add page break/jump break in blogger.
Questions regarding this post is acceptable. Thanks and GOD Bless!!!

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

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

Add Comet or Shooting Star Effect in Blogger

Blogging platform is very versatile in terms of different effects through using Javascript. Previously, we featured here the fireworks, star space  and the groovy effect and today we will share to you this shooting effect in Blogger.

 How to Add Shooting Star or Comet 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=25; // how fast - smaller is faster
var how_often=10; // average time between re-appearances of a comet (in seconds)
var how_many=10; // maximum number of comets in flight
var colours=new Array("#ff0", "#f93", "#f60", "#e93", "#e94", "#da5", "#da6", "#cb7", "#cb8", "#cc9", "#dcb", "#ddd");
// above line lists colours for the comet and its tail (can be as long or short as you like)

/****************************
* Shooting Star/Comet Effect*
*Bloggingtipsandtrix*
* DON'T EDIT BELOW THIS BOX *
****************************/

var dx=new Array();
var dy=new Array();
var xpos=new Array();
var ypos=new Array();
var comets=new Array();
var swide=800;
var shigh=600;
var tail=colours.length;
var boddie=false;

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

addLoadEvent(whooosh);

function whooosh() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<how_many; i++) {
    write_comet(i*tail);
setTimeout('launch('+(i*tail)+')', Math.max(1000*i));
  }
}}

function write_comet(a) {
  var i, s;
  for (i=0; i<tail; i++) {
    s=2+(i<tail/4)+2*!i;
comets[i+a]=div(s, s);
comets[i+a].style.backgroundColor=colours[i];
boddie.appendChild(comets[i+a]);
  }
}

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

function stepthrough(a) {
  var i;
  if (Math.random()<0.008||ypos[a]+dy[a]<5||xpos[a]+dx[a]<5||xpos[a]+dx[a]>=swide-5||ypos[a]+dy[a]>=shigh-5) {
for (i=0; i<tail; i++) setTimeout('comets['+(i+a)+'].style.visibility="hidden"', speed*(tail-i));
setTimeout('launch('+a+')', Math.max(1000, 2000*Math.random()*how_often));
  }
  else setTimeout('stepthrough('+a+')', speed);
  for (i=tail-1; i>=0; i--) {
if (i) {
      xpos[i+a]=xpos[i+a-1];
      ypos[i+a]=ypos[i+a-1];
}
else {
 xpos[i+a]+=dx[a];
      ypos[i+a]+=dy[a];
}
    comets[i+a].style.left=xpos[i+a]+"px";
    comets[i+a].style.top=ypos[i+a]+"px";
  }
}

function launch(a) {
  var i;
  dx[a]=(Math.random()>0.5?1:-1)*(1+Math.random()*3);
  dy[a]=(Math.random()>0.5?1:-1)*((7-dx[a])/3+Math.random()*(dx[a]+5)/3);
  xpos[a]=2*tail*dx[a]+Math.round(Math.random()*(swide-4*tail*dx[a]));
  ypos[a]=2*tail*dy[a]+Math.round(Math.random()*(shigh-4*tail*dy[a]));
  for (i=0; i<tail; i++) {
    xpos[i+a]=xpos[a];
    ypos[i+a]=ypos[a];
comets[i+a].style.visibility="visible";
  }
  stepthrough(a);
}

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)!="undefined" && 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;
}
// ]]>
</script>

Save  your Template and Bravo!
From: mf2fm

Add Groovy Effect in Blogger

Groovy  is a slang colloquialism popular during the 1960s and 1970s. It is roughly synonymous with words such as "cool," "excellent," "fashionable," or "amazing," depending on context. Since other bloggers have this kind of niche or just want to add this kind of effect  in their blog. I was convinced to make an article and share it to my readers as well. See the background of this page for a live demo.
Music video credit.


Also Read: Add Star Space Warp Effect In Blogger

 How to Add Groovy Effect 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 border=100; // how wide is each border in pixels
var effects=3; // how many of the effect are on the page
var speed=50; // how fast is the animation (lower is faster)
var colours=new Array("#9cf", "#c9f", "#fc9", "#f9c", "#cf9", "#9fc", "#6ff", "#f6f", "#ff6");
// above line lists colours for the groovy effect (the list can be as long or short as you like)

/****************************
*1970s Groovy WebPage Effect*
*  Bloggingtipsandtrix  *
****************************/

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

addLoadEvent(yowzah);

var swide, shigh, boddie;
var h=new Array();
var v=new Array();
var op=1/(effects+1);
function yowzah() { if (document.getElementById) {
  var i, d, s;
  boddie=document.createElement("div");
  s=boddie.style;
  s.position="fixed";
  s.backgroundColor="transparent";
  s.top="0px";
  s.left="0px";
  s.width="100%";
  s.zIndex="-1";
  set_width();
  i=document.body.style.backgroundColor;
  if (document.body.parentNode) {
    if (i) document.body.parentNode.style.backgroundColor=i;
    document.body.style.backgroundColor="transparent";
  }
  document.body.insertBefore(boddie, document.body.firstChild);
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
    s.left="0px";
s.width="100%";
    h[i]=Math.floor(Math.random()*(shigh-border)/3);
    h[i+1]=shigh-Math.floor(Math.random()*(shigh-border)/3);
    h[i+2]=(Math.random()<0.5?1:-1)*scat(0);
    h[i+3]=(Math.random()<0.5?1:-1)*scat(h[i+2]);
    s.position="absolute";
    s.top=h[i]+"px";
    s.height=(h[i+1]-h[1])+"px";
    s.borderStyle="solid";
    s.borderWidth=border+"px 0px";
    jazzy(s, 'borderTopColor');
jazzy(s, 'borderBottomColor');
    jazzy(s, 'backgroundColor');
    s.opacity=op;
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    h[i+5]=s;
    boddie.appendChild(d);
  }
  for (i=0; i<effects*10; i+=10) {
    d=document.createElement("div");
    s=d.style;
s.top="0px";
    s.height="100%";
    v[i]=Math.floor(Math.random()*(swide-border)/3);
    v[i+1]=swide-Math.floor(Math.random()*(swide-border)/3);
    v[i+2]=(Math.random()<0.5?1:-1)*scat(0);
    v[i+3]=(Math.random()<0.5?1:-1)*scat(v[i+2]);
    s.position="absolute";
    s.left=v[i]+"px";
    s.width=(v[i+1]-v[i])+"px";
    s.borderStyle="solid";
    s.borderWidth="0px "+border+"px";
    jazzy(s, 'borderLeftColor');
    jazzy(s, 'borderRightColor');
    jazzy(s, 'backgroundColor');
    if (navigator.appName=="Microsoft Internet Explorer") s.filter="alpha(opacity="+(100*op)+")";
    else s.opacity=op;
    v[i+5]=s;
    boddie.appendChild(d);
  }
  setInterval('groovy()', speed);
}}

var old_jazz=false;
function jazz() {
var new_jazz;
do { new_jazz=colours[Math.floor(Math.random()*colours.length)]; }
while ( new_jazz==old_jazz );
old_jazz=new_jazz;
return (new_jazz);
}

function jazzy(hip, jive) {
var new_jive;
do { new_jive=colours[Math.floor(Math.random()*colours.length)]; }
while (new_jive==hip[jive]);
hip[jive]=new_jive;
}

function scat(no) {
var yes;
no=Math.abs(no);
do { yes=2+Math.floor(Math.random()*3); }
while ( no==yes );
return (yes);
}

function groovy() {
  var i;
  for (i=0; i<effects*10; i+=10) {
h[i]+=h[i+2];
h[i+1]+=h[i+3];
if (h[i+1]-h[i]<5) {
 h[i+4]=h[i+2];
 h[i+2]=h[i+3];
 h[i+3]=h[i+4];
 jazzy(h[i+5], 'backgroundColor');
}
    if (h[i]<-border) {
if (h[i+2]<0 && Math.random()<1/border) {
h[i+2]=scat(h[i+3]);
jazzy(h[i+5], 'borderTopColor');
}
}
if (h[i+1]>shigh) {
if (h[i+3]>0 && Math.random()<1/border) {
h[i+3]=-scat(h[i+2]);
jazzy(h[i+5], 'borderBottomColor');
}
}
h[i+5].top=h[i]+"px";
    h[i+5].height=(h[i+1]-h[i])+"px";

v[i]+=v[i+2];
v[i+1]+=v[i+3];
if (v[i+1]-v[i]<5) {
 v[i+4]=v[i+2];
 v[i+2]=v[i+3];
 v[i+3]=v[i+4];
 jazzy(v[i+5], 'backgroundColor');
}
if (v[i]<-border) {
if (v[i+2]<0 && Math.random()<1/border) {
v[i+2]=scat(v[i+3]);
jazzy(v[i+5], 'borderLeftColor');
}
}
if (v[i+1]>swide) {
if (v[i+3]>0 && Math.random()<1/border) {
v[i+3]=-scat(v[i+2]);
jazzy(v[i+5], 'borderRightColor');
}
}
v[i+5].left=v[i]+"px";
    v[i+5].width=(v[i+1]-v[i])+"px";
  }
}

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)!="undefined" && 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;
  boddie.style.height=shigh+"px";
}
// ]]>
</script>

Click Save Template button and congratulations!
Must Read: Add Fireworks Effect In Blogger
From: mf2fm

Adding Star Space Warp Effect in Blogger

Want to decorate your blog with star space warp? This innovation was from mf2fm and I will share to you to make your site more attractive than before. You can see it live in this page.
Also Read: Add Groovy Effect In Blogger

 How to Add Star Space Warp 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=40; // lower number for faster
var warp=3; // from 1 to 10
var stars=150; // number of stars
var colours=new Array("#60f", "#0f6", "#39f"); // colours of stars
var position=0; // set to '0' for foreground and '-1' for stars to appear in the background, behind text on the page

/****************************
*      Star Warp Effect     *
*   Bloggingtipsandtrix    *
****************************/
var strs=new Array();
var strx=new Array();
var stry=new Array();
var stdx=new Array();
var stdy=new Array();
var strz=new Array();
var swide=800;
var shigh=600;
warp=1+warp/125;

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

addRVLoadEvent(initiate_hyperjump);

function initiate_hyperjump() { if (document.getElementById) {
  var i, temp;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.overflow="visible";
  boddie.style.backgroundColor="transparent";
  boddie.style.zIndex=position;
  i=document.body.style.backgroundColor;
  if (document.body.parentNode) {
    if (i) document.body.parentNode.style.backgroundColor=i;
    document.body.style.backgroundColor="transparent";
  }
  document.body.insertBefore(boddie, document.body.firstChild);
  set_width();
  for (i=0; i<stars; i++) {
    strs[i]=document.createElement("div");
    strs[i].style.color=colours[i%colours.length];
strs[i].style.backgroundColor="transparent";
    strs[i].style.position="absolute";
strs[i].appendChild(document.createTextNode("*"));
strs[i].style.font="13px monospace";
    stdy[i]=Math.random()*6-3;
    stdx[i]=Math.random()*8-4;
    temp=Math.random()*100;
    strx[i]=swide/2+temp*stdx[i];
    stry[i]=shigh/2+temp*stdy[i];
    if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
    else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
    else strz[i]=2;
strs[i].style.fontSize=strz[i]+"px";
    boddie.appendChild(strs[i]);
  }
  setInterval("warp_drive()", speed);
}}

function warp_drive() {
  var i;
  for (i=0; i<stars; i++) {
    stry[i]+=stdy[i];
    strx[i]+=stdx[i];
    stdx[i]*=warp;
    stdy[i]*=warp;
    if (stry[i]>0 && stry[i]<shigh && strx[i]>0 && strx[i]<swide) {
 if (Math.abs(stdx[i])+Math.abs(stdy[i])>strz[i]) strs[i].style.fontSize=++strz[i]+"px";
      strs[i].style.left=strx[i]+"px";
      strs[i].style.top=stry[i]+"px"
    }
    else {
      strx[i]=swide/2;
      stry[i]=shigh/2;
      strx[i]+=3*(stdx[i]=Math.random()*8-4);
      stry[i]+=3*(stdy[i]=Math.random()*6-3);
 if (Math.abs(stdx[i])+Math.abs(stdy[i])>5) strz[i]=13;
      else if (Math.abs(stdx[i])+Math.abs(stdy[i])>3) strz[i]=7;
      else strz[i]=2;
 strs[i].style.fontSize=strz[i]+"px";
    }
  }
}

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)!="undefined" && 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;
}
// ]]>
</script>

Save Your Template and finish!

Simple  is good bro!

How to Display Total Published Posts Counts in Blogger

Happy New Year buddies! You may be occupied with showing the total number of posts you have distributed on your online diary? You may need to tell your followers that what amount of worth perusing articles or posts your site has created for them? As of late, one of our supporters tweet us getting some information about an approach to show the total number of posts distributed on his site. Then again, Blogger don't permit you to show the Total Published Post Count of course, yet joyfully we have created a plugin that precisely shows the aggregate distributed post check in blogger. Today in this article, we will demonstrate to you best practices to show aggregate distributed posts numbers in Blogger.
You can see the demo here to know what we are trying to accomplish for.

 Displaying  Total Published Posts Counts in Blogger

Step 1.  Go to Blogger Dashboard  >> Lay-out.
Step 2.  Add a  Gadget >> Click HTML/Javascript.
Step 3. Paste the code below inside the blank space.

<script style="text/javascript">

// Total Published Posts Counts for Blogger

// =============================

// Author: BTAT

//Version:2.0

function numposts(json) {

document.write('<div id="totalposts">');

document.write('<div id="titlep">Codes2tipsandtricks was launched on<br/> February 25, 2013.</div>');

document.write('<div id="descriptionp">A Demo blog for Bloggingtipsandtrix<br/> My Mother Blog!</div>');

var _0x13e7=["\x57\x65\x20\x68\x61\x76\x65\x20\x61\x20\x74\x6F\x74\x61\x6C\x20\x6F\x66\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x75\x6E\x74\x70\x22\x3E\x20","\x24\x74","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x66\x65\x65\x64","\x20\x50\x6F\x73\x74\x73\x20\x3C\x2F\x64\x69\x76\x3E\x20\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x70\x6F\x73\x74\x63\x6F\x70\x79\x22\x3E\x41\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x3A\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x13e7[5]](_0x13e7[0]+json[_0x13e7[3]][_0x13e7[2]][_0x13e7[1]]+_0x13e7[4]);

}

</script><script src="/feeds/posts/default?alt=json-in-script&callback=numposts"></script>

Step 4.  Click the save button and go back to Blogger Dashboard.
Step 5. From the Blogger Dashboard click Template  and hit the HTML button Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below.

]]></b:skin>

Step 6.  And just above it paste the following CSS style sheet coding.

}
div#totalposts {
  font-size: 14px;
  text-align: center;
  float: left;
  border: 1px solid #d2d2d2;
  padding: 20px;
  background: #ddd;
  width:226px;
}

div#titlep {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 15px;
    margin-bottom: 14px;
}

div#countp {
    font-size: 40px;
    font-weight: bold;
    color: #168eca;
    float: left;
    width: 100%;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

div#descriptionp {
  float: left;
  width: 100%;
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

div#postcopy {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}
div#postcopy {
display:none;}

Short Customization:

You can replace the hexadecimal color  ddd to change the background color of the widget.
Change 168eca to change the color of  your number in the  total number of posts.

Step 7. Save your work and finish.
Have a Nice Day.

How to Add an Auto Scrolling Scrollbar in Blogger

In the past we have as of now demonstrated to you best practices to tweak your scrollbar in blogger with diverse styles, colors and customization. As of late, one of our clients asked us how to include auto scrollbar in blogger that naturally scrolls the page from the through and through. Making your scrollbar scroll naturally is an immaculate approach to marginally constrain your perusers to experience the entire page before leaving your site. In this article, we will demonstrate to you proper methodologies to include an auto scrolling scrollbar in blogger

What is a Scrollbar?

A Scrollbar is a GUI (graphical control component) which controls components like content, pictures, features and else other possibilities accessible on the site page. In other straightforward words, its a long thing bar spotted at the right half of your screen by which a component can be scrolled with the assistance of a mouse.

It additionally has of two upwards and downwards bolts that helps you to span up or down the page. It is for pages as well as discover them on other programming like Word, Windows, Apple OS and so forth.

The most effective method to include Auto Scrolling Scrollbar in Blogger?

The primary thing you'll be obliged to do is to first login to your blogger account and select a site on which you'll like to include auto parchment bar. Presently go to Template &gt;&gt; Edit HTML &gt;&gt; scan for the completion  label (you will discover it the end of the codes). In the wake of discovering  just above it glue the accompanying code:

<script>
    /*<![CDATA[*/
    var div = $('body');
    setInterval(function() {
            var pos = div.scrollTop();
            div.scrollTop(pos + 2);
        }, 10)
        /*]]>*/
</script>

<style>
    body {
        overflow-y: scroll;
    }
</style>

You can increase the scroll speed by reducing the 10 in the above code.  While, increasing 10 to 100 or 1000 would make the scroll work slowly.

This technique can also be applied to a div, if you want to scroll only a certain element on your site. All you need to do is to replace the body to a div name from the above code.

 Like for <div id=”test”> the first line of the code would become  var div = $('#test'); and vice versa.

Once everything is done, save the template by pressing “Save Template” button located at the top of your screen. Congratulations, you have successfully installed the auto scrolling page feature in blogger. If you want to limit this scroll to certain pages then check out how to show or hide a widget on certain URLs in blogger.

We hope this article has helped everyone in learning how to add a auto scrolling scrollbar in blogger.  Share your thoughts about this small but useful tip in the comment section below. If you have any suggestion or requests feel free to write us using our contact us page.

How to Create Custom Webkit Scrollbar in Blogger Blog

Would you like to upgrade the Scroll bar of your site? Parchment bar shows up at the right half of the screen and, it permits clients to span down the page at whatever point they drag there mouse up or down the page. To give an easy to understand experience to your guests, it is fundamental to have a Smooth Scroll bar. On the other hand, there is probably Custom Scroll bar does the employment liberally, yet it is not great. Few days back, our peruser educated us about the brilliant Webkit Scrollbars that he has seen on distinctive sites. Besides, he additionally asked for us to create a comparable one. Thus, in this article we will figure out How to Create Customize Webkit Scrollbar in Blogger Blog? Please take a look at my scrollbar for a live a demo.

Instructions to Add Webkit Scrollbar in Blogger Platform? 

In all honesty, there is no intricacy in this excercise on the grounds that we should do nothing more than to embed a CSS to our topic, and it would do the employment easily. To introduce Webkit Scrollbar in your blogger format consider the accompanying directions.

Step 1. Go To Blogger.com >> Templates >>EDIT HTML >> Proceed.
Step 2. Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.

/* --- Bloggingtipsandtrix CUSTOM WEBKIT SCROLLBAR IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#ddd;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #158aee 20%, #158aee 60%);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #168eca 20%, #168eca 60%);
}
::-webkit-scrollbar-track {
}

Short Customization:

Replace #ddd to change the background of your scrollbar. You can use our color code generator.
Then replace #158aee with the color that you want to see in the scrollbar and the hexadecimal
168eca for its hover effect.
Step 3. After doing all the customization just press the Save button. Now Visit your site and we are sure it wouldn’t let you down. By using the same technique, we can customize many elements of a website. We will soon release their tutorial too so stay tuned with BTAT

How To Make Drop Down Menu Tabs By using CSS3

Internet is already flooded with blogging tutorials that talks on making menu tabs through using css3 which makes the whole thing impressive and beautiful. I will show you the same tutorial but I will make it a little bit different since  I will add a very small and simple trick that is, make the home tab to be highlighted as you open your blog  pages. It is  cool and professional type of menu tabs for your blog. Without much words to say, let us go with the process!
See the live demo for " Drop Down Menu Tabs With CSS3".

Read Also: How To Add Fancy CSS3 & JQuery Lavalamp Menu For Blogger

Making Drop Down Down Menu Through  CSS3

Step 1. Go to Blogger Dashboard >> Lay out
Step 2. Click  Add  a Gadget >> HTML/Javascript
Step 3. Paste the code below inside the blank page or space

<style>
/*------ CSS3 Drop Down Menu By BTAT (http://bloggingtipsandtrix.blogspot.com)---------*/
#btat-menu, #btat-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#btat-menu :first-child > a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 6px;
border-radius: 4px 0px 0px 4px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu {
width: 560px;
height:38px;
margin: 60px auto;
border: 0px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu:before,
#btat-menu:after {
content: "";
display: table;
}
#btat-menu:after {
clear: both;
}
#btat-menu {
zoom:1;
}
#btat-menu li {
float: left;
border-right: 0px solid #158aee;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#btat-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#btat-menu li:hover > a {
color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
*html #btat-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#btat-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#btat-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#btat-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#btat-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#btat-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#btat-menu ul a {
padding: 10px;
height:15px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#btat-menu ul a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #168eca;
}
#btat-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#btat-menu ul li:first-child a:hover:after {
border-bottom-color: #168eca;
}
#btat-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#btat-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
height:10px;
}
</style>
<br />
<ul id="btat-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Replace the "#" sign with your own link and the bolded words (Home, Categories, css, graphic design etc. )with your own title.

Step 4. Save and you're done!

Recommended for you:

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger
How To Create A Drop Down Menu To Blogger/Blogspot
Create Multi Level Drop Down Menu In Blogger

If you have  more questions regarding its customizations just contact me through this link and I will try my very  best to help you.

Thanks buddies and Peace OUT!!!