Skip to main content

Add Sexy Social Bookmarks to Blogger

You must have heard or seen the famous Sexy Bookmarks. It's an auto-hiding social bookmarking icons set.



If you want to add Sexy Bookmarking icons in your Blogger template, for you, here is a simple tutorial on how to do it.



Sexy Bookmarks for Blogger



1. To add Sexy Bookmarking icons, go to Layout>Edit and backup your template. Tick the ‘Expand Widget Template’.



2.Find </head> and place the bellow codes before it:

<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-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://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: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; }

</style>


3.Now Put the below code after <data:post.body/>

<div class='sexy-bookmarks'><ul class='socials'><li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Delicious' rel='nofollow'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This Post' rel='nofollow'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Technorati' rel='nofollow'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add to Reddit' rel='nofollow'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This Post' rel='nofollow'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on DesignFloat' rel='nofollow'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Facebook' rel='nofollow'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Twitter' rel='nofollow'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Furl' rel='nofollow'/></li>

<li class='sexy-syndicate'><a href='http://feeds.feedburner.com/Om-SimpleBloggerTutorials' title='Subscribe to RSS' rel='nofollow'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share on Email' rel='nofollow'/></li>

</ul><span class='sexy-rightside'/></div>

Change the bold blinking feed address to yours.



5. Save your template and view your blog. That's it. You are ready to use the Sexy Bookmarking icons for your blog.

Comments

Sohail said…
You need to check your blog! We cannot even select the code let alone copy it... how are we going to use the code? this is ridiculous..
August 21, 2010 at 11:40 PM
Post a Comment

Popular posts from this blog

SEO Optimizing A Website For Improved Value

SEO or search engine optimization is something that every web owner and creator should be aware of. Even if a website owner hires an expert to carry out the online marketing, understanding the very basics and how it really can improve a websites performance and popularity is important. Simply put, optimizing a website is important and is built around keywords that are valuable to a website and to the products or services it is trying to provide. By focusing on main keywords or key phrases for a business, and expanding on them over time, can improve the amount of visitors a website receives, in turn increasing profits or simply improving its popularity if it is an information website. SEO is valuable, and means a way of making a site appear at a higher ranking in search engines such as Google, Yahoo, AOL etc. Using this important type of online marketing can reap great benefits. It takes time to learn and time to complete, and is a constant job to keep a website performing well above co...
Post a Comment
Read more

PsyberOmni: Unlocking the Potential of Digital Excellence

Are you ready to take your digital presence to the next level? PsyberOmni is not just a digital platform; it’s a movement designed to empower individuals and organizations to thrive in the ever-evolving digital world. With expertly crafted tutorials, engaging blog posts, and a community-oriented approach, PsyberOmni is your go-to source for all things digital. Whether you are an entrepreneur, a student, or simply someone eager to learn, PsyberOmni has something for you. In this blog post, we'll dive deep into what PsyberOmni offers, why it's a game-changer for your digital growth, and how you can leverage the tools and content they provide to enhance your skills and expand your digital capabilities. Let’s explore everything you need to know about PsyberOmni! Why PsyberOmni? - Empowering the Digital Landscape In today's fast-paced world, staying updated with digital skills is crucial. PsyberOmni recognizes this need and offers a platform that brings together educationa...
Post a Comment
Read more

Email On Deck: A disposable email address that works

Today, Team Inforpioneer brings an interesting Email service for our reader which will definitely help our readers to improve their internet security and will benefit in some other ways.  Here is a short description of this service.  EmailOnDeck.com is the premier site for all things relating to temporary, disposable and throwaway email addresses. We want to help you avoid SPAM, protect your online privacy, and stop you from having to give away your personal email address to every company and person on the internet who insists on you giving it to them. We work hard and will continue to work hard to give you a disposable email address that works with any site or app. We hope to help give you back the control of deciding who you want to give your personal info to. Temporary emails are perfect for any transaction where you want to improve your online privacy. Use them when you buy or sell Bitcoins or trade cryptocurrency, at exchanges, or locally. They can be used for QA tes...
1 comment
Read more