Add sticky bar with rss email subscription box in blogger.

add rss subscribe email sticky bar for blogger 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.












 

 

Follow below steps to add the sticky bar with rss email subscription box       for blogger

Part1
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> .


#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;}
Part2
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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Modifymyblogs&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='mmbenteryouremail' gtbfieldid='10' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email here...&apos;;}' onfocus='if (this.value == &apos;Enter your email here...&apos;) {this.value = &apos;&apos;;}' 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.
Note:-you should change red color keywords
1.Replace Modifymyblogs to your feed burner title.

1 comment:

Please comment the message if you like post or any trouble