HackingUniversity - Hacks . Tricks . How-To's

10 December 2012

Cool Big Grey Buttons Social Subscribe Widget for Blogger

subscribe-boxNow attract more readers in engaging with your blog by adding this beautiful big box 3 panel subscribe widget in your blogger blog that give your readers access to your blogs RSS, twitter account and facebook profile + they can even subscribe to your email newsletter with that widget tied right below these three buttons. You can see a display of this widget in the above image, well I do not have any demo link for this one but yes you can surely add below codes and check it out by applying it right on your personal blog.

  1. Visit Blogger > Template > Edit HTML
  2. Now press Ctrl + F and search for ]]></b:skin> & paste below code above it.

    .hu-subscribe-box a{-moz-border-radius:2px;-moz-transition:border .218s;-o-transition:border-color .218s;-webkit-border-radius:2px;-webkit-transition:border-color .218s;background: #f3f3f3;background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));border:solid 1px #dcdcdc;border-radius:2px;color:#6e6e6e;display:inline-block;font:bold 12px Helvetica, Arial, sans-serif;padding:7px 12px;position:relative;text-decoration:none;text-shadow:0 1px 0 #fff;transition:border-color .218s}.hu-subscribe-box a:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15);color:#333}.hu-subscribe-box a:active{border-color:#444;color:#000}.hu-subscribe-boxbar{float:left;margin-left:3px;margin-top:5px;padding:0;width:280px}.hu-subscribe-boxbar .emailsub{border-bottom:0 solid #e6e6e6;float:left;font-family:Helvetica, Arial;padding:0 0 15px;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform{float:right;padding:0;width:100%}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:1px solid #dcdcdc;border-radius:2px;color:#989898;float:left;font-size:12px;height:18px;padding:5px 10px;width:130px}.hu-subscribe-boxbar .emailsub .emailupdatesform input.emailupdatesinput:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#999;box-shadow:0 1px 2px rgba(0,0,0,0.15)}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates:hover{-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) 0 2px 5px rgba(0,0,0,0.2);border-color:#666;box-shadow:0 1px 2px rgba(0,0,0,0.15);cursor:pointer}.hu-subscribe-boxbar .emailsub .emailupdatesform input.joinemailupdates{-moz-border-radius:2px;-webkit-border-radius:2px;background:#F3F3F3;border:solid 1px #dcdcdc;border-radius:2px;color:#989898;font-family:Helvetica, Arial;font-size:14px;font-weight:700;height:30px;margin:0 0 0 5px;padding:0 5px;text-transform:none}

  3. Now Save the template and navigate to Layout > Add Gadget.
  4. Choose HTML/JavaScript and add below code into it.

    <div class="hu-subscribe-box" style="padding: 0pt 0pt 0pt 5px;"><table><tbody><tr><td><a href="http://www.feeds.feedburner.com/HackingUniversity" rel="nofollow" target="_blank"><img src="http://2.bp.blogspot.com/-g7FaIJ1OjgQ/Ttd3DAAytbI/AAAAAAAAEGI/ifepI3TXqhg/s1600/rss.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.twitter.com/RJCreationzzz" rel="nofollow" target="_blank"><img src="http://4.bp.blogspot.com/-82yXf2C2f7Y/Ttd3DvVP5-I/AAAAAAAAEGQ/9YRURg-wrPY/s1600/twitter.png" border="0"/></a></td><td><a style="margin-left:5px;"href="http://www.facebook.com/hackinguniversity.in" rel="nofollow" target="_blank"><img src="http://3.bp.blogspot.com/-bnswEL1l4bI/Ttd3CJ0oSNI/AAAAAAAAEGA/MNN2fh77H4Q/s1600/facebook.png" border="0"/></a></td></tr></tbody></table><div class="hu-subscribe-boxbar"><div class="emailsub"><div class="emailupdatesform"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HackingUniversity', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Submit email..." onblur="if (this.value==''){this.value='Submit email...';}" onfocus="if (this.value=='Submit email...'){this.value='';}" type="text"/><input value="HackingUniversity" name="uri" type="hidden"/><input value="Subscribe" class="joinemailupdates" type="submit"/></form></div></div></div></div>

  5. Now change the colored text in the above code with your personal names.
  6. Now Save it out and refresh your blog to see this widget live on your blog.