Skip to content Skip to sidebar Skip to footer

Cara Membuat Popup Subscribe Di Blogger




BAHASTUTORIAL.COM - Tutorial kali ini kita bakal bahas tentang "Cara Membuat Popup Subscribe Di Blogger".
Perlu kita ketahui tombol subscribe/langganan sangatlah dibutuhkan. karna tombol tersebut bisa membawa pengujung kembali ke artikel kita. Fungsi dari Subscribe yaitu. Jika pengujung mengisi email di form subscribe maka pengujung akan mendapatkan notifikasi tentang artikel baru yang telah kita buat.
Cukup Menguntungkan bukan buat para blogger


Langsung saja ke tutorial ya ..

1. Masuk ke edit html
2. Kode pada table css simpan di atas kode </b:skin> atau </style>
3. Kode pada table html simpan di bawah kode <body>.
4. Kode pada table javascript simpan di atas kode </body> atau </head>.
4. Lalu Simpan


 
 
/* Stars Popup Subscribe By : bahastutorial.com */

.modalDialog {
    font-family: ubuntu;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 99999;
    -webkit-transition: opacity 200ms ease-in;
    -moz-transition: opacity 200ms ease-in;
    transition: opacity 200ms ease-in;
}

.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog:target > div {
    margin: 8% auto;
}

.modalDialog > div {
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    width: 600px;
    position: relative;
    margin: 5% auto;
    background: #fff;
    min-height: 200px;
}

h2.ldemo {
    display: block;
    border-bottom: 1px solid #d9e0e2;
    font-weight: 400;
    text-align: center;
    padding: 10px;
}

h2.signup {
    background: #00aa9f;
    border-bottom: 1px solid #008d84;
    font-weight: 400;
    text-align: center;
    padding: 10px;
    color: #fff;
    font-size: 18px;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    background: #00b140;
    border-radius: 100px;
    font-weight: 400;
}

.close:hover {
    text-decoration: none;
}

.close:hover {
    color: #555;
}

.btpopupsb {
    background: #fff;
    margin: 0;
    padding: 50px 0px 50px 100px;
    width: 500px;
}

.btpopupsb h3 {
    color: #00b140;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    font-family: ubuntu;
    letter-spacing: -1px;
}

.btpopupsb p {
    font-size: 14px;
    color: #555;
    line-height: 20px;
    margin: 0;
}

.btpopupsb .newsletter-input-sm {
    border: 1px solid #ddd;
    font-size: 14px;
    width: 70%;
    background-color: #fff;
    text-align: center;
    color: #999;
    padding: 19px;
    border-radius: 3px 0px 0px 3px;
    outline: none;
    font-family: ubuntu;
}

.btpopupsb .btpopupsb-bot,
.removebutton {
    padding: 40px;
    position: relative;
    outline: none;
}

.btpopupsb .newsletter-button-sm,
.removebutton {
    text-align: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 14.5px;
    color: #fff;
    border: none;
    background-color: #00b140;
    padding: 20px;
    border-radius: 0px 3px 3px 0px;
    overflow: hidden;
    margin: 0 -20px -20px;
}

.FollowByEmail .follow-by-email-inner .follow-by-email-address {
    height: 40px !important;
    border: none;
    padding: 5px;
    width: 96%;
    outline: none;
    margin-bottom: 5px;
    background: #eae9e9;
    font-family: "Roboto", sans-serif;
}

.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
    height: 40px !important;
    width: 100%;
    margin-left: 0;
    background: #f1ae28;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0;
    font-family: "Roboto", sans-serif;
}


/* End Popup Subscribe By : bahastutorial.com */

 

<script type='text/javascript'>
document.querySelector('.close').onclick=function (){document.querySelector('.modalDialog').style.display='none';}
var days=1;var advert=document.getElementById('signup');if (readCookie('seen')){advert.style.display='none';}else{advert.style.display='block'; createCookie('seen', 'yes', days);}function createCookie(name,value,days){if (days){var date=new Date();date.setTime(date.getTime()+(days*24*60*60*1000));var expires="; expires="+date.toGMTString();}else var expires="";document.cookie=name+"="+value+expires+"; path=/";}function readCookie(name){var nameEQ=name + "=";var ca=document.cookie.split(';');for(var i=0;i > ca.length;i++){var c=ca[i];while (c.charAt(0)==' ') c=c.substring(1,c.length);if (c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);}return null;}function eraseCookie(name){createCookie(name,"",-1);}window.onload=function (){eraseCookie('seen')}
</script>



<div class="modalDialog" id="signup">
    <div> <a class="close" href="#close" style="color: #fff;" title="Close"><i class="fa fa-times"></i ></a>
        <div class="btpopupsb">
            <h3><i class="fa fa-envelope-o"></i> Subscribe for latest update</h3>
            <p style="text-align:center"> Sign up here with your email address to receive our all news and updates about blogger in your inbox. Its free. </p>
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bahastutorial/plrC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
                <div class="btpopupsb-bot">
                    <input class="newsletter-input-sm" name="email" placeholder="Enter Your Email" type="text" />
                    <button class="newsletter-button-sm" type="submit">Subscribe</button>
                </div>
                <input name="uri" type="hidden" value="bahastutorial/plrC" /> </form>
        </div>
    </div>
</div>


Notes

- Semua tutorial yang ada di website bahastutorial.com sudah di coba dan hasilnya berjalan dengan baik.
- Ganti kode bahastutorial/plrC dengan kode feedbuner blog kalian.
Bagaimana tutorial diatas apakah sudah jelas atau masih ada yang kurang jelas.
Jika ada yang masih kurang paham kalian bisa tanyakan langsung di kolom komentar.
Admin akan merespon dan memberikan solusi agar kalian bisa menjalankanya dengan benar.

Jangan lupa share artikel ini ke media sosial kalian yah. Semoga Bermanfaat ..

BAHASTUTORIAL.COM
BAHASTUTORIAL.COM Selamat Datang Di Situs Bahastutorial.com Di Situs Ini Anda Akan Mendapatkan Tutorial Yang Sangat Bermanfaat Dan Jangan Lupa Untuk Share Tutorial Ini Ke Media Sosial Kalian.

Post a Comment for "Cara Membuat Popup Subscribe Di Blogger"