Create nice social share box using CSS and jQuery

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.

Get Latest Updates For Free!

Subscribe via Email

3 comments

August 3, 2011 at 8:48 PM

Hey man you're have the best Artisteer site out no doubt, I have a question and you're the only one I know who can help, my artisteer template is only showing the header, here is the link http://mytestblogyard.blogspot.com/ no matter what I do I can't figure it out let me know if you can help

August 3, 2011 at 10:55 PM

Here are a few that could solve your problem:

1. Delete any widget added from previous template
2. Try reinstalling the template
3. Remake the template in Artisteer and then upload it
4. Check to see if are any scrips conflict
5. Upgrade the Artisteer version that you are using, redo the template and upload it
6. If any of above don't work send a ticket to Artisteer team. here is the link: http://www.artisteer.com/?p=support

Anonymous
May 27, 2012 at 5:43 AM

Hurrah! After all I got a web site from where I be able to
in fact obtain helpful facts concerning my study and knowledge.
My page :: Camilla PAtruno

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers