Best Blogging Widgets

Add a Stylish Feedburner Email Form Below Blogger/WordPress Posts

2013-08-04T15:22:00.003-07:00

To increase the number of your blog readers and subscribers, there’s need to include an email form somewhere in your blog layout. One of the most strategic positions that’s been proven to be effective is right under your blog posts. Including a styled feeedburner email subscription form along with social media buttons can go a long way in increasing the number of your feed subscribers. Apart from this, this widget can increase your facebook fans and twitter followers. I also included a Google+ button to make your blog readers add you to their circles easily.

Below is how the widget should look like after adding it below your posts:

Before proceeding, you must have burnt your feed with feedburner and have the url ready. If you haven’t, register for feedburner with your google account and follow these steps:

1. Log in to feedburner and on the start page, burn your feed. If you’re on Blogger, your feed address should be http://your-site.com/feeds/posts/default and if you’re on WordPress, it’s http://your-site.com/feed

2. On the next page, configure the feed, give it your desired name and note the address. Follow the next couple of steps to activate the feed.

How to Add the Email / Social Media to Blogger

To add the widget below your blog posts:

1. Log in to blogger

2. Go to Template > Edit HTML (new blogger UI) or Design > Edit HTML (old blogger UI)

3. Check the “Expand Widget Templates” box

4. Search for <data:post.body/>

If you have more than one of this in your template and confused about which one to use, search for <div class='post-footer-line post-footer-line-1'/> instead.

5. Right below this, paste this code:

<b:if cond='data:blog.pageType == "item"'> <style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPwWCCGCvqzcOfiuaZODB0Oi6DIxiloJHNJPe0COsUqpngWtXdhd3aAwK0o_KTjvVJeezqlqWy-iVGicU7OG3RS0zwGOXwYJTjzSA82UboEeb9ki3kPg0_2ATCewjBdxqgt44q_4qjSiy/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.dcsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggerhelp24', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bloggerhelp24'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='dcsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/bloggerhelp24' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQQE3Tpw7Y3tZiT8ryssy8vvBWApZO_cZ0mb2WLt68iEyv1oc98Unoa7tjndwYs0Dz095dHShJeHoa5r4JBpZvyAZO487J2li7_hyphenhyphenDXUd8IDI_oB1lnXrO7HJb5lsEOv2McY-aTRpn_tY/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/bloggerhelp24' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZdfLG-TuEiVUzTsdKvetSCKAEsA9-HP7isv8Z8LnaDvgG2c4iBvyRGdNQhJ2TqaCIXWFwR6OMhwsELsgJXBzL9EwqaG9yIfJ8xNskM6nDbi_Cfw980micxOi9Cq6FUc-U1xVCIzkVVU/s1600/twitter-30×43.png'/></a>
<a href='http://www.facebook.com/bloggerhelp24' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLhGDdwZsR4B-FKKgdFzEvvlDlLClv1HTTCj6tBULA24fiyukERAEKFSI-J8B55Kilc3ugwMWbxguQQYlDN3ccZVgB3QmDa-Nr4ax7gztgJrwGdpBos5fC2v2PPQXAuBOJcruHVi9-d4/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/104745456339871522709/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_W5n1XLm6gQF7XLf_Xp4FS55HYtivVwgLF2UZiAh1XPyHaYGTaztL1R0r6zsdYOgkrbfSMhfbNCtrX_IdT9GY1WEo5zDPcgrnAv9WsyVxhPlOokkEXAM2sshHTwneS8p01wH3GMjIMAU/s1600/googleplus-30×43.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.doncaprio.com/2012/04/adding-a-stylish-feedburner-email-form-below-blog-posts.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>

Save your template and view your blog to see the new email subscription form below your blog posts.

Things to change in the code:

http://feedburner.google.com/fb/a/mailverify?uri=bloggerhelp24 – You should replace this with your feedburner email subscription link. To get this, log in to feedburner, click on your feed. Then go to Publicize > Email Subscription. Activate and get the email subscription link under Subscription Link Code.

bloggerhelp24 – Replace this with your feed title. You should also see this at the end of your subscription link url. Mine is bloggerhelp24 as seen in this link: http://feedburner.google.com/fb/a/mailverify?uri=bloggerhelp24

http://feeds.feedburner.com/bloggerhelp24 – Replace this with your feedburner link.

http://twitter.com/bloggerhelp24 – Replace with your twitter profile link

http://www.facebook.com/bloggerhelp24 – Your facebook page or profile link here

https://plus.google.com/104745456339871522709/ – Replace with your Google+ profile link

Adding the Subscription Box to your WordPress Blog

If you can edit your single.php file, you should be able to place it below your blog posts but there’s an easier way to get this done.

- Download and install Post Layout plugin – this plugin lets you format your post pages the way you like.

- Go to Settings > Post Layout

- Paste the code in the box labelled After the Content

How To Add Facebook Comment Box on Blogger/WordPress Blogs

2013-08-04T15:22:00.000-07:00

Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they’re already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won’t index. Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn’t actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, execept the extra traffic you get from Facebook. As you have probably noticed, more and more blogs, e-commerce websites and all kinds of applications online are taking Facebook integration more seriously. One of those popular elements is Facebook Comments.

But what you probably don’t know is that it’s not that complicated to add them to your blog yourself. We’ll tell you how to do it easily within short time!

Before we start this mini-tutorial, let’s go over a couple of things…

What are the Pros?

There are a few reasons you might be considering the possibility of integrating Facebook Comments into your blog posts.

Exposure

Comments are easily published on the commenter Facebook ~~Wall~~ Timeline. This helps increase awareness, you are now in front of that user’s network of friends
The comment is posted on the user’s Timeline along with a thumbnail, headline and excerpt from the blog post as if the user was sharing your post

Engagement

Replies to those comments can take place either on the same post in your blog or on that user’s Facebook Timeline. This motivates conversation not only inside your blog but also on Facebook
Those comments can also be Liked by other users

Authentication

Most people are on Facebook and are already signed up to their account, which means they don’t need to authenticate to any commenting system. Users that are not logged to Facebook can log in from your post comments
Most people are familiar and trust Facebook

And the Cons?

