Social sharing buttons latest version with transitional effect

social buttons with transitional effects v2

Social networks now a days gaining more attention from users regarding modern modification in search engine optimization.  In order to getting full benefit from major social platforms it is necessary to give a way to our readers for the sake of sharing and liking our content. As TcM is a leading website that shares a large number of multi stylish social sharing buttons, and floating bar already. But this post is totally new widget in its kind. That gives a splendid glance to your website. Readers enjoy sharing posts with these tools. Now take a look insight this latest edition with implementation. Also check the mashable version of social icons.
                                 
                                       Only apply html with cascading style sheet transitional effects this widget has been arrange. It is also a good practice to utilize these browser support able languages that are rapidly takes effects & load faster as compare to Java script. More over it is a nice way to reduce speed of a website which is a solid accountable factor in SEO. Reduction in page loading speed result of most of traffic you will get. Applying css transitional properties we make widgets & buttons fancier.

How to add:

In order to getting installation of this version you have some awareness of blogger template. Keeping in view newer bloggers who face difficulties while editing and adding social buttons I try to make this gadget simpler. As soon as you apply this widget to their sites you will assess how it trouble-free. Also with the use of HTML & CSS we able to customize these type of social sharing buttons as we want.     
Go to blogger dashboard
Select Layout > Add a gadget > Choose HTML Java script widget.
Now copy the whole code from here and paste it to inside html java scriptwidget. Finally hit orange button and reload the page.

<style type=”text/css”>
.tcm-social-icons {
            margin:0 auto;
            padding:0px;
}
.tcm-social-icons ul li{
list-style-type: none;
margin:0 auto;
margin-left: -15px!important;background: none;
padding:0px;
}
#tcm{
            border: 2px dashed rgb(221, 221, 221);
            overflow: hidden;
            width: 40px;
            height: 40px;}
.tcm-social-icons li a {
            padding:0px;
            width:40px;
            height:40px;
            float:left;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            border-radius:5px;
            background-color: #000;
            margin-top: 5px;
            margin-right: 3px;
            margin-bottom: 0px;
            margin-left: 0px;
}
.tcm-social-icons li a.fb {
            -webkit-transition:All 0.5 ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background: #039 url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”);
            background-repeat: no-repeat;
            background-position: 0px 0px;}
.tcm-social-icons li a.fb:hover {
background: #039  url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -75px;
}
.tcm-social-icons li a.twt {
            -webkit-transition:All 0.5s ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background-color: #09C;
            background-image: url(http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png);
            background-repeat: no-repeat;
            background-position: 0px -127px;
}
.tcm-social-icons li a.twt:hover {
background: #09C url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -204px;
}
.tcm-social-icons li a.gplus {
            -webkit-transition:All 0.5s ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background-color: #900;
            background-image: url(http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png);
            background-repeat: no-repeat;
            background-position: 0px -254px;
}
.tcm-social-icons li a.gplus:hover {
background: #900 url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -330px;
}
.tcm-social-icons li a.rss {
            -webkit-transition:All 0.5s ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background-color: #F90;
            background-image: url(http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png);
            background-repeat: no-repeat;
            background-position: 0px -381px;
}
.tcm-social-icons li a.rss:hover {
background: #F90 url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -454px;
}
.tcm-social-icons li a.pin {
            -webkit-transition:All 0.5s ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background-color: #C30;
            background-image: url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”);
            background-repeat: no-repeat;
            background-position: 0px -508px;
}
.tcm-social-icons li a.pin:hover {
background: #C30 url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -580px;
}
.tcm-social-icons li a.linkedin {
            -webkit-transition:All 0.5s ease-out;
            -moz-transition:All 0.5s ease-out;
            -ms-transition:All 0.5s ease-out;
            -o-transition:All 0.5s ease-out;
            transition:All 0.5s ease-out;
            background-color: #39F;
            background-image: url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”);
            background-repeat: no-repeat;
            background-position: 0px -635px;
}
.tcm-social-icons li a.linkedin:hover {
background: #39F url(“http://3.bp.blogspot.com/-3SRSEFOmYe0/UyF9RRcUJpI/AAAAAAAAB1o/nyyRqvq6BCg/s1600/tcm_social.png”) no-repeat 0px -711px;
}
</style>
<div class=’tcm-social-icons’ style=”margin-bottom: 10px;” >
<ul>
<li><a class=’fb’ id=’tcm’ href=’  #  ‘ target=’_blank’ title=’Facebook’ rel=’nofollow’></a></li>
<li><a class=’twt’ id=’tcm’ href=’  #  ‘ target=’_blank’ title=’Twitter’ rel=’nofollow’></a></li>
<li><a class=’gplus’ id=’tcm’ href=’  #  ‘ target=’_blank’ title=’Google Plus’ rel=’nofollow’></a></li>
<li><a class=’rss’ id=’tcm’ href=’  #  ‘ target=’_blaank’ title=’RSS Feed’ rel=’nofollow’></a></li>
<li><a class=’pin’ id=’tcm’ href=’  #  ‘ target=’_blank’ title=’Pinterest’ rel=’nofollow’></a></li>
<li><a class=’linkedin’ id=’tcm’ href=’  #  ‘ target=’_blank’ title=’Linkedin’ rel=’nofollow’></a></li>
</ul>
</div>

                                                You are done. Enjoy your new sharing buttons with transitional effects widget. Here is the demo of these social transitional effects buttons. After completing the whole process these buttons looks like as you see below.

Customization:

Changing the size of these buttons adjust orange highlighted  width: 4; height: 40px; according to your

template settings. If not adjusted properly set green colourized   margin-left: -15px!important; compatible to

well site appearance. Lastly remove all 6 pink   #    sign with your social profile addresses. Alternatively remain all settings default.

Need help:

At any stage of implementation of these social buttons if you face any type of problem then feel free to ask us in comments section. Also if you like or this is helpful then P.s. share these widgets with others while they people get more advantage from this widget.

Leave a Reply