Aku Mengingat Anda jQuery Pop-Up Facebook Seperti widget Box (versi 1) dalam posting saya yang lebih tua dan dalam posting ini saya memberikan lagi jQuery pop-up seperti facebook widget kotak dengan gambar latar belakang, memeriksa demo screenshot ane atas, jika Anda ingin widget ini dan Anda ingin menambahkan widget ini ke blog Anda cukup ikuti langkah di bawah ini sederhana
Cara menambahkan widget ini ke blogger anda ?
1 . Masuk ke akun blogger anda .
2 . Klik Rancangan
3 . Lalu Klik Tambahkan Widget
4 . Pilih HTML/Javascript
5 . Masukkan kode di bawah ini ke HTML/Javascript
- <script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script><script
src="https://gj37765.googlecode.com/svn/trunk/html/[www.gj37765.blogspot.com]jquery.colorbox-min.js"></script><style>#colorbox,
#cboxOverlay,
#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;}#cboxOverlay{position:fixed;width:100%;height:100%;}#cboxMiddleLeft,
#cboxBottomLeft{clear:left;}#cboxContent{position:relative;}#cboxLoadedContent{overflow:auto;}#cboxTitle{margin:0;}#cboxLoadingOverlay,
#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;}#cboxPrevious,
#cboxNext, #cboxClose,
#cboxSlideshow{cursor:pointer;}.cboxPhoto{float:left;margin:auto;border:0;display:block;}.cboxIframe{width:100%;height:100%;display:block;border:0;}#cboxOverlay{background:#000;opacity:0.5
!important;}#colorbox{/*box-shadow*/-webkit-box-shadow:0 0 15px
rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);box-shadow:0 0
15px
rgba(0,0,0,0.4);}#cboxTopLeft{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
no-repeat 0
0;}#cboxTopCenter{height:14px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png)
repeat-x top
left;}#cboxTopRight{width:14px;height:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
no-repeat -36px
0;}#cboxBottomLeft{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
no-repeat 0
-32px;}#cboxBottomCenter{height:43px;background:url(http://2.bp.blogspot.com/-3KW95qDrjH0/TwRGYol22fI/AAAAAAAACM4/lCr80B0MD2U/s1600/%255Bwww.gj37765.blogspot.com%255Dborder.png)
repeat-x bottom
left;}#cboxBottomRight{width:14px;height:43px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
no-repeat -36px
-32px;}#cboxMiddleLeft{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
repeat-y -175px
0;}#cboxMiddleRight{width:14px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
repeat-y -211px
0;}#cboxContent{background:#fff;overflow:visible;}#cboxLoadedContent{margin-bottom:5px;}#cboxLoadingOverlay{background:url(http://3.bp.blogspot.com/-7VRvnW_MUSw/TwRGXjXjloI/AAAAAAAACM0/5K-J5jgkxo4/s1600/%255Bwww.gj37765.blogspot.com%255Dloadingbackground.png)
no-repeat center
center;}#cboxLoadingGraphic{background:url(http://3.bp.blogspot.com/-xjj51r2lm2M/TwRGaKezqHI/AAAAAAAACNI/lKX9_-YUUdY/s1600/%255Bwww.gj37765.blogspot.com%255Dloading.gif)
no-repeat center
center;}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C;}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C;}#cboxPrevious,
#cboxNext, #cboxClose,
#cboxSlideshow{position:absolute;bottom:-29px;background:url(http://3.bp.blogspot.com/-UFvsMA0xw_s/TwRGZN6BBGI/AAAAAAAACNA/_z47WNmUOfs/s1600/%255Bwww.gj37765.blogspot.com%255Dcontrols.png)
no-repeat 0px
0px;width:23px;height:23px;text-indent:-9999px;}#cboxPrevious{left:0px;background-position:-51px
-25px;}#cboxPrevious.hover{background-position:-51px
0px;}#cboxNext{left:27px;background-position:-75px
-25px;}#cboxNext.hover{background-position:-75px
0px;}#cboxClose{right:0;background-position:-100px
-25px;}#cboxClose.hover{background-position:-100px
0px;}.cboxSlideshow_on #cboxSlideshow{background-position:-125px
0px;right:27px;}.cboxSlideshow_on
#cboxSlideshow.hover{background-position:-150px 0px;}.cboxSlideshow_off
#cboxSlideshow{background-position:-150px
-25px;right:27px;}.cboxSlideshow_off
#cboxSlideshow.hover{background-position:-125px 0px;}#mdfb{font:12px/1.2
Arial,Helvetica,san-serif;color:#666;}#mdfb a, #mdfb a:hover,
#mdfb
a:visited{text-decoration:none;}.mdbox-title{background:#000;color:#fff;font-size:20px
!important;font-weight:bold;margin:10px 0;border:20px solid
#ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px
5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px
5px #CCCCCC;padding:10px;line-height:25px;font-family:arial
!important;}.mdbox-tagline{color:#999;margin:0;text-align:center;}#mdsubs-container{padding:35px
0 30px 0;position:relative;}a:link,
a:visited{border:none;}.demo{display:none;}</style><script
type="text/javascript">jQuery(document).ready(function(){if
(document.cookie.indexOf('visited=false') == -1) {var fifteenDays =
1000*60*60*24*30;var expires = new Date((new Date()).valueOf() +
fifteenDays);document.cookie = "visited=true;expires=" +
expires.toUTCString();$.colorbox({width:"600px", inline:true,
href:"#mdfb"});}});</script><div
style='display:none'><div id='mdfb' style='padding:10px;
background:#fff;'><center><table
align="center"background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssMHRkdlIcxBeFohQT1Q3t1z4wUFfd-OZlLKXkzq8UznwUx0G9lnwLi5vd2Xl6qDIM4eDEPO_2Oj5d3V1lMKAKAefJvVSqlOeZhyphenhyphenZi5etMk3MsRfcDl8y_psjqMmlcj2VdR4lejTCh4Rz/s1600/adsense+background+image%2528gj37765.blogspot.com.jpg.png"
border="0" height="300" style="width:
505px;"><tbody><tr><td height="345"
width="505"><div align="right"><script
src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"type="text/javascript"></script><script
type="text/javascript">FB.init("32eb3732082b27e7c314feb421a56208");</script><fb:fan
profile_id="201758876517562"
connections="10" width="360" height="270"
css="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]mdfacebook.css?"></fb:fan></div></td></tr></tbody></table></center><p
style=" float:right; margin-right:35px; font-size:9px;" >Powered
By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;"
href="http://www.deejayhan.blogspot.com">Blogger
Widgets</a></p></div></div>
6 . Lalu Simpan dan lihat hasilnya :D
Keterangan :
- Yang nomor berwarna merah / 201758876517562 diganti dengan ID fan page anda .
Semoga Bermanfaat untuk semuanya :)
SUmber : http://deejayhan.blogspot.com/2012/05/membuat-pop-up-facebook-like-jquery.html
