To increase search engine visibility it is compulsory to use social media widget for blogger so here we have a window effect widget to add it to blogger. A social media widget plays an important role in increasing page views for your posts and also increases your followers if someone likes your posts and becomes a member of your blog. Such blogger widget gives chance to users to share your posts on the social media platform. Below is the step by step method to add this widget to blogger with the demo.
Save the arrangement.
Copy code below and see result here: HTML Editor
How to add window effect social media widget to blogger.
Login to Blogger → Dashborad
Click on Drop Down Menu and select Layout
Add a HTML/JavaScript Gadget
Paste below code in 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/YOURFANPAGE' 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/100000000000001' target='_blank'>Google Plus</a></li><li><a class='rss' href='http://feeds.feedburner.com/YOURFEED' target='_blank'>Rss</a></li></ul></div>
Type your Facebook fan page name in place of YOURFANPAGE.
Type in your Twitter ID in place of YOURID.
Type in your Feed address ID in place of YOURFEED.
Type in your Google Plus ID in place of 100000000000001.
This is it. Now when you have the full code just copy it inside the gadget and save. You are done. If you liked this 3D navigation menu widget for blogger then please share it and write comments as your feedback.
