See How to add social links to your blog

HOW TO ADD SOCIAL LINKS TO YOUR BLOG

At some time We all need social like buttons on our blog, don’t we? We need social like buttons on our blogs so our readers can always reach us and get more social with us. We also need these social buttons so our readers can like and always get exclusive updates from us.

One of my friends used media link button that i like and I would be sharing it with you guys. 

so I collected the codes from him and added it to one of my blogs :). It is one week plus now since I’ve added it to my blog and I am still using it. Do you know why I haven’t removed it? Because it is converting beautifully – even better then my previous social like button on that blog. Would you like to see how it looks? Here it is 

How to install the share widget to your blog 

• Login to your blog dashboard and locate Layout 

• Decide the section on the layout to install the social link and click on add gadget

• Click on it and find HTML/JAVASCRIPT 
• Then click on the +button to add the gadget then paste the following code 

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">

<style type="text/css">

<!--

.folding {

list-style-type: none;

margin: 0;

padding: 0;

}

&nbsp;

.csstransforms3d .folding {

perspective: 700px;

}

&nbsp;

.folding li {

height: 50px;

color: #fff;

padding-left: 30px;

border-left: 30px solid rgba(0,0,0,.1);

}

&nbsp;

.csstransforms3d .folding li {

transition: ease .15s all;

}

&nbsp;

.csstransforms3d .folding li:nth-child(even) {

margin-top: -1px;

transform-origin: 50% 100%;

transform: rotateX(10deg);

}

&nbsp;

.csstransforms3d .folding li:nth-child(odd) {

transform-origin: 50% 0%;

transform: rotateX(-10deg);

}

&nbsp;

.folding .fb {

background-color: #3959a6;

}

&nbsp;

.folding .tw {

background-color: #2fc6ff;

}

&nbsp;

.folding .gp {

background-color:#d84d30;

}

&nbsp;

.folding .rss {

background-color: #ff7e09;

}

&nbsp;

.rss-link {

color: #fff;

font: .9em Arial, Helvetica;

}

&nbsp;

.folding .content {

position: relative;

overflow: hidden;

display: block;

height: 20px;

padding: 15px 0;

}

&nbsp;

.csstransforms3d .folded li:nth-child(even) {

margin-top: -75px;

transform: rotateX(75deg);

background-image: linear-gradient(rgba(255,255,255,0) 50%,

rgba(255,255,255,.5));

}

&nbsp;

.csstransforms3d .folded li:nth-child(odd) {

transform: rotateX(-75deg);

}

&nbsp;

.csstransforms3d .folded .content {

display: none;

}

&nbsp;

/* Folding list heading */

.connect {

padding: 12px 0 12px 30px;

margin: 0 0 1px 0;

color: #fff;

border-left: 30px solid rgba(0,0,0,.2);

cursor: pointer;

font: bold .9em 'Lucida sans unicode',Arial, Helvetica;

background-color: #555;

}

&nbsp;

.csstransforms3d .connect {

background-image: url(data:image/png;base64[shortened]);

background-repeat: no-repeat;

background-position: -24px center;

}

-->

</style>

<h3>Connect with Naijabrainies </h3>

<ul>

<li class="fb">

<div class="content">

<a rel="nofollow" title="Like Our Facebook Page" href="https://mobile.facebook.com/naijabrainies/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmSy2N2wal20Cso1HU1H0w6U0z4PX_oOV7wtjBuB37k2R-t5-myFxkzahS1t3Vkf9wWChgg5H56tqhHpy8wPGI2oEtqpku7lG4LVns3FCWqpRLUqh06whn_WPkuXCLknDhV-98gCkFQ/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

<a href=""></a>

</div>

</li>

<li class="tw">

<div class="content">

<a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/Naijabrainies " target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QQbxbEtfS0GPBOkGt4lPrxKhl47RiPIVeQX8wZ7npwKNydoVa8gLhacR7TgE6Yh1w9z0pR1TWpxkM7QGH1_u1vvtu6csAymEvhlZE0X6czT_nErE7CPKlPyHujBSSWKYyzH9vaIVsw/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

<a href=""></a>

</div>

</li>

<li class="gp">

<div class="content"></div></li></ul></div></center>

You can change the social links to your taste

Do you find the article useful or do you experience any difficulty understanding and trying the article? Kindly drop your comment