Tạo quảng cáo popup nổi ở góc phải hoặc góc trái trên Blogspot

Nếu bạn muốn tạo thêm một số quảng cáo nổi trên góc web blogs để giới thiệu hay quảng bá sản phẩm, một website khác, hay là facebook của mình... rất đơn giản điều bạn cần chỉ là chuẩn bị một link ảnh (trừ fb), link đích và thêm đoạn code như hướng dẫn là sẽ có được một popup quảng cáo.

Có 2 mẫu quảng cáo popup nổi thông dụng các bạn lựa chọn cái thích hợp nhé (mình thấy cái một ổn hơn)


Mẫu 1: Cách thực hiện (đặt ở bên phải)
Vào blogger -> chọn bố cục -> Thêm Tiện ích -> HTML/javascript -> Copy code dưới vào (sau đó tiến hành thay đổi link, hình ảnh, kích thước quảng cáo)
Đối với fanpage facebook thì làm cách riêng mình có viết ở bên dưới nhé

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <a href="link website" taget="_blank" ><img src="link ảnh" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

 Cách thực hiện (đặt ở bên trái)

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
     <a href="Link website" taget="_blank" ><img src="Link ảnh" width="250" height="200"></a>
<!-- End quang cao -->
</div>
</div>

Cách thực hiện đối với fanpage facebook (bên phải và bên trái)

