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…
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cDndHy4VqhsVqWJZ_3TQ7ApkwjwJ553SPCwxjU42z_KtbbAsIZUC6n3VkXm5kCgXgEbpooO9QRHsqyKpIH0eDExII1iKwaQen6VoBrJBD_ladXPW9emdxD4pkqpoYOsDPHuGzelfLjhT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8cDndHy4VqhsVqWJZ_3TQ7ApkwjwJ553SPCwxjU42z_KtbbAsIZUC6n3VkXm5kCgXgEbpooO9QRHsqyKpIH0eDExII1iKwaQen6VoBrJBD_ladXPW9emdxD4pkqpoYOsDPHuGzelfLjhT/s320/BS+facebook.png) no-repeat -0px -0px;}.bssocialshutter li a.twitter {background: #191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixht4meDUN_xRSKX947MbGPqh14SjxUWLXlrTLHJg4tB5UZIz5eF4Zta8g5f6WbudDumKnkBBNvRmMsvVkoHcunT9vMnmZh2fSpMq0HZNnhvepuean9k66KK0AQuFWsksGcEx3oEqNxBn_/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixht4meDUN_xRSKX947MbGPqh14SjxUWLXlrTLHJg4tB5UZIz5eF4Zta8g5f6WbudDumKnkBBNvRmMsvVkoHcunT9vMnmZh2fSpMq0HZNnhvepuean9k66KK0AQuFWsksGcEx3oEqNxBn_/s320/BS+twitter.png) no-repeat -0px -0px;}.bssocialshutter li a.google-p {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zTkhAHM2e9kGtKYtdMtRw6K6NQ96XtWJnoRu6BeMNLIbDiOgakf6B0d_y6R8ITDtJjUXS-vCtUwzLxIG8GoY3LjPNuEkEuFHMSenrEZYmSMEGu37jTGcAYwzZyPFJ36aHmPhe6eBV27S/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1zTkhAHM2e9kGtKYtdMtRw6K6NQ96XtWJnoRu6BeMNLIbDiOgakf6B0d_y6R8ITDtJjUXS-vCtUwzLxIG8GoY3LjPNuEkEuFHMSenrEZYmSMEGu37jTGcAYwzZyPFJ36aHmPhe6eBV27S/s320/BS+google.png) no-repeat -0px -0px;}.bssocialshutter li a.rss {background:#191919 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIEOvqSjAHqcTzoc3FkPInrpV40SWvyAF6WpVWlvgDa-HODKH1KmKY-4nU6-CqHoZcS69QGwG9EW3L_Y4mJ_Ur8ABivJaVM1i9E5rPntDqsrh6RiQ2HjiSapW1WXdoAs56v___OXbkycY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSIEOvqSjAHqcTzoc3FkPInrpV40SWvyAF6WpVWlvgDa-HODKH1KmKY-4nU6-CqHoZcS69QGwG9EW3L_Y4mJ_Ur8ABivJaVM1i9E5rPntDqsrh6RiQ2HjiSapW1WXdoAs56v___OXbkycY/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
0 comments:
Post a Comment