Widget pop up fb like box html5 dengan lightbox effect

Halo!,kethemu lagi!,bro kali ini yang nulis artikel adalah bang michael,michael nufuz diego ithu,yang biasanya nemenin gue kalo ngeblog,wokee dari pada lama2,mending langsung aja!

Michael : woy bro,kali ini blog yang amburadul ini akan share tentang "Widget pop up fb like box html5 dengan lightbox effect",sesuai namanya,widget ini adalah pop up fb like box yang akan muncul saat pengunjung blog membuka blog anda,mau kan,langsung aja

1.Login ke akun blogger ,pilih tata letak, pilih tambah gadget, pilih HTML/JAVASCRIPT (terserah di mana saja)
2.Copy dulu script berikut

<style type='text/css'> #PopFace { position : absolute; display : block; top : 0; left : 0; width : 100%; height : 100%; position : fixed; background-color : rgba(0, 0, 0, 0.9); margin : 0; overflow : hidden; z-index : 999999; } #PopBook { background-color : #ecf0f1; overflow : hidden; z-index : 999999; } .PopBook { width : 290px; height : 300px; position : fixed; top : 45%; left : 50%; margin-top : -200px; margin-left : -200px; border : #3b5998 solid 10px; padding : 20px; z-index : 999999; border-radius : 4px; } #PopTitle { background : #3b5998; color : #fff; font-size : 18px !important ; font-weight : 700; width : 324px; margin : 0 -27px 10px -27px; padding : 10px; line-height : 25px; text-align : center; float : left; } .anarchyta { width : 280px; height : 200px; position : relative; background : #3b5998; padding : 0 10px 15px 0; margin-top : 60px; border-radius : 4px; overflow : hidden; } .anarchyta, .anarchyta:before, .anarchyta:after { background : transparent; border : #3b5998 solid 1px; } .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 : 14px; font-weight:bold; color : #ecf0f1; text-decoration : none; border-radius : 4px 4px 0 0; cursor:pointer; } </style>

5.Lalu letakan kode berikut dibawah </body> (TEMPLATE -> EDIT HTML)

(GUNAKAN CTRL+F UNTUK MEMUDAHKAN PENCARIAN)

1. <div id='PopFace'>
2. <div class='PopBook' id='PopBook'>
3. <h3 id='PopTitle'>Get Update Photos Via Facebook</h3>
4. <div class='anarchyta'>
5. <div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/nufuzhollic' data-show-faces='true' data-stream='false' data-width='292'></div>
6. </div><br/>
7. <a class='close' onmouseup='document.getElementById(&#39;PopFace&#39;).style.display=&#39;none&#39;'>CLOSE</a>
8. </div>
9. </div>

Keterangan : anda bisa mengganti Get Update Photos Via Facebook dengan kata2 yang anda kehendaki,ganti http://www.facebook.com/nufuzhollic dengan link fb fanspage anda

Demikian,semoga bermanfaat!,salam dari ARNANDA BLOG!

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :