Hướng dẫn tạo PopUp Like Facebook, share MXH và đăng ký bản tin qua Email
Đầu tiên đăng nhập vào Blogspot- Template-Edit HTML
Tìm thẻ </head> và dan đoạn code này trước nó
<script type="text/javascript" language="javascript">function ccpop(){document.getElementById("overlay").style.display = 'block';}window.onload = ccpop;</script><script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
Tiếp tục tìm thẻ </body> thẻ này thì nằm cuối template
<!--CodingCrazy.com megapop--><style>@import url(http://fonts.googleapis.com/css?family=Electrolize);#overlay {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtoCel2EvHKygjzVsyNDcuIFr2PWdzN0zL8smXxAFmKaqewnkedfB1OfjKL-dDlnbxF4Qv5Okn6Vi46B07-p3A3SoDW9zanXKqlWQs9gRl640APzjNaRbE93MA62ZkvyptD2AyFRJEQMo/s1600/overlay.png');position:fixed;z-index: 99998;width:100%;height:100%;top:0;}.fb-box {box-shadow: 0px 0px 6px #ccc;-webkit-box-shadow: 0px 0px 6px #ccc;-o-box-shadow: 0px 0px 6px #ccc;background: #fff;margin-bottom: 10px;}#ccpop {position:fixed;top: 50px;width:300px;height:auto;border:5px solid #fafafa;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZApjjyYmgBZk3SIBa7MYKqFKH1LtxqAWQopw1XoXZJ_RP2uDbWUqwp2c8FM8Sma-YH9zsgDgGXqpAUU4sTTVqFoJsw_ruT-RXy3K251wYDkDIAI7mdU2t_2-Al27lKz5YfM4CFTvOxhiQ/s0/body-pattern-1.png');padding: 15px;z-index: 99999; color: #333;left:50%;margin-left:-150px;}h2#ccpop-h2 {font-size:12px;color: #333;text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-o-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);font-family: 'Electrolize', Arial,sans-serif;text-align:center;text-transform:uppercase;}#ccpop-h2 img {position: relative;width: 20px;top: 5px;right: 3px;}#thebutton {-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;box-shadow:inset 0px 1px 0px 0px #54a3f7;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7)); background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%); background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);background-color:#007dc1;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;border:1px solid #124d77;display:inline-block;cursor:pointer;color:#ffffff; font-size:13px;padding:6px 47px;text-decoration:none;text-shadow:0px 1px 0px #154682;font-family: Electrolize , Arial, sans-serif;}#thebutton:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,#0061a7), color-stop(1, #007dc1));background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%); background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%); background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);background-color:#0061a7;}#thebox {padding:6px 69px;margin: 10px 0px;background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pzO6jbNP6Cz21l8NK70HaCiTEy4e3nVyEC1C9M-yZR_69iihEHVxlFishoYPLrj6sSq3QsSQ89bDccXzt09bkDeePnwvdN5HOzSEWGzWbmwopI8_YMDmwAOjPxpMl8T7bKLxnF2PUwk/s1600/email_go.png') no-repeat right center; -webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;outline: none;border: 1px solid #d2d2d2;font-family: Electrolize , Arial, sans-serif; font-size:14px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}#thebox:focus {box-shadow: 0 0 5px rgba(81, 203, 238, 1);border: 1px solid rgba(81, 203, 238, 1);}.copyright {float:right;width: 110px;}.copyright a{font-size:10px;color: #999;font-family: Electrolize , Arial, sans-serif;}</style><div id="overlay" style="display:none;"><div id='ccpop'><h2 id='ccpop-h2'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHCBTtlfDdKz_VoGqUCBvK1xY6rR-sSXo5Or5zMy1CdEVwbA0jJcODAet98p7GaQIWhUILY5W_jaiqaIt4s1rdwF8rx0jGtptJdzS4pRt90wF633QrMaGBnpcrfd9juSF71qP7987wz8/s1600/facebook-messenger-like.png"/>Like Our Facebook Fan Page</h2><div class='fb-like-pop'><!--Facebook Page Username Which You Should Replace With Your Own--><div class="fb-box"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farisvnn&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=784784778251784"scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;"allowTransparency="true"></iframe></div></div><!--FB Like Box--><center><span class='st_sharethis_large' displayText='ShareThis'></span><span class='st_facebook_large' displayText='Facebook'></span><span class='st_googleplus_large' displayText='Google +'></span><span class='st_twitter_large' displayText='Tweet'></span><span class='st_linkedin_large' displayText='LinkedIn'></span><span class='st_pinterest_large' displayText='Pinterest'></span><span class='st_email_large' displayText='Email'></span></center><div class='subscribe-bottom'><h2 id='ccpop-h2'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe27pkOuXW7THAyWXK0wYPemiEkh77I_BV8OVj7yN18Ae-1KrB9D2pUOxFs7Bfy3w32-nHQtu4sJKHx_bZ0n0alMTc28_O-DP894nOPeSSAWYBtzjji5sfvDcUp-dpfNnYUJj4Q21NUlE/s1600/rss-feed-submission.png"/>Subscribe For Free Email Updates</h2><!--The Subscribtion Box. Make sure you edit it before saving--><form action='http://feedburner.google.com/fb/a/mailverify' method='post'onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=codingcrazy" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'><input name='uri' type='hidden' value='arisvn'/><input name='loc' type='hidden' value='en_US'/><input class='emailinput' id='thebox' name='email' onblur='if (this.value =="") {this.value = "Enter your email";}' onfocus='if (this.value== "Enter your email") {this.value = ""}' type='text'value='Enter your email'/><input id='thebutton' type='submit' value='Subscribe For Email Updates Now'/></form></div><!--subscribe--><hr width="300" align="center"/><div class="copyright"><!--Do not remove the credit--><a href="http://arisvn.blogspot.com/" target="_blank" >Get This</a> | <ahref="#" onclick="document.getElementById('overlay').style.display='none'">X Close This</a></div><!--Copyright--></div><!--ccpop--></div><!--Overlay--><!--End Of All-->
Thay các đoạn sau thành ID Facebook và Feed của bạn :
arisvnn : ID Facebook của bạn
arisvn : ID Feed của bạn
http://arisvn.blogspot.com địa chỉ blog hoặc 1 bài trong blog của bạn
Thêm kiểu box khác :
Vào bố cục thêm Widget
Code
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style> /* Jquery Facebook Likebox Popup Version 2.0 by MBT MyBloggerTricks.com */ #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;} /*
User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRrwtpDNwuyjTkUuvAmGKeVGrvH7ia8OF-hMCdfy6Ep4FcYzqjAIHeILvmfG4xT0qcmDdfaOwH0BKvhSDiZdIQeQskooblKorDhjV3x4nIaNKhZQNDBqBtmrmR30clOWmdEsx-55bm9M/s400/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNRrwtpDNwuyjTkUuvAmGKeVGrvH7ia8OF-hMCdfy6Ep4FcYzqjAIHeILvmfG4xT0qcmDdfaOwH0BKvhSDiZdIQeQskooblKorDhjV3x4nIaNKhZQNDBqBtmrmR30clOWmdEsx-55bm9M/s400/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAczAHYq3Dp33v1u3OcAtATvRVbr5kXkO-tKCLu8FEfoQmd4-MdgnZuoVD64fuNY1ROGJObssP1AKWxwF15X43hYVHHpQaoggTltzKS8PiGarvAPogwv61HRCyw1ZoEqxx6iqVSLXGjTI/s400/loadingbackground.png) no-repeat center center;} #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQrsbM5yjIzbTzG5Up9FY1-YAqP4Qy4J5p3ykY9xd19Pe1Xl_OoiRuj-Z8D1YKR624n7xdq9nxVg9wXvXLDynsGD155UnYxaN-dHwroAZTV017phjfrCQfDAFFjTRJAIq7GuILsveeks/s400/loading.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogydNBzjlswYXYv9fjzW_MetwpmiBrcuiXySWKzTe7gfuYfEF9_FHtHBKvgfOTk1tY1afLwBNX87OI1GyRFnOGcvmBAHNf9UVTar2_5NNRX3gdtpXIm_VIez29eGvMhQaeBFGrCrxxoQ/s1600/controls.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;} /*-----------------------------------------------------------------------------------*/ /* Facebook Likebox popup For Blogger Version 2.0 /*-----------------------------------------------------------------------------------*/ #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #F66303; font-size: 18px !important; font-weight: bold; margin: 10px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; line-height:25px; font-family:arial !important; }
.box-tagline { color: #999; margin: 0; text-align: center; } #subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .demo { display:none; }
/* ---------MBT Subscribe Form---------- */ .box-title1 { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; margin: 10px 0; }
.enteryouremail{ background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } .submitbutton{ background:#F66303; border: 1px solid #F66303; text-shadow: 1px 1px 1px #333; box-shadow: 3px 3px 3px #666; font:bold 12px Arial, sans-serif; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;} </style> <script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -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:"400px", inline:true, href:"#subscribe"}); } }); </script> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3> <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Farisvnn&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> <div class="box-title1 "> <center> <h3 style="color:#F66303;">You can also receive Free Email Updates:</h3> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=arisvn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center> </div><!--Please Do not Remove the Credits --> <p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://arisvn.blogspot.com">Blogger Widgets</a></p> </div> </div>
Những chỗ tô đỏ bạn thay vào ID fanpage và ID Feed của bạn nhé
Receive all updates via Facebook. Just Click the Like Button Below : đoạn này bạn có thể thay bằng lời giới thiệu của bạn
Khung popup ko có nút share và Feed
Vào bố cục thêm Widget
<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;
}
.kangrio {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.kangrio, .kangrio:before, .kangrio:after {
background : transparent;
border : #3b5998 solid 1px;
}
.kangrio:before, .kangrio:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.kangrio: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>
<div id='PopFace'><div class='PopBook' id='PopBook'><h3 id='PopTitle'>Get Update Photos Via Facebook</h3> <div class='kangrio'> <div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/V<div class='kangrio'><div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/Varisvnn' data-show-faces='true' data-stream='false' data-width='292'></div> </div> <a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a> </div></div></div><a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a></div></div>
arisvnn : thay bằng ID fanpage của bạn
Get Update Photos Via Facebook : thay bằng lời giới thiệu của bạn
Khung like đếm s ko có nút tắt nhé
Vào mẫu- template tìm thẻ </body>, thẻ này gần cuối bài, dán đoạn code trước nó
Code :
<!-- MmkTricks.blogspot.Com Likebox Pro FBFan Code Start -->
<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='arisvn'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:
9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
}
#fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
}
.fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;
}
#fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-
weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
}
</style>
<script src='https://sites.google.com/site/mmkbindas/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/mmkbindas/fbpopup.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 100,wait: 0,
url:'http://www.facebook.com/arisvnn',closeable:true});});
//]]>
</script>
<div id='fbtpdiv'/>
<!-- MmkTricks.blogspot.Com Likebox Pro FBFan Code End -->
arisvnn : thay bằng tên bạn muốn
timeout: 100, : chỉnh thời gian tắt của hộp like
arisvnn : thay bằng ID fanpage của bạn
Tiếp tục khung like bé bé xinh xinh:
Chúng ta vẫn vào phần bố cục thêm tiện ích vào cpoy code này vào
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style>#fbox-background { display: none; background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999;}
#fbox-close { width: 100%; height: 100%;}
#fbox-display { background: #eaeaea; border: 5px solid #828282; width: 340px; height: 230px; position: absolute; top: 32%; left: 37%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#fbox-button { float: right; cursor: pointer; position: absolute; right: 0px; top: 0px;}
#fbox-button:before { content: "CLOSE"; padding: 5px 8px; background: #828282; color: #eaeaea; font-weight: bold; font-size: 10px; font-family: Tahoma;}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover { color: #aaaaaa; font-size: 9px; text-decoration: none; text-align: center; padding: 5px;}</style><script type='text/javascript'>//<![CDATA[jQuery.cookie = function (key, value, options) {// key and at least value given, set cookie...if (arguments.length > 1 && String(value) !== "[object Object]") {options = jQuery.extend({}, options);if (value === null || value === undefined) {options.expires = -1;}if (typeof options.expires === 'number') {var days = options.expires, t = options.expires = new Date();t.setDate(t.getDate() + days);}value = String(value);return (document.cookie = [encodeURIComponent(key), '=',options.raw ? value : encodeURIComponent(value),options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IEoptions.path ? '; path=' + options.path : '',options.domain ? '; domain=' + options.domain : '',options.secure ? '; secure' : ''].join(''));}// key and possibly options given, get cookie...options = value || {};var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};//]]></script><script type='text/javascript'>jQuery(document).ready(function($){if($.cookie('popup_facebook_box') != 'yes'){$('#fbox-background').delay(5000).fadeIn('medium');$('#fbox-button, #fbox-close').click(function(){$('#fbox-background').stop().fadeOut('medium');});}$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });});</script><div id='fbox-background'><div id='fbox-close'></div><div id='fbox-display'><div id='fbox-button'></div><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/arisvnn&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe><div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://arisvn.blogspot.com" rel="nofollow">ARIS Blogger</a></div></div></div>
https://www.facebook.com/arisvnn : Thay bằng ID fanpage của bạn
Để khung đẹp hơn bạn nên chỉnh màu viền khớp với màu blog của bạn
Hướng dẫn tạo PopUp Like Facebook, share MXH và đăng ký bản tin qua Email
Reviewed by Unknown
on
19:33
Rating:
Reviewed by Unknown
on
19:33
Rating:
Không có nhận xét nào: