Form berlangganan melayang

Form berlanggan, widget ini cukup populer digunakan para blogger dan modelnya pun banyak yang menarik, namun bagi blogger pemula widget ini banyak belum efektif atau diminati oleh pengunjung blog untuk berlangganan artikel diblog yang kita miliki, untuk itu kita bisa mensiasati agar widget ini bisa langsung dilihat oleh pengunjung blog dengan cara membuat "Pop-up" cara ini memang terkesan agak memaksa tapi tidak ada salahnya untuk dicoba.

sebelum memulai, disarankan baiknya anda BackUp dulu template anda.

1. Login Blogger.com, Klik Template > Edit HTML
2. Tekan Ctrl+F cari kode ]]> copy kode berikut letakan tepata di atas kode ]]>
   /*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/AVvXsEjuhVBFq-aVmddd9rsSsToYdp0qiEyigc0IfzRce6ITgu0N5ZKSmNhD0M-eBa2fDSJjcYHor78apykHPWgzknEugCeK3-suIJCcPtaEDeY65oiLRZ4CeK_nct0q1c-ONG6EzLFnw_G8-dY/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  letakan kode berikut tepata di atas kode
   

   <div id='popupContact'>
   <a id='popupContactClose'><img alt='Close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_Uw1sKACMfKuQ2TquxYhZ2dVzk1ZujFuLAej4YCRbMfjEV0UldesbQkCtJshIWm4THcwaKlT3NOZf4A4JkfxnLMVA0k1cun9v3teAO9bTHxBdyzbGz8-FnVFRIphFzKBzX1W0jpB_yw/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=idfeed&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='idfeed'/>
   
   <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 "http://feedburner.google.com/fb/a/mailverify?uri=idfeed" cukup anda ganti link ID belakannya saja. Sedangkan uraiannya anda ganti dengan selera anda
4. Terakhir cari masukan kode berikut tepat diatas kode
   <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