Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Sunday, September 24, 2017

Pop Up Facebook Like Box With Lightbox Effect


Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<style type='text/css'>
#PopFace { position:absolute; display:block; top:0px; left:0px; width:100%; height:100%; position:fixed; background-color:rgba(0, 0, 0,.8); margin:0; overflow-y:auto;z-index:999999;}
#PopBook { background-color: #ecf0f1; overflow:none; z-index:999999;}
.PopBook { width:290px; height:300px; position:fixed; top:45%; left:50%; margin-top:-200px; margin-left:-200px; border: 10px solid #3b5998; padding: 20px;z-index:999999;border-radius:4px;}
#PopTitle {background:#3b5998;color:#fff;font-size:20px !important trebucet ms;font-weight:bold;width:324px;margin: 0 -27px 10px -27px;padding:10px;line-height:25px;text-align: center; float:left;}
.anarchyta { width: 280px; height: 200px; border-radius: 3px; position: relative; background: #3b5998; padding: 0px 10px 15px 0; margin-top:60px; }
.anarchyta,.anarchyta:before,.anarchyta:after { background: transparent; border: 1px solid #3b5998; }
.anarchyta:before,.anarchyta:after { position: absolute; content: ""; bottom: -3px; left: 2px; right: 2px; height: 1px; border-top: none; }
.anarchyta:after { left: 4px; right: 4px; bottom: -5px; box-shadow: 0 0 2px #3b5998; }
.close {background: #3b5998; padding:5px 5px 10px 5px; font-size:12px; color:#ecf0f1; text-decoration:none;border-radius:4px 4px 0 0;}
</style>

<div id='PopFace'>
 <div class='PopBook' id='PopBook'>
  <h3 id='PopTitle'>Get Update Articel Via Facebook</h3>
 <div class='anarchyta' style='border-radius:4px;'>
  <div style='height:200px;overflow:hidden;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FFACEBOOK_ID&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false' style='border:none; overflow:hidden; width:292px; height:258px;'></iframe>
  </div>
</div>
<br />
<span style='float:left;font-size:14px;cursor:pointer;'><a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CLOSE</a></span>
 </div>
</div>
Keterangan:
  • FACEBOOK_ID  -  Gantikan dengan Facebook ID anda.
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la balasannya
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Pop Up Facebook Like Box With Lightbox Effect