Presenting your readers a eye catching social sharing widget is the best way to share your posts to a wide range. Shareaholic is one of the best service in terms of offering there users cool social sharing widget. This widget have some awesome effects that makes it stand-out from others, it comprises of counts and shows up tool tips on mouse hover and one thing i like about this widget is the sliding effect that is included i.e it only show the first set on the social buttons and the remaining buttons slide downward on mouse hover. enough of the talk, let's get to work.
How Add To Shareaholic Social Sharing Buttons...
- Go to your blogger dashboard
- Click on "Design" > "Edit HTML" > back up your template
- Mark/Check "Expand Widget Templates"
- Use ctrl F to find ]]></b:skin> and paste the following code above/before ]]></b:skin> tag..
div.shr-bookmarks{margin:20px 0 8px;clear:both !important;display:block !
important}div.shr-bookmarks ul.shr-socials{width:100% !important;margin:0
!important;padding:0 !important;float:left !important}div.shr-bookmarks u
l.shr-socials{background:transparent none !important;border:0 none !import
ant;outline:0 none !important}div.shr-bookmarks ul.shr-socials li{display
:inline !important;float:left !important;list-style-type:none !important;pa
dding:0 !important;height:29px !important;width:60px !important;cursor:point
er !important;margin:3px 0 0 !important;background-color:transparent !importan
t;border:0 none !important;outline:0 none !important;clear:none !important}div
.shr-bookmarks ul.shr-socials li:before,div.shr-bookmarks ul.shr-socials li:aft
er,div.shr-bookmarks ul.shr-socials li a:before,div.shr-bookmarks ul.shr-social
s li a:after{content:'' !important;}div.shr-bookmarks ul.shr-socials a,div.sh
r-bookmarks ul.shr-socials a:hover{display:block !important;width:60px !import
ant;height:29px !important;text-indent:-9999px !important;background-color:t
ransparent !important;text-decoration:none !important;border:0 none !important
}div.shr-bookmarks ul.shr-socials a:hover,div.shr-bookmarks ul.shr-socials li
:hover{background-color:transparent !important;border:0 none !important;outlin
e:0 none !important}.shareaholic-show-on-load{display: block !important;}div.
shr-bookmarks div.shr-getshr{line-height:20px !important;padding-left:8px !
important;float:left !important;}div.shr-bookmarks div.shr-getshr a{width:
auto !important;font-size:10px !important; text-indent:0px !important;text
-decoration:none !important;}div.shr-count{font:12px bold,arial !important;
position: relative !important;}div.shr-count-outline{position: absolute !im
portant;color: white !important;}div.shr-count-center{position: absolute !im
portant;color: blue !important;}li.shr-2{background-position:-120px bottom !
important}li.shr-2:hover{background-position:-120px top !important}li.shr-
3{background-position:-180px bottom !important}li.shr-3:hover{back
ground-position:-180px top !important}li.shr-5{background-position:-
300px bottom !important}li.shr-5:hover{background-position:-300px top
!important}li.shr-7{background-position:-420px bottom !important}li.shr-7:hover{background-position:-420px top !important
- Now search for <div class='post-footer'> and paste the following code below/after it.
<b:if cond='data:blog.pageType == "item"'>
<div class='shr_class shareaholic-show-on-load'>
</div>
<script type='text/javascript'>
var SHRSB_Settings = {"shr_class":{"src":"http://www.shareaholic.com/media/css/styles/sb","link":"","service":"5,7,2,38,3,219,43,52,201,88,74,10,106,45,40,210,78,39","apikey":"6ffe2cbf142c45bd4cd03b01ec46b8658","localize":true,"shortener":"google","shortener_key":"","designer_toolTips":true,"twitter_template":"Some fancy post title - http://goo.gl/dbqlx via @khatriscreation"}};
</script>
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-sb.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script><a href='http://www.khatriscreation.blogspot.com.com/'></a></b:if>
- Replace khatriscreation with your twitter username and click "SAVE TEMPLATE"
Would you like to have this widget on your blog?
Regards
sudarshan khatri
Welcome To khatriscreation And Let Me First Introduce Myself. I’m Sudarshan khatri From Nepal And I Manage khatriscreation. I’m Not A Professional Blogger By Education I’m Self Trained Guy And I Am 13 Years Old. Well Talking About Me I’m A Normal Guy Who Lives The Life Fullest, Loves Searching New Things On Internet.I love to share my expenience and education to the peoples so i have managed this blog .khatriscreation is totally about blogging,seo,widgets and blogging tips.
ConversionConversion EmoticonEmoticon