Cara membuat Widget Facebook Like Dengan Pop-Up JQuery

Posted at 03.04 | in widget

Facebook memiliki banyak sekali widget-widget yang lain dan penulis juga memiliki satu lagi widget mengagumkan untuk para visitor/pembaca setia blog saya ini dan itu dilengkapi dengan widget yang sangat mengagumkan seperti yang anda lihat pada gambar di atas. Widget ini memiliki tombol Tutup dengan timer 20 detik, setelah 20 detik widget ini akan tersembunyi secara otomatis. Desain itu sangat unik dan sangat profesional untuk setiap blogger.

Masuk ke akun Blogger > Dashborad

kemudian klik Template
Biasakan membackup template terlebih dahulu sebelum melakukan perubahan di blog anda
Sekarang klik Edit HTML > Proceed > Expand Widget Templates
Tekan Ctrl + F untuk memudahkan pencarian dan cari tag/kode </body>.
Pastekan kode di bawah ini sebelum kode </body>

<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="eyang anom",
 kakinetworkdotcom01title="Join Us On Facebook!",
 kakinetworkdotcom01skin="04",
 kakinetworkdotcom01time="20",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/fbjqureywidget%28www.widgetgenerators.blogspot.com%29.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Catatan :

Ganti nama eyang anom dengan nama pengguna facebook anda.

SimpanTemplate dan lihat hasilnya...Happy blogging !

Original source

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.04

Anda menyukai postingan di atas? Silahkan di share..!

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

2 komentar:

kk ps12 April 2013 pukul 16.42
Script nya saya simpan dulu kang.klo di simpan di gadget HTML/Javascript bisa ngga ya?trimakasih
BalasHapus
Balasan
jalupangna12 April 2013 pukul 17.58
@Agus kompac dengan senang hati kang, scriptnya bisa juga di simpan di gadget HTML/javascipt. silahkan di coba kang agus.
BalasHapus
Balasan

Tambahkan komentar

11 April 2013

Cara membuat Widget Facebook Like Dengan Pop-Up JQuery

Jalupangna

2 komentar:

Popular Posts

Blog Archive

Label

Recent Comment

Followers