How To Add Cool Hover Effect Social Sharing/Bookmarking Widget For Blogs.

 STEP 1 : Go to Blogger Dashboard -> Design -> Page Elements.

STEP 2 : Click on Expand Template widgets check box.


STEP 3 : Search for this ( Press Ctrl + f to quick search )


]]></b:skin> Put Below code ABOVE it.

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTTDMCw3gYtOb6AwFen_DYvpU65O_v6iV1bFqQLOzS4vnvEzru8sArLGJC0IjlF8jrc69jbK7L5CELwUsuVv8aIIMRaC99goHToj_3VfuN0OWJNHr3xiQgdcIpEHRH-x1zjcl70uNdxlM/') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

STEP 4 : Now, Search for this ( Press Ctrl + f to quick search )


<data:post.body/>

Put Below code immediately After <data:post.body/> finally, Save your Template.

How to Add Adsense Below Post Titles - Blogspot.

 Google Adsense is the most popular ad network on the planet. A lot of Blogger users also use it. It's an endless discussion where to place these ads on your blog for maximum exposure. The best ad places are around the header or above the posts or below the post titles. You can easily add adsense in your sidebar as a gadget. But Blogger doesn't allows us to directly place the ads below post titles. The ads below post titles have proven to be one of the most successful money making positions. So, what are you waiting for? Follow this tutorial to add your Adsense ads below post titles.

Please Note: I'm assuming that you're using the new Adsense interface.

Steps!

• Log in to your Google Adsense account.

• Go to My ads tab and open Ad units from the left side by expanding Content link.

• Click new ad unit to create a new ad.

• Select the size, type and color of your ad. For best results chose either 300x250 medium or 336x250 large rectangle.

• Give your ad a remember-able name and ad a custom channel to track the ad performance. If you don't know anything about channels then leave that option.

• After filling required information, click save and get code button at the bottom of the page.

• A pop-up window will appear with the ad code. Copy that code.

• Before pasting the ad code in Blogger, we must make it compatible with Blogger format. So go to HERE paste thead code and convert it. You'll find the converted ad code in the bottom box there. Copy the converted ad code.

• Open your Blogger account and go to Design then Edit HTML tab and check Expand Widget Templates option.

• Press Ctrl + f & find <data:post.body/>

you'll see some code like this:

   <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Paste the converted ad code just before the above code.

The result would look something like this:

<script type="text/javascript"><!--
 google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";                             
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Click the PREVIEW button to see the result & then  save it by clicking                                                                 SAVE BUTTON 

Free Tip: Make Ads Appear Only on Post Pages

Usually, users don't like to see too many ads on a single page. So, we can hide the ads under post titles on main page. These ads will appear only when users will click the post title and go to the post page. To do that follow the steps above but after step 8 you have the converted ad code. Ad some more code in that converted code so that it should look like this:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxx";
/* my ads */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></b:if>

What I did here is that I've added an if condition to make the ads appear only on post pages. After that, follow the steps above to complete the tutorial.

If you like this post please subscribe to our FEEDS or Newsletter and don't forget to share this blog by click share buttons(Facebook,Twitter) also feedback and comments.

Right Click Disabler For Blogger Blog.

 

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.

How To Disable Right Click in Blogger Blog

STEP 1 : Go to Blogger Dashboard -> Design -> Page Elements.

STEP 2 : Click on Add a Gadget where you wish to place Search Box.

STEP 3 : Choose HTML/JavaScript from the List.

STEP 4 : Choose your Disabler Type , Paste The Code in HTML/JavaScript & Save it.

Message Alert Script:

Message Non-Alert Script:

Being a Blogger, i recommend you to use Message Non-Alert Script for your safety concern.


Happy Blogging!