Recommended Post: 25 Best Free iPhone Apps of All Time : Must Have Apps
Hey Friends! Today I am going to share a Awesome Social Media widget for blogspot platform. In these days social popularity is very and most important thing for a blog because the social media popularity brings tons of traffic and page views to a blog. This widget has a set of five social media properties i.e. Facebook, Twitter, RSS, Google plus and Pinterest. This widget works on some very simple but effective CSS and java-script coding. The widget has sliding effect whenever a visitor will hover on a social profile, it will appear with a slide effect of that profile.
So, let us start with our tutorial. Consider the following steps.
Hey Friends! Today I am going to share a Awesome Social Media widget for blogspot platform. In these days social popularity is very and most important thing for a blog because the social media popularity brings tons of traffic and page views to a blog. This widget has a set of five social media properties i.e. Facebook, Twitter, RSS, Google plus and Pinterest. This widget works on some very simple but effective CSS and java-script coding. The widget has sliding effect whenever a visitor will hover on a social profile, it will appear with a slide effect of that profile.
Live Demo:-
Where This Widget Will Appear:-
Before, we get on to our Tutorial let us first learn where this widget will appear in a website. Since, this is a Sleek Widget. Therefore, it is extremely small in size so it wouldn’t take a large space on a website. We have integrated a Slide out Functionality that would produce sparks in the eyes of visitors. It will appear at the Top-left side of the screen.How To add this widget to your blogger blog:-
The steps mentioned below are extremely simple. We have tried our best to minimize the steps.So, let us start with our tutorial. Consider the following steps.
- Go to
Layout
>>Add A Gadget
, then chooseHTML/JavaScript
- Paste this code inside it.If your blog already have a jQuery Plugin then remove the highlighted code.
(<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
)<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/AVvXsEi2VsaNlsRatxl42d4tfeVc73odgGU_L1ApBgqCWvx7ZPvtrrn-3pCcEqRDIGwhBMEsBqrrjcqh0832v9g2Rm6W7EelcEf8RTxsgagArvPKstUZNo1y-ivKjp_xbbxlLvNgfOeuzUupx9Y/s1600/Twitter.png)no-repeat; background-position:center center; } ul#social .googleplus a { background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmcbt1ulho7ylKGIFHaQ6OGJwCj3VRAy28RpA8zNbOuod1LcjsitE0IixxlnG33bBA0KK_o6pgGjjW2tSFE2DbbI7eW59dNMMLuNM7kWmAZOXD6GTGFN30pFFwpOnVIHHb9VjHgxyVzkY/s1600/GOOGLE+PLus.png)no-repeat; background-position:center center; } ul#social .facebook a { background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjx8bnYmsBnJBPeJtlqgwocO1cH7Rhc8Mkt71GdfiqdKsos3wWaJH869l6xUQYiwEczRSOKe0aF36RDevcMxVaTHdPwzfrraA5_uUf4RUGZNSxpuxDkNCXj6VOsJwOB6mYBYyh7djZ8xs/s1600/Facebook.png)no-repeat; background-position:center center; } ul#social .rss a { background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvqdrcYBjvzNFCXCf12F-eUNqabgW72zQ_EavLrRK7QX4UItDtB5f7IdlfFN8HhsiXRriC-L3zz0EVF6eKjkeWswa7qbCMUjNSZmMr2GB0lZ0eQXNPpDhGOVEB3hKRyU9ky0rXdLbw1kI/s1600/rss.png)no-repeat; background-position:center center; } ul#social .pinterest a { background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzfAZe0Pl-XAwS8HlozqB9d9SSX0_zWgIpn6FTck0ehcpXFApIO2QVVJ5PpiDy4L82O8m3XMFaIAA1Uo0oR_4WnTXKHjzwS_qYhcqxLpzdUtJcYh72AFcPPWcxR4Rg42KG8_2_3y0QEm8/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 - Now save the widget and See your blog. :D