Widget Kotak Berlangganan Muncul dari Atas
Kali ini saya akan membahas tentang cara membuat widget kotak berlangganan muncul dari atas, requestnya om Mahdi Troops , walaupun malem-malem buta gini tapi gpp mumpung belom ngntuk tapi dikit lagi bobo wwkkw. codenya/scriptnya saya dapatkan dari DT:] dan saya tambahkan kode widget kotak berlangganannya..
untuk cara pemasangannya sangant mudah. berikut cara pemasanganya:
1. Letakkan kode berikut ini di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Itu merupakan kode jQuery, jika di template anda sudah terdapat kode jQuery tersebut maka tidak usah di pasang lagi atau anda juga bisa mengganti kode yang lama dengan kode yang versi terbarunya.
(tidak boleh terdapat kode jQuery.min lebih dari satu walaupun versinya berbeda-beda)
(tidak boleh terdapat kode jQuery.min lebih dari satu walaupun versinya berbeda-beda)
2. Masuk ke Tata Letak » Tambah Gadget » HTML/JavaScript Kemudian letakkan kode berikut ini:
<style type='text/css'>Silahkan anda modifikasi sendiri sesuai keinginan anda. bisa juga diisi dengan widget lainya, seperti Facebook Like Box ataupun Twitter Follower.
#kotak-pesan {
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
left:50%;
width:300px;
margin:0 0 0 -182px;
height:auto;
padding:16px;
background-color:#E9CF5F;
border:2px solid white;
font:normal normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
}
#kotak-pesan a.close {
position:absolute;
top:-10px;
right:-10px;
background-color:#333;
font:normal bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:white;
border:2px solid white;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>
<div id='kotak-pesan'>
<b>Dapatkan Update Terbaru</b>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=IDFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify?uri=IDFEED">
<p><input type="text" valign="middle" name="email" value="Masukan Email Anda" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/>
<input type="hidden" value="NAMAFEED" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Submit" id="submit"/>
</p>
</form> <a class='close' href='#'>×</a>
</div>
<script type='text/javascript'>
//<![CDATA[
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
//]]>
</script>
untuk tulisan yang berwarna biru merupakan ID feedburner, silahkan ganti dengan ID feed burner anda
untuk tulisan yang berwarna merah merupakan nama feedburner, silahkan ganti dengan nama feedburner anda.
Sekian postingan kali ini semoga bermanfaat.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.