Cara Membuat PopUp Subscribe Box di Blog
6/10/2018
Subscribe Box adalah sebuah widget berbentuk kotak agar pengunjung bisa berlangganan di blog kamu. Widget tersebut memiliki fungsi untuk memberikan akses notifikasi kepada para pembaca blog kamu agar mereka dapat melihat artikel terbaru yang baru saja di posting.
Widget subscribe ini memudahkan pengunjung setiamu untuk mendapatkan informasi postingan terbaru tanpa melihat blog secara berulang-ulang.
Oleh karena itu saya akan memberikan Cara Membuat PopUp Subscribe Di Blog sebelumnya saya telah membagikan Cara Simple Membuat Privacy Policy Di Blog.
Tampilannya seperti ini:
Tampilannya sih cukup sederhana tapi ini sangat keren bagi saya.
Langsung saja menuju ke caranya
Cara Membuat PopUp Subscribe Box Di Blog
- Login ke akun Blogger
- Pilih Tata Letak/Add Gadget/HTML/Java Script
- Copy kode di bawah ini
<link rel=”stylesheet” href=”https://sites.google.com/site/lostsectorsite/css-lostsector/lostsector-popup-email-subscribe.css” />
<style>
#subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color: #666; height: 400px}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited { text-decoration: none}
.box-title { color: #F66303; font-size: 20px !important; font-weight: bold; margin: 10px 0; border: 1px solid #ddd; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; line-height: 25px; font-family: arial !important}
.box-tagline { color: #999; margin: 0; text-align: center}
#subs-container { padding: 35px 0 30px 0;position: relative}
a:link, a:visited {border: none;}
.demo {display: none}
</style>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js’></script>
<script src=”http://lostsector-javascript.googlecode.com/files/pupup-subscribe-lostsector.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
if (document.cookie.indexOf(‘visited=true’) == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = “visited=true;expires=” + expires.toUTCString();
$.colorbox({width:”390px”, inline:true, href:”#subscribe”});
}
});
</script>
<!– This contains the hidden content for inline calls –>
<div style=’display:none’>
<div id=’subscribe’ style=’padding:10px; background:#fff;’>
<style> .home-featured-right {background: url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/dashes-bg.png) #d05353;border: 5px solid #fff; font-size: 16px;margin: 0px; width: 320px;font-family: calibri}
.home-featured-right,.home-featured-right p,.home-featured-right h4.widgettitle { color: #fff; text-shadow: #a64242 -1px -1px; text-align: center}
.home-featured-right p { font-size: 16px; margin-bottom: 20px}
.home-featured-right .widget { margin: 35px;}
.home-featured-right h4.widgettitle {font-size: 26px;margin-bottom: 20px}
.home-featured-right input[type=text] { -moz-box-shadow: inset 0 1px 2px 1px #eee; -webkit-box-shadow: inset 0 1px 2px 1px #eee; background: #fff url(http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-icon.png) no-repeat 16px 15px; border-bottom: none; border-left: 1px solid #963c3c; border-right: none; border-top: 1px solid #963c3c; box-shadow: inset 0 1px 1px 1px #eee; color: #000; font-family: Verdana, Arial, Tahoma, sans-serif; font-size: 12px; padding: 14px 15px 14px 45px; width: 180px}
#home-featured .home-featured-right input[type=submit] {background: url (http://demo.studiopress.com/balance/wp-content/themes/balance/images/email-button.png) no-repeat !important; border: none; font-size: 0; height: 28px; margin: 0 0 0 15px; line-height: 0; text-indent: -9999px; width: 26px}
#email-news-subscribe .email-box {padding: 5px 10px; font-family: “Arial”,”Helvetica”,sans-serif; border-top: 0;border-image: initial; height: 35px; margin-left: -20;}
#email-news-subscribe .email-box input.email{ background:#FFF; border:1px solid #dedede; color:#999; padding:7px 10px 8px 10px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; -ms-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; border-image:initial; font-family:”Arial”,”Helvetica”,sans-serif}
#email-news-subscribe .email-box input.email:focus{ color:#333}
#email-news-subscribe .email-box input.subscribe{ background:-moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background:-moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background:linear-gradient(270deg,#ffca00,#ff9b00); font-family:”Arial”,”Helvetica”,sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:white; text-shadow:#d08d00 1px 1px 0; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image:initial}
#email-news-subscribe .email-box input.subscribe:hover{ background:#ff9b00; background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00); background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#fff,endColorStr=#ebebeb); outline:0; -moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00)); background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%); -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #cc7c00; color:#FFF; text-shadow:#d08d00 1px 1px 0}
</style>
<div class=”home-featured-right”>
<div id=”enews-2″ class=”widget enews-widget”>
<div class=”widget-wrap”>
<div class=”enews”>
<h4 class=”widgettitle”>Dapatkan Artikel Terbaru Kami Gratis !</h4>
<p>Dapatkan artikel terbaru kami dikirim ke email anda. Silahkan masukkan email anda pada kolom bawah ini & tekan subscribe !</p>
<p> Your privacy and email address are safe with us!</p>
<div id=”email-news-subscribe”>
<!– Email Subscribe –>
<div class=”email-box”>
<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post”
target=”popupwindow” onsubmit=”window.openundefined’http://feedburner.google.com/fb/a/mailverify?uri=trikkerenn‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”>
<input class=”email” type=”text” style=”width: 150px; font-size: 12px;”
id=”email” name=”email” value=”Enter your email here” onfocus=”if(this.value==this.defaultValue)this.value='';”
onblur=”if(this.value=='')this.value=this.defaultValue;” />
<input type=”hidden” value=”trikkerenn” name=”uri” />
<input type=”hidden” name=”loc” value=”en_US” />
<input class=”subscribe” name=”commit” type=”submit” value=”Subscribe”
/>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!– end .home-featured-right –>
Informasi Tambahan
- Ganti trikkerenn dengan username feedburner kamu
- Pastekan semua kode di atas ke kolom yang ada
- Kalau sudah semua pencet Simpan
PopUp ini hanya muncul 1x saja, itupun pengunjung baru pertama kali mengunjungi blog kamu. Jika ingin PopUp muncul setiap sehabis reload maka hapus kode seperti di bawah ini:
<script type=”text/javascript”>
jQuery(document).ready(function(){
if (document.cookie.indexOf(‘visited=true’) == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = “visited=true;expires=” + expires.toUTCString();
$.colorbox({width:”390px”, inline:true, href:”#subscribe”});
}
});
</script>
Akhir Kata
Itulah Cara Membuat PopUp Subscribe Box Di Blog. Jika masih belum paham silahkan komen di kolom komentar dan jika menurut mu artikel ini bagus tolong share ke teman2mu
Source: www.arlinadzgn.com
Berlangganan artikel terbaru dari blog ini langsung via email.