Blogger Android 21™: Cara membuat Like Facebook Versi 2

Kamis, 19 Juni 2014

Cara membuat Pop Up Facebook V2

Cara pembuatan:

Copy kode berikut ini kemudian paste kedalam widget HTML/Javascript.

<style type="text/css">
* html #popupfacebook{position:absolute}
#popupfacebook{display:block;top:0;left:0;width:100%;height:100%;position:fixed;background-image:url(https://lh3.googleusercontent.com/-rUv4L_9nz-8/T9sfSSJaZNI/AAAAAAAACf0/ETEgFKt-rR4/s128/popupideasopacity0.5.png);overflow-y:auto;z-index:999999;margin:0}
#facebookpopup{background-color:#000;overflow:none;z-index:999999}
.facebookpopup{width:290px;height:300px;position:fixed;top:45%;left:50%;margin-top:-200px;margin-left:-200px;border:10px solid #52e052;z-index:999999;padding:20px}
#popup-title{background:#52e052;color:#000;font-size:20px!important;font-weight:700;width:324px;line-height:25px;text-align:center;font-family:Arial!important;float:left;margin:0 -27px 10px;padding:10px}
.likefaceblogevolutions{width:280px;height:200px;border-radius:3px;position:relative;background:#E9FBE9;margin-top:60px;padding:0 10px 15px 0}
.likefaceblogevolutions,.likefaceblogevolutions:before,.likefaceblogevolutions:after{background:#E9FBE9;border:1px solid #52E052}
.likefaceblogevolutions:before,.likefaceblogevolutions:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}
.likefaceblogevolutions:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #52E052}
</style>

<div id="popupfacebook">
<div id="facebookpopup" class="facebookpopup">
<h3 id="popup-title">Like Fanspage Kami</h3>
<div class="likefaceblogevolutions">
<div style="height:200px;overflow:hidden">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ffilannime&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
<br />
<center style=" float:left; font-size:14px;cursor:pointer;" ><a style="background: #52E052; padding:5px 5px 10px 5px; font-size:12px; color:#000; text-decoration:none;" onmouseup="document.getElementById('popupfacebook').style.display='none'">[X] CLOSE</a></center>
<center style="float:right;"><a target='_blank' style="font-size:xx-small; color:#52E052; text-decoration:none;" href="http://sahabatfilannime.blogspot.com/2014/06/cara-membuat-pop-up-facebook-yang-unik.html">Get this widget</a></center>
</div>
</div>

Keterangan:

Ganti filannime dengan ID facebook atau fanspage anda.

3. Langkah terakhir klik Simpan.

Selesai sudah untuk menerapkan Pop Up Facebook Like Box With Lightbox Effect kedalam blog dan apabila nanti pengunjung datang kedalam blog anda maka widget pop up facebook like box ini siap menyapa setiap pengunjung yang datang dan bisa klik tombol close untuk keluar maupun klik Like apabila suka untuk mengikuti update terbaru dari fanspage tersebut.

[X] CLOSE Get this widget

RULES BERKOMENTAR:
1. Berkomentarlah dengan bijak dan sopan karena pembaca Blogger Android ini hampir semua umur.
2. Jika akan bertanya melalui komentar, mohon baca setiap komentar yang telah ada terlebih dahulu agar tidak terjadi pertanyaan ganda, biar saya juga tidak menjawab secara ganda.
3. Mohon maaf jika saya tidak mampu menjawab semua komentar pembaca, karena keterbatasan pengetahuan saya.
4. Segala komentar yang mengandung konten menjurus ke sara, pornografi, iklan berlebihan dan/atau konten sensitif lainnya, akan dihapus tanpa pemberitahuan terlebih dahulu.