Orb Style Social Media Sharing Widget For Blogger
In this post i am going to explain how to add Orb style social sharing buttons to your blog. This is just a one widget you can find more widgets HERE HTML,Check below demo link.For more SOCIAL SHARING WIDGETS click here.DEMO
Now after you saw the demo lets know how to add it to blogger.
ADD IT TO BLOGGER
- Log in to Blogger Dashboard > Page Element.
- Click Add Gadget and select 'HTML/Javascript
- Now Paste Below code.
<style>
/*M+Creation */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/UserID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjm6n9Hq9kj9tfXyCYCBlhxcaWS-IbCITHlGlT-X5XwgC_1P2BFBLeQp35FFMmIsXwZp67bAfjqWwQS0FJNkGFfRwnFlVogvgCnDNgPhk9hdWvbZcdBlwRl83P8ERu7ytlWBkTJmPy7g/s1600/Google.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/marklin44"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTcCkVsdT_UJmCuEb7JPS2LLR-enJonWakZ6h6TotfV9QCpwQVKyDBFfN95qQYTlpE-vFOpIyiaXku8RL5hfEWs6unMZEHwhRrLnl8_Vv6Jr0P6zXQMv7Gzftl_WYNL3mQqnOInCNpPo/s1600/Facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/********"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWKG_jDs48xQFR5zbDOJ3SiRFpzMOMMeRj9GWUAghE9temPzeR-d0QrrnQVh0lAJwqcaddfYHUdEqxvjaKkp4ksBUVfx9MqQiTz5m_nyeN-4raQyWecIrYCMXAXPOBKa7afhGev2Fx3g/s1600/StumbleUpon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/marklin44"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAYWzNOfZFoTMBW9kl57BKoX5-auRLOpJgEIyXdZ0iscC3n5cg2NQbYGTtObdg6kX2tuMMJqOHJPZJW3o3WRas9NKxAwKU9Wr-dDzYdZiN7w3YTToccZEnWxC8O4h0aMRhUn3kQr6b_g/s1600/Twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/m-creation"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_cx-LBlq9OaTJP6TB8FFcMI8sFlldbzNtHMsMdg5XYW5ZwGoBMoQvPv15vltr-Lo8SjZzNa6DXWUwJIWiV_c8JXbWf10XpPTPQ0dBPvtjZuNOY5_ZR8YW9_mZJghih3STSoqA75gT5s/s1600/RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
- After you had pasted the code change the Red Highlighted yours.
- Now save your HTML/Javascript'.
And Thats All
0 comments:
Post a Comment