In previous post i have explained “how to add social bookmarking buttons“. Yesterday i found sexy social bookmark button in the web. So i thought to give tutorial on how to implement it in blogger blog. You can see the screenshot below.
1.Login into Blogger Dashboard
2. Go to Layout > Edit HTML
3. Please back up your template first. For this click on Download Full Template link.
4. Expand Widget Templates.
5.Find this tag ]]></b:skin>
6. Copy and paste the following CSS code right above ]]></b:skin> tag
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-yahoo:hover, .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://img509.imageshack.us/img509/3131/sexysprite.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:hover {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 {background-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;}7. Now Find this code in your XML template <data:post.body/>
8. Copy and paste this code below <data:post.body/> tag
9. Find following feedburner url in the above code and modify it with feedburner url of your blog.
10. Dont forget to Save Template
11. Now you will see social sharing buttons in each post footer
Featured Items - Top 10 Website Hosting Provider 2012
Want to host your website in one of the top rated Web Hosting company ? Ratings are collected from the user all over the world and given a ranking based on the user feedback. All Plan includes: Free domain, Unlimited Space, Bandwidth, unlimited sites, free marketing credits and which also includes attractive discount.
FIND OUT MOREFeatured Items - Ultimate Collection of Responsive WordPress Themes
Responsive WordPress themes enables stunning look and feel of your website in any device - from mobile devices to widescreen monitors. These collections are sorted by user rating and number of sales.
FIND OUT MOREFeatured Items - 200+ Popular HTML Email and Newsletter Templates for Effective Marketing
Do you want to market your products effectively ? Do you want to send newsletter to your customer in the way that you want ? Do you want full control over the email design ? There are 200+ great collection of E-mail and Newsletter HTML templates from Themeforest. Get into site directly and search for the suitable template that boost your sales and conversion rate.
FIND OUT MOREFeatured Items - 70+ Premium elegantThemes for Just $39
Unlimited access to 70+ elegantThemes - Premium WordPress themes for only $39. Feature includes - ePanel Theme Options, Shortcodes, Page Templates and Easy Localization. Power your website with elegant themes today!
FIND OUT MOREFeatured Items - Unlimited Web Hosting from HostGator 25% OFF
HostGator is a one of the most trusted Easy and Affordable Web Hosting Provider next to Inmotion Hosting. LIMITED TIME OFFER! Get 25% OFF using coupon code: BLOGOSYS25
FIND OUT MORE
