Social Subscription Box Widget For Blogger

Nowadays social media is one of important part of your blog/website. So today I am going to share a new social subscription box widget for Blogger, which contains social icons to link your blog's social media pages, Google +1 button, Facebook like box, Twitter follow button and Feedburner email subscription box. Widgets is easy to customize and install, looks beautiful and perfectly suits your blog. Now just follow below steps to add subscription box to your blog.

How Its Work?

  • Go to your Blogger Dashborad.
  • Click on layout (on left side).
  • Select Add a Gadget.
  • Select HTML/JavaScript option.
  • Paste below code in it.

<style> #socialnetworking { border: 1px solid #ebebeb; width: 280px; } .fb-likebox { padding: 10px 10px 0 10px; border-bottom: 1px solid #ebebeb; } .googleplus { background: #787c7b; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .googleplus span { color: #000; font-size: 11px; position: absolute; margin: 9px 70px; width: 280px; } #widgetbox { background: #EBEBEB; padding: 2px 8px 2px 3px; text-align: right; border-image: initial; } #widgetbox .author-credit a { font-size: 10px; font-weight: bold; text-shadow: 1px 1px white; color: #1E598E; text-decoration: none; } .g-plusone { float: left; } .twitter { background: #b1dff5; border-top: 1px solid #fff; padding: 10px; } .fb { background: #0a94d4; border-top: 1px solid white; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; } .fb span { color: #000; font-size: 11px; position: absolute; margin: -12px 100px; width: 280px; } .pterest { background: #EFF5FB; border-bottom: 1px solid #ebebeb; font-size: 12px; color: #000; padding: 9px 11px; line-height: 1px; font-family: Verdana, Geneva, sans-serif; border-top: 1px solid #ddd; } #email-news-subscribe .email-box { padding: 5px 10px; font-family: "Arial","Helvetica",sans-serif; border-top: 0; border-image: initial; height: 35px; background: #fbfbfb; width: 260px; } #email-news-subscribe .email-box input.email { background: #FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif; } #email-news-subscribe .email-box input.email:focus { color: #333 } #email-news-subscribe .email-box input.subscribe { background: -moz-linear-gradient(center top,#afafaf 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "Arial","Helvetica",sans-serif; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: white; text-shadow: #d08d00 1px 1px 0; padding: 7px 14px; margin-left: 3px; font-weight: bold; font-size: 12px; cursor: pointer; border-image: initial; } #email-news-subscribe .email-box input.subscribe:hover { background: #ff9b00; background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00); background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline: 0; -moz-box-shadow: 0 0 3px #999; -webkit-box-shadow: 0 0 3px #999; box-shadow: 0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: #FFFFFF; text-shadow: #d08d00 1px 1px 0 } </style> <div id="socialnetworking"> <!-- Begin Widget --> <div class="fb-likebox"> <!-- Facebook --> <center> <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/110774830949115484638" target="_blank"> <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png" /></a> <a style="margin-right: 10px;" href="http://www.facebook.com/gameryards" target="_blank" rel="nofollow"> <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" /></a> <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/gameryard" target="_blank" rel="nofollow"> <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-rss.png" /></a> <a style="margin-right: 10px;" href="http://twitter.com/#!/gameryards" target="_blank" rel="nofollow"> <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" /></a> </center> </div> <div class="googleplus"> <span><font><font color="white">Recommend Us On Google </font></font></span> <!-- GooglePlus --> <!-- Place this tag where you want the 1 button to render --> <g:plusone size="medium"></g:plusone> <!-- Place this render call where appropriate --> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <script type="text/javascript"> gapi.plusone.render ( 'plusone-div', { "size": "medium", "count": "true" } ); </script> </div> <div class="fb"> <!-- Twitter --> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fgameryards&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> </iframe> <span><font color="white">Like Us On Facebook</font></span> </div> <div class="twitter"> <!-- Twitter --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=gameryards&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"> </iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=gameryard', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/> <input type="hidden" value="gameryard" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="subscribe" name="commit" type="submit" value="Subscribe"/> </form> </div> </div> <!-- End Widget --> </div>

by gameryard.org 


Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More