If you want add the email subscription form in blogger at the sticky bar.These can increase the subscribers to your blog.Which can make increase in traffic.I think it look good to your blogger.
you can add these sticky bar with email subscription box either bottom or top of your blogger.
Login to blogger->> Design or Template->> Edit Html
Tick at Expand widgets box
Now search for the code ]]></b:skin> using shortcut search key ctrl+f
Add below code before ]]></b:skin> .
Now search for <body> tag.
And paste the below code after <body>
Note:-you should change red color keywords
1.Replace Modifymyblogs to your feed burner title.
you can add these sticky bar with email subscription box either bottom or top of your blogger.
Follow below steps to add the sticky bar with rss email subscription box for blogger
Part1Login to blogger->> Design or Template->> Edit Html
Tick at Expand widgets box
Now search for the code ]]></b:skin> using shortcut search key ctrl+f
Add below code before ]]></b:skin> .
#mmb-stickybar{
background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptIMUgsE6bsbAYe7ftxqLHcTJbOfOM0AP-tU6um4_vDCAkGgKFoqFfFGHeXTWx8ZB9LC4D0Ikt-n7yEoaitAx28FHToWrAGuAZ-enLvlkzbdyCZqn6gs-nT88z7Pl6Kh4LNOrOjKWo2Y/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mmb-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mmb-stickybar a:hover{
text-decoration:underline;
}
#mmb-stickybar p {margin:0; list-style:none;}
#mmb-stickybar img {vertical-align: middle;
margin-right: 6px;
}
#mmbenteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
#mmbsubmitbutton{
background:#000000;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
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;}
Part2background:#000000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptIMUgsE6bsbAYe7ftxqLHcTJbOfOM0AP-tU6um4_vDCAkGgKFoqFfFGHeXTWx8ZB9LC4D0Ikt-n7yEoaitAx28FHToWrAGuAZ-enLvlkzbdyCZqn6gs-nT88z7Pl6Kh4LNOrOjKWo2Y/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mmb-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mmb-stickybar a:hover{
text-decoration:underline;
}
#mmb-stickybar p {margin:0; list-style:none;}
#mmb-stickybar img {vertical-align: middle;
margin-right: 6px;
}
#mmbenteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
#mmbsubmitbutton{
background:#000000;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
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;}
Now search for <body> tag.
And paste the below code after <body>
<div id='mmb-stickybar'>
<div style='float:left; padding-left:10px;'><b>Get all the latest news and updates direct to your inbox ►►►►►►►►►►</b></div>
<div style='float:right; padding-right:0px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Modifymyblogs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='mmbenteryouremail' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='Modifymyblogs’/><input class='mmbsubmitbutton' type='submit' value='Submit'/></form></div>
</div>
Save and you are done.<div style='float:left; padding-left:10px;'><b>Get all the latest news and updates direct to your inbox ►►►►►►►►►►</b></div>
<div style='float:right; padding-right:0px;'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Modifymyblogs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input class='mmbenteryouremail' gtbfieldid='10' name='email' onblur='if (this.value == '') {this.value = 'Enter your email here...';}' onfocus='if (this.value == 'Enter your email here...') {this.value = '';}' type='text' value='Enter your email here...'/><input name='uri' type='hidden' value='Modifymyblogs’/><input class='mmbsubmitbutton' type='submit' value='Submit'/></form></div>
</div>
Note:-you should change red color keywords
1.Replace Modifymyblogs to your feed burner title.
can you pls check your "LIVE DEMO" page
ReplyDelete