Friday, November 18, 2011

Add The Pop Up Subscription Box To Blogger




Remember Always Back Up Your Template Before You Make Changes
 

Step 1. In Your Blogger Dashboard Click Design > Edit Html 



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code 


]]></b:skin>

Step 3. Copy and Paste the following code Directly Above / Before ]]></b:skin>

Note - This is a scroll box make sure to get all the code.



/*Subscription Pop Up Css*/

#popupContactClose{

cursor: pointer;

text-decoration:none;

}

#backgroundPopup{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:100%;

width:100%;

top:0;

left:0;

background:#000000;

border:1px solid #cecece;

z-index:1;

}

#popupContact{

display:none;

position:fixed;

_position:absolute; /* hack for internet explorer 6*/

height:384px;

width:408px;

background:#FFFFFF;

border:2px solid #cecece;

z-index:2;

padding:12px;

font-size:13px;

}

#popupContact h1{

text-align:left;

color:#6FA5FD;

font-size:22px;

font-weight:700;

border-bottom:1px dotted #D3D3D3;

padding-bottom:2px;

margin-bottom:20px;

}

#popupContactClose{

font-size:14px;

line-height:14px;

right:6px;

top:4px;

position:absolute;

color:#6fa5fd;

font-weight:700;

display:block;

}




Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code 


</head>

Step 5. Now Copy And Paste This Code Directly Above / Before </head>







Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

</body>

Step 7. Copy and Paste the following code Directly Above / Before </body>




<div id='popupContact'> <a id='popupContactClose'>x</a> <h1>Get Our Latest Posts Via Email - It&#39;s Free</h1> <p id='contactArea'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogtoquick&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:1px solid #ccc;padding:3px;text-align:center;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='blogtoquick'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/><p>Delivered by <a href='http://feedburner.google.com' target='_blank'>FeedBurner</a></p></form></p>
</div>
<div id='backgroundPopup'/>
</div> <div id='backgroundPopup'/>


Important - You need to change our feedburner username with yours.The username for your feed can be found at the end of your feed URL.For example the our feedburner URL is http://feeds.feedburner.com/blogtoquick , with blogtoquick being the username.

Drop your comments and questions below. 

No comments:

Post a Comment