Form berlangganan melayang di blog

Form berlanggan..kayaknya form ini sungguh wajib bagi para blogger mania dan banyak model-model form yang telah ada sekarang saya akan menshare cara membuat form subscriber melayang atau pop-up..Banyak blogger mengatakan bahwa berlangganan sebuah pop-up dengan jquery sangat membantu dalam meningkatkan jumlah subscriber. .

sebelum memulai, disarankan baiknya anda BackUp dulu template anda.

1. Login Blogger.com, Klik Template > Edit HTML
2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode berikut letakan tepata di atas kode ]]></b:skin>
   /*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:400px; width:500px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:center; 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; } #cont{text-align:center; color:#3AA6FF; font-family:Arial, Helvetica, sans-serif; width:500px; margin:0 auto;} #cont a{ text-decoration:underline;} #cont h1{ font-family:Georgia; text-transform:uppercase; font-size:22px; font-weight:bold; margin:10px 0 40px;} #cont h2{ font-size:14px; margin:5px 0; text-decoration:blink; border-bottom:1px dashed; color:red;} #cont form{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKu4UozRanwWatTIIl9pd55SSyBjd5i_3PvxZxT4vqnpmTu7cXvz1CCsJokv3BfO6WhyVG2FFoOoRXWiLhiDbswUUhT1TF-Qk2KbAVXQJH5WLooVaehCLE6fK_Ey-bJk61nESNCvFDr8/s1600/form-bg.gif') no-repeat; width:306px; height:151px; padding:10px 0 0 70px; margin:0 auto; text-align:left;} #cont form h3{color:#fff; margin:40px 0 10px 10px; padding:0; font-size:22px; font-weight:normal;} .txt-news{ background:#f8f8f8; width:170px; float:left; padding:3px 5px; border:1px solid #e9e9e9; color:#777; height:17px;} .btn-news{ background:#656565; border:1px solid #333; color:#fff; padding:3px 5px;height:26px;} #cont p{ font-size:10px; margin:5px 0; font-weight:bold; color:#000;} #cont h4{ font-size:20px; font-weight:bold; } .big-fb{ background:url() no-repeat; width:66px; height:66px; float:left; margin: 0 30px 0 100px;} .big-tw{ background:url() no-repeat; width:66px; height:66px; float:left; margin: 0 10px;}
3. Selanjutnya cari </body> letakan kode berikut tepata di atas kode </body>
   

   <div id='popupContact'>
   <a id='popupContactClose'><img alt='Close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDU9EP-j7Kg4XBtHIjHdgS9GQKxzVuZ9WkPlewb1QQaPMpAEBVXRYoQFnwrKlxyNT7hYYdbsXCvQNe0vlT5GXjptPPrcODAzfr9g0fXZkviI3BvAr6R8Z8cERe5BsJrc8AU0LHOjFdr0/s1600/SexyClose.png'/></a>
   <div id='cont'>
   <h1>CEPETAN BURUAN !!!!!!!! DAN DAPATKAN GRATIS UPDATE HARIAN</h1>
   <h2>(Jangan lewatkan posting harian kami dari E-mail Anda)</h2>
   <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=p4nt3k&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=520&apos;);return true' target='popupwindow'>
   <h3>Ambil Berita Terbaru</h3>
   <input class='txt-news' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter alamat email anda&apos;;}' onfocus='if (this.value == &apos;Enter alamat email anda&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter alamat email anda'/>
   <input name='uri' type='hidden' value='pant3k'/>
   
   <input name='loc' type='hidden' value='en_US'/>
   <input class='btn-news' type='submit' value='Kirim'/>
   <div style='clear: both;'/>
   </form>
   <p>(Jangan khawatir Layanan didukung oleh Google, kita mengambil privasi dengan sangat serius, Email Anda tidak akan dibagi. Dan Anda dapat berhenti berlangganan setiap saat)</p>
   <h2>Periksa update bulanan kami dan <a expr:href='data:blog.homepageUrl'>Penawaran Gratis</a></h2>
   <p>(Hosting review, domain gratis, gratis SEO pelatihan, setup Free Website)</p>
   <div id='fb-root'/>
   <script>(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
   fjs.parentNode.insertBefore(js, fjs);
   }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
   <div class='fb-like' data-send='true' data-show-faces='false' data-width='400' expr:data-href='data:blog.homepageUrl'/>
   
   </div>
   </div>
   <div id='backgroundPopup'/>

   Ganti teks yang berwarna biru dengan link subscription yang didapat dari feedburner misalnya link subscription punya saya "http://feedburner.google.com/fb/a/mailverify?uri=p4nt3k" cukup anda ganti link ID belakannya saja. Sedangkan uraiannya anda ganti dengan selera anda
4. Terakhir cari </head> masukan kode berikut tepat diatas kode </head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>    <script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript">      var popupStatus = 0; //this code will load popup with jQuery magic! function loadPopup(){     //loads popup only if it is disabled     if(popupStatus==0){         $("#backgroundPopup").css({             "opacity": "0.7"         });         $("#backgroundPopup").fadeIn("slow");         $("#popupContact").fadeIn("slow");         popupStatus = 1;     } } //This code will disable popup when click on x! function disablePopup(){     //disables popup only if it is enabled     if(popupStatus==1){         $("#backgroundPopup").fadeOut("slow");         $("#popupContact").fadeOut("slow");         popupStatus = 0;     } } //this code will center popup function centerPopup(){     //request data for centering     var windowWidth = document.documentElement.clientWidth;     var windowHeight = document.documentElement.clientHeight;     var popupHeight = $("#popupContact").height();     var popupWidth = $("#popupContact").width();     //centering     $("#popupContact").css({         "position": "absolute",         "top": windowHeight/2-popupHeight/2,         "left": windowWidth/2-popupWidth/2     });     //only need force for IE6        $("#backgroundPopup").css({         "height": windowHeight     });     } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){     if ($.cookie("anewsletter") != 1) {            //centering with css         centerPopup();         //load popup         loadPopup();        }            //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>
   
   Script yang bertulisan { expires: 7 } menujukan jumlah nilai hari, dengan mengatur nilai 7 menjadi nilai lain misalnya 6 maka Pop-up akan mucul lagi pada hari ke 6.
5. Langkah terakhir Klik Save Template
   
                                                                                                       sumber donorilmuDotCom