I have posted a review about wordpress feedburner popup plugin , here is the long awaited customization part of wordpress feedburner popup to make it look like our’s. Read our review and download this plugin here wp-emailfeedburnerpop plugin review
Note: This plugin won’t show up after installation,don’t search your list.You have to customize this plugin using an FTP client like Filezilla.
After this customization your popup will be resized and will look cool like ours.
Customize wp-emailfeedburnerpop plugin:
Follow these simple steps to customize your wp-emailfeedburnerpop popup screen to get more email subscribers.
1.Go to /public_html/wp-content/plugins/wp-emailfeedburnerpop/ folderin your FTP client and download and edit the file form.html using notepad
2.Delete your old code and copy and paste the below code in form.html file(replace mytechshout.com with your site’s name)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Feedburner</title>
</head>
<body>
<div id="cont">
<h1>Free Daily Updates</h1>
<h2>(Never miss out any Imp. update from MyTechShout.com)</h2>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Mytechshout', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<h3>Grab our Newsletter</h3>
<input class="txt-news" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address" type="text">
<input value="Mytechshout" name="uri" type="hidden">
<input name="loc" value="en_US" type="hidden">
<input class="btn-news" value="Subscribe" type="submit">
<div style="clear:both;"></div>
</form>
<p>(Don't worry, we take privacy very seriously. Your Email will never be shared and you can unsubscribe any time)</p>
<h4>Join us on <a href="https://www.facebook.com/pages/MyTechShout/149594855111597" target="_blank" title="Connect on Facebook">Facebook</a> and <a href="https://twitter.com/Mytechshout" target="_blank" title="Follow us on Twitter">Twitter</a>.</h4>
<a class="big-fb" href="https://www.facebook.com/pages/MyTechShout/149594855111597" target="_blank" title="Connect on Facebook"></a>
<a class="big-tw" href="https://twitter.com/mytechshout" target="_blank" title="Follow us on Twitter"></a>
<p>Join <a href="https://www.Mytechshout.com/wp-login.php?action=register" target="_blank" title="Mytechshout Program">Mytechshout Revenue Program</a>-Write for us and earn money</p>
<p>(Iphones,wordpress,SEO,Google,and the latest technology)</p>
</div>
</body></html>
3.Now save the file and upload it and replace the old file in the server in the wp-emailfeedburnerpop folder
4.Download the below image and save it as form-bg.jpg in your desktop
Note:Edit this image in photoshop to change our site’s name into your’s
5.Replace the form-bg in your wp-emailfeedburnerpop folder with the downloaded jpg file
6.Now edit your pop.php file and change the height and width as follows mentioned in red colour
window.addEvent('domready', function(){
SexyLightbox = new SexyLightBox({imagesdir: '<?=$site_url?>/wp-content/plugins/wp-emailfeedburnerpop/sexyimages/'});
if (getCookie('popup') !="yes"){
SexyLightbox.show('', '<?=$site_url?>/wp-content/plugins/wp-emailfeedburnerpop/form.html?height=445&width=400', 'sexylightbox');
document.cookie = "popup=yes";
}
Note:You can change the size according to your need.
Update: wp email feedburner popup Css part
7.Go to your plugins folder>>wp-emailfeedburnerpop>>lightbox and open sexylightbox.css
8.Now copy or download this css file <link> and change www.yoursite.com in the css code to your site name and specify the location of the images for facebook and twitter icons and save the file to replace the old sexylightbox.css
Here is our facebook and twitter icons just save them to the wp-emailfeedburnerpop folder and change the URL to match correct location in the css file
9.Also change the sexyclose image in wp-emailfeedburnerpop>>sexyimages>>white by replacing it with the below image
10.You are all done.Now clear your cookies and refresh your site to see the new Customized
Subscriber popup screen Hope you have implemented it successfully in your wordpress blog.
For any help,contact us via comments.
Do follow and subscribe to receive instant updates about WordPress plugins and more customizations like this 🙂
Thanks, love how you’ve done this step-by-step. Fingers crossed for more email subscribers now…
Thanks,
Done it all.
Lets hope to get a good subscribers!
Am I missing something here? I am not getting any pictures to show up , neither any of the formatting. Most likely its the CSS file. Do I need to create and add my own facebook and twitter pictures?
Follow all the steps intact to get the pictures and style right.You can also upload your own twitter and Facebook share buttons and add your facebook and twitter links to your buttons.Thanks for your comment.
Same here. I followed all the steps you’ve mentioned but it didn’t work. I think you didn’t include in your tutorial the css style.
Thanks for mentioning this.I have missed out the css file while editing.I have added the css and the icons customization to the tutorial.Hope you like it:-)
thanks! It’s working now 🙂
You can take a look the Customize wordpress feedburner popup screen on our site. It’s awesome. Thanks a lot!
It looks great.I am Very glad it helped.Thanks do subscribe and visit again:-)
Thanks again Gowtham, I’ve successfully customized popup screen