Showing posts with label tao-popup-cho-blogspot. Show all posts
Showing posts with label tao-popup-cho-blogspot. Show all posts

Monday, June 6, 2016

Hướng dẫn tạo Popup quảng cáo hiện giữa màn hình Website/Blogspot

Hướng dẫn tạo Popup cho Blogspot

Hình thức quảng cáo hiện giữa màn hình của trang Blogspot



Popup quảng cáo hiện giữa màn hình Blogspot là dạng popup quảng cáo tạo được sự chú ý nhất cho người dùng khi họ truy cập vào trang Blogspot của bạn. Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách tạo Popup cho Blogspot Popup quảng cáo hiện giữa màn hình 

Cũng như các cách tạo popup cho Blogspot đã được hướng dẫn trước đó, bài hướng dẫn này cũng sử dụng 1 đoạn code để tạo Popup quảng cáo. Đoạn code này đã được tùy chỉnh tối ưu về tốc độ load trang Blogspot, Popup quảng cáo chỉ xuất hiện 1 lần nên ko gây phiền hà cho người dùng truy cập vào trang Blogspot của bạn.









Để tạo Popup quảng cáo xuất hiện giữa màn hình cho Blogspot các bạn chỉ cần chuẩn bị trước 1 banner làm hình nền cho Popup quảng cáo, rồi thực hiện theo các bước sau:

Bước 1: Truy cập vào trang Blogger.com
Bước 2: Đăng nhập vào Blogger bằng tài khoản Gmail của bạn
Bước 3: Ở phần quản trị Blog: chọn Blog cần tạo popup quảng cáo
Bước 4: Vào phần Bố cục --> Chọn Thêm tiện ích --> Chọn HTML/Javascript.
Bước 5: Copy đoạn code phía dưới và Paste vào phần nội dung của HTML/Javascript (Phần tiêu đề các bạn để trống)

<style type="text/css">
/* Huong dan boi huongdanblogspotchitiet.blogspot.com */
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 59%;
top: 12%;
font-size: 15px;
}
.reveal-modal h2 {
position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin: -200px -200px -200px -600px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(link hình ảnh nền quảng cáo) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="https://fileitviet360.googlecode.com/svn/trunk/vuvanphong-popup.js"></script>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "12/25/2013 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
FinishMessage = "Chúc các bạn thành công!";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
<!-- $(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250}); -->
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<div id="myModal" class="reveal-modal" >
<h2><a href="https://huongdanblogspotchitiet.blogspot.com" target="_blank">Hướng Dẫn Blogspot Chi Tiết</a></h2>
<script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
<a class="close-reveal-modal">&#215;</a>
</div>

Chú ý:

1- Phần được tô đỏ: phía cuối đoạn code là mã HTML hiển thị nội dung của quảng cáo, các bạn thay phần chữ màu xanh cho phù hợp với nhu cầu của các bạn
2- Dòng chữ "Chúc các bạn thành công!": các bạn có thể thay bằng 1 câu khác của bạn cho phù hợp, hoặc bạn có thể xóa nó đi (nếu muốn)
3- link hình ảnh nền quảng cáo: Các bạn thêm hình ảnh nền cho popup quảng cáo

Như vậy là Nguyễn Trường Sơn đã hướng dẫn xong cách tạo Popup cho Blogspot quảng cáo hiện giữa màn hình. Nếu có câu hỏi nào các bạn hãy comment xuống phía dưới nhé

Chúc các bạn thành công!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 11: Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot
Bài 12: Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình
Bài sau >>>

Friday, June 3, 2016

Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hướng dẫn tạo Popup cho Blogspot

Quảng cáo cho khách vào website, kích thước nhỏ gọn ở góc dưới màn hình



Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình dành cho Blogspot. Khi người dùng/khách hàng truy cập vào trang Website/Blogspot của bạn thì popup quảng cáo sẽ tự động trượt lên và mở 1 cửa sổ quảng cáo nhỏ gọn ở phía dưới góc phải màn hình và có thể ẩn hiện tùy ý, rất thiện cảm với người dùng.






Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình


Cũng đơn giản thôi. Ko có gì phức tạp cả :D

Để tạo popup quảng cáo góc dưới màn hình cho Blogspot các bạn chỉ cần thực hiện theo các bước sau:
  1. Bước 1: Truy cập vào trang Blogger.com 
  2. Bước 2: Đăng nhập vào Blogger bằng tài khoản Gmail của bạn
  3. Bước 3: Ở phần quản trị Blog: chọn Blog cần tạo popup quảng cáo 
  4. Bước 4: Vào phần Bố cục --> Chọn Thêm tiện ích --> Chọn HTML/Javascript.
  5. Bước 5: Copy đoạn code phía dưới và Paste vào phần nội dung của HTML/Javascript (Phần tiêu đề các bạn để trống)
<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://lh4.googleusercontent.com/-ZCel684tsGA/Uo8tAONTcZI/AAAAAAAACkg/DaELN1N7HKY/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}
#cob263512{background:url(https://lh4.googleusercontent.com/-vNLa5Sfsz84/Uo8tAL6LAkI/AAAAAAAACkk/CuyKlQfH4Jo/w501-h150-no/cuocsongmuonmau.info_bg.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://lh6.googleusercontent.com/-hUB6FHSCOcg/Uo8uqebMB5I/AAAAAAAAClA/t3_oubc1PaE/w90-h30-no/cuocsongmuonmau.info_button.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="Ẩn đi">Ẩn</a></li>
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hiện lại">Xem </a></li>
</ul>
&nbsp;Hot: Hướng dẫn Blogspot Chi tiết
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="
https://huongdanblogspotchitiet.blogspot.com"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="Link-hình-ảnh-quảng-cáo" height="115" title="Hướng dẫn chi tiết | Từ cơ bản đến nâng cao"></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>

Các bạn thay 2 dòng màu đỏ và 2 dòng màu xanh cho phù hợp với Blogspot/Website của các bạn nhé.

Như vậy là Nguyễn Trường Sơn đã hướng dẫn xong cách tạo Popup cho Blogspot rồi nhé. Hi vọng nó có ích với bạn

Nếu bạn có câu hỏi nào thì hãy comment xuống phía dưới nhé

Chúc các bạn thành công!

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 10: Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot
Bài 11: Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot
Bài sau >>>