The issue for me is not that this is a 3rd-party solution living in your blog. If you think about it, most of us bloggers already use 3rd-party apps to support our comments. I use Disqus in this blog but you’ve seen others like Livefyre or IntenseDebate. Very few blogs still rely on the WordPress native comment system.

But in this case you need to consider that your comment system belongs and it is a vital element of a social network.

Not everybody is in love with Facebook, some people actually prefer Google+, some are hardcore Twitter users. The invitation to interact via a network that is not their preference might not be welcomed with open arms
Totally depending on Facebook might not be such a good idea, you know how they change things around from time to time. What if tomorrow they dramatically change one of those elements you have deeply integrated into your blog? #goodtimes

That’s why some blogs offer the the possibility to comment through Facebook while they still have a more universal commenting system.

So there you have it, advantages and disadvantages I see and share with you to help you make a better decision.

Are you ready to get started? Let’s do this thing then!

1. Become a Facebook Verified Developer

Becoming a Facebook Verified Developer is very easy, don’t let the fancy terminology scare you. Let me take you step-by-step:

Go to the Facebook Developer website
click on “Apps” on the top blue navigation
Click on “Create an App” (this will be as far as you can go without being a developer)
You will see a “Your account must be verified to perform that action” message and you will be offered two methods: Phone or Credit Card
If you go with the phone option, you will provide your number, Facebook will send you a code via text and you will submit that code back to them. Boom! You’re in business
If you choose Credit Card just provide your information and follow the instructions. Sometimes this is the best option, specially if you’re outside the US

That’s it, you wanted more? Call your spouse and share the news: You are a Facebook Verified Developer…

Cool, now we can move on to more important things…

2. Create a Facebook App

Since you are now a verified developer, you can continue to create a Facebook App. The first thing you’ll see is a little popup so you can indicate the name of your app.

App Display Name is simply the name that is displayed for others to see and the App Namespace is used for Open Graph and Canvas Pages. Do NOT sweat this stuff because we are not really building an actual App and we don’t need to display anything to anybody. Just come up with a name that represents what we’re doing so you can quickly identify it in the future.

Good example: “your website comments”.

And we need to make sure these names are valid and available, as you can see in green text on the previous image. If they’re not, just come up with something different.

Your App ID

This will give you the most important piece of information you will need: your App ID and your App Secret. Save them for your records.

Configure your App

Now we just need to do a little configuration for your App. On the same page, scroll down to the “Basic Info” section. Since we already have a Display Name and a Namespace, all we need to add here is the contact email and the App Domain, which is your blog’s domain (yourdomain.com) without the “http://”.

Scroll down a little more to the section “Select how your app integrates with Facebook”. Select “Website” and add your blog’s URL, this time including the “http://” so it looks like this: “http://www.yourdomain.com”.

Save Changes. And we’re done configuring the Facebook App. Congrats!

# Adding the Code to your Blogger Site

We’re adding four sets of codes into your template to make this work the way we want, aight?

i. xmnls attribute

ii. SDK script

iiI. Open graph meta tag

iv. Comment form iframe code

i. Press Ctrl + F and search for this code:

<html

This should be found on the second or third line of your template.

- Right in front of this, add the following code:

xmlns:fb='http://www.facebook.com/2008/fbml'

-Be sure to have a space before and after this code. Take a look at the example below:

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog…………..2005/gml/expr' >

ii. Press CTRL + F on your keyboard and search for this:

<body>

If you can’t find this, search for something similar. You should search for this instead:

<body expr:class='"loading" + data:blog.mobileClass'>

In the next line, paste this code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>

Be sure to replace YOUR APPLICATION ID HERE with the application ID I asked you to copy earlier, remember?

iii. Now, let’s add the open graph meta tag. Search for this code in your template:

</head>

In the line above it, paste this piece of code:

<meta property="fb:app_id" content="YOUR_APP_ID" />

Replace YOUR_APP_ID with that same application ID you previously copied.

iv. Now here’s the last part of tweaking your template your template to make it display Facebook comment box. The last thing is the iframe to display the comment box where you want. Search for this in your template:

<data:post.body/>

If you’re using a magazine style template, you’re likely to have more than one occurrence of this. Using the wrong one won’t make the comment show up. If you’re not sure about which one to use, search for this instead:

<div class='post-footer-line post-footer-line-1'>

In the line just below it, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style>
.bh24-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div align='center' class='bh24-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV29VwrxJSZGyr4MSYNiNp_04j5kZssZdGzIp_FuW7afJDCkWo_F0D2cfcbSB_GVnDj82QYEKsFJZvN2koQ_NJTArCoU6jDjbgie5yBXuRNPOGAvkpWnGR5BjJIGu2BWJ-HocBdx0W4n0/s1600/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div><div align='right'><a href='http://bloggerhelp24.blogspot.com/2013/03/how-to-add-new-facebook-comments-on.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div></div></p></b:if>

Save your template, the Facebook comment form should now appear. If it looks rather small, replace width=’450′ with width=’600′. This increases the width from 450px to 600px.

Enabling notification for comments on every post

This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.

- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID

- Be sure to replace YOUR_APP_ID with your real application ID

- On the page that opens, click on settings and add yourself as moderator

- Click on your name when it shows up and save the changes you made. When someone drops a comment on your blog, you should be notified that instant on Facebook.

# Adding the Code to your WordPress Site

1. Get Your Code

Now we’re going to a different section on the Developer’s site. Click here so you can get your comments code. If you’ve added the Like button or the Like Box on your blog, you’ll probably be familiar with how this tool looks. If you’ve never seen this, don’t worry, this is very easy.

First thing is to configure how the comment box is going to look on your blog:

Start by adding your blog’s URL again (http://www.yourdomain.com)
Specify the number of comments you want to display on your blog post
Set the width of the box depending on how wide the content area is on your blog
The “Color Scheme” will usually stay as “Light” unless you have a dark background on your site and prefer to go that way

The section on the right of the screen (see image below) gives you a preview of how things are going to look once you install on your site. As soon as you’re happy with it, click on “Get Code”.

And a new box will pop up, this one is to grab your code but before you do:

You get 2 options for code: HTML5 and XFBML. My preference is HTML5
And very important, Select the correct App from the dropdown menu, specially if you have more than one

Now you’re ready to copy the code from the first box, there is no need to change anything since Facebook already integrated the App ID in the code for you. Your code should look a little something like this:

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1&appId=[YOUR APP ID]“;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

2. Adding the Code to your template

Two more steps and we’re golden.

Now we are going to have to paste this code into your PHP code, inside your “header.php” file to be more exact. I know it sounds like we’re stepping into another dimension but it’s actually pretty easy. Stay with me…

There are two ways you can do this, if you’re comfortable connecting and managing files on your server via a FTP Client you can do that. Connect to your server and locate the “header.php” file.

The second option is from your WordPress Dashboard. This sounds more human, right? Most themes have a section called “Editor” under the “Appearance” tab on the left menu. Again, that’s WordPress Dashboard > Left Menu > Appearance > Editor.

On the right side of your screen you’ll see a list of all the theme files, find and click on “Header (header.php)”, that will display the actual code in the file in the center of your screen.

Now, paste your piece of code right after the <body> tag as shown in the following image.

Save when you’re done.

3. Adding the Facebook Code to Your Comments

Let’s go back to Step 3 to grab the other code from Facebook which should look like this:

<div data-href=”http://yourdomain.com” data-num-posts=”10″ data-width=”550″></div>

In this case we do need one minor tweak. What happens with this code is that Facebook is providing it ready to work for that specific domain but, what we want to do is install the comments on every post in our blog. So we’ll replace the section that contains your domain (http://yourdomain.com) for this: <?php the_permalink() ?> and now you’re code will look like this:

<div data-href=”<?php the_permalink() ?>” data-num-posts=”10″ data-width=”550″></div>

That will do the trick. Now your Facebook Comments will automatically appear on every blog post you publish.

We need to go back to our WordPress Editor now. Locate the file named “comments.php” from the menu on the right.

In this case the positioning of our code really depends on where we want the comment box to go, I wanted them on top of the WordPress native comment system so that’s where I placed it (above image).

Don’t forget to save.

And with that, we are done. No high fives yet…

Results

It’s the moment of truth, we need to go to our site and see if the Facebook Comment Box is showing up in our posts. And this is what you should see:

Let’s Test It!

Let’s test the comment system just to make sure everything is working properly. First just add a comment right there in your blog post and make sure you checkmark the “Post to Facebook” option right below the comment box.

Now check if the comment is displayed on your Facebook Timeline.

As you can see, besides the comment, the post image, headline, and the meta description for the post are also displayed on the Facebook Timeline. Very similar to a share. Shiny!

Reply from the Timeline

Now try interacting with that same comment right from the Timeline to see if it also gets displayed on the blog post page. In this example, I’m replying with my wife’s account, check it out.

And now you have a conversation about your post that is happening in two different places. Isn’t the Internet beautiful? I think so too…

Authentication

Remember, if the user is not currently logged into his/her Facebook account, they will be presented with the option to sign in right from your blog post. So let’s sign out of Facebook and go back to your post to see if this works.

If this works for you, you can say thank you by sharing on Facebook, hitting the Google +1 button or simply using the comment box. Also, it would be nice of you not to remove the credit link to allow others find this useful widget. If you’re having problems implementing this as well, don’t hesitate to let me know maybe I can be of help.

Add a “Read More Link” or “Continue Reading link” to blogger

2013-08-04T15:21:00.002-07:00

A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a Read More Link, clicking which expands the entire post. Look at a screen shot Below,

This link just adds beauty to your blog along with some pro spice to it. So lets learn how to summarize your posts and give them the expandable functionality.
The steps that must be followed for planting this TNT are,

Go to layout > Edit HTML

Now The Most Important Step –> Back Up Your Template

By backing up your template I mean that you must save a copy of your current template in your computer hard drive. If in case something goes wrong, you can restore your template and have everything working as normal as before.
To backup your template click on the link saying Download Full Template , as shown below

If suppose something goes wrong , you will simply click the Browse button, locate your saved template and then simply click the Upload button to restore your template back to normal.

Click on "Expand Widget Templates" at the top right hand corner of your Edit HTML page

Now find this code ]]></b:skin>

Tip: Pressing Ctrl + F and then paste this code into the search box, as shown below,

The search box is an easy way of finding codes in your template.

Just after ]]></b:skin> copy paste the code below,

Tip: Highlight the code below and then press Ctrl + c to copy the entire code and then press Ctrl + v to paste the code

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Now find this code <data:post.body/>

And just after <data:post.body/> add the code below,

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More ->></div></a>
</b:if>

You can replace the text in red with anything you like, e.g: Continue Reading, Keep Reading
If you want to shift the "Read More->>" text to the extreme-left side, use this code:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="text-align: left;">Read More ->></div></a>
</b:if>

Save your template and you are Done!

Read Further to know How to Apply this TNT in your Posts
Now whenever you want to write a post in windows Live Writer, follow the procedure below,

Once you had finished writing your post, as shown below,

Just after completing your post click on the source button at the bottom of your windows live writer page,

UPDATE: Instead of trying the long method below, there is an easy shortcut. Wherever you want the read more link to appear, simply paste this code there:

Nothing else required! :)
You will see something like this,

Now use the code below to hide the portion of your post that you don’t want to be shown on your homepage

<span class="fullpost">

</span>

Now suppose if you want to show the post only till the lines
I have explained everything in these images so read carefully!
So you will add the codes as shown below,

You can see in the image above that I have added <span class="fullpost"> just above the part of the post I wanted to hide. The text that I want to hide is the one below,

“Please use windows live writer only for writing quality posts. This TNT of Read More link works best with windows Live writer. Blogger Editor is simply annoying and this trick simply just don’t work efficiently with it. If you still want to use blogger editor rather than windows live writer than frustration is what you will encounter! “

I added </span> to the part where the entire post completes or source code ends

In short add <span class="fullpost"> just before the text to be hidden and add </span> just after it

All Done!

Add AdSense right After More- Tag on Blogger

2013-08-04T15:20:00.007-07:00

