New Social Networking Widget With Shutter Effects For Blogger

New Social Networking Widget With Shutter Effects For Blogger

data:blog.title
Social Widget

Hi fellows!! I have already shared with you many social networking widget today I am going to share another social Networking widget with shutter effects that will help you to tailor your templates. You can put this widget in top header or in sidebar. You will get links to four major social networking RSS Feed, Google Plus, Twitter and Facebook with shutter effects, that means when you mouse over on them it will close up. It’s really cool and attractive for visitors. Let proceed to the Tutorial…


Live Demo




Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Widget.

Step 4 Now Copy the below code and Paste it in "HTML/JavaScript" Gadget.


<style>.bssocialshutter {margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter ul li{list-style:none;border-bottom:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.bssocialshutter 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;}.bssocialshutter 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;}.bssocialshutter 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;}.bssocialshutter 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;}.bssocialshutter li a.twitter:hover {background: #191919 url(http://2.bp.blogspot.com/-TgqVb6LH02c/UUMytNrRADI/AAAAAAAACHY/ah4WivlW0fc/s320/BS+twitter.png) no-repeat -0px -0px;}.bssocialshutter 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;}.bssocialshutter 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;}.bssocialshutter 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;}.bssocialshutter 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='bssocialshutter'><ul><li><a class='facebook' href='http://www.facebook.com/BloggerSpice' target='_blaank'>Facebook</a></li><li><a class='twitter' href='http://twitter.com/BloggerSpice' target='_blaank'>Twitter</a></li><li><a class='google-p' href='https://plus.google.com/102331886274459115104' target='_blaank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/BloggerSpice' target='_blaank'>Rss</a></li></ul></div>


Step 5 Now Hit on save Button

Customization

  • Change BloggerSpice with your ID
  • Change 102331886274459115104 with your Google Plus ID
Open Comment Box

Contact Form

Name

Email *

Message *