Metro Styled Social Subscription Widget For Blogger

We did post about how to add metro style social widget to blogger.

How To Install in to Blogger 

1. Login To Blogger Dashboard


2. Select Layout


3. Click on add a gadget


4. Scroll down


5. Click on HTML/JavaScript


And then paste the code there and make changes in it.

<center><p id='rb_socialicons'>

<a href='http://feeds.feedburner.com/YourID' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYTH1aJhH5NsQSCowbvF50wOL6r1V-6yNszYDth6zRIu0rpcbTUqmc4KiXLzl1Goi7iA5P2qqAv8AwslUI3VhF_IDDKTqfB5RE0HWPtrJG-zOs0MGFz4-iC35DU1HV3gpE2QPG5FBNnWT/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibC1eXXWerR8EDEV0N-XrWewHbtfX-Lc_hTd1Sos7G0WYsPX-E_0-62K1cKVjY2nOKhWTAwEHzSmsS0fXSjnu26CUHdsiFoUMiA2c7Rcw2uFkZZwLL68oFEu7Dr1V1KSkwXUugKYr3h1rl/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYTH1aJhH5NsQSCowbvF50wOL6r1V-6yNszYDth6zRIu0rpcbTUqmc4KiXLzl1Goi7iA5P2qqAv8AwslUI3VhF_IDDKTqfB5RE0HWPtrJG-zOs0MGFz4-iC35DU1HV3gpE2QPG5FBNnWT/s1600/rss-inactive.png'/></a>



<a href='http://facebook.com/YourID' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1V1lzw8pX_cyzq1d5V5nciXlp2tWzlZQZ7ri9f7g34t7NejmU2AcYZAaYadUwW1NvpmNZt1zRfT5TyYJk30MnpGg30wSubFBAdZHP1JWKNgvK80repPIN1jamOjdypqu6dB60JBh0klt7/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6dOX6_tPlXzcN_-JLkKZU0UV9ZQMcUl9B_C4gnjS8M_xGNIdY6yvlOz0IM9Ji_-htw1Ee7tx_zjU3uq2O7XKmA8aOpXonEPDOeizROGoqvyjx4TV6jGpdEaiGugRamtFrzYzsLJ1FsRBi/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1V1lzw8pX_cyzq1d5V5nciXlp2tWzlZQZ7ri9f7g34t7NejmU2AcYZAaYadUwW1NvpmNZt1zRfT5TyYJk30MnpGg30wSubFBAdZHP1JWKNgvK80repPIN1jamOjdypqu6dB60JBh0klt7/s1600/facebook-inactive.png'/></a>



<a href='http://twitter.com/YourID' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfwopv9JmumolhtS7X1pOWTesG4qJATumqAtRCHm3Iu3JIri-2IpZvNDm-2voxRgBH-AQ88XGu0EDYbQggaYxyf0cKYKZRJzC7kgp5u-qk6rOwmncFZRXgTMvwgpckCSRlPn2QMgb9eGu/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIwtQlBfArxsqawd0njW26A521jpXI5Ia_gxdLPJdHmP3OW1mAo44Wr43yDvWvmt-4MaGK59sEF64o56jaeKWTrn8_Tm7YMQJtwIg9TjTTb5mxt0ASDbK7YK9AnKUk4Au_0rR6UnGkJxM/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfwopv9JmumolhtS7X1pOWTesG4qJATumqAtRCHm3Iu3JIri-2IpZvNDm-2voxRgBH-AQ88XGu0EDYbQggaYxyf0cKYKZRJzC7kgp5u-qk6rOwmncFZRXgTMvwgpckCSRlPn2QMgb9eGu/s1600/twitter-inactive.png'/></a>