This is a great tutorial which will multiply your current click through rate and add a new boom to your over all Adsense earning. With a big repository of plugins for Wordpress blogs like Quick Adsense, WP users never need to worry while adding Adsense to any part of the blog they wish but in blogger we lack plugins that could do the job automatically. Therefore this week my main focus lies in developing more of such plugins that could provide you great front end experience. Thanks our developer Ahmed Nasir the script developed this time will automatically insert your AdSense Ad right after the opening paragraph (Post summary) or the read more button(Jump Break). The read more link is distinguished by the HTML tag "" , we will use a simple Jquery code to tell the browser to append an Ad zone with a unique div ID, right before the more tag. In browsers where JavaScript is disabled the Ad zone will instead display at the end of post. You can see the demo on our blog, right after reading this line...

(You will see below a 468X60 Adsense for content Ad).

Update: I have disabled the Ad display for browsers where JavaScript is disabled.

Installing the Script on Blogger

Go to Blogger > Templates
Backup your template
Tick the "Expand Widget Templates" box
Search for <head>
Just below it paste the following JQuery code only if you are not yet using jQuery script on your blog

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

6. Next paste the following code below <head>

<script type='text/javascript'>
$(document).ready(function(){

$('a[name="more"]').before($('#BH24-google-ad').html());
$('#BH24-google-ad').html('');

});
</script>

Optional: If you want to display the ad at two places i.e. below read more tag and also at the end of post then delete the highlighted yellow code. Also delete the yellow highlighted code from step#8 given below
7. Now search the following code:

<data:post.body/>

8. Just below it paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<div style="display:none;">
<div id='BH24-google-ad'>
<br/>
<center>
ADD ENCODED ADSENSE CODE HERE </center>
<br/>
</div>
</div> </b:if>

Replace the bolded text above with your Adsense code. Remember that the code that you copy from your Google Adsense Account must be first encoded inorder to work with blogger templates. Simply copy the code and then encode it using the following HTML Encoder tool.

Encode your AdSense code using: HTML Encoder

Copy the encoded code from MBT HTML encoder and then paste it on the bolded text that says: ADD ENCODED ADSENSE CODE HERE
9. Save your template and you are all done!
Visit your blog and then visit any post page, you will see an Ad hanging just perfectly right after the first opening Summary paragraph.

Add a Stylish Set of Share Buttons to Blogger

2013-08-04T15:20:00.004-07:00

If you checked this site on mobile, you should see a set of share buttons appear above and below posts. Also, if you’re using a PC, you should’ve noticed the same share buttons appearing just below posts only. Lots of co-bloggers often ask me which exact WordPress plugin I use but as a matter of fact, I’m not using a plugin for those buttons, I added them manually. Either you’re on Blogger platform, you can add these kind of cool, stylish share buttons to your blog too. This is what the buttons should look like when added:

I actually got the code from sharethis.com but you may not like the way it appears on your blog if you did the automatic setup they have for Blogger. Adding it manually gives you more flexibilty: You can choose how and where you want the sharing buttons to appear. As you can see, the buttons have the major social networks and social bookamarking sites included:

Facebook share button
Facebook like buttton
Tweet button
Pinterest button
Digg button
Stumbleupon button

Of course, you can add more buttons and even customize it but lets get started with these first. Below is a demo of what it should look like. Note that it’s customized with a little bit of CSS but of course, you can change this if you know how to get it done.

Adding the share buttons to Bloggger / Blogspot

1. Log in to your Blogger account

2. Go to Template > Edit HTML

3. Click the box labelled “Expand Widget Template”

4. Search for this:

</head>

5. Paste this code above it:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-47c9cca-cf33-f245-f3f6-43ed7a58f34f"}); </script>

6. Now search for this:

<data:post.body/>

Note that you will have more than one of this if you’re using a magazine style template. You should keep trying them one after the other and check you blog each time you implement the code to know when it works.

7. Copy this code:

<b:if cond='data:blog.pageType == "item"'>
<style>

.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p>
</b:if>

If you want the buttons to appear above your posts, paste the code above <data:post.body/>.

If you prefer to have the share buttons just below your content, paste the code after <data:post.body/>.

You can as well put the code in both positions if you like.

You can change the CSS to change the look and feel if you want. Did you see the colored part of the code? That’s how the buttons are arranged. You can remove the ones you don’t like or change the arrangement.

Add a New Stylish Vertical Floating are Button to Blogger

2013-08-04T15:20:00.001-07:00

This is not the first set of floating share buttons I’ll be sharing on this blog but I realized there’s a need to update this cove and maybe change the styling a bit to make it look somehow similar to Digg Digg which I presently use. The need for a horizontal set of floating share buttons on your sidebar cannot be over emphasized since it plays a major role in making sure your contents gets shared on major social networks.

Digg is as good as dead and I’ve decided not to include it in this new set. Buttons included are: Facebook like, Facebook, share, Tweeter, Pinterest, Stumbleupon and Google +1. However, the “pin it” button won’t appear on the homepage, just post pages.

The Facebook share button stopped working on the previous sets of buttons but it’s fixed in this new one: users can like and share.

How to add the new floating share buttons to blogger

- Log in to your Blogger account and go to Template > Edit HTML

- Check the box labelled Expand Widgets Template

- Search for <html, leave a space and add xmlns:fb="http://ogp.me/ns/fb#" just after it. The resulting code should lok like this:

<html xmlns:fb="http://ogp.me/ns/fb#"

If this is already there, you don’t need to do it again.

- Search for <data:post.body/>. If you have more than one of it in your template, search for <div class='post-footer-line post-footer-line-1'/>

- Copy this code:

<b:if cond='data:blog.pageType == "item"'>



<style type='text/css'>

#dc-float {position:fixed; bottom:15%; right:10px; float:left;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

border:1px solid #BBBBBB;

background-color:#FFFFFF;

-webkit-box-shadow: #B3B3B3 5px 5px 5px;

-moz-box-shadow: #B3B3B3 5px 5px 5px;

box-shadow: #B3B3B3 5px 5px 5px;

padding:0 0 2px 0;z-index:10;}

#dc-float .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='dc-float' title='Share with your friends'>

<div class='sbutton' id='rt'>

<a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

<div class='sbutton' id='su'>

<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>

</div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=167544263382192";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='48'/>

</div>

<div class='sbutton' id='gplusone'>

<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

<g:plusone size='tall'/>

</div>

<div class='sbutton' id='gb'>

<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>

<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>

<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>

<script type='text/javascript'>

function run_pinmarklet() {

var e=document.createElement('script');

e.setAttribute('type','text/javascript');

e.setAttribute('charset','UTF-8');

e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);

document.body.appendChild(e);

}

</script>

</div>

<div class='fb_button_share'>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=112973755438933"; // appId must be valid

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<fb:share-button type="box_count">

</fb:share-button>

</div><br/><div style='clear: both;font-size: 8px;text-align:center;'><a href='http://bloggerhelp24.blogspot.com/2013/03/add-new-stylish-vertical-floating-are.html' style='text-decoration: none;' target='_blank'><font color='#816D77' decoration='none'>Get widget</font></a></div></div>



</b:if>

- In the line just below that, paste the whole content in the text file.

- Hit the Save Template button and view your blog.

To make the share butons float to the left instead of right, search for this code:

dc-float {position:fixed; bottom:15%; right:10px; float:left;

Replace with this:

dc-float {position:fixed; bottom:15%; left:10px; float:left;

Did you like the way the buttons appear? Got some questions not covered in the post? Please do let me know.

How to Remove @sharethis from Sharethis Twitter Code

2013-08-04T15:18:00.002-07:00

We almost removed sharethis code from this blog because each time someone tweets my link, it automatically adds via @sharethis to the tweet. We're pretty sure most of those using this code would love to remove sharethis handle from their tweets and probably change it to their own Twitter username.

Instead of gaining followers for sharethis, using your own Twitter handle when your posts gets tweeted may fetch you a couple of more followers.

The set of stylish share buttons We published uses this code and if you implement that code, you can try this out.

Changing @sharethis to your own twitter handle

- Locate the tweet button within the code you’re using. It should look like this:

<span class='st_twitter_hcount' displayText='Tweet'>

- Add this to the code:

st_via='YourTwitterHandle'

You must replace YourTwitterHandle with your own twitter username.

- The resulting code should look this:

<span class='st_twitter_hcount' st_via='bloggerhelp24' displayText='Tweet'>

You can try using the tweet button below this post to see if it really works. ;

How To Add Linkedin Share Button with Counter to Blogger

2013-08-04T13:19:00.003-07:00

Linkedin Linkedin has recently launched Share on Linkedin button for its publishers, bloggers, and businesses so that users can easily include a button on their site and enable their readers and visitors share the content of that website easily on Linkedin. As we all know that linkedin is a business-oriented Social networking site that is mainly used for business oriented networking.

Linkedin has got 3 different sharing buttons.
Integrating this into blogger will require some template edits.
To add this widget to blogger, follow these instructions:
Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Vertical Count Button:

Case 1:

To place the linkedin share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top" expr:data-url="data:post.url">
</script>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.
Case 2:

To place the linkedin share button at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top" expr:data-url="data:post.url">
</script>
</div>

NOTE: Don't forget to save the template.

Horizontal Count Button:
Case 3:

To place the linkedin share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="right" expr:data-url="data:post.url">
</script>
</div>

NOTE: Don't forget to save the template.

No Count Button:
Case 4:

To place the linkedin share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" expr:data-url="data:post.url">
</script>
</div>

NOTE: Don't forget to save the template.
This will put a linkedin share button to every post. But you won't be able to choose which post you want to include or exclude the button.

How to Add Yahoo Buzz Button For Blogger

2013-08-04T13:18:00.000-07:00

Yahoo Buzz is a community-based news article website, just like Digg, that combines the features of social bookmarking and syndication through a user interface that allows editorial control.Yahoo Buzz has got many different sharing buttons. Integrating this into blogger will require some template edits. This post explains how to add Yahoo! Buzz buttons on your every Blogger post. It's really very simple!

To add this widget to your blog, follow these instructions:
Step 1:
Log in to Blogger, go to Design /Layout> Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Square Button:

Case 1:

To place the yahoo buzz button with counter at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>
</div>

NOTE: Don't forget to save the template.

NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

To place the yahoo buzz button with counter at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><data:post.url/></script>
</div>

NOTE: Don't forget to save the template.
NOTE: Browse more buttons from here grab the code and replace ARTICLEURL with <data:post.url/>.
NOTE: To place the yahoo buzz button at the end of your post paste this code after/below it.
NOTE: You can also include the first and last line of to place the button left or right.

i.e

<div style="float:left;padding:4px;">

    |

    |

code here

    |

    |

</div>

This will put a Yahoo Buzz Button to every post. But It won't let you choose which post you want to include or exclude a button.

How to Add Reddit Button For Blogger

2013-08-04T13:16:00.001-07:00

Reddit is a social news website. Users have the option to submit links to content on the Internet or submit "self" posts that contain original, user-submitted text. Other users may then vote the posted links "up" or "down" with the most successful links gaining prominence by reaching the front page. In addition, users can comment on the posted links and reply to other commentators consequently forming an online community.

Reddit button to your blog can give your blog readers, a chance to bookmark the interesting posts of your blog.

There are 3 sharing buttons to choose from.

Integrating this into blogger will require some template edits.
To add this widget to your blog, follow these instructions:
Step 1:
Log in to Blogger, go to Design /Layout> Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Case 1:
Going with Style 1.

To place the reddit button with counter at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

To place the reditt button with counter at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button style just change the style number (text marked in green). i.e. t=1 to t=2 or to t=3. Check it in Case 3 and Case 4 below.

Case 3:

Going with Style 2
To place the reddit button at the end of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=2"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To place the reddit button at the top left corner of your post just change the code as shown in Case 1 and Case 2.

Case 4:

Going with style 3.
To place the reddit button at the end of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script>reddit_url='<data:post.url/>'</script>
<script>reddit_title='<data:post.title/>'</script>
<script language="javascript" src="http://reddit.com/button.js?t=3"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To place the reddit button at the top left corner of your post just change the code as shown in Case 1 and Case 2.
NOTE: To place the reddit button at the end of your post paste this code after/below it.
This will put a Reddit Button to every post. But you can not choose which post you want to include or exclude a button.

How to Add Delicious Button For Blogger

2013-08-04T13:15:00.001-07:00

Delicious is a social bookmarking web service for storing, sharing, and discovering web bookmarks. The delicious button can act more like a Retweet Button. Adding a delicious button will show a neat count of how many times, your post has been bookmarked about and will also allow your readers to bookmark it. To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Design /Layout> Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

]]></b:skin>

Step 3:
Then place this CSS code before/above it.

.share-delicious{
width:50px;
height:63px;
text-align:center;
}
.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoMJRdv2yoB64VvXFCYXxDOGZdgO7_WTOd2f0EXPgpin3-3lK2aJWSrKLFY5-nb3Wa0ciP7sR53ntKaBvwmC37KGxnQgvKXt3QD9OfCkdhWSRXtkzec61NeXZnNHKXjeqEHccflsDyb_o/s1600/del+above.png) no-repeat;
font-weight: bold;
font-size: 16px;
font-family:arial;
color:#adadad;
margin:0 auto;
line-height:36px;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCZyEaS9tNxsYmdSCNwVDlw-UqHCHfxKiakXbdR6duDiIEgN0rXbwI3CghMOuGGI3j7sjtIRhwiSK6zWb5wvGT04YOEDi-z8uHGYLJefw1y2Xg8ZPdEiLdX5wdNPXshMZJTN8g39DgV4/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCZyEaS9tNxsYmdSCNwVDlw-UqHCHfxKiakXbdR6duDiIEgN0rXbwI3CghMOuGGI3j7sjtIRhwiSK6zWb5wvGT04YOEDi-z8uHGYLJefw1y2Xg8ZPdEiLdX5wdNPXshMZJTN8g39DgV4/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Step 3:
Now find (CTRL+F) this in the code:

<data:post.body/>

Case 1:
To place the delicious button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) {
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return;
var delic = document.getElementById('delic');
delic.innerHTML = '' + num;
delic.style.textIndent = 0;
delic.style.paddingRight= '6px';
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=delic"'/>
</div>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

NOTE: Followed by Step 2 and Step 3.
To place the delicious button at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) {
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return;
var delic = document.getElementById('delic');
delic.innerHTML = '' + num;
delic.style.textIndent = 0;
delic.style.paddingRight= '6px';
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=delic"'/>
</div>
</div>

NOTE: Don't forget to save the template.

Now if you want the compant button:

Case 3:

To get a compact delicious button just change the CSS code with this. :

.share-delicious{
width:100px;
height:19px;
text-align:center;
font-family:arial;
}
.delicious{
width:46px;
height: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQiiByzTNYlMSJOQ1ceiEvgT0QdTLxlH0bpXYLwKHocUh9N6EKBet-s0BBFWziab2RkbO56D49_6X0NccyowxxMJLFVNWhXxu03-49M0PmFcqmJcnnSjPkt3XBA5iP1Pn23A4SlEXIE8g/s1600/comp+del.png) no-repeat;
font-weight: bold;
font-size: 13px;
color:#999;
margin:0 auto;
line-height:18px;
float:left;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
float:left;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCZyEaS9tNxsYmdSCNwVDlw-UqHCHfxKiakXbdR6duDiIEgN0rXbwI3CghMOuGGI3j7sjtIRhwiSK6zWb5wvGT04YOEDi-z8uHGYLJefw1y2Xg8ZPdEiLdX5wdNPXshMZJTN8g39DgV4/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYCZyEaS9tNxsYmdSCNwVDlw-UqHCHfxKiakXbdR6duDiIEgN0rXbwI3CghMOuGGI3j7sjtIRhwiSK6zWb5wvGT04YOEDi-z8uHGYLJefw1y2Xg8ZPdEiLdX5wdNPXshMZJTN8g39DgV4/s1600/del+new.png) no-repeat center -17px;
display: block;
}

NOTE: Don't forget to save the template.
NOTE: To place the compact delicious button at the top left corner of your post just change the code as shown in Case 1 and Case 2.
This will put a delicious button to every post. But it won't let you choose which post you want to include or exclude a button.

How to Add Google Buzz Button For Blogger

2013-08-04T13:14:00.000-07:00

Google Buzz is a social sharing tool from Google and it is much similar to all other sharing widgets. It's is a great way to start conversations about the things you find interesting. You can read more about Google Buzz at the official Google Blog. Google Buzz has got 3 different sharing buttons. Integrating this into blogger will require some template edits.

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Button & Counter:

Case 1:

To place the google buzz button with counter at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

To place the google buzz button with counter at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

NOTE: To change the button style from "Button & counter" to "Button only (Normal)" or "Button only (small)" or to "Link" just change the data button style (text marked in green). i.e. data-button-style="normal-count changes to data-button-style="normal-button or to data-button-style="small-button or to data-button-style="link check it in Case 3 & Case 4 below.

Button Only (Normal):

Case 3:

To place the normal google buzz button at the end of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-button" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To place the google buzz button at the top left corner of your post just change the code as shown in Case 1 and Case 2.

Button Only (Small):

Case 4:

To place the small google buzz button at the end of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="small-button" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To place the google buzz button at the top left corner of your post just change the code as shown in Case 1 and Case 2.

Link:

Case 5:

To place the google buzz link button at the end of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="link" data-locale="en_IN" rel="nofollow" expr:data-url='data:post.url'></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
</div>

NOTE: Don't forget to save the template.
NOTE: To place the google buzz button at the top left corner of your post just change the code as shown in Case 1 and Case 2.

NOTE: To place the google buzz button at the end of your post paste this code after/below it.
This will put a Google Buzz Button to every post. But you can not choose which post you want to include or exclude a button.

How to Add StumbleUpon Share Button For Blogger

2013-08-04T13:12:00.001-07:00

Like all other Social networks, Stumbleupon has released some really great looking sharing buttons.

Stumbleupon has got 6 different sharing buttons.
Integrating this into blogger will require some template edits.
To add this widget to blogger, follow these instructions:

Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Case 1:

Going for style 5.

To place the stumbleupon share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