<script type="text/javascript">
function hide_float_right() {
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_right()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_right()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_right {border: 1px solid #01AEF0;}
#hide_float_right {text-align:right; font-size: 11px;}
#hide_float_right a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="right: 0px" >
<div id="hide_float_right">
<a href="javascript:hide_float_right()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_right">
<!-- Start quang cao-->
  <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Collagenvieskin&amp; width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp; height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px;background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

<script type="text/javascript">
function hide_float_left() {
    var content = document.getElementById('float_content_left');
    var hide = document.getElementById('hide_float_left');
    if (content.style.display == "none")
    {content.style.display = "block"; hide.innerHTML = '<a href="javascript:hide_float_left()">Tắt quảng cáo [X]</a>'; }
        else { content.style.display = "none"; hide.innerHTML = '<a href="javascript:hide_float_left()">Xem quảng cáo...</a>';
    }
    }
</script>
<style>
.float-ck { position: fixed; bottom: 0px; z-index: 9000}
* html .float-ck {position:absolute;bottom:auto;top:expression(eval (document.documentElement.scrollTop+document.docum entElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) ;}
#float_content_left {border: 1px solid #01AEF0;}
#hide_float_left {text-align:left; font-size: 11px;}
#hide_float_left a {background: #01AEF0; padding: 2px 4px; color: #FFF;}
</style>
<div class="float-ck" style="left: 0px" >
    <div id="hide_float_left">
<a href="javascript:hide_float_left()">Tắt Quảng Cáo [X]</a></div>
<div id="float_content_left">
<!-- Start quang cao-->
   <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Collagenvieskin&amp;width=250&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=200" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 200px; width: 250px;background:#fff;"></iframe>
<!-- End quang cao -->
</div>
</div>

Mẫu 2: Cách thực hiện (đặt ở bên trái - phải)

Các bạn sửa lại 1 chút về link, hình ảnh, tiêu đề.
Ngoài ra nếu muốn đặt quảng cáo sang bên trái thì sửa right:0; thành left:0; (lưu ý sửa mỗi chỗ tô màu đỏ thôi nhé)

<style type="text/css">      
 * html div#fl813691 {position: absolute; overflow:hidden;      
 top:expression(eval(document.compatMode &&      
 document.compatMode=='CSS1Compat') ?      
 documentElement.scrollTop      
 +(documentElement.clientHeight-this.clientHeight)      
 : document.body.scrollTop      
 +(document.body.clientHeight-this.clientHeight));}      
  #fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666;  position:fixed; _position: absolute; right:0; bottom:0; height:150px; }       
 #eb951855{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_y2qoXo_9N1bAm87QG_02r8EFY7IKu8tmu-vbbhE-uCLQj7DcoJwJOE8XSbBTdVUQrt9lek6mRXzHm8JslpWkqvfEcptsGHAZBpfYZ9ml3grsEtlZNw1prp54jtD_BX1specYOUWoEI8/s1600/rightp-namkna.gif) no-repeat right top;}      
 #cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE8oi4EGQDlxFmu0AowRDVgq7P5hfLpYsGytoSTDQxUlDotawwOW3lKy__UTwuK4n21FIMtivr0hks7BSvosLgsrw-XivbixBeJ3fDh2rQY2-TVVFCBt_feOPyMgLenhIZY4NEhiNbFEE/s1600/fulld-namkna-ngoctra.gif) no-repeat left top; height:150px; padding-left:7px;}      
 #coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}      
 #coh963846 a{color:#690;text-decoration:none;}      
 #coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}      
 #coc67178 li{display:inline;}      
 #coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThIQ_dyRgzxdRQYYdwfv1uZiN0ggi4B0LwPgjbagCQ1gWIqPxynT4OxsaSBNuM2fOT4VoyZYUB5i5-VxUsukXWuWdaUlGeaHNfgt8GCFgZYyWv6KuFt4rjQTgV5ibRT1JXIrsOoiAOi4/s1600/closebutton-namkna.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}      
 #coc67178 li a.close{background-position: 0 0;}      
 #coc67178 li a.close:hover{background-position: 0 -15px;}      
 #coc67178 li a.min{background-position: -30px 0;}      
 #coc67178 li a.min:hover{background-position: -30px -15px;}      
 #coc67178 li a.max{background-position: -60px 0;}      
 #coc67178 li a.max:hover{background-position: -60px -15px;}      
  #co453569{display:block; margin:0; padding:0; height:123px;  border-style:solid; border-width:1px; border-color:#111 #999 #999 #111;  line-height:1.6em; overflow:hidden;}      
 </style>       
 <div id="fl813691" style="height: 152px;">       
 <div id="eb951855">       
 <div id="cob263512">       
 <div id="coh963846">       
 <ul id="coc67178">       
  <li id="pf204652hide"><a class="min"  href="javascript:pf204652clickhide();" title="&#7848;n  &#273;i">&#7848;n</a></li>       
  <li id="pf204652show" style="display: none;"><a class="max"  href="javascript:pf204652clickshow();" title="Hi&#7879;n  l&#7841;i">Xem </a></li>       
 </ul>       
 &nbsp;Tiêu đề blogspot của bạn
 </div>       
 <div id="co453569"> 
<!-- code ads -->       
<a target="_blank" href="link website" rel="nofollow"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="Link ảnh" height="115" title="Namkna | Kiến thức - Giải Trí - Thủ thuật - Giải pháp công nghệ"/></a>       
<!-- code ads -->       
 
</div>      
 </div></div></div>       
 <script>       
 pf204652bottomLayer = document.getElementById('fl813691');      
 var pf204652IntervalId = 0;      
 var pf204652maxHeight = 150;//Chieu cao khung quang cao      
 var pf204652minHeight = 20;      
 var pf204652curHeight = 0;      
 function pf204652show( ){      
 pf204652curHeight += 2;      
 if (pf204652curHeight > pf204652maxHeight){      
 clearInterval ( pf204652IntervalId );      
 }      
 pf204652bottomLayer.style.height = pf204652curHeight+'px';      
 }      
 function pf204652hide( ){      
 pf204652curHeight -= 3;      
 if (pf204652curHeight < pf204652minHeight){      
 clearInterval ( pf204652IntervalId );      
 }      
 pf204652bottomLayer.style.height = pf204652curHeight+'px';      
 }      
 pf204652IntervalId = setInterval ( 'pf204652show()', 5 );      
 function pf204652clickhide(){      
 document.getElementById('pf204652hide').style.display='none';      
 document.getElementById('pf204652show').style.display='inline';      
 pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );      
 }      
 function pf204652clickshow(){      
 document.getElementById('pf204652hide').style.display='inline';      
 document.getElementById('pf204652show').style.display='none';      
 pf204652IntervalId = setInterval ( 'pf204652show()', 5 );      
 }      
 function pf204652clickclose(){      
 document.body.style.marginBottom = '0px';      
 pf204652bottomLayer.style.display = 'none';      
 }      
 </script>