Add The Pop Up Subscription Box To Blogger

How to 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>

!--Pop Up Subscription--> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/> <script src='http://dinhquanghuy.110mb.com/jquery.cookie.js' type='text/javascript'/> <script type='text/javascript'> var popupStatus = 0; //loading popup with jQuery magic! function loadPopup(){ centerPopup(); //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //disabling popup with jQuery magic! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //centering popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var windowscrolltop = document.documentElement.scrollTop; var windowscrollleft = document.documentElement.scrollLeft; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); var toppos = windowHeight/2-popupHeight/2+windowscrolltop; var leftpos = windowWidth/2-popupWidth/2+windowscrollleft; //centering $("#popupContact").css({ "position": "absolute", "top": toppos, "left": leftpos }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ if ($.cookie("anewsletter") != 1) { //load popup setTimeout("loadPopup()",5000); } //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); } }); }); </script> <!--End Pop Up Subscription @ http://blogtoquick.blogspot.com-->

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. 

how to make an animation follow twitter

how to make an animation follow twitter

icon follow tweter animasi Info senantiasa belajar


1.login ke Blogger Dashboard and go to Design >> & Page Elements.

2.Add Gadget ______ html/javascrip

3.Copi and paste the code below and save

<object type="application/x-shockwave-flash" data="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" width="182" height="202"><param name="movie" value="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=senantiasa belajar"></param><a href="http://www.gamblinginsider.ca/casino-games/slots/" title="slots">slots</a><embed src="http://www.buzzbuttons.com/BUTTON12/twitbutton.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="182" height="202" menu="false" wmode="transparent" flashvars="username=bloggertoolz"></embed></object>

Note: ganti  tulisan yang berwarna merah (senantiasa belajar) dengan username twitter kamu

Trims


DEMO

How To Add Cool Feed Icon With Subscription

How To Add Cool Feed Icon With Subscription

1.Login to your blogger Dashboard and go to Desing --&-- Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

<div style="border: 1px solid DodgerBlue; padding: 5mm;"> 
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk7dAAk3zmzga0DXgiZQ_rpv2BC3RkWIelbYTuTZzn3Odr_ATlghgk4AMNPNlMCy8Heu_YAXnXlG5Kw_2INpbgIdGGJobzcdL1bUWLpPeM9HCZUMMNVZaKBu_6mzj-p19VruPkRf3WemQ/"/></center> 
<span style="font-weight: bold;font-size:small;">Subscribe by E-mail & Get Latest Blog Updates Free</span>
<form action=Your Feedburner URl here" style="padding: 3px; text-align: center;" target="popupwindow" method="post" onsubmit="window.open('Your Feedburner URl here', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><center style="font-weight: normal">Enter your email address:</center><p><center><input type="text" style="width:140px" name="email"/></center></p><center><input type="hidden" value="TntByStc" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /></center></form></div>

Note: Replace Your Feedburner URl here with your feedburner account url

4.Now save your "HTMl JavaScript" and you are done.

how to make Beautiful subscribe

BEAUTIFUL SUBSCRIBE

1.Login to your blogger dashboard and go to desing - & Page Elements.

2.Click on the 'Add Gadget' in the sidebar.

3.Select 'HTML / Javascript' and add one of the code given below.

<style>

.mbt-email{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykeAJIfsl4vDk0YGhbIRshgt8Kg8LZSHL6XzkhNI7hhtM9JOo_QOhWmqoYmla6Hvm1eFwzQaM3B_imOnGOk9JTnoHWzQHCcKHhi04AUd1gi0PiybAKOMhl7GZgDpx9XTcWS9cnPuVktY/) no-repeat 0px 12px ;

width:300px;

padding:10px 0 0 55px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 0 10px 0;

color:#686B6C;

}

.mbt-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.mbt-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:6px 2px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;

width:170px;

color:#666;}

</style>

<div class="mbt-email">

Subscribe via Email

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SenantiasaBelajar', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />

<input type="hidden" value="SenantiasaBelajar" name="uri"/><input type="hidden" name="loc" value="en_US"/>

<input class="mbt-emailsubmit" value="Submit" type="submit" />

</form>

</div>

Note: change Enter email address here (your email) With uRl feedburner



4.Click and SAVE

Finish.........





"trims "