Another Good Looking Social Bookmarking Widget

People wants that His or Her Blog will be shared in so many social bookmarking sites And Websites readers do the same thing and the Author aspect more from readers. Heres is the new trick to add social icons display using css3 ,to Add this widget in your blog you need to add only 3 things and that are HTML , CSS and jQuery. You need to simply hover over the social media icons too see the beautiful effect of the widget which uses jQuery for the animation .

Steps to Add Social Bookmarking Widget in Blogger :

Note: Before making any changes to your template, take a full backup of your blogger template.

• Step 1#Log in to your Blogger Dashboard and Navigate to Design>>> Edit HTML.

• Step 2 # Copy below code and paste it just before the ]]></b:skin> code.

/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwO4xGwEaJG68lYPx7mI6Bwo_jLTefAaKbZJ-6BJdLwrR1tVt4jKswWJ0Xw8M748XNaHfOfITPQMyB0AZLNZ6ijTgorlSxeKNLGDf6OswsZhlQ1woY8wR8g3xXJSWe7yxdfUAWbBic62r/s1600/delicious.png")
; }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja726KKOK5F1RXvVX1xEgUukMH0oLEc54yv-ORpoudpVY_fFjZU7WE9eeL3B2FhoHBmrHYo2Xg63yMm4JDfhVqdmRn9BYX5UdAMwOpp4jzAvV7NdZB4TLk2gSRi0AVpANHPWSeKdgi1TEw/s1600/digg.png"); }
li.facebook {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2WYg9baFx-y9PK4gvv-y_Xv07NEveFvgyYNtxx4B_aOstOLIy2DsLP0XmWKyKO3rFz6uHcIbSJb3aeAphwfpTenVAxpl6K9BZdVwc7Wreim6FTVIcIXe0zGhRDEnB5xNXWoGwhGEeSKek/s1600/facebook.png"); }
li.flickr {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAC0J0tPVM0Mtxpb-J5mAH71YAOsBCOVQNFBvSFlpIT3JyarW62wBZ90e29AN7DNXywiTSD14tHXPEE_z0k4Zc2RocKo8rfjwzTVd_4lDcf8nNGF7o4fQlx4NEGoJXyOYCBqvJ1EntA1H/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-5xvcvWi5EDZbhqYHW6fHzmYFMVpVIV7r02Ch5IfGqmnR4lP1EH33XmjmfeCsfoyFGW3U9fL1Ejb_xWKuP9MIJUCbQJeqhImhazNfrAy-qrg5tRPJ5fwuLF5IZwducoOckXu0_yZk-Sv/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWqvFjCcP2VVs0oWJobiwamCWY-I9yO_MGhiPS2jAjMGDIzG9tXAMtAsVYyvIpbzktzUSOsdpwzycPA3fwo-Xe0hjZ_bVBPBC9vzbqkzjix8RV9OAaMuQnaF-RsPh9hsT1VUuVjy7w7Kv4/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5CxR9ztOc6DL9HJiWbFANzJEU2SEsL5T3cVXbhyn2B5lihK_QijyqRwo3gvk2N7s-79DbI3rCXTUrpRucMgezZNd-Fu9-FF8CKXcOvotizVcp6JKKTa_5HSv4TOPKn667DJcWhXD0yiF/s1600/rss.png"); }
li.twitter {background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYoiJzApPv6MIOcPxY4Xexf8WG-8KElGNiN9yMPlEtrR3dJqbJHgmIT7VlyC1nJraqyAD7UvrO1R-7zhN053antysPf6JGwESUHJnXWpkXUIj9oXNQ45rFoIuiVobXhJYQX8uLpXfl82at/s1600/twitter.png");}

#Step 3. Copy below code and paste it just before the </head> tag. ( No need to add
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
&lt;script type='text/JavaScript'&gt;
$(document).ready(function()
{
// Hide all the tooltips
$(&amp;quot;#jquery li&amp;quot;).each(function() {
$(&amp;quot;a strong&amp;quot;, this).css(&amp;quot;opacity&amp;quot;, &amp;quot;0&amp;quot;);
});
$(&amp;quot;#jquery li&amp;quot;).hover(function() { // Mouse over
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 0.2);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 1,
top: &amp;quot;-10px&amp;quot;
}, 300);
}, function() { // Mouse out
$(this)
.stop().fadeTo(500, 1)
.siblings().stop().fadeTo(500, 1);
$(&amp;quot;a strong&amp;quot;, this)
.stop()
.animate({
opacity: 0,
top: &amp;quot;-1px&amp;quot;
}, 300);
});
});
&lt;/script&gt;

- No Need , to add jQuery in above code (first line in above code) if you are already using it.

• Step 4 # Now Save the template and navigate to Design >>> Page Element.

- And now Click on Add a Gadget where ever you want to put your social bookmark icons and choose HTML/JavaScript.

- Paste the below following code in the HTML/JavaScript Gadget and save the template.

<ul class='social' id='jquery'>
<li class='delicious' style='opacity: 1;'><a href='http://www.delicious.com/'>
<strong style='opacity:0; top: -1px;'>Delicious</strong></a></li>
<li class='digg' style='opacity: 1;'><a href='http://digg.com/'><strong style='opacity:0;'>Digg</strong></a></li>
<li class='facebook' style='opacity: 1;'><a href='http://www.facebook.com/'><strong style='opacity:0;'>Facebook</strong></a></li>
<li class='flickr' style='opacity: 1;'><a href='http://www.flickr.com/'><strong style='opacity:0;'>Flickr</strong></a></li>
<li class='linkedin' style='opacity: 1;'><a href='http://www.linkedin.com/'><strong style='opacity:0;'>LinkedIn</strong></a> </li>
<li class='reddit' style='opacity: 1;'><a href='http://www.reddit.com/'><strong style='opacity:0;'>Reddit</strong></a></li>
<li class='rss' style='opacity: 1;'><a href='http://feeds.feedburner.com/BestHowToBlogger'><strong style='opacity:0;'>RSS</strong></a></li>
<li class='twitter' style='opacity: 1;'><a href='http://twitter.com/'><strong style='opacity:0;'>Twitter</strong></a></li>
</ul>

• Step 5.# Finally Save template and its done!.

Like This Post Go to Comments : )

7 Professional Tips to Make Yours Blog Outstanding

Blog is One of the best way of creating money online. People love to creating post in blogs to drive the traffic. Today now i am going to 8 Professional Tips to Makes Yours Blog Outstanding .

Here are the 8 tried and tested promotional tips that can do wonders for your blog followings

Use and Abuse Social Media! :

Social Media is one of the best way to drive the Traffic. A somewhat obvious platform to promote your blogs, this is all too often not used to its maximum capabilites. More and more potential reader of yours blog are entering into the world of social media everyday so it would be foolish NOT utilise this platform. Yet, be careful not to simply post updates of new posts. Connect with people and communicate on a personal level. Not only will showing your personality in this manner make people more likely to read your blog and share it with their followers and friends, but you can decipher what your desired readers want to discuss. Social media engagement not only helps promote your blog but also improves it. Result...!

Include Useful Links in your posts. :

By linking up others relevant and useful blogs posts, not only will your readers know where to look for useful info, the bloggers you have linked to will be grateful for the link and be more likely to link up to you in the future.

Comment, Comment, Comment! :

Commenting on others blog posts is an excellent way to connect with more peoples , form contacts in your niche and get you name recognized. Blog writer will often respond to comment and questions on their posts, as k pertinent questions and you are sure to get answers and form contacts. Connect with these influential people on Twitter as well.

Get Guest Blogging! :

Possibly the best way to promote yours blog, there are hundreds of options to guest blog out there, and posting quality content on high-quality site give you a broader audience for your posts. When guest posting, most of the time you are allowed to include links back to your own site. Brilliant promotion, these blogs can drive traffic back to your own site and potentially enlist a whole host of new followers.

Accept Guest Blogs.

Following on the from the previous point, allowing people to post on your blog is also brilliant promotion. Guest blogger the are always looking for places to contribute their content and are more than happy to promote their contribution all over their social media channels. This will be drive a lot of new people to yours site.

Use Your Contacts. :

Leverage's your friends& family, again a seemingly simplistic tactic but getting 20 friends and family to share you blogs on their own social media channels could unleash your blog onto a whole new range of potential readers.

Social Bookmarking Sites :

Another fabulous way of promoting yours blog is utilising social bookmarking sites. Submit your post to social bookmarking sites such as Digg and watch lots of new people arrive at your blog. This is one the best way to promote the blog