Saturday, July 5, 2014

Share It

CSS3 social sharing buttons with fading effect and tooltip on hover

css3_social_sharing_buttons0I have discussed about making a sticky menu bar at bottom of blogger footer. I have given you how to put social sharing buttons in that menu bar. In today’s tutorial I will show you how to make social sharing widget that will show fading effect with tooltips when mouse over.
These social sharing buttons are very good looking and suits all blogger themes. You can use these buttons for your blogger blog to share your blog posts directly on social sites. Social sharing helps you very much for your SEO. Users can directly share your content links on social sites and it will gain you more readers to your blog.

How these social buttons look like?

Look at the below images for how this widget looks.
Normally when you apply this widget to your blog it looks like the following image.
 css3_social_sharing_buttons After applying this widget when you over the mouse on the widget then it looks like the following image.
Do you like this widget? Then why don’t you add it to your blog? Grab the code below and follow the steps to install this widget on your blog.
  1. Go to blogger >Template
  2. Back up your template before editing (important)
  3. Go to Edit HTML.
 Now search for ]]></b:skin>. Just above ]]></b:skin> paste the below code.

    .trickstownsocial { list-style:none; margin:30px auto; width:464px; }
    .trickstownsocial li { display:inline; float:left; background-repeat:no-repeat; }
    .trickstownsocial li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
    .trickstownsocial li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
    text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
    -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

    li.trickstowndelicious { background-image:url(""); }
    li.trickstowndigg { background-image:url(""); }
    li.trickstownfacebook { background-image:url(""); }
    li.trickstownflickr { background-image:url(""); }
    li.trickstownlinkedin { background-image:url(""); }
    li.trickstownreddit { background-image:url(""); }
    li.trickstownrss { background-image:url(""); }
    li.trickstowntwitter { background-image:url(""); }

    /* SOCIAL ICONS - CSS3 */
    #trickstownshare:hover li { opacity:0.2; }

    #trickstownshare li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
    -moz-transition-property: opacity; -moz-transition-duration: 500ms; }
    #trickstownshare li a strong { opacity:0;
    -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
    -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }

    #trickstownshare li:hover { opacity:1; }
    #trickstownshare li:hover a strong { opacity:1; top:-10px; }
Search for <b:if cond='data:blog.pageType == &quot;item&quot;'> and paste the below code between   <b:if cond='data:blog.pageType == &quot;item&quot;'> and     </b:if>

     <!-- trickstownsocial Media Buttons - CSS3 -->
            <ul class="trickstownsocial" id="trickstownshare">
                <li class="trickstowndelicious">
                    <a href=""><strong>Delicious</strong></a>
                <li class="trickstowndigg">
                    <a href=""><strong>Digg</strong></a>
                <li class="trickstownfacebook">
                    <a href=""><strong>Facebook</strong></a>
                <li class="trickstownflickr">
                    <a href=""><strong>Flickr</strong></a>
                <li class="trickstownlinkedin">
                    <a href=""><strong>LinkedIn</strong></a>
                <li class="trickstownreddit">
                    <a href=""><strong>Reddit</strong></a>
                <li class="trickstownrss">
                    <a href=""><strong>RSS</strong></a>
                <li class="trickstowntwitter">
                    <a href=""><strong>Twitter</strong></a>
            <!-- /trickstownsocial Media Buttons - CSS3 -->

Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on for web design solutions at low cost with effective SEO.