Few days back I found really sexy social bookmarking buttons code to add to your blog.
Look at the screen shot below and I'm sure you'll really love these buttons, Enjoy It !



That's a quick Tutorial on:
How To Add Cool Social Bookmark Buttons Below Posts In Blogger?

Note : Please don't forget to backup your template and widgets before making any changes to your template.


Sign in to your Blogger blog and go to Layout > Edit HTML
Click On Expand Widget Template

Put the following code before

</head>

You can find it by Using (Ctrl + F).

<style type="'text/css'">div.sexy-bookmarks {height:54px;background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;position:relative;width:540px;}div.sexy-bookmarks span.sexy-rightside {width:17px;height:54px;background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;position:absolute;right:-17px;}div.sexy-bookmarks ul.socials {margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;}div.sexy-bookmarks ul.socials li {display:inline-block !important;float:left !important;list-style-type:none !important;margin:0 !important;height:29px !important;width:48px !important;cursor:pointer !important;padding:0 !important;}div.sexy-bookmarks ul.socials a {display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;}.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahohover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;}.sexy-furl {background-position:-300px top !important;}.sexy-furl:hover {background-position:-300px bottom !important;}.sexy-digg {background-position:-500px top !important;}.sexy-digg:hover {background-position:-500px bottom !important;}.sexy-reddit {background-position:-100px top !important;}.sexy-reddit:hover {background-position:-100px bottom !important;}.sexy-stumble {background-position:-50px top !important;}.sexy-stumble:hover {background-position:-50px bottom !important;}.sexy-delicious {background-position:left top !important;}.sexy-delicious:over {background-position:left bottom !important;}.sexy-yahoo {background-position:-650px top !important;}.sexy-yahoo:hover {background-position:-650px bottom !important;}.sexy-blinklist {background-position:-600px top !important;}.sexy-blinklist:hover {background-position:-600px bottom !important;}.sexy-technorati {background-position:-700px top !important;}.sexy-technorati:hover {background-position:-700px bottom !important;}.sexy-myspace {background-position:-200px top !important;}.sexy-myspace:hover {background-position:-200px bottom !important;}.sexy-twitter {background-position:-350px top !important;}.sexy-twitter:hover {background-position:-350px bottom !important;}.sexy-facebook {background-position:-450px top !important;}.sexy-facebook:hover {background-position:-450px bottom !important;}.sexy-mixx {background-position:-250px top !important;}.sexy-mixx:hover {background-position:-250px bottom !important;}.sexy-script-style {background-position:-400px top !important;}.sexy-script-style:hover {backgroud-position:-400px bottom !important;}.sexy-designfloat {background-position:-550px top !important;}.sexy-designfloat:hover {background-position:-550px bottom !important;}.sexy-syndicate {background-position:-150px top !important;}.sexy-syndicate:hover {background-position:-150px bottom !important;}.sexy-email {background-position:-753px top !important;}.sexy-email:hover {background-position:-753px bottom !important;}</style>

Now find the code

<data:post.body/>

(Use Ctrl+F to find the code)
and add the following code after

<div class="'sexy-bookmarks'"><ul class="'socials'"><li class="'sexy-delicious'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-digg'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-technorati'"><a href="'" add=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-reddit'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-stumble'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-designfloat'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-facebook'"><a href="'" u=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-twitter'"><a href="'" url=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-furl'"><a href="'" u=" + data:post.url + " title="" target="'_blank'/"></li><li class="'sexy-syndicate'"><a href="'http://feeds2.feedburner.com/YOUR" title="'Subscribe"></li><li class="'sexy-email'"><a href="'" subject=" + data:post.url + " title="" target="'_blank'/"></li></ul>an class='sexy-rightside'/></div>

Save your template and you are Done.
Don't forget to add your Feed Burner Id in the code

It is delevered by FeedBurner.

When people subscribe, they will recieve an email with your blog posts whenever your blog is updated. It is a very and simple thing and make your visitors come back again and again to your blog frequently.

Let's see how to add an "Email Subscription" in your blog ...





1.Sign in to your FeedBurner account. If you don't have one,
Register it Here


2.Click on the "My Feeds" link at the top of the page and then click on your Bblog Name.




3.Click on the 'Publicize' tab.






4.Select the "Email Subscriptions"





5.Next, you will see like this




Click on 'Activate'

Now,Click on the Subscription Managemant option and copy the code they provide
[*Screen Shot*]



7.Finally, ...

Sign in to your Blog Dashboard > Layout > Add a page element > HTML/JavaScript

and paste the code and Save.

This post explains how to add an "Email me" Text link in your Blog/Web Page.





Steps:

Simple! look at the below example.
If your email is some name@gmail.com, Use the Download Link to get the Code....

<a href="mailto:name@gmail.com">Email me </a>

The output will be like this (Click on it to check)

Email me

And you can change the 'anchor text'(Email me) to your own words like "Contact Es", etc

If you want to add this in your blogger blog sidebar
Do this ...

Sign in to your Blogger Dashboard> Layout > Add a page element > HTML/JavaScript
and paste the code(Don't forget to change the email address in the above code with yours !!)
Save the changes.

How to add a "Email me" Image Link on your Blog\Web Site?

Adding the "Email me" link to your Blog/Web Page is very helpful for the visitors who want to contact you. It increases the interactivity between the visitors and your site and make them come frequently.

How to post Image link:

Suppose, if you want the visitors to email you by clicking on an image like the below one

In this example, the direct link for the uploaded image is http://i219.photobucket.com/albums/cc286/7kranthiswaroop/thenvelope.gif and your email address is abc@gmail.com,

Here is the Code you have to add..

<a href="mailto:abc@gmail.com"><img src="http://i219.photobucket.com/albums/cc286/7kranthiswaroop/thenvelope.g if" alt="Email me" width="120" height="57" border="0" /></a>

You can change the picture by uploading one in PhotoBucket, than change the URL in the Code!

Where to paste this code in your blog?

Sign into your Blogger Dashboard > Layout > Add a page element > HTML/JavaScript

Paste the code and save the changes.