Most likely , we add social media widgets into sidebar of the blog or header or footer that looks good and professional but it isn't as working as it looks. Because readers coming into the blog cause of reading articles so, thus, they won't be interested in following you on social media sites even they don't know what is in sidebar their whole concentrate will be on the article they read. So, in my views
social media buttons or widget should be styled with eye catching features like pop-up or slide effect in order to get response from the readers. So, if you think the same as i am, then today in this post i am going to share the same widget with the eye catching feature.
Well, this widget comes with 5
social media buttons which has an awesome smooth slide effect that works based on
jQuery. Live demo isn't available, but as you can see an animated picture of the widget at left side of this paragraph. its a preview of the same widget which i am going to share with all of you. If you would like to have this widget in your blogspot blog. Then all you have to do is just follow the simple steps given below.
Also see : An Awesome Curtain Like Full Layout Social Sharing Widget for Blogger
How to add this widget to blogger?
- Go to Blogger Dashboard > Layout > Add a Gadget
- Choose HTML/Javascript form the list.
- Paste the following code inside it.
<style type="text/css">
ul#social {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#social li {
width: 100px;
}
ul#social li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
}
ul#social .twitter a{
background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKIzvkGRJvSghHHO2o8aMOpZZGQWxEKdL8zcqRsfaGR5TF5CEnYwHKeR1tr87dCDE_tJ4KxnzuAoQQoz23ku1BECbUPowczLDCOArdMe0oX1AkdEF3OQcXbHwfbNlBjrq3TyNW11HgH0/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#social .googleplus a {
background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUrGS40HykPiYhF4BJsO0sHo6LtEfEYuhPqjeDoUeRo8qwY2_N1fqpJFOSq0EHpRFtgXVK_tNjRU-SYLFR9-vhJ4V-9vMnfIcU6mh_Ou2_q1nnXxjdtWUxj-gkiuvBj7SHyaTG20lBMI/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#social .facebook a {
background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibmIZlA_j3JgJKajUd-pW32zHkQdlHpbzbGzLzM-2HQFfYGWzM0Q7qwmWm0xL32c5l2AXV7AlKX6hIoeSuIS6MjdDgZk0ZWOm5pz6gZPSu7xQRD938OXSWywtxvPbQt1FfnrIPjYRyQ6s/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#social .rss a {
background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEiWUHGfvf4cVmjdhkTUD1YSGJthTMkmltQo75zELHthg4xWYqJmh0qRHMXC80o2bB7glLL_2NqKhg9GJ4vKD9oQJaKWlzrfDN7-d3DBdDtnichGDiESKlaxXdnIwWGXvoLcslbGuxOUE/s1600/rss.png)no-repeat;
background-position:center center;
}
ul#social .pinterest a {
background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiueyCCr09vHkSugCgRn4kCMck4u5iZ2I-0AQF7KRxOnHyvzqsOsHxDKzW-Kw-DgcSrISS06Yo7LKbL5g4C0pmgpmsJonozY6QI8wvIDw-jdKtoVXMFCI7wlEm0t7gPbtB5puXww9hSWg/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
$('#social a').stop().animate({
'marginLeft': '-85px'
}, 1000);
$('#social > li').hover(
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-2px'
}, 200);
},
function () {
$('a', $(this)).stop().animate({
'marginLeft': '-85px'
}, 200);
}
);
});
</script>
<ul id='social'>
<li class='twitter'><a href='#' title='Twitter'></a></li>
<li class='googleplus'><a href='#' title='Google Plus'></a></li>
<li class='facebook'><a href='#' title='Facebook'></a></li>
<li class='rss'><a href='#' title='Rss'></a></li>
<li class='pinterest'><a href='#' title='Pinterest'></a></li>
</ul>
After Adding the above code Replace
# with your Profile link
Note : If your blog already have a jQuery Plugin then remove the red colored line from above code.
(
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)
Finally, Save your widget and you're done !
That's it !