Hướng dẫn Cách tạo popup like Facebook khi vào Blog, website

Khi các bạn vào 1 số trang web hay Blog hay thấy có những hộp box Like Fan book (giống Demo) bật popup ra . Cách này đã được nhiều bạn share trên mạng. Hôm nay share123.vn tổng hợp và chia sẻ lại các bạn một cách làm cho blogspot nhanh hơn và dễ tùy chỉnh hơn.

Như mọi khi, nó là widget dựa trên jQuery, và blog của bạn phải có plugin jQuery. nếu blog của bạn đã có một plugin jQuery mới nhất, thì bỏ qua bước này và thực hiện theo các bước thứ hai.
Nếu blog của bạn chưa có thư viện JQuery thì thêm đoạn mã dưới đây trước thẻ </head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></ script>

Tùy chỉnh các cài đặt của bạn như bạn cần
Click vào nút "Generate" ( Tạo tiện ích),
Click vào nút "Preview" (Xem trước )
Cuối cùng nhấn vào "Thêm vào Blogger" nút để thêm widget này vào blog của bạn ...

Sau khi Add widget các bạn có thể vào chỉnh sửa code, hoặc bạn nào muốn nhanh hơn thì có thể làm như sau:
Đăng nhập Blogger => Bố cục => Thêm tiện ích => Thêm widget HTML/Javascript => paste đoạn code bên dưới và thay Link Fanpage facebook của các bạn vào chỗ http://facebook.com/thegioixanh123 là dc<!--popup box like Facebook - up by http://facebook.com/thegioixanh123-->
   <div style='position: fixed; left: 0%; top: 0%;'>
<style type='text/css'>
#makingdifferentpopup{

border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:300px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2gD0ISqeDdjInfmO9m2e-32jP7uIR3X0U77IByopTXPQDTTlLfMdh1sy92MPiPltWFhG6Z6iMz1MXZPWlOPlO9kI_xxmjLnFB2yiRMlpRrSnG5WSpaf_JnF3jaHIJz6IkwcTds2BGfDM6/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:&#39;&quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $(&quot;#mdfooter span&quot;).text(sec--);
   if (sec == 0) {
      $(&quot;#makingdifferentpopup&quot;).fadeOut(&quot;slow&quot;);
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery(&quot;#makingdifferentpopup&quot;).css({&quot;top&quot;:mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie(&#39;sreqshown&#39;));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery(&quot;#makingdifferentpopup&quot;).width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery(&quot;#makingdifferentpopup&quot;).height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;1&quot;, left: &quot;0&quot; , left:  mdleftm}, 0).show();
     jQuery(&quot;#mdclose&quot;).click(function() {
jQuery(&quot;#makingdifferentpopup&quot;).animate({opacity: &quot;0&quot;, left: &quot;-5000000&quot;}, 1000).show();});});
</script>
<div id='makingdifferentpopup'>
<h1>Like Fan Page Share123.vn</h1>
<div class='htmlarea'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://facebook.com/thegioixanh123&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250' style='border:none; overflow:hidden; width:300px; height:250px;'/>

</div>
<div id='mdfooter'>
Please wait..<span>10</span> Seconds
<a href='#' id='mdclose' onclick='return false;'>Close</a>
</div>
</div>
<!-- End popup -->
   </div>
 Ở đây mình thêm đoạn :
<div style='position: fixed; left: 0%; top: 0%;'>Các bạn tùy chỉnh thông số cho phù hợp với vị trí bạn muốn hiển thị

Add trực tiếp vào Blog của bạn: 

Sau Khi add các bạn nhớ sửa Fanpage: http://facebook.com/thegioixanh123 thành FanPage facebook của các bạn nhé.