Shutter Up Animated Mouse Over Effect Social Media Widget For Blogger

 Shutter Up Animated Mouse Over Effect Social Media Widget For Blogger

 Hello Bloggiyan! Today we are sharing beautiful Shutter up Animated Social Media Widget to make your blog stylish. social media is a great way increase your blog traffic by sharing blog post on social media network. so this stylish widget help you to connect your visitor on your social media network. As showing a widget which is very impressive and with awesome css effects that is called window effect. We recommend you to try once this widget on your blog .

Just Single Step To Add Widget On Your Blog .

1. Go to blogger dashboard.

2. Click on layout.

3. Choose add a gadget.

4. Choose HTML/JAVASCRIPT.

5. Copy the below code and paste it.

<style>.avdhootwindow {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.avdhootwindow ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.avdhootwindow li a {margin:5px 5px 0px 5px;padding:0px 0px 0px 0px;width:60px;height:60px;float:left;text-indent:-99999px;background: #191919;border:solid 1px #222121;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}.avdhootwindow li a.facebook {background: #191919 url(http://4.bp.blogspot.com/-1AWfhVrWuUA/UUMysB13J0I/AAAAAAAACHI/JSQNzB49-_c/s320/BS+facebook.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.facebook:hover {background: #191919 url(http://4.bp.blogspot.com/-1AWfhVrWuUA/UUMysB13J0I/AAAAAAAACHI/JSQNzB49-_c/s320/BS+facebook.png) no-repeat -0px -0px;}.avdhootwindow li a.twitter {background: #191919 url(http://2.bp.blogspot.com/-TgqVb6LH02c/UUMytNrRADI/AAAAAAAACHY/ah4WivlW0fc/s320/BS+twitter.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.twitter:hover {background: #191919 url(http://2.bp.blogspot.com/-TgqVb6LH02c/UUMytNrRADI/AAAAAAAACHY/ah4WivlW0fc/s320/BS+twitter.png) no-repeat -0px -0px;}.avdhootwindow li a.google-p {background:#191919 url(http://2.bp.blogspot.com/-7D02pM7Rup0/UUMyscfY2gI/AAAAAAAACHE/gFPMV1tw0hk/s320/BS+google.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.google-p:hover {background: #191919 url(http://2.bp.blogspot.com/-7D02pM7Rup0/UUMyscfY2gI/AAAAAAAACHE/gFPMV1tw0hk/s320/BS+google.png) no-repeat -0px -0px;}.avdhootwindow li a.rss {background:#191919 url(http://3.bp.blogspot.com/-YRq_9OidmrU/UUMysCYB3UI/AAAAAAAACHA/871PzZSutng/s320/BS+RSS+Feed.png) no-repeat -0px -88px;-webkit-transition:All 0.3s ease-out;-moz-transition:All 0.3s ease-out;-o-transition:All 0.3s ease-out;}.avdhootwindow li a.rss:hover {background: #191919 url(http://3.bp.blogspot.com/-YRq_9OidmrU/UUMysCYB3UI/AAAAAAAACHA/871PzZSutng/s320/BS+RSS+Feed.png) no-repeat -0px -0px;}</style><div class='avdhootwindow'><ul><li><a class='facebook' href='http://www.facebook.com/YourLink' target='_blank'>Facebook</a></li><li><a class='twitter' href='http://twitter.com/YourID' target='_blank'>Twitter</a></li><li><a class='google-p' href='https://plus.google.com/123456789' target='_blank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/YourFeedlink' target='_blank'>Rss</a></li></ul></div>

6. Save the Template Arrangement Done.

Customization :

Replace Highlighted color link with your link 

Post Your Comments And Ideas