Cara Membuat Popup Berlangganan di Blog

Assalamu'akum Wr.Wb

 Pada Tutorial hari ini , SIA27 akan memberikan Tutorial "Cara Membuat Popup Berlangganan/Feed Burner di Blog"

Sebernarnya ini tidaklah terlalu penting tapi bagi kalian yang sedang Membangun Blog mungkin tidak ada salahnya untuk melakukan tutorial ini..

Inilah Background Popup Berlangganan Blog SIA27 :v

Nah jika kalian tertarik untuk membuatnya juga , yuk kita mula tutor nya :D

Syarat : Sudah Mendaftar di Feed Burner

Step By Step :

1. Masuk ke Akun Blogger kalian
2. Masuk Dashboard -> Layout (Tata Letak) -> klik "Tambahkan Gadget" 
3. Pilih HTML/JavaScript
4. Silahkan masukan kode dibawah ini

<script type="text/javascript">
    function wg_style_v4_popup(){document.getElementById('wg-style-v4-popup-main').style.display='block'}setTimeout('wg_style_v4_popup();',4000);
    </script>
    <style type="text/css">
    * html #wgstylepopupdiv {
    position:absolute;
    }
    #wgstylepopupdiv {
    z-index:999;
    display:block;
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:fixed;
    background-image:url(http://3.bp.blogspot.com/--QwfQi4MAE4/U0a5LnWN_SI/AAAAAAAAHic/r48Jeq7Vlzc/s1600/wgspir.png);
    overflow-y:auto;
    margin:0;
    }
    .wgstylepopup {
    width:619px;
    height:475px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-237.5px;
    margin-left:-309.5px;
    }
    #wgstylepopup {
    overflow:none;
    background-image:url(https://4.bp.blogspot.com/-e2507JTFuio/V9aU_PZ5fjI/AAAAAAAAAyI/ytwdm7fW7yYSIDraA5yLlz9Ev3lNp_jywCPcB/s1600/Final.Feedburnersia27.png);
    background-repeat:no-repeat;
    }
    form#wgstylepopup {
    display:block;
    margin:0;
    }

    form#wgstylepopup #wgfield {
    position:absolute;
    top:297px;
    left:352px;
    width:250px;
    font-size:16px;
    border:none;
    background:transparent;
    padding:10px;
    }

    form#wgstylepopup #wgbutton {
    position:absolute;
    left:352px;
    top:350px;
    width:249px;
    height:42px;
    border:none;
    background:transparent;
    }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    /*<![CDATA[*/
    html {overflow-x:auto; overflow-y:hidden;}
    /*]]>*/
    </style>
    <![endif]-->
    <div id="wg-style-v4-popup-main" style="display:none;">
    <div id="wgstylepopupdiv">
    <div id="wgstylepopup" class="wgstylepopup">
    <center style="color:#000;cursor:pointer;float:right;margin-right:10px;margin-top:-20px;" onmouseup="document.getElementById('wgstylepopupdiv').style.display='none'">
    <img src="http://1.bp.blogspot.com/-d793Rqqvmwk/U0a5tz4JtMI/AAAAAAAAHis/BWv62c3FA6M/s1600/closebtnwg.png"/>
    </center>
    <form id="wgstylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TutorialDanTipsBermanfaat', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
    <input type="hidden" value="SeputarInformasiDanAplikasi" name="uri"/>
    <input type="text" id="wgfield" name="email" value="Masukkan Email disini..." />
    <input type="hidden" name="loc" value="en_US" />
    <input type="image" src="http://3.bp.blogspot.com/-380kiAZ85g0/U0a58SZ7-0I/AAAAAAAAHi0/kusJh7kaSOg/s1600/wgtnn.gif" id="wgbutton" />
    </form>
    </div>
    </div>
    </div>
 <style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}

@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}

</style>

CATATAN:

Silahkan kalian masukan id Fedd Burner kalian di Tulisan berwarna MERAH

Silahkan kalian masukan Background kalian di Tulisan berwana BIRU dan disarankan resolusi background sama

Background boleh di edit atau modifikasi :)

Judul boleh dikosongkan

    5. klik "Simpan" dan Selesai :D


Bagaimana ?? Mudah mukan??


Baik sekian Tutorial dari SIA27
Jika ada masalah atau ada yang bingung silahkan Berkomentar :D

Wasslamu'alaikum Wr. Wb

Artikel Terkait