Đăng bởi Huy Tập lúc 23/05/2013 3
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.
Cách tạo popup like Facebook khi vào Blog, website

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/share123.vn là dc <!--popup box like Facebook - up by share123.vn -->
   <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(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/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://www.facebook.com/share123.vn&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: https://www.facebook.com/share123.vn thành FanPage facebook của các bạn nhé.
Share123.vn (Tổng hợp từ Making Different)
Loading...
Tags:

3 nhận xét:

  1. Sao mình thay địa chỉ Fanpage của mình rồi mà sao cứ hiện ra Fan của ông Ad là sao chỉ, chủ thớt ơi cứu hộ cái, help, help.

    Trả lờiXóa
  2. Mình muốn gỡ ra thì làm như nào .Hic

    Trả lờiXóa
    Trả lời
    1. bạn tìm đúng đoạn code giống trên trong chỉnh sửa html rồi gỡ ra thôi

      Xóa

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Loading...

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn