Create nice social share box using CSS and jQuery

Create nice social share box using CSS and jQuery

Monday, August 01, 2011 | Posted by ArtisTutor | Edit Post

In this tutorial i will show you how to add a nice fancy share box created with the help of CSS and jQuery. The box will be positioned under the article, giving the visitors of your blog the possibility to share your content on Facebook,Ttwitter, Digg and other share network.
The share box will have all  the buttons shown inline and partially hidden. When user hovers over a button it slides to the right and become visible. It's a nice effect adding a little bit of style to your posts.

How to create nice share box using CSS and jQuery?

1. Log in to your dashboard--> Design- -> Edit HTML

 2. Click on "Expand Widget Templates"

 3. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:

ul.sharebox { 
margin:0px;
 padding:0px; 
list-style:none; 
position:relative;
 display:block;
}
 ul.sharebox li {
 float:left; 
margin:0 0 0 0px;
padding:0px; 
position:absolute; 
}
 ul.sharebox li a {
 margin:0 0 0 -24px;
 display:block;
 }
 ul.sharebox li a:hover {
 margin:0 0 0 -8px;
 }
 ul.sharebox li img { 
border:none;
}

4. Then go to: </head> and before it paste:

<script type='text/javascript'>
 (function($){
            $.fn.sharebox = function(){
                var element = this;

                var i = 10;
                var j = 0;
                $(element).find(&quot;li&quot;).each(function(){
                    $(this).css(&quot;z-index&quot;, i)
                    if (j&gt;0)
                        $(this).css(&quot;left&quot;, j * 24 + 100 + &quot;px&quot;);
                    i = i - 1;
                    j = j + 1;
                });
            }
        })(jQuery);
        $(document).ready(function(){
            $(&quot;#sharebox&quot;).sharebox();          
        });
    </script>
 

5. Finally find <data:post.body/> and right after it paste the next code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border:1px solid #dfdfdf; padding:0px;width:330px; height:125px'>
<ul class='sharebox' id='sharebox'>
        <li><img alt='Share this' src='http://img846.imageshack.us/img846/9038/sharethis.png'/></li>
        <li>
<!-- Facebook -->

<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' border='0' height='' src='http://img834.imageshack.us/img834/7703/fbook48.jpg' width=''/></a>
</li>
<li>
<!-- Digg -->

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' border='0' height='' src='http://img14.imageshack.us/img14/5488/digg48.png' width=''/></a>
</li>
<li>

<!-- Stumbleupon -->

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' border='0' height='' src='http://img190.imageshack.us/img190/9008/sumbleupon48.png' width=''/></a>
</li>

<li>
<!-- Twitthis -->

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' border='0' height='' src='http://img717.imageshack.us/img717/4218/twitter48.jpg' width=''/></a>
</li>

<li>
<!-- Delicious -->

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' border='0' height='' src='http://img833.imageshack.us/img833/1797/delicious48.png' width=''/></a>
</li><li>
<!-- Reddit -->

<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' border='0' height='' src='http://img339.imageshack.us/img339/7020/reddit48.png' width=''/></a>
</li><li>
<!-- Technorati -->

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' border='0' height='' src='http://img51.imageshack.us/img51/9729/technorati48.png' width=''/></a>
</li>
</ul>
    <p style='margin-top:45px;'><img alt='help' src='http://img847.imageshack.us/img847/3645/helptext.jpg'/></p></div>
</b:if>

6. Save the template and see the result.

Demo Page

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email