HUDI TRICKS: Widget

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4_6n4SpRJB81SVsncm7PucNY27EdJkbm0Q-I33wKHFYCn2MLJGek64o9zdvNxRyh_O8xNQk2-TNTbNse7Tv4MqNhrTsBqOgMqrhcH_NppvgDA6wD9iwXjerJxaX0XWLlZjqe-QUwc0gQ/s1600/subscribe-box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4_6n4SpRJB81SVsncm7PucNY27EdJkbm0Q-I33wKHFYCn2MLJGek64o9zdvNxRyh_O8xNQk2-TNTbNse7Tv4MqNhrTsBqOgMqrhcH_NppvgDA6wD9iwXjerJxaX0XWLlZjqe-QUwc0gQ/s320/subscribe-box.jpg" width="320" /></a></div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; text-align: justify;">
Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's Inbox and if you have feedburner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.</div>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; text-align: justify;">
 </div>
 
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; text-align: justify;">
So today, I am going to tell you 8 ways to show a subscribe box on a blogger blog. These different eight ways will force your blog's visitor to put their email on that ordinary box. Let's see what are the 8 ways!:</div>
<a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #0084ce; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; outline: none;"></a> 
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: helvetica, arial; font-size: 19.6px; line-height: 1.3em; margin-bottom: 10px; padding: 3px;">
8 ways to show a subscribe box:</h3>
<ol style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px;">
<li>Subscribe box from a hyperlinked text.</li>
<li>Subscribe box from a hyperlinked and floating image.</li>
<li>Subscribe box on a pop-up box after few second a visitor reach at the page.</li>
<li>Subscribe box when a visitors goes to exit from a page (Lightbox Popup).</li>
<li>Subscribe box on sidebar as a widget.</li>
<li>Subscribe box below every post.</li>
<li>Subscribe box on a floating hidden frame.</li>
<li>Subscribe box when a visitor reach at the end of the page.</li>
</ol>
Let?s describe these 8 ways and also, how to add them in your blogger blog one by one! 
<h3 style="background-color: white; border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-family: helvetica, arial; font-size: 19.6px; line-height: 1.3em; margin-bottom: 10px; padding: 3px;">
#1. Subscribe box from a hyperlinked text</h3>
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; text-align: justify;">
Its like hyperlinking a text but instead of a url, we'll put a subscribe box's link on it that will show a nice subscribe box when clicked. When your blog's visitors will click the hyperlinked text, a small beautiful and light weight subscribe box will appear with a subscription teaser and of course! with a subscribe box and a subscribe button. You can use this on your blog's header and hyperlink a text like 'Subscribe Us' so that, when a blog's visitor click the 'Subscribe Us' text, a small box will appear and ask the email of the visitor.</div>
 Let?s know, how to add it on your blogger blog: 
<ul style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px; list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Go to Blogger Dashboard > Template > Edit HTML</li>
</ul>
Now, you have to add some CSS (Cascade Styling Script) to make the subscribe box beautiful. 
<div style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.4px;">
<ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Search for ']]></b:skin>' on your template.</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Paste the following CSS above ']]></b:skin>':</li>
</ul>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
.newsletter-sm { background:#fff; width: 100%;height: 253px; margin: 0; padding: 20px; } .newsletter-sm form { padding: 10px; margin-top: -37px; } .newsletter-sm h3 { color: #FFF; font-family: algerian; font-size: 24px; font-weight: normal; text-align: center; padding: 10px; text-shadow: 2px 2px 2px #000; margin-top: -18px; box-shadow: 0px 0px 5px 2px #000; margin-right: -20px; position: static; margin-left: -20px; margin-bottom: 10px; background: #009EFF; } .text {   font-size: 14px;   color: #FFF;   margin-left: -20px;   padding-bottom: 28px;   margin-right: -20px;   background: #009EFF;   font-family: cursive;   line-height: 20px; } .newsletter-sm .fa {   float: left;   padding-left: 16px;   padding-right: 16px;   padding-bottom: 16px;   padding-top: 7px;   font-size: 140px; } .newsletter-sm .newsletter-input-sm {border: 0;   padding: 5px 10px;   width: 69%;   float: left;   height: 40px;   font-family: oswald;   color: #555;border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;} .newsletter-sm .newsletter-sm-bot{  background: #009EFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxYBukWbGS-Fj74mU3W8jb6exoR5jKIBJI-3Dt1GR4_iq1Un4DiXQcYpG8CEFkLgbEpTkeMiUClFQwhKSTa3C2MIgl6rEka5IX9rt2eevlYElaNxcOPmWNt_BT5JK2EOfOkcHXsiV9NU0/s1600/bg.png) no-repeat;   margin: 27px -30px 0px;   height: 64px;   padding-left: 16px;   padding-top: 16px; } .newsletter-sm .newsletter-button-sm {   float: right;   height: 50px;width:23%   display: inline-block;   text-shadow: 2px 2px 1px #000;   font-size: 16px;   font-family: oswald;   padding: 10px 22px;   position: relative;   color: #fff;   text-align: center;   margin-right: 16px;   background: #009EFF;   border: 1px solid #fff;   cursor: pointer;   border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.6); z-index: 99999; opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; pointer-events: none; } .modalDialog:target { opacity:1; pointer-events: auto; } .modalDialog:target > div { margin: 8% auto; } .modalDialog > div { -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; transition: all 100ms ease-in; width: 500px; position: relative; margin: 5% auto; background: #fff; min-height: 200px; } h2.signup { background:#00aa9f; border-bottom: 1px solid #008d84; font-weight: normal; text-align:center; padding: 10px; color:#fff; font-size: 18px; } .close { color: #888!important; position: absolute; top: 1px; right: -40px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 16px; } .close:hover { text-decoration:none; } .close:hover { color:#555; }</blockquote>
Now, this is the time to add the main html that is required for this subscribe box. <ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Search for '</body>' and above it, paste following code:</li>
</ul>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
<div class="modalDialog" id="signup"> <div> <a class="close" href="#close" title="Close"></a> <div class="signup-container"> <div class="newsletter-sm"> <h3>Subscribe to Newsletter</h3> <div class="text"> <div class="texts">Subscribe us to get all our juicy article fastly. You know how and where? Directly on your inbox! Just enter your nice and good looking email id below and click on subscribe button! After that, verify it through the verification email and start learning more!</div></div> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <div class="newsletter-sm-bot"> <input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text"> <button class="newsletter-button-sm" type="submit">Subscribe</button> </div> <input name="uri" type="hidden" value="tntbystc"> </form> </div> </div> </div> </div></blockquote>
<ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now, save your template.</li>
</ul>
<h4 style="border-bottom-color: rgb(40, 151, 40); border-bottom-style: solid; border-bottom-width: 1px; color: #289728; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin-bottom: 10px; padding: 3px;">
Customization:</h4>
<div>
<ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace tntbystc with your feedburner username.</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">You can replace text by editing the highlighted code.</li>
</ul>
</div>
<h4 style="border-bottom-color: rgb(40, 151, 40); border-bottom-style: solid; border-bottom-width: 1px; color: #289728; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin-bottom: 10px; padding: 3px;">
How to hyperlink a text to show the subscribe box?</h4>
Now, almost everything is done. Whenever you wish to hyperlink a text, so that, the text will show a subscribe box when clicked, you have to use following piece of code: <blockquote class="tr_bq" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
<a href='#sign-up'>YOUR TEXT HERE</a></blockquote>
Do you know? You can use this to hyperlink on an image too! Just use below piece of code: <blockquote class="tr_bq" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
<a href='#signup'><img src='IMAGE URL GOES HERE' alt='IMAGE DESCRIPTION' title='IMAGE DESCRIPTION'/></a></blockquote>
Done! You can check it by going on your blog and clicking the text or image for which you have used the above code. Note: This hyperlink can be added multiple times on texts on same page. <h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; font-size: 19.6px; line-height: 1.3em; margin-bottom: 10px; padding: 3px;">
#2. Subscribe box from a hyperlinked and floating image</h3>
Instead of hyperlinking a text, why not we hyperlink a floating image? This will attract your visitor's eyes too! This time, an floating image will appear at the left-bottom or right-bottom or left-top or right-top of the page. When a visitor click on that image, a nice subscribe box will appear teasing them to put their email in the box! DEMO: <a href="http://abcdefghdemo.blogspot.in/2015/06/subscribe-box-for-hyperlinked-text.html" rel="nofollow" style="color: #289728; outline: none; text-decoration: none;" target="_blank">See Live Demo</a> <img alt="Subscribe Box When Image Clicked" border="0" height="285" src="http://s12.postimg.org/9jp8myf2l/screenshot_476.png" style="border-width: 0px; display: block; float: none; margin-left: auto; margin-right: auto; padding: 3px; transition: all 0.7s ease;" title="Subscribe Box When Image Clicked" width="644" /> Let?s know how to add it on your blogger blog: <ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Same, Go to Blogger Dashboard > Template > Edit HTML</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">To make this subscribe box good looking, you have to add some CSS codes. Search for "]]></b:skin>"</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Paste the following code above "]]></b:skin>"</li>
</ul>
<blockquote style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
#subscribe-button {     float: left;     position: fixed;     bottom: 5%;     left: 0;     z-index: 999; } #subscribe-widget {     display: none; }     /* Overlay */ #mbt-overlay {     background-color: #000; }     /* Container */ #mbt-container {     height: 350px!important;     width: 63%!important;     min-height: 350px;     min-width: 500px;     color: #222;     background-color: #fff;     border: 4px solid #ddd; } #mbt-container .mbt-data {     padding: 8px; } #mbt-container a.mbtCloseImg {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKozPyBq1upE4W-105JIwixfie8aDqUJFTqcDCSnj0TURspoK8ttg1Z4yu76Ny7E4tCgYsiUmQu8-mB4kxOuCl9WdUd0Jm5XlJWgqzcMZhZz_QSE7bHSS2a3a7hgnrZaECWaG22URXpli/s1600/mbt-close-button.png) no-repeat;     width: 25px;     height: 29px;     display: inline;     z-index: 3200;     position: absolute;     top: -15px;     right: -16px;     cursor: pointer; } .subscribeheader {   padding: 5px;   padding-left: 21px;   text-shadow: -3px -2px 5px #000;   box-shadow: 2px 2px 11px 1px #000000;   background: #FF8100;   color: rgba(255, 255, 255, 1);   padding-top: 11px;   border-radius: 11px;   text-rendering: optimizeSpeed;   background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);   margin-bottom: 30px;   letter-spacing: 4px;   text-align: center;   font-family: monotype corsiva;   border: 2px dashed #FFF;   font-size: 50px; } #description {   color: #AAAAAA;   font-family: times New Roman;   font-size: 25px;   font-style: italic;   float:left;   line-height: 34px; } #description img {     float: right;     height: 100px;     padding: 0 25px 0 10px;     width: 100px; } #mbtfollowForm {     padding: 15px; } #mbtfollowForm p {     margin: 0 0 10px; } input[type="submit"] {   background: #FA9227;   box-shadow: 2px 2px 1px 1px #838383!important;   width: 25%!important;   padding-left: 0px!important;   margin-left: 17px; } #mbtfollowForm input:not([type=&quot;checkbox&quot;]) {   width: 67%;     margin-top: 20px;     margin-bottom: 20px;     font-family:oswald;     height:33px;     float:left;     padding: 10px 5px 10px 25px;     border: 1px solid rgb(178, 178, 178);     -webkit-appearance: textfield;     -webkit-box-sizing: content-box;     -moz-box-sizing: content-box;     box-sizing: content-box;     -webkit-border-radius: 3px;     -moz-border-radius: 3px;     border-radius: 3px;     -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;     -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;     -webkit-transition: all 0.2s linear;     -moz-transition: all 0.2s linear;     -o-transition: all 0.2s linear;     transition: all 0.2s linear; } #mbtfollowForm input:not([type=&quot;checkbox&quot;]):active, #mbtfollowForm input:not([type=&quot;checkbox&quot;]):focus {     border: 1px solid rgba(91, 90, 90, 0.7);     background: rgba(238, 236, 240, 0.2);     -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;     -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;     box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }     </blockquote>
<ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now, to make the floating image appear, search for ?</body>?</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Paste the following chunk of code above ?</body>?</li>
</ul>
<blockquote class="tr_bq" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nv1CdWJctzym812-9qwcshopopcLDZzb05EL1nYS7uD5Ez83Z1lh9p5p_xRdf4qnho9xu6pjtXHn2AfDuuBzu392JrG0Gk_f4IpHQIewgueHJ2NIeyRcPUN8hgJ0Jy3Jsj0HUlvd5Yil/s1600/block-qoute1.png) 0% 100% no-repeat rgb(242, 241, 241); border-color: rgb(221, 221, 221); border-style: solid; border-width: 1px 1px 0px; font-size: 15.4px; line-height: 1.6em; margin: 20px; overflow: hidden; padding: 10px 20px 40px 40px; word-wrap: break-word;">
<div id="subscribe-button">     <a class="subscribe" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMoswkjlA_rWng20gkZ4fsxrOF_QcMbjmezhACcY5NgA9dfTCfrmzZJsUGeLYjb9eoJWMTUwJgHX5Tdwqa6PsSV0pzHQ6JKM0kh51xMFVZFLa42a9ue0OExJoHzq1Pihcv2X57TVyDtf7Z/s1600/hb-email-icon.png" alt="subscribe" /></a> </div> <div id="subscribe-widget">     <div id="mbtfollowForm"> <div class="subscribeheader">Subscribe Us</div> <div id="description"> <img alt="email" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDEXUYbz4rbTZD8-EJuACtZ1C6hFIDJnRKX1-b2pY901BZHiWUBuId-Mn-BhEnGR1b-lhhe_ya-0buT19DOA03AMYdHAf2RttimY0ZnEEuqL5ZrMOX2I0otulF-krp8t8APeBDvj1CuqtA/s1600/hb-email-icon1.PNG">Subscribe to our mailing list to get the updates to your email inbox... We can't wait more to have your email in our subscribers email list. Just put your nice email in below box:</div>         <form         action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"         target="popupwindow">             <input name="email" placeholder="Enter Your Email..." required="required"             type="text" />             <input name="uri" type="hidden" value="tntbystc" />             <input name="loc" type="hidden" value="en_US" />             <div class="button">                 <input type="submit" value="Subscribe" />             </div>             </form>     </div> </div> <script src="https://googledrive.com/host/0B8acxOz46qBZckxsanR6Rm1KTms" type="text/javascript"></script> <script type="text/javascript">     jQuery(function (a) {         a("#subscribe-button .subscribe").click(function (b) {             a("#subscribe-widget").modal();             return false         })     }) </script></blockquote>
<ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Save your template and you?re done!</li>
</ul>
<h4 style="border-bottom-color: rgb(40, 151, 40); border-bottom-style: solid; border-bottom-width: 1px; color: #289728; font-family: 'bold sans-serif', arial; font-size: 18.2px; font-stretch: normal; font-weight: normal; line-height: normal; margin-bottom: 10px; padding: 3px;">
Customization:</h4>
Yeah! Customization on the above code as following: <ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">If you want that image to be displayed in left, then change right to left in above code.</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">If you want that image to be displayed in the top of the page, then change bottomwith top.</li>
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXXa5sKCPVgoins8Q2Hzj4Ok6vIp6JRcq_a8bqBxfJr65zi_HlpwzN1BGA7nFSIq-75sAePH8gHHmWZYlJSHw7BLmbL-4bEMxEfbseXxvbIgOPzsGV3ED8Uap2XYEeNG84IUjrPxEsZM8/s400/255.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">If you want to change the text or subscription teaser, then just replace the highlightedcode.</li>
</ul>
Important Customization: <ul style="list-style: none;">
<li style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2Y9Du17CZm7gW9qkD7kx4F8antEoRk_qL4psULJ_MmE4G4msGOpfcwBPCfSLj5QTGvkXxRpoVeG3IAUh8x62io6o0ihOkE5fIjFXLImMtWnr9NqemDAmRZPSnHupXfiauawld6ZXgrk/s400/251.gif) 0px 4px no-repeat scroll transparent; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Change tntbystc with your feedburner username in above code.</li>
</ul>
</div>

8 Creative Ways To Show Email Subscription Form in Blogger

Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email...