To place the stumbleupon share button at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
NOTE: Now to change the button style (text in green). In the code above, change s=5 to s=1 or s=2 or s=3 or s=4 or s=6 to get the other button styles. Check it in case 3 and case 4 below.

Case 3:

Going for style 2.

To place the stumbleupon share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=2&r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.

Case 4:

Going for style 6.

To place the stumbleupon share button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=6&r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
This will put a stumbleupon share button to every post. But you won't be able to choose which post you want to include or exclude the button.

How to Add Retweet Button For Blogger

2013-08-04T13:11:00.000-07:00

Retweet enables to repost some interesting tweets on twitter. The retweet button can act more like a tweet counter.Adding a retweet button will show a neat count of how many times,your post has been tweeted about,and will also allow your readers to retweet it

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Retweet Button:

Case 1:

To place the retweet button at the top right corner of your post paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>

NOTE: To change the button position from "Top-Right" to "Top-Left" just interchange the text market in red. Check it in Case 2.

Case 2:

To place the retweet button at the top left corner of your post paste this code before/above it :

<div style='float:left; margin-right:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>

Case 3:

To place the retweet button at the end of your post paste this code after/below it :

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>

Compact Retweet Button:

Case 4:

To get a compact retweet button paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_style = "compact";
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

NOTE: To place the retweet button at the top left corner of your post just change the code as shown in Case 1 and Case 2.

NOTE: To place the compact retweet button at the end of your post paste this code after/below it.
This will put a Retweet button to every post. But you can not choose which post you want to include or exclude a button.

How to Add Digg Button For Blogger

2013-08-04T13:09:00.003-07:00

Digg is a social news website. Prior to Digg, its cornerstone function consisted of letting people vote stories up or down, called digging and burying, respectively.This is a step-by-step guide to automatically place a real-time Digg count and vote button to every single blogger post.

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" checkbox.
Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Case 1:
Screenshot:

To place the digg button at the top right corner of your post paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

Case 2:
Screenshot:

To place the digg button at the top left corner of your post paste this code before/above it :

<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

Case 3:
Screenshot:

To place the digg button at the end of your post paste this code below/after it :

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

Case 4:
Digg has another compact button.
Screenshot:

To get this paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
digg_skin="compact";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>

NOTE:
This will put a Digg button to every post. You are therefore not able to choose which post you want to include or exclude a button.

How to Add Tweet Button For Blogger

2013-08-04T13:08:00.002-07:00

Twitter a social networking and microblogging service, enabling its users to send and read messages called tweets.
Twitter has already released the tweet button officialy on twitter site. This is a step-by-step guide to automatically place a real-time Tweet count and button to every single blogger post.

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>

Vertical Count Button:

Case 1:

To place the vertical tweet button at the top right corner of your post paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
NOTE: To change the button position from "Top-Right" to "Top-Left" just interchange the text market in green. Check it in Case 2.

Case 2:

To place the vertical tweet button at the top left corner of your post paste this code before/above it :

<div style='float:left; margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you

Case 3:

To place the vertical tweet button at the end of your post paste this code after/below it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you

Horizontal Count Button:

Case 4:

To get this paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
NOTE: To place the vertical tweet button at the end of your post paste this code after/below it :

No Count Button:

Case 5:

To get this paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
This will put a Tweet button to every post. You are therefore not able to choose which post you want to include or exclude a button.

Page Navigation with Arrow Keys in Blogger

2013-08-02T08:13:00.003-07:00

Navigating between pages using the keyboard arrow keys is a very useful feature. It saves time scrolling down the page to find links to the next page in a site and is very intuitive for visitors.

In this tutorial, You'll get a very simple Blogger template hack which can be used to navigate between newer and older posts on any page where the "blog pager" is present (including index, search, archive and item pages) using the left and right arrow keys.

There are two main steps to add arrow key navigation to our Blogger template:

Edit the "Blog-Pager" element in the template HTML
Add a simple script just before the closing </body> tag

Once we've added the relevant code, you'l be able to navigate to older posts and pages using the right arrow key, or to newer pages using the left arrow key.

Add the required code to your Blogger template

First we need to edit the "newer" and "older" links in the Blog-pager element of our Blogger template.

Go to Template>Edit HTML in your Blogger dashboard and ensure you have checked the Expand widget templates box near the top of the page.

Using your browser's search function, locate the following section of code:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

Edit the text highlighted in bold red so they appear like this instead:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='newer'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='older'><data:olderPageTitle/></a>
</span>
</b:if>

The easiest way is to replace the code in your template with the replacement code above.

Next, locate the closing </body> tag in your template. Immediately before, paste the following section of code:

<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
var kGo = (!event) ? window.event : event;
switch(kGo.keyCode)
{
case 37:
window.location.href = document.getElementById('newer').href;
break;
case 39:
window.location.href = document.getElementById('older').href;
break;
}
};
};
</script>

At this point, it's advisable to preview your template. If you've made any errors when editing your code, this will be apparent in the preview. You can also test the new functionality by pressing the right arrow key while on the preview page.

If all is good, proceed to save your template and enjoy the keyboard shortcuts for navigating through your site.

You may want to let visitors know that they can navigate to newer/older posts using the arrow key as this is not a default feature of Blogger. For example, you could add a widget in your layout explaining the arrow key navigation.

New Contact form - Change Style & Install in a Static Page on Blogger

2013-08-02T08:12:00.005-07:00

Just a few days ago, Blogger introduced a new widget. It is about a contact form that you can add to your blog easily. It is very basic, because - at least for now, does not permit incorporating files or send anything other than plain text.

The contact form for Blogger has the following features:

Field for the user name
Field for email
Field for the message (textarea)
Submit Button

Screenshot

The design is simple and the text colors inherit the section where you add it. At the moment, this widget has no configuration options and is not available for dynamic views.

How to Add Contact Form to Blogger

To add it to your blog, just select the Layout tab, then click on Add a gadget in the section you want to show, for example, in the sidebar. Then, select the More gadgets tab and add the Contact Form gadget.

Styling Contact Form

As the background is transparent, the form will integrate well, aesthetically speaking, but nevertheless it is easy to modify using Style Sheets (CSS) to the appropriate selectors. Here's an example:

/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

This is how it will look like after applying the style:

