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..

DEMO

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)

2. Masuk ke Tata Letak » Tambah Gadget » HTML/JavaScript Kemudian letakkan kode berikut ini:

<style type='text/css'>
#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>

Silahkan anda modifikasi sendiri sesuai keinginan anda. bisa juga diisi dengan widget lainya, seperti Facebook Like Box ataupun Twitter Follower.
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.

Judul: Widget Kotak Berlangganan Muncul dari Atas; Ditulis oleh Unknown; Rating Blog: 5 dari 5