Gameryard Liked Social Subscription Widget

gameyard style social subscription widget

Lately while searching in vain we stumbled upon a site named Gameryard.org. It's owned by the young entrepreneur from India Sagar T Rajan. We were quite impressed by the design and look of the site he has. Quite a genius boy he is, so was his design. While reviewing his site we stucked to a very cute subscription box widget installed in his site and planned to get it out for other bloggers also. And in few trials only widget came out perfect which we are sharing here

Step#1

Open Blogger Dashboard → Layout → Add A Gadget → Html/Javascript Editor
Now copy paste the below given code.

<style>
.Twittco {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfdbgBOAlkqZkil59rbxD8lqupOlMq05D5j3pBIrhC0slHhKF5jHiSmByMNhtXiZlhzsSNkmtld_cJWeVKhwLskczRRg6FKK1WRF0bNMQro5eusuZQPHjxzs19_4lff2Gx3D45u0Q36Uc/s1600/twitter_bird.png) 0 0 no-repeat;
    padding: 0 15px 0 20px;
    margin-left: 0;
    height: 45px;
    }
.Twitterocfollow {
    background-color: #fff;
    width: 294px;
    height: 70px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.iframeoftwi {
    margin-left: 55px;
    margin-top: -31px;
    }
.Socialiconsoc {
    background-color: #fff;
    width: 294px;
    height: 70px;
    background-repeat: no-repeat;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
.Facebookox {
    background-color: #fff;
    width: 294px;
    height: 40px;
    margin-top: -6px;
    background-repeat: no-repeat;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    }
.Feedburneroc {
    background-color: #fff;
    background-repeat: no-repeat;
    margin-top: -19px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    width: 294px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    }
#subboxs {
    border: 1px solid #d2d2d2;
    padding: 5px 26px 5px 10px;
    color: #838383;
    font-size: .7rem;
    height: 28px;
    font-family: "Rancho", cursive;
    outline: none;
    width: 50%;
    margin: 0 5px 0 0;
    }
#subbuttons {
    background-color: #f90;
    border: 3px solid #f90;
    cursor: pointer;
    color: white;
    width: 30%;
    height: 38px;
    margin: 0;
    font-size: .7rem;
    margin-right: 4px;
    float: right;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    }
#subbutton:hover {
    background-color: #292929;
    border: 3px solid #292929;
    }
</style>
<div class="Socialiconsoc">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/your-feedburner-id" target="_blank" title="Subscribe via RSS"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/rss.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/username" target="_blank" title="Follow on Twitter"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://www.facebook.com/your-facebook-ID" target="_blank" title="Follow on Facebook"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/facebook.png" alt="Facebook" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/Your-pinterest-ID" target="_blank" title="Follow on Pinterest"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a></td>
<td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/Your-Youtube-ID" target="_blank" title="Subscribe on YouTube"><img src="https://cdn1.iconfinder.com/data/icons/3d-box-maker-social-icons/48/youtube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td></tr></tbody></table>
</div>
<div class="google+ss">
<!-- Place this tag where you want the widget to render. -->
<div class="g-person" data-width="296" data-href="//plus.google.com/Your G+ Id Code" data-layout="landscape" data-rel="author"></div>

<!-- Place this tag after the last widget tag. -->
<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>
</div>

<div align="left" class="Facebookox">
<div style="padding:8px 0px 5px 10px">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FYour FB Id Code&amp;width=284&amp;height=35&amp;colorscheme=light&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;send=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:284px; height:35px;" allowtransparency="true"></iframe>
  </div>   </div>
 <div class="Twitterocfollow">
<div class="Twittco"></div>
<div class="iframeoftwi">
<a href="https://twitter.com/trackmyblog" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @Twiiter-Page-Name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></div>

<div class="Feedburneroc">
<div style="padding:14px 0 11px 7px">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=Your-feed-burner-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subboxs" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="Your-feed-burner-id" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbuttons" type="submit" value="Subscribe!" />
</form></div></div>