<a href='https://plus.google.com/u/0/115950**********1' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPpU2Syvt5UWeKdnJiWSytVjouy2ZNw7lhXgf1n482O0RkAV5FdMP8aWugRRbHxbLoPItxBLf9cE6DJj8i2C_XQGcaJy8Ux93M5oUstVMuQYLf123NynRITEYDTC0PtiOq1AiAxdEdwMB/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjWzmTG24P0LK8fcY34n1d0uJwFNIS3RZPC-h6RNI07doLYMRBcxbcD2R0XUMQMZnbO7F2jREeER4GD74WHutl6k-fUGbsv89rmVlrRxMsExBFSWI_AKaz1A9lUg08gScaRQ0f0Dt_tTaV/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzPpU2Syvt5UWeKdnJiWSytVjouy2ZNw7lhXgf1n482O0RkAV5FdMP8aWugRRbHxbLoPItxBLf9cE6DJj8i2C_XQGcaJy8Ux93M5oUstVMuQYLf123NynRITEYDTC0PtiOq1AiAxdEdwMB/s1600/google-plus-inactive.png'/></a>





<a href='http://pinterest.com/YourID/' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3_02Ed9KxUGM_82p2w4mjG4zBLk4YkITUIZHaHZMU-uqY-ZL_rNfkUeyhloT01zDnQG3le3hPjLdZlfmZSrNm-Ds7L93nSVKE-eIP51bK00PsSCzsAY7ZJJQzcu7XRkgVwdsB0Nry2Wv/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWdGZOHN9TZaiFgdXElKY6ALFeHwx00DFRJSq19P2XyTJN0Chkklt17-gOyxQwgbURXRVw8XamO-ollv0iMRpMCTjQs5SlwTUHjndRN2_AW3gDL-RD1RLoijenNMxR6ntzw9GklZ2tpb1/s1600/pinterest.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3_02Ed9KxUGM_82p2w4mjG4zBLk4YkITUIZHaHZMU-uqY-ZL_rNfkUeyhloT01zDnQG3le3hPjLdZlfmZSrNm-Ds7L93nSVKE-eIP51bK00PsSCzsAY7ZJJQzcu7XRkgVwdsB0Nry2Wv/s1600/pinterest-inactive.png'/></a></p>

</center>

<center>

<div class="sidebar-subscribe-box-form">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=YourID" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggeraxe', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="YourID" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>

</center>

<style type='text/css'>
#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQUDEP1xTAlXO1lS4piuCt2O5Uq9FsuZniXqTBHUkFBYPH3a8VkDPYgWWntTNHkj8QYACs79vLb9lyGMXHB36Ik85Rt1M-uacAphJncllMd0GGrQRt7ZooduRibY86XRyQYaOTDJjO4ATv/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhil90MSx-Z6j1ORVPNsa7BLpqo__jq42LwdqyVVjqyUVi4AnfUjDsl5Amx5Wa8SvGLlM43eY-No3D1TmMDYd0RuQsKH3Yn3BqJq_A0yUN2mt_4w6agIQ41b8RT17utPrqhS789dUl5_5Om/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc-tZjtcWJ0sdX1yjwxElvM8zpxNgaVD41owwjdPNGBEn8q6LcF8iM0vCTDOpa8eLr-rUSh3fCC9kTqdjW0YXChxfmEIyg0k22bTQILz8rO-9GaIqoa4mhyyQcd5fqAyKkhZABTN4p-sN/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpVc5MA_aQT78ghNmQy9Gb0NuYTT-DaCfmn8rPD9SaB_HMITxUt9eRJiQlHGbjRBxCco3Jt4zVc9MDd9D6HqM3hsNAMWs49CS3HEI0tfmwESRyRnmjNPhEgfBpu-x81pzCBIrQqJqSW2gw/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

p#rb_socialicons img {

    -moz-transition: all 0.8s ease-in-out;

    -webkit-transition: all 0.8s ease-in-out;

    -o-transition: all 0.8s ease-in-out;

    -ms-transition: all 0.8s ease-in-out;

    transition: all 0.8s ease-in-out;

}

p#rb_socialicons img:hover {

    -moz-transform: rotate(360deg);

    -webkit-transform: rotate(360deg);

    -o-transform: rotate(360deg);

    -ms-transform: rotate(360deg);

    transform: rotate(360deg);

}



</style>

 

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code

Replace YOURID  in the Above Code


6. And at last click save.(REMEMBER TO MAKE CHANGES IN THE CODE.)

And DoNe.

3D Subscription Box Widget For Blogger

I

created this subscription widget using CSS Facebook login form, which is available to preview or download here. It look's great and sleek. You can also use this widget on your wordpress blog or on a static HTML page.

It's coded with pure CSS, no images were harmed during creation process. Don't remove credits, and you're free to use or share this widget.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

CSS CODE

::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:-moz-placeholder {
  color: #bcc0c8 !important;
}

::-webkit-input-placeholder {
  color: #bcc0c8;
}

:-ms-input-placeholder {
  color: #bcc0c8 !important;
}

.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
  background: #ebc9a2;
}

.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.login {
  padding: 18px 20px;
  width: 200px;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}

.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}

.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

HTML CODE

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEEDID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="login">
 <h1>Subscribe To Us</h1>
 <input type="hidden" value="YOURFEEDID" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit">
 <p class="login-help"><a href="#" rel="nofollow">Powered By: yourblogname</a></p>
</form>

Customizations:

In above code replace YOURFEEDID with your FeedBurner feed id. Also, you can change width of this widget by changing width: 200px; with your preferred width.

Don't forget to leave your comments.....

Beautiful Email Subscription Widget Below Post For Blogger

In this tutorial you will learn how to add Beautiful email subscription box below blogger post.Subscribers are one of the important factor that affect the existence of the blog.If you don't have any subscribers ,it means you don't have any loyal readers.You don't have people waiting for your posts.It will indeed make your blog less lively and least engaged.So the best way to increase subscribers and thereby traffic is to add the cool email subscription widget powered by feed burner

This email subscription widget is pretty beautiful and is Highly customized by Css which make it elegant and cool.You can add this widget any where  in your blogger blog or Wordpress blog.Bu the recommended option would be to choose the below post area as that is where visitors click are concentrated.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

 #emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=yourID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='yourID'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.</small></p></form></div></b:if>

Replace yourID with your link:

10. Now save your HTML/Javascript'.
    You are done...  


OR


Now we have completed adding styles.now we need to postion thi swidget acording to our needs.You can add this email subscribtion widget any where but here we will be adding at the bottom of the page.Hence we need to look for the footer code of the template
Find the below code [You can press CTRL+F]

<div class='post-footer-line post-footer-line-3'>

Immediately after the code add the below code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YourID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='YourID'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.</small></p></form></div></b:if>

The text in red color can be replaced by your feed burner id.

Recommended Post Slide out Widget for Blogger

You know those popup messages that slide out from the bottom right corner once you’ve almost reached the bottom of the page? Well, they used to be available only on WordPress but not anymore; now Blogger users can enjoy it too! The Recommended Post slide Out Widget is an invitation to the reader to read any other post once he has read one of your blog entries. It's both useful for you (can improve your Click Through Rate (CTR) ) and for your blog visitors too.

Demo

Scroll down to the bottom of the post and you should see the Recommended Slide Out Widget appearing in the right corner of blog's page.

How to add the Recommended Post Slide out Widget

1. Log in into your Blogger account, then go to Design (or Layout) > Page Elements
2. Click on Add a Gadget Link
3. Choose "HTML/JavaScript" option
4. Paste this code inside the empty box:

<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image"></div> <div  id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://helplogger.blogspot.ro/2012/06/recommended-post-slide-out-widget-for.html" target="_blank"></a>

5. Save The Widget.
6. Go to Edit HTML > Check the "Expand Widget Template" box
7. Search (CTRL + F) for the following code :

<div class='post-footer-line post-footer-line-1'>

OR

<p class='post-footer-line post-footer-line-1'>

OR

<data:post.body/>

Immediately below any of these lines, add the following snippet

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Now when the reader scrolls down to this div, the slide will open up.

8. Save your template. And that's it!

Attractive Rss Subscribe Box For Blogger

This Tutorial will help you to add beautiful subscribe box for your blogger.This is WordPress style.You can add this subscribe box to end of the post.So, you can add this easily.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

 #Subscribe{background:#D00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAoqBN6jVXxvrIBsJCFqTQk8EKrcQ-DW2ywDwWIc6-nMG0GTMFQh2u1NJobmuWGheOGICOGzORWft8P5EWvOOkkxm5wWi6qUmSg2J9kjXM0Ud6j1aL1wqwsuKipW5JqDMCUm7PL8qu53o/s1600/EM-brown-letter-256x256.png) no-repeat 98% center;border-radius:5px;box-shadow:0 0 30px #600 inset;height:100px;margin:5px auto 0;padding:10px;width:700px;}

#Subscribe .Arrow{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtz25H4sVVxg77gTI0eCzYtKCQ11lnO7xYiQlDMN-mPINRF9GK-ZNcBZPVDx87Yj8lRtwd9Aimgk5j_FeebIQ0I47f4EtIJxXuUwmlW3kJbJDYLX8RS9eOqXv_JFeTSibk7R_CxEab7s/s1600/old_edit_redo1.png) no-repeat;float:left;margin:0 0 0
background-size: 80px;
}

#Subscribe form input.Text{background:#FFF;border:1px solid #800;border-radius:5px;box-shadow:0 0 5px #600 inset;color:#333;float:left;padding:5px 10px;width:145px}

#Subscribe .headline{color:#FFF;font-size:24px;margin:5px 0 0 80px}
#Subscribe table{margin:10px 0 0 100px;}
#Subscribe form input.Button{background-color:#148314;border:1px solid #7a7a7a;border-radius:5px;color:#fff;padding:5px 10px;position:relative;width:125px}

7. again Find this tag by using Ctrl+F    <data:post.body/>

8. Paste below code after <data:post.body/> tag

<!--NewsLetter Starts-->
<div id="Subscribe">
<div class="Arrow">
<p class="headline">Subscribe Updates, Its FREE!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post'
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?
uri=yourfeedname&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,
height=520&apos;);return true' target='popupwindow'> <table><tr><td><td>
<input name='Name' onblur='if (this.value == &quot;&quot;)
{this.value = &quot;Enter Your Name&quot;;}' onfocus='if
(this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}'
 class="Text" type='text' value='Enter Your Name'/></td><td><input name='email'
 onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email&quot;;}'
 onfocus='if (this.value == &quot;Enter Your Email&quot;) {this.value = &quot;&quot;;}'
 class="Text" type='text' value='Enter Your Email'/> <input name='uri' type='hidden'
 value='yourfeedname'/><input name='loc' type='hidden' value='en_US'/></td><td><input type='submit' class="Button" value='Subscribe Now'/></td></tr></table></form>
</div>
</div>
<!--NewsLetter Ends-->

Replace  yourfeedname with your feed name

Save this Image For Your Back UP:   If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code 

11. Now save your template.
    You are done... 

Add Elegant Email Subscription/Signup Widget To Your Blog

Follow the steps below to add this email subscription widget to your blog.

Step #1  Add A New Gadget

Go to Blogger >> Design >> Add a new gadget >> HTML/JavaScript Widget.

Now add the following code in it.

/* BloggingeHow Email Subscription Widget*/

