Seo Master present to you: Beautiful Simple Blogger Email Subscription Box
Emails are best source for getting traffic or visitors for blog.And also a well source of creating a good readership. I am sharing a Beautiful Simple Blogger Email Subscription Box which can be added below of every post.This email subscription box is very simple with wooden brick background and hover effect.
See Demo
Beautiful Simple Blogger Email Subscription Widget
Step No 1 - Go to your blogger account.
- Go to Template ==>Edit HTML
- Now Search ]]></b:skin>
- And paste below code above it.
/***** Subscribe widget from http://www.www.matrixar.com start*****/
.subscribe_outer4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }.subscribe_wrapper4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #fff; text-shadow: 0px 2px 3px #666;font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }#avdhootEmailsub4 { display: block; clear: both; margin: 10px 0; }.emailText4 { background: url("http://i1314.photobucket.com/albums/t576/trickycafe/email_zpsba22e644.png") no-repeat scroll 10px center #fff; padding: 10px 40px; color: #444; margin: 0 0 15px; width: 70%; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0; box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); }.emailButton4 { background: #000000; background: linear-gradient(top, #000000 0%, #0c0c08 100%); background: -moz-linear-gradient(top, #000000 0%, #0c0c08 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #0c0c08)); background: -webkit-linear-gradient(top, #000000 0%, #0c0c08 100%); border: 0; color: #fff; cursor: pointer; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold; width: 100%; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }.emailButton4:hover { background: #b50b42; background: linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -moz-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50b42), color-stop(100%, #cd0c4b)); background: -webkit-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); }
/***** Subscribe widget from http://www.www.matrixar.com end*****/
Step No 2- Now Go to Layout ==> Add a Html/Java script gadget.
- Then Add the following code.
/***** Subscribe widget from http://www.www.matrixar.com start*****/<div class="subscribe_outer4"><div class="subscribe_wrapper4"><h2><center><font size='5' color='white'>Subscribe Us</font></center></h2><hr width="100%" />
<p><font size='4'>Get New Articles Straight To Your Inbox By Submitting Your Email ID Below</font></p><br/><div id="avdhootEmailsub4"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURID', '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="emailText4" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /><br/><br/><input class="emailButton4" border='3' title="F4U ONLINE COURSES" type="submit" value="Subcribe Now" size='50px' /></form></div></div></div>/***** Subscribe widget from http://www.www.matrixar.com end*****/
Instructions:- If you want to change the color of 'Subscribe Us',kindly change yellow color code
- If you want to change the text written in box change the green color text.
- You can insert your feed burner id in the place of 'YOURID'
- You can insert your desired title in the place of F4U ONLINE COURSES
Note: If you find any problem related to our topic 'Beautiful Simple Blogger Email Subscription Box' then feel free to comment or contact us.
2013, By: Seo Master
|