To add this style, go to Template > Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (press CTRL + F to find it):

How To Add Contact Form In A Static Page

First step is to add the Contact Form gadget (Layout) and second, to edit the template (Template > Edit HTML) to remove most of the gadget. You have to search for the id "ContactForm", expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

After you have saved the template, go to Pages and paste the following code into a new blank page with the title you want:

<div class='widget ContactForm' id='ContactForm1'>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
</div>
</div>

Messages will be sent to the same email that you have registered in Blogger.

That's it! If you have any questions or comments please post below.

4 stylish custom popular posts widgets to blogger

2013-08-02T08:11:00.000-07:00

Popular posts widget is one of the most commonly used widgets on each and every blog. Blogger has its own default popular posts widget for its blogs but this widget is not very attractive. It displays a simple list of popular posts without any customization in it.. For this reason it looks very ugly and effects the whole design of the blog. But one good thing about this widget is that it can be easily customized by using CSS code. In this post we will discuss 4 different styles for customizing default popular posts widget in blogger.

Adding popular posts widget to blogger :

Go to your blogger dashboard.
Select Template option.
Select Edit HTML.
In the template code find ]]></b:skin>
Just above it paste code of one of the following popular posts widget and save the template.

Style 1 :

Code:

  .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
           -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%);

/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)),

 color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1)

100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);

/* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);

 /* IE10+ */
background: linear-gradient(to bottom,  rgba(44,83,158,1) 0%,rgba(44,83,158,1)

100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e',

 endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
    }

    .popular-posts ul li:hover {
      -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
    border:1px solid #333333;
color:#fff;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
   
    }

Style 2:

Code :

  .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #ffffff  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
    }
    .popular-posts ul li:hover {
        border:1px solid #555555;
    }

.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#333333;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#555555;
    }

Style 3 :

Code:

  .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {
    
    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    }

Style 4 :

Code:

 .popular-posts ul
{
padding-left:0px;
    -moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
 border: 1px solid #dcdcdc;

}
    .popular-posts ul li {
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
   border-bottom:1px dashed #dcdcdc;
       background:#ffffff;
    }

  .popular-posts ul li a
{

text-decoration:none;
font:16px georgia,verdana;
color:#3d87c4;
}

    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#333333;
    }

Social Subscription Widget for Blogger

2013-08-02T08:04:00.000-07:00

We can call it a Subscribe Us widget that you can use on blogger. It has option for Facebook,Twitter, RSS and Google+. It possess nice bright backgrounds with a hover effect that makes it look really awesome. It has a nice opacity change effect on hover that makes it look more beatiful and attractive. This widget can attract more users to your Blog.

How To Add Social Subscription Widget to Blogger:

Login into your Blogger Acount
Go to Layout
Choose add a gadget
Select HTML/JavaScript
Paste the following code inside it

<style>

.socialicons_widget_sidebar li {

    float: left;

    width: 147px;

    height: 147px;

    margin: 0 0 0 0;

    padding: 0 0 0 0;

    border-bottom: none;

}

.socialicons_widget_sidebar li a {

    line-height: 1px;

    display: block;

}

.socialicons_widget_sidebar li a:hover img {

    -webkit-opacity: 0.8;

    -moz-opacity: 0.8;

    opacity: 0.8;

}

.socialicons_widget_sidebar li a span {

    display: none;

}

.socialicons_widget_sidebar li.rss-icon {

    margin: 0 6px 6px 0;

}

.socialicons_widget_sidebar li.facebook-icon {

    margin: 0 6px 0 0;

}

</style>

<div id="socialicons_widget_sidebar-2" class="row widget socialicons_widget_sidebar">

<ul style="margin: 0 0 0 0; padding: 0 0 0 0; list-style: none;">

<li class="twitter-icon" style="margin-left: 155px;"><a target="_blank" href="http://www.twitter.com/bloggerhelp24" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs1wlT8Q105kfYa406fc1FDlgRfIEb8Zuru9Aq3fvUOuEsMD0c16mBJlqG4aa3G_bRcS6a-dPW1zSpjAh4Guf5sg1dnBUfgNukZHghC86_PNS1PgqlPjtYay68VI_vg2YbBuYUMUQxeeqP/s1600/twitter.png" width="147" height="147"><span>Twitter</span></a></li>

<li class="facebook-icon" style="margin-top: -146px;"><a target="_blank" href="http://www.facebook.com/bloggerhelp24" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-YMP4tIHpz4lVCMegJ7er1TOZ6fj240p1aMLgnHLZmi01MyWAVKQKEIoWBcHsYeucTIq7fhkKbPquEKLg60jMsvQJSvFTi75KHO2E-gcbI1UOpXfT0LyZqYNQowVbzdSvsrDrUsXCH65/s1600/facebook.png" width="147" height="147"><span>Facebook</span></a></li>

<li class="rss-icon" style="margin-top: 7px;"><a target="_blank" href="http://feeds.feedburner.com/bloggerhelp24" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvHlwgyK-JW_qXLFLxmQ3YmurZV6gtj8EM-nofX78_9nbvXwW8gXOdKKZQH3AstODE30Mt_ovjqSEzD3Lpu4XKVa6BT1P0GrmDmt_qJ-GIyJyDxVLbw65hdeXxTU3vP8ujRKggv7BkHY2D/s1600/rss.png" width="147" height="147"><span>Rss Feed</span></a></li>

<li class="google-icon" style="margin-left: 155px;margin-top: -153px;"><a target="_blank" href="https://plus.google.com/u/0/112339482383490284537"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYxwFCraXUXLnSjR_vzZjEi_LGwH6l1DznfvYfGTaHNrKd-f9GnWda87Id1VwteyD5bIcO8rp1T4EtRbqqyxzAn3mgkNpepVkMYugfhVtCjwObyVAbxgwfYTxdWo495X9dbQ8wfXDmb92y/s1600/google.png" width="147" height="147"><span>Google+</span></a></li>

</ul>

</div>

Replace bloggerhelp24 with your Facebook page username, Twitter and RSS Feed.
Replace 112339482383490284537 with your Google Plus+ Profile id.
All Done! at last just press Save Button.

If you face any problem. Just Drop your comment.