<center>
<div id="feature_box">
          <div id="sleek-subscribe">
                  <div class="newsheadline"><span>Sign-up</span> for <cite>FREE</cite> Regular Newsletter.</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.open('http://feedburner.google.com/fb/a/mailverify?uri=Your Feed Burner Feed Name', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
            <input class="email" type="text" style="width: 450px; font-size: 15px;" id="email" name="email" value="Your Custom Text Goes 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="Your Feed Burner Feed Name Here Too" name="uri" />
            <input type="hidden" name="loc" value="en_US" />
            <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
        </form>


    </div> </div>


      </div>     
</div></center>

<style>
/*---:[ feature box ]:---*/
#feature_box { background: #eee; border-style: solid; border-color: #ddd; }

/*---:[ home page teasers ]:---*/
.teaser a.teaser_link:hover { text-decoration: underline; }
.teaser .teaser_author { font-style: italic; }
    .teaser .teaser_author .author { font-style: normal; text-transform: uppercase; letter-spacing: 1px; }
.teaser .edit_post { letter-spacing: 1px; }
    .teaser .teaser_author a, .teaser a.teaser_comments, .teaser a.teaser_category, .teaser .edit_post a { text-transform: uppercase; letter-spacing: 1px; color: #888; border-bottom: 1px solid #eee; }
    .teaser .teaser_author a { font-style: normal; }
    .teaser .format_teaser a { text-decoration: underline; }
    .teaser .format_teaser a:hover { text-decoration: none; }

/*---:[ border package ]:---*/
#header, .post_box, .teasers_box, #footer, .image_box, .custom_box, #feature_box, #archive_intro, .prev_next, #comment_nav_2 { border-width: 0; }

/*Featured Box*/
.custom #feature_box{background:#f0f4f4; border:1px solid #d9eaea; padding:10px 15px 5px;}
       
/* Subscription Box */
#sleek-subscribe{display: block; margin:0 auto; }
.newsheadline {padding-left:20px;color:#222; font-size:20px; line-height:50px; float:left; font-weight:bold;}
    .newsheadline span{font-size:38px; color:#444; line-height:14px; font-family:"Trebuchet MS"; font-weight:normal;}
    .newsheadline cite{font-style:normal; color:#f00;}
.signform{background:url('images/form-bg.jpg') no-repeat;padding:0 0 10px 100px; float:right; }
      .txt2, .txt2:focus{width:140px; font-size:15px; background:#fff; color:#92c3c3; border:1px solid #E36B0A; margin:0 5px; float:left; padding:10px; width:160px; border-radius: 10px;}
      .btn2, .btn2:focus {background:#E36B0A; margin:0 5px; padding:8px 10px 9px; border:1px solid #AD5513; color:#fff; font-size:15px; border-radius:10px;}
            .btn2:hover{background:#6689b0; }

#email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:34px;}
    #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,#FFCA00 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}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:57px;
    }
</style>

<!--[if IE]>

    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>

    <![endif]-->

 Step #2 Customizations

I have highlighted the parts that you need to change. Change your feed burner feed name and add some interesting custom text.

Note: There is one important thing that you need to take care of. The widget is designed for BloggingeHow's width, so you have to readjust it as per your blog's width.

I have highlighted the width:450px section in green so that you can adjust it later.

Custom Header FeedBurner Email Subscription Widget

Add the email subscription widget to your blog

 Go to Blogger Dashboard >> Layout >> Add a gadget >> HTML/JavaScript. And paste the entire code with in it.

<div class="fixed-widget"><div class="widget-container">

 
  <h1> Get Daily Updates</h1>

<p>Subscribe to BloggingeHow Updates (Free)</p>

<fieldset class="inputs">
<form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input id="email" class="email" type="text" value="Your Email..." style="width: 192px; font-size: 15px;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" name="email">
<input type="hidden" value="bloggingehow" name="uri">
<input type="hidden" value="en_US" name="loc">
<fieldset class="submit">
<input class="sean orange-btn" type="submit" value="Sign up" name="commit">


</fieldset>

</form>
</fieldset>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:270px;
  ">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
</div>
</div>
<style>
 

.fixed-widget p {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpKcIh7cIskKIgfGOATDaEbBdVZa5inRLrwSIEGA0YBB7tU7yLW7sKCVVvJsMNTkMJ7uSFvdeewFgdThCbPc-pF54-EaDjgK6xXY1TBhrla6TStci0cYJa-d2CdPwsUNzF_n4NPezPxY/s1600/highlight.png") no-repeat scroll center top transparent;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    height: 50px;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    padding-top: 4px;
    text-align: center;
    text-shadow: 1px 1px 1px #111111;
}
.fixed-widget input[type="text"], .fixed-widget input[type="email"] {
    border: 1px solid #D8D9D4;
    color: #555555;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    margin: 0 0 10px;
    padding-left: 6px;
    width: 192px;
}

.fixed-widget a:hover {
    color: #000000;
    text-decoration: none;
}
.fixed-widget fieldset, .fixed-widget form {
    margin: 0 auto;
    width: 210px;
}
.fixed-widget form {
    border-top: 1px solid #E5E5E1;
}
.fixed-widget fieldset.inputs {
    border: 0px;
    border-top: 1px solid #FFFFFF;
    padding-top: 10px;
}
.fixed-widget fieldset.inputs label {
    display: block;
    padding: 0 0 5px;
}
.fixed-widget fieldset.submit {
    border: 0px;
    padding: 1 50 10px;
}
.fixed-widget .orange-btn {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1EhlquPMjp881PX24L0bQoRXGwH7tNnys04pT0CGv6FznBRLDKyVnwSrdv0BqtlhkvuprHkw7ngH7G0kZp7RRsXPiJrWInrmUubGl_oYz84sn3jJzv4KtC5uT2tFNWMWTmqZyBH4UDI/s1600/gradient-orange2.png") repeat-x scroll center top #FF6B29;
    border: 1px solid #CC5721;
    box-shadow: 1px 1px 1px #FFA04D inset;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    align:center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    height: 30px;
    letter-spacing: 1px;
    line-height: 28px;
    padding: 0 25 px;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px #D35E24;
    text-transform: uppercase;
    width: auto;

}
.fixed-widget .orange-btn:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1EhlquPMjp881PX24L0bQoRXGwH7tNnys04pT0CGv6FznBRLDKyVnwSrdv0BqtlhkvuprHkw7ngH7G0kZp7RRsXPiJrWInrmUubGl_oYz84sn3jJzv4KtC5uT2tFNWMWTmqZyBH4UDI/s1600/gradient-orange2.png") repeat-x scroll center bottom #FF6B29;
}
.fixed-widget .orange-btn:active {
    position: relative;
    top: 1px;
}
.fixed-widget {
   
    width: 300px;
}
.widget-container {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSWzKKwkM_d15T0iB_DXVQkzRzm_ApqXIxbO4eUEMCiGY9IZX7pvTDWhdSyvkTVnvmiafO5IGN89l9Z8UsR1DL_RWoY-9_DpPZrM3cTPSeFeC6de14f8aqyQB9SZfXMelQxY4Wnaeh1I/s1600/gradient-big-grey2.jpeg") no-repeat scroll center top #F0F1EC;
   
}
.fixed-widget h1 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUGZFZGWkqvEZINTBotWoaQRR_e5wW5KLiO_00gWvwJJF75Dm3xVNy3lfjftuK-W2EZUY0bPHGu7ZEwjKL7nMujGQJhegOaBqGU8J5_xLUAXqQRsDGaUdQtetmmXZUauPFVbNkpTLPZ4/s1600/fixed-sidebar-header.png") no-repeat scroll center top #F0F1EC;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 900;
    height: 60px;
    letter-spacing: 0.08em;
    line-height: 39px;
    margin: 0;
    padding-bottom: 10px;
    position: relative;
    text-align: center;
    text-shadow: 1px 1px 1px #D35E24;
}
</style>

Add the title of your choice by replacing the Get Daily Updates text while to replace the paragraph, edit Subscribe to BloggingeHow Updates (Free) text. Next you have to replace your FeedBurner email ID by replacing bloggingehow in both of its occurrence.

That's all, Now in the next step you have to add it to your blog. Before adding the finaly edited version, you can preview the widget in our Online HTML Editor.

Replacing the header?

To replace the header with a new custom one, simply replace this image https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUGZFZGWkqvEZINTBotWoaQRR_e5wW5KLiO_00gWvwJJF75Dm3xVNy3lfjftuK-W2EZUY0bPHGu7ZEwjKL7nMujGQJhegOaBqGU8J5_xLUAXqQRsDGaUdQtetmmXZUauPFVbNkpTLPZ4/s1600/fixed-sidebar-header.png link with your new header background link. Make sure that the width of the header is 300x60px.

Thesis Feedburner Email Subscription Widget

How To Add The Widget To Blogger

Navigate towards Blogger Dashboard >> Layout >> Add a new Gadget >> HTML/JavaScript. Then paste the edit code (with all your customization links) in the widget and hit save.

 <!--BloggingeHow Thesis Email Subscription Widget -->

 <div id="singlesubscribe">
<p class="headline">Get Regular Updates, Its FREE!</p>
<span class="arrow"></span>

<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">

<input id="email" class="txt" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Enter your email :)" name="email" style="margin=left: 20px; width: 290px; font-size: 15px;">

<input type="hidden" name="uri" value="bloggingehow">
<input type="hidden" value="en_US" name="loc">
<input class="btn" type="submit" value="Subscribe" name="commit">

</div>
<span style=" line-height:0px; font-size:8px; font-weight:bold; align:right;
  ">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
</form>
</div>

<style>
#singlesubscribe {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nt7fJyxH7Ma5scbny6RWW2tP16itdm2Xr7MWfFRTUv8g3qjHo5OH1XZIzJYfYjbHalytvm-Neyc9tSQjQ4SkRsyCN92UnilbaCuGj0kSH0jU2CXbrA7VN5FCfwYHqn0suFeCilH5IDg/s1600/email-icon-1.png") no-repeat scroll 98% center #6C87A6;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 30px #575656 inset;
    margin: 5px auto 0;
    padding: 10px;
}
#singlesubscribe .headline {
    color: #FFFFFF;
    font-size: 24px;
    margin: 5px 0 0 60px;
}
#singlesubscribe .arrow {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0zaeV7MVtcXvLQNHc8Wb68iQi5EyoZ-b5cQ7dsqQISibBJEC5gdqleXol0YoPIIHfiPdi0ma3g3mTyFAoA2xZQPZ7NADhq-fPwD-dsfkUqW2e62551VdW_xV-iSFSopxQwPxbevKzcIg/s1600/arrow-left.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 60px;
    margin: 0 0 0 20px;
    width: 60px;
}
#singlesubscribe form input.txt {
    background: none repeat scroll 0 0 #FFFFFF;border: 2px solid #575656;border-radius: 15px 15px 25px 5px;box-shadow: 0 0 8px #575656 inset;color: #575656;float: left;margin: 25px 10px 0 0;padding: 5px 10px;width: 145px;
}
#singlesubscribe form input.feedburner {
    width: 250px;
}
#singlesubscribe form input.btn {
    background: none repeat scroll 0 0 #222222;
    border: 0 none;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #000000 inset;
    color: #FFFFFF;
  
    font-weight: bold;
    margin: 25px 0 0;
    padding: 5px 10px;
    width: 100px;
}
#singlesubscribe form input.btn:hover {
    background: none repeat scroll 0 0 #111111;
}

