, , Couch Mode Print Story

Add Simple Stylish Subscription Box To Blogger


Making your blog attractive for that there are many things which can help your blog look beautiful. Widgets are one of them and this widget contains a set of benefits first it have a
Feedburner Subscription Button, Facebook, Twitter, Google+ and twitter follow me button. You can get this on your blog sidebar in few steps given below.

Here I am providing a live demo for this widget so that you can find it how it actually visible. Click the below button:


LIVE DEMO


How to Add Simple Stylish Subscription Box to Blogger?


STEP #1: Log on to Blogger 

STEP #2: Go to Dashboard>Layout

 STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<style>
    .WT_Bar{width: 300px; float: left;}
.WT_Bar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}
    .WT_Bar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}
    .WT_Bar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}
    .WT_Bar .subicons a{text-decoration: none; color:#333333;}
    .WT_Bar .subicons a:hover{text-decoration: underline; color:#333333;}
    .WT_Bar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdAF43kGQWxaSuQkd_B6Hzr_TPwp62coI3cCetnxMt-ubXgX-8c-8xqkK5p-44c8V-zdJQz9xIP_5HGKl503eeWdyWbIwHjzVayH84DcnUeFPhJkirQ6_hKf_jS8u9ojM776EJvCnxXMZ/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .WT_Bar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdAF43kGQWxaSuQkd_B6Hzr_TPwp62coI3cCetnxMt-ubXgX-8c-8xqkK5p-44c8V-zdJQz9xIP_5HGKl503eeWdyWbIwHjzVayH84DcnUeFPhJkirQ6_hKf_jS8u9ojM776EJvCnxXMZ/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .WT_Bar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdAF43kGQWxaSuQkd_B6Hzr_TPwp62coI3cCetnxMt-ubXgX-8c-8xqkK5p-44c8V-zdJQz9xIP_5HGKl503eeWdyWbIwHjzVayH84DcnUeFPhJkirQ6_hKf_jS8u9ojM776EJvCnxXMZ/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .WT_Bar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVdAF43kGQWxaSuQkd_B6Hzr_TPwp62coI3cCetnxMt-ubXgX-8c-8xqkK5p-44c8V-zdJQz9xIP_5HGKl503eeWdyWbIwHjzVayH84DcnUeFPhJkirQ6_hKf_jS8u9ojM776EJvCnxXMZ/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}
    .WT_Bar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 10px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
    .WT_Bar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOx_uwa1PJsycAcFKqKIsYOUQJqEZ12t7r9pUux2DYXK6tMVlw9hfMhMMiSQ8w5Depw68_3yenPTO2Jxch4dLBjV06uMDzFAKin5DQfQZgc31sAXUjSrEWJt1-cznb9ZnW0Fw_xejqLRI/s32/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }
    .WT_Bar .emailsub .emailupdatesform{margin: 10px 0 5px 5px; width: 300px; float: left;}
    .WT_Bar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 205px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    .WT_Bar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR8ZMTDnDo6JzL7l9LN4Xk31UdErviWuEYrxhulvnfgRtNXAjcvFFXeYYsd7qCiD0P4xed_4prjH3l9jInBXiZks2VTmUETkWEegaO7zpr3FoTQ3ySp5z1hf-6qeR0_-vYny8iLF2hyphenhyphenj4/s1600/SUBSCRIBE+ME.png" alt="Pulpit rock" width="305" height="55" />
    <!--[if IE 9]>
    <style>
    .WT_Bar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }
   .WT_Bar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 3px 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
    </style>
    <![endif]-->
    <div class="WT_Bar"><div class="count"><span class="bigcount"><a rel="nofollow"  href="http://feeds.feedburner.com/WIKITECHNOL"><img
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/WIKITECHNOL?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26"/></a> </span>
Learn Free Pro Tricks Daily! </div>
<div class="subicons">
<div class="rssicon">&#160;<a rel="nofollow" href=" http://wikitechnol.blogspot.com/feeds/posts/default" target="_blank">RSS</a></div>
<div class="googleicon">&#160;<a href=" https://plus.google.com/107244857879006042054"
  rel="author" target="_blank">G+</a></div>
<div class="fbicon"> &#160;<a href="https://www.facebook.com/WIKITECHNOL" target="_blank" rel="nofollow">FB</a></div>
<div class="twittericon">&#160;<a href="http://twitter.com/WIKITECHNOL" target="_blank" rel="nofollow">Twitter</a></div></div>
<br  style="clear:both;"/>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<a class='twitter-follow-button' data-button='grey' data-link-color='#289728' href='http://twitter.com/WIKITECHNOL' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 12px; font-weight: normal; font-family:  Arial;  padding:0; margin:0;">Receive Quality Tutorials Straight in your Inbox &#160; by submitting your Email ID below.</p></div>
    <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=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="WIKITECHNOL" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='http://www.blogger.com/rearrange?blogID= 4629869348875507896&widgetType=HTML&widgetId=HTML10&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("html10"));' target='configHTML10' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a></span></span>

Customization:

  • Replace WIKITECHNOL with your Facebook username.
  • Replace WIKITECHNOL with your Twitter username.
  • Replace WIKITECHNOL with your feedburner username.
  • Replace 107244857879006042054 with your Google+ ID.
  • Replace 4629869348875507896 with your Blogger ID.
  • Replace http://wikitechnol.blogspot.com/feeds/posts/default with your Original feed address published on your site.

STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.


{ 0 comments... read them below or add one }


Post a Comment

 
↑