OscarminiOscarmini
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
Oscarmini Oscarmini
Subscribe
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
OscarminiOscarmini
Home»Tip»How to add wordpress style Subscription Form on Blogger

How to add wordpress style Subscription Form on Blogger

Isaac FrankBy Isaac Frank3 Mins Read
Facebook Twitter WhatsApp LinkedIn Email
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email
Welcome again to The eTech Journal……

Today, We brng you this awesome Tutorial which lets you add wordprees style subscription Form on your blogger blog.

below is how this will look like when you implement it on your blog.

Follow the below steps to implement this on your blogger blog…

1. Goto your blogger dashboard

2. Select the blog you want to add it to and navigate to ‘Templates’ Click on EDIT HTML

3. Search For ]]></b:skin> . Add the Below Code Just Above It

#ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, “Times New Roman”, serif;
padding: 5px;border: none;}#ig-subscription-optin input.name {
background: white url(http://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
#ig-subscription-optin input[type=”text”] {border: 1px solid #111 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
#ig-subscription-optin input.email {background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
font-family: Georgia, Times, “Times New Roman”, serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: Georgia, Times, “Times New Roman”, serif;
border: none;padding: 0px !important;float: none;}input:hover[type=”submit”] {
background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type=”submit”] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;font-family: ‘Droid Sans’, sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #333;font-family: ‘Droid Sans’, sans-serif;}#ig-subscription-optin input[type=”submit”] {background: #960E17 url(http://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
#ig-subscription-optin input[type=”submit”]:hover {color: #FFA5A5;}

4. Now Goto Layout > Add Gadget > HTML/Javascript Then Add the below code

<center>
<div align=”center” id=”EtechJournal-Subscribe-wrapper”>
<div id=”ig-subscription-optin” style=”border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#55AAEE’, endColorstr=’#003366′,GradientType=0 ); width: 240px;”>
<h3 id=”EtechJournal-title-text” style=”color: white; font-size: 20px;”>
GET FREE EMAIL UPDATES</h3>
<div id=”EtechJournal-sub-title-txt” style=”color: white; font-size: 14px;”>
Join us for free and get valuable content delivered right through your inbox.</div>
<br />
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=etechvilla‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”>
<input class=”name” id=”EtechJournal_Subscriber_name” name=”name” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” type=”text” value=”Enter First Name” /><br />
<input class=”email” id=”EtechJournal_Subscriber_email” name=”from” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” style=”width: 130px;” type=”text” value=”Enter Email Address” /><br />
<div class=”separator” style=”clear: both; text-align: center;”>
</div>
<input name=”uri” type=”hidden” value=”etechvilla” /><input name=”loc” type=”hidden” value=”en_US” /> <input id=”EtechJournal_Submit_Text” style=”height: auto; padding: 5px 0;” type=”submit” value=”Get Access Today!” /></form>
</div>
</div>
</center>
<div id=”EtecchJournal” style=”background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: “arial”,”helvetica”,sans-serif;”> <span class=”author-credit” style=”font-family: Arial, Helvetica, sans-serif;”><a href=”http://etechvilla.com”>Free Blogger Widget</a></span></div></div>

5. Save and preview

#Customization: Change etechvilla In the last code above to your feedburner ID

#Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.

blogger Blogger Widgets
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Isaac Frank
  • Website

I'm a writer, blogger, tech enthusiast and simply a Geek!

Related Posts

How To Delete a Blog From Your Blogger Dashboard

March 3, 2015

How To Merge 2 or More Blogger Blogs – Multiple Blogs into 1

March 2, 2015

How To Embed & Resize A Youtube Video In Your Blog Post

February 11, 2015
Add A Comment

Comments are closed.

Latest Posts

Healthtracka Raises $1.5 Million for African Expansion

June 27, 2022

Tiwa Savage Becomes Tecno’s First Female Brand Ambassador

June 27, 2022

Telegram Hits 700 Million Monthly Users and Launches Premium Subscription

June 27, 2022

5 Best Cleaning Gadgets For Your Home In 2022

June 23, 2022
Oscarmini
Facebook Twitter Instagram YouTube
© 2022 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.