Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Pop Up Facebook Like Box With Lightbox Effect

Pop Up Facebook Like Box With Lightbox Effect Pop Up Facebook Like Box With Lightbox Effect - Untuk melengkapi postingan sebelumnya yang sudah ada mengenai facebook like box untuk merubah tampilan fanspage facebook yang terdapat didalam blog yang diterangkan pada artikel yang berjudul cara modifikasi facebook like box pada blog, maka kini seperti tema yang sama pula namun dengan penempatan widget yang berbeda karena pada fanspage facebook like box ini menggunakan style pop up yang khalayak seperti pada umumnya pop up facebook like box dan dengan efek lightbox atau warna gelap disekeliling widget. Cara memasang pop up facebook like box inipun masih sama seperti pada tutorial sebelumnya, yakni hanya dengan menambahkan kode yang ada didalam blockquote kedalam widget HTML/Javascript yang terdapat pada elemen tata letak blog. Untuk lebih jelasnya berikut tutorial cara memasang Pop Up Facebook Like Box With Lightbox Effect kedalam blog.

1. Login seperti biasa ke akun blogger.
2. 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">Get Update Article Via Facebook</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%2Fandestyle&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://mas-andes.blogspot.com/2013/08/pop-up-facebook-like-box-with-lightbox.html">Get this widget</a></center>
</div>
</div>
Keterangan:
Ganti andestyle 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.

Berlangganan artikel via email

55 Response to "Pop Up Facebook Like Box With Lightbox Effect"

Pertamax mas...mampir lagi dengan tampilan yang lebih fresh

Balas

wah petromaxnya udah telat nih hehe...

Balas
avatar
Anonymous

keren banget yah mas Andes tampilan Pop Up Facebook Like Box With Lightbox Effectnya, makasih yah udah share :)

Balas
avatar
Anonymous

kereenn...

Balas
avatar
Anonymous

Pasti keren ... :)

Balas

Ada yg baru di suasana idul fitri. Met lebaran aja...maafin indah ya mas

Balas

wohohow .. abis makan opor langsung tancap gas dengan tutor keren nih ...
tap mantap ..top mantop .. tip yu intip hehe

Balas

masih ada lilin mas hehe

Balas
avatar
Anonymous

ko saya belum pasang yg kaya gne ya hehe :D

Balas
avatar
Anonymous

Kalo soal CSS sy angkat tangan deh sama admin blog ini... setiap postingan pasti selalu yg baru.... ijin test drive Mas Andes...

Balas
avatar
Anonymous

sugoi, ada lightbox effect nya. ^_^

Balas

Belum tahun baru cina jadi ga ada lilin

Balas

Minal aidhin wal faidzin yah Mas @Andes bila selama ini
ada kata komentar atau lainya dari saya yang tak mengenai
sanubari Mas @Andes mohon buka pintu maaf yang selebar-lebar nya

Wah Artikel yang oke nikh Mas..semoga dengan artikel ini
Tampilan blog saya dan sobat lainya bisa keren dan lebih seo
Sukses yah Mas..? terima kasih
.f_karrysta - http://karristaent.blogspot.com

Balas

Yang ke dua siapa, ?? patromak nya di ambil

Balas

Di jamin bingung... soalnya widget buatan mas andes keren2 semua.. :)

Balas

kayak estafet aja hehe...

Balas

opor ayam ketupatnya bikin pikiran makin fresh dan nambah stamina hehe...

Balas

kalau bingung pegangan mbak biar nggak jatuh hehe...

Balas

mantep mas, sudah pernah saya terapkan di blog saya yang lain, hasilnya lebih banyak yang like :)

Balas

kalau dipasang di belog mamang pas kayaknya nih....

Balas

pakai obor juga bisa ya

Balas

pasti belognya jadi mantap atuh mang

Balas

hadir siang mas andes :)

Balas
avatar
Anonymous

hmm.. info yang menarik gan. bisa membuat blog atau website kita terlihat lebih keren. namun saya urung memasangnya karena mempertimbangkan berat loadnya.

Balas

silahkan dicoba Mang

Balas

apa kabar kang bro ?? ada tutor baru lagi nih rupanya bro,,,

Balas

saya mau megangin ko,,,,,

Balas

met malem gan, kunjungan malam nih.. oya makasih buat script iklan mirip google-nya udah dipasang di blog ane tapi agak dimodif dikit.

Balas

Selamat malam mas, kembali berkunjung sambil menikmati roti bakar ala Libanon buatan Kang Dede wkwkwk

Balas
avatar
Anonymous

wihh... mantap..langsung praktek, bos...

Balas

mangga atuh mang dicobian heula hehe...

Balas

iya kang Dede kalau baru gini kan masih fresh...

Balas
avatar
Anonymous

wah kalau yang keren kaya gini banyak yang lansung praktek, mantap mas Andes :)

Balas

sementara saya komentar, mohon maaf lahir batin ya mas, mohon di maafken kesalahan saya

Balas

Keren mas, Widgetnya.. Makasih atas tutornya ya mas...

Balas

Wah keren loh mas
Seakan menyala ya tampilan widgetnya :)

Balas

Lampu teplok juga ok tuh :)

Balas

Besok tinggal share opor ayam ding mas :)

Balas

Nah ini dia maksud nya :)

Balas

Manteb bang widgetnya..

Salam kenal bang.

Balas

Saya Cuman Mau Mengucapkan.

Minal aidzin walfaidzin.
Mohon Maaf Lahir dan Batin.

Balas
avatar
Anonymous

mantap kreatip gannn!!! :)

Balas

Widgetnya menarik sekali, tapi sayang, banyak pengunjung blog tidak menyukai popup. :D

Balas

tapi kasihan yang berkunjung ke belog mamang nanti ketutup postingannya .. ndak ya

Balas

kalau baru masih legit kang

Balas

kang dede pegang apanya hayoo?

Balas

izin bungkus mas,,,,
ntar kapan" saya terapkan

Balas
avatar
Anonymous

wahhh keren bang, dark :D

Balas

Keren gan, apa gak bikin loading blog makin berat ?,

nanti akan saya Praktekan. :D

Oh ya, saya sudah Follow blog mas . Folboack juga ya.
http://danforblogg.blogspot.com/

Balas

pengen nyoba yang ini mas, kayaknya keren

Balas

tipsnya menarik, lebih simple cara pemasangannya pada blog dibandingkan dg yg kebanyakan harus pasang kode di html blog, yg ini cuma digadget.

sy sudah coba tp ada teks yg hilang "get artikel via facebook"

ini screen capturenya : http://4.bp.blogspot.com/-wgho60tCUs0/Ujplhe_Y9EI/AAAAAAAAA20/Q6nNQewv-BU/s1600/boxlike.png

blog sy ini : http://nobelkurniadi.blogspot.com/

mohon solusinya mas andes,

Balas

itu kesalhannya pada template blog pak kurniadi sudah terdapat terdapat kode .widget h3{display:none} sehingga widget h3 tidak di munculkan. solusinya kode tersebut bisa di hapus.. atau bisa juga dengan mengganti kode yang saya posting di atas, seluruh kode h3 silahkan ganti menjadi h4 ato h5 sesuaikan saja.

Balas

Terimakasih mas artikelnya menarik, Izin pasang di blog saya ya http://fauzanulhasan.blogspot.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Pop Up Facebook Like Box With Lightbox Effect" ini bermanfaat, share ke jejaring sosial.
Konversi Kode