» » » Membuat Facebook Like Popup dengan jQuerry

Membuat Facebook Like Popup dengan jQuerry

,
Alhamdulillah,setelah sekiam lama ngga update nih blog,sekarang bisa juga,masalahnya pelajaran no.1 yg harus di kerjakan hehehe...

OK kali ini saya akan Update mengenai Membuat Like Facebook Popup dengan jQuery, Popup ini sangat keren,karena dari segi tampilan memang mirip dengan Facebook,jadi Popup ini seperti asli dan benar-benar gadget dari Facebook. Dalam Popup ini mempunyai banyak fitu salah satunya fitur timing dan pemilihan gambar.Demonya bisa anda lihat sendiri di blog saya ini.

Ok langsung saja tanpa basa basi langsung saja ke tahap cara membuatnya,FOLLOW ME!


  1. Pertama pergi ke Blogger Dashboard > Edit HTML
  2. Untuk Menjaga-jaga agar Template anda tidak Rusak Download Template anda terlebih dahulu.
  3. Setelah itu Klik Expand Widget
  4. Cari Kode berikut di Template blog anda
           </body>
     5. Lalu taruh kode beriku tepat DIATASNYA!


<!-- gtips-trick.blogspot.com Likebox Pro FBFan Code Start -->
<style>#fblikepop {
    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}
#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}
.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}
#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
 /* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}
#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}
#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}
#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}
#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}
#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}
#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}
#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="btsnts",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="02",
 kakinetworkdotcom01time="15",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="https://popupers.googlecode.com/files/popupers.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- gtips-trick.blogspot.com Likebox Pro FBFan Code End -->


 Note:

  • Ganti Kode "btsnts" dengan alamat Fanspage anda,di ambil hanya alamat setelah Facebook.com
  • Untuk "Join us at Facebook!" anda bisa menggantinya sesuai dengan keinginan anda.
  • Untuk kode "02" adalah gambar banner Join facebook yg bisa anda ganti,pilihannya ada 1,2,3 dan 4. Gambar bisa di lihat di bawah NOTE ini.
  • Sedangkan "15" adalah Time atau Waktu untuk Popup hilang.

Skin 01

Skin 02

Skin 03

Skin 04




OK setelah itu Save Template,dan tara! Selesai deh Tips dan Trick kali ini,semoga bermanfaat buat semua!

Baca Juga 




Subscribe to receive free email updates:

0 Response to "Membuat Facebook Like Popup dengan jQuerry"

Post a Comment

Subscribe to: Post Comments (Atom)