So this widget just looks amazing and you can add it to your blogger sidebar or below every post, so that every visitor gives a look at this widget and then easily click on it to subscribe to your account. So now I do not have a working demo for this widget but yes you can just apply it onto your blog and see this widget in action.
- Open
Blogger > Template > Edit HTML. - Press
Ctrl +F & search for]]></b:skin>tag & paste below code above it.a,input{outline:none}.clear{clear:both}.clearfix,.wpr{*zoom:1}.clearfix:after,.wpr:after{content:"";display:table;clear:both}.wpr{margin:0px auto 0;width:336px}.social{background:#eaeaea;border:1px solid #cacaca;display:block;float:left;height:105px;margin:0 5px;padding:5px;width:90px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0 1px 1px #fff;-moz-box-shadow:inset 0 1px 1px #fff;box-shadow:inset 0 1px 1px #fff}.social .icon{background-color:#c5c5c5;background-image:url(http://i.imgur.com/QrH5YDn.png);background-repeat:no-repeat;height:40px;margin:8px auto 12px;width:40px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-transition-property:all;-moz-transition-property:all;-o-transition-property:all;transition-property:all;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-in-out;-moz-transition-timing-function:ease-in-out;-o-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.social .shutter_frame{height:44px;overflow:hidden;position:relative;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px}.social .shutter_frame .shutter{bottom:0;left:0;position:absolute;width:100%}.social .shutter_frame .shutter .number,.social .shutter_frame .shutter .text{height:40px;text-align:center;text-transform:uppercase}.social .shutter_frame .shutter .number{color:#fff;font-size:13px;line-height:40px;-webkit-border-radius:3px 3px 0 0;-moz-border-radius:3px 3px 0 0;-ms-border-radius:3px 3px 0 0;-o-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);box-shadow:inset 0 2px 2px rgba(0,0,0,0.5)}.social .shutter_frame .shutter .text{background:#d8d8d8;color:#666;font-size:12px;line-height:47px;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-ms-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2);box-shadow:inset 0 2px 2px rgba(0,0,0,0.4),inset 0 -1px 1px rgba(0,0,0,0.2)}.social .shutter_frame .shutter .bar{background:#eaeaea;border:1px solid #b7b7b7;height:6px;left:0;position:absolute;top:36px;width:88px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff;box-shadow:0 2px 2px rgba(0,0,0,0.5),inset 0 1px 1px #fff}.social#twitter .icon{background-position:8px 10px}.social#twitter .number{background:#00aced}.social#twitter:hover .icon{background-color:#00aced}.social#google .icon{background-position:-50px 10px}.social#google .number{background:#da3d50}.social#google:hover .icon{background-color:#da3d50}.social#facebook .icon{background-position:-103px 9px}.social#facebook .number{background:#3f5fa3}.social#facebook:hover .icon{background-color:#3f5fa3}body {background-image:url(http://i.imgur.com/VHkYIe6.png);}
- Now again search for
</body>tag & paste below script above it.<script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'/><script>$(document).ready(function(){$(".social").hover(function(){$(this).find(".shutter").stop(true,true).animate({bottom:"-36px"},{duration:300,easing:"easeOutBounce"})},function(){$(this).find(".shutter").stop(true,true).animate({bottom:0},{duration:300,easing:"easeOutBounce"})})})</script>
- Now we have successfully pasted the CSS and Script for this widget, so now you only need to add the HTML to display this widget.
- So now just copy below HTML code & navigate to
Blogger > Layout > Add Gadget. - Now choose HTML/JavaScript and add below code into it.
<div class="wpr"><a class="social" id="twitter" href="xxxxxxxx" title=""><div class="icon"></div><div class="shutter_frame"><div class="shutter"><div class="number">1000</div><div class="bar"></div><div class="text">Followers</div></div></div></a><a class="social" id="google" href="xxxxxxx" title=""><div class="icon"></div><div class="shutter_frame"><div class="shutter"><div class="number">1000</div><div class="bar"></div><div class="text">+1</div></div></div></a><a class="social" id="facebook" href="xxxxxx" title=""><div class="icon"></div><div class="shutter_frame"><div class="shutter"><div class="number">1000</div><div class="bar"></div><div class="text">Like</div></div></div></a></div>
- So now you need to edit few things in this HTML code, just change the text in blue with your Page URL's and Orange with the subscriber number.
- Now press Save Gadget and align the gadget accordingly, now your gadget codes are placed all together so now its time to see this awesome gadget working.
So now refresh your blog to see this awesome widget working perfectly, makes sure to comment on how you loved that shutter effect, well its just awesome so have fun and enjoy. Do share this post with your friends :)
(COMMENTS WILL LOAD AUTOMATICALLY)