Tutorial blog I will share
this time is a widget box subscription / subscription box that you can put on
your blog. For the demo to see subscription box like * Blog GoWidget * (today)
you can see in the image below.
This tutorial I created at
the request of blogger friends who want to install the Subscription Box like in
this blog. Actually, for those who are already familiar with coding blogs may
not be difficult to find the code in a blog page, because all of the desired
code would be very easy to copy and paste in passing Inspect Elements or Page
Source of the blog page. However I would still share this tutorial so that you
can add it easily.
How
to Make Subscription Box as GoWidget above credit footer
Right away, here you just need to follow the simple steps
below.
1. Go to Blogger >> Template >> Edit HTML
2. Add the following code above the code ]]></b:skin>
or </
style>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px
0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px
0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px
30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all
.6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css
p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span
{position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu
{font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note
span.itatu:before,#subscribe-css p.subscribe-note
span.itatu:after{display:none}
#subscribe-css p.subscribe-note
span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px
0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note
span:before{width:100%;}
For color and so you can edit back to taste
3. Then add the following markup between the opening tag free
<body> and closing </ body>. For example like
this blog I add in the Footer-wrapper
<div id='subscribe-css'>
<p
class='subscribe-note'><span>SUBSCRIBE</span> <span
class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Gowidget
' class='subscribe-form' method='post' onsubmit='window.open
('http://feedburner.google.com/fb/a/mailverify?uri= Gowidget ',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value=' Gowidget '/><input
name='loc' type='hidden' value='en_US'/><input autocomplete='off'
class='subscribe-css-email-field' name='email' placeholder='Enter your
Email'/><input class='subscribe-css-email-button' title='' type='submit'
value='submit'/></form>
</div>
</div>
</div>
Replace all of the code that are marked * GoWdget
* with your id Feedburner
4.
After that save the template and see the results.
Similarly tutorial about How to Install Subscription
Box on credit footer to Blogger
Thank you and may be helpful.