Cara membuat Widget Facebook Like Dengan Pop-Up JQuery

 

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.

View Demo

• 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