</style>

 Simple replace both the instances of your Feed burner ID (replacing our ID i.e bloggingehow in the code above).


Thats all :)

"Do You Like This Story?" - Best Blogger Widget!

After several trials and errors finally we managed to design a fully equipped blogger widget that contains Facebook Like & Send button,  Email Form (Subscription box) and social media icons. This widget can be found on many wordpress blogs added at the bottom of posts. It catches great attention of the visitor and forces him to like and share your article. That's why we named this gadget as "Do you like this story?" It is a more advance version of the widget I shared few days back which only offered visitors with a subscription option but this one offers a lot more. It will increase your Traffic through Facebook, Increase your subscribers, facebook fans and twitter followers. Indeed a magic box!

I have kept the installation process extremely easy so feel comfortable to try it.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Check the "Expand Widget Templates" box
4. Search for, 

<data:post.body/>

    5.   Just below it paste the following code,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksuwZel_CvU50niYxijvbMZnWTkbBE3CbuZVnPjbTaTQXpi0NGe_G_46YR4kZzgoGTyk0jzrSKkIdQXz63zytOnSbDPBwFBaNlbhLsVzh09UaGaDShty-_yVByswpvMq4LU6yd4VqY8yg/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>
<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='http://feeds.feedburner.com/TntByStc' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHk0IJT6IJ4ducoupICYwaCgpavd90lnWD9DZ-W4sRdfL8AGpJgzkJ0lB0SCGclgEaSIYMJWwzfLhFtcJ6k5NtIoHpContIvGxdKDkxp2jl9ol81Si_yXi9OW0h2GYiLA853T2n5qX8DCz/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/mybloggertricks' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tsAG3EFPZ2Dq4k6S40cODQ8cIusbxRlcbJ5tgenFQPfLyH6bpkWYinrjfZpA5QHapvvkQTsNCMw_viKLNStBNhozmqFse6tzlshEW2ulH4u87k1W2Vi0bdX3M4PLVLyThPZnjpcUc_Qv/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtHlhyphenhyphenp_E20aNkJOWtMXcqHi-5KqRtK-hmfOkaZpq1nSF6T9f0dtJQu72v87DfPWfK3SFpbxa-cFhPBpCUqmKRO0_x4ibDio13rFFGuxUbYnh0kQ3xJqrEaYwKqdE-bQEWUBtaV7EGxBxL/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

Now make these changes,

• To change the colour of the "Do you like this story..?" text then simply change #FF683F  with a hexadecimal color of your choice.
• Now replace http://feedburner.google.com/fb/a/mailverify?uri=tntbystc with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace tntbystc with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=tntbystc
• Replace orange link with your Feedburner link
• Replace the blue link with your twitter link
• Replace the purple link with your Facebook Like Page link

After you have made all the necessary changes simply save your template and you are all done!
Visit any of your post to see it being displayed just perfectly. This gadget is compatible with all major browsers. I hope you find it helpful. I am busy with exam preparation these days so pardon me for late replies. Peace brothers! :)

Mashable Sharing Widget For Blogger - Version2

We previously published the first bloggerized version of Mashable Sharing Plugin for wordpress and it was well received by all of you. At that time Google Plus badges were still under development and were not released and web masters often preferred third party plugins like "Add to Circle". Since now when Google plus is the hot social media networking site growing in numbers and traffic and with extra ordinary added Google Search features, I thought the mashable widget should be upgraded. I simply added a Google+ bade to the sharing widget and replaced the LinkedIn icon with twitter because most of you asked for it. Linkedin is a great place for business professionals to attract targeted clients  but if you have just started blogging and don't have much experience in freelancing then you may avoid it at an early stage. The installation is extremely easy and you simply need to copy and paste the code. That simple!

1. Go To Blogger > Design
2. Choose "Add a gadget"
3. Select HTML/JavaScript Widget
4. Paste the following code inside it, 

  <style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #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,#FFCA00 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}  
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}  
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLQ3f565jxhdZSCu0gpyzuG-RGLKIPNjEj39saCZOkyRO3YTYIyvy_KrYggb3zaarPZpERkmBDYZUymYZkno6DMXoVJWLpbJUiXbm-Ft9lt0WQeGfebuQxTY7t9rdvVJPiwVxgXfyIHKA/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefGFEB4gZK9iIUYCq5VvFPbUEqTlfdtlTOyh-F6jg9wMUWQMtmAr2Udq2RLF171lrBY5P8fWa45MOzK8PmClIIHs7zT3_dO7ZkzVFXAceItD50TV1IYwJxvZ9qyg5dE9r0Vwqqz5V_Ns/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcVP8bJPlI8h7UWjabVc9E4SQeYZ0g94iWOiuSpIwbru_CneauAdV7Ibhxq4NCxTc5QehLsk-j6IoHwg0jC4Na7tgv6uhDmZU4mZB8JDFsinDn1EvxWovsf6x-hATtUMJ5E3WOoxi1GOg/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}    </style>    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #FFCA00;
        }
    </style>
    <![endif]-->
<!--begin of social widget--> <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" > <!-- Begin Widget -->
<div class="gplus"> <link href="https://plus.google.com/111121903130358474387" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
<!-- Place this tag where you want the badge to render --> <g:plus href="https://plus.google.com/111121903130358474387" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox"> <!-- Facebook --> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/bloggertricks&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp; font&amp;height=100px&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></iframe> </div>
<div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=en&amp;link_color=&amp;screen_name=mybloggertricks&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </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=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="ifundefinedthis.value==this.defaultValue)this.value=&#39;&#39;;" onblur="ifundefinedthis.value==&#39;&#39;)this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/mybloggertricks"  target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/111121903130358474387 target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.mybloggertricks.com" target="_blank" >Blogger Widgets »</a></span></div></div> <!-- End Widget --> </div>
<!--end of social widget--> 

Make these important changes:

• Replace bloggertricks with your Facebook username
• Replace mybloggertricks with your twitter username
• Replace tntbystc with your Feedburner title. Your Feedburner title is the word added at the end of your Feedburner link. Example: http://feeds.feedburner.com/tntbystc
• Replace http://feeds.feedburner.com/tntbystc with your feedburner  link.
• Replace https://plus.google.com/111121903130358474387 with your Google Plus profile link   

      5.  Next search for this ]]></b:skin>   Paste the following code just below it

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

  6.  Now save your widget and you are all done!