Bài viết này mình chia sẻ code Popup mở new Windows ngay dưới góc màn hình.
Chắc các bạn cũng biết việc lợi và hại của đặt Popup. Chúng ta nên làm giảm tránh cái hại và đem lại hiệu quả cao nhất cho việc đặt Pop này
Code popup Javascript tạo quảng cáo cho Web
1. Code Popup nhiều lần, cứ Click bất kỳ vị trí nào là nó lại nhảy 1 new Windows mới.
– Loại này thêm code thì rất đơn giản nhưng người xem rất không hài lòng.
<body onclick="open_popup()">
<script type="text/javascript">
function open_popup()
{
window.open("http://itviet360.com/")
}
</script>
Nếu muốn Popup nhiều trang thì bạn thêm những dòng Window.open tương tự
window.open("link Web muốn popup")
Code popup javascript một (1) lần
Khi chúng ta vào một số trang Web, nhấp chuột vào bất kỳ 1 chỗ nào đó trên trang Web thì thấy chạy ra 1 hoặc nhiều trang Web khác. Đó là dạng popup được rất nhiều người quản trị dùng tới. Dùng Popup không làm hài lòng người truy cập Web.
Nhưng vì một số lý do như quảng cáo – “kiếm miếng cơm manh áo” nên nhiều Admin (trong đó có mình @.@) vẫn phải sử dụng Popup làm công cụ quảng cáo của mình.
Bài viết này mình đưa ra 2 dạng code popup javascript cho Website, blog thông dụng nhất.
Popup xuất hiện nhiều lần (cứ nhấp chuột vào Web là chạy thêm 1 hoặc nhiều trang Web khác). Dạng này khá khó chịu với người truy cập. Hix, mình dùng dạng này mấy ngày làm giảm 2/3 lượt xem trang.
Code:
function open_popup()
{
window.open("http://itviet360.com/")
}
Cách sử dụng:
<body onclick="open_popup()">
<script type="text/javascript">
Code 1
</scirpt>
Các bạn có thể tạo popup nhiều trang Web bằng cách thêm
window.open("link Web muốn popup")
Popup xuất hiện 1 lần.
Dạng popup này theo quảng cáo thì tính theo thời gian. Cụ thể là trong một ngày/1 địa chỉ IP thì popup chỉ xuất hiện 1 lần. Hiện tại trang mình đang dùng thằng này.
Code:
function Set_Cookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());if (expires) {
expires = expires * 1000 * 60 * 60 * 12;
}
var expires_date = new Date(today.getTime() + (expires));document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}function Get_Cookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) &&
(name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}function Delete_Cookie(name, path, domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}function popunder() {
if (Get_Cookie('vnsTraGopLT6')) {
return false;
} else {
Set_Cookie('vnsTraGopLT6', 'vnsTraGopLT PopUnder', '1', '/', '', '');
urls = ["http://noithathopphat.vn"]
var url = urls[Math.floor(Math.random() * urls.length)]
params = 'width=' + screen.width;
params += ', height=' + screen.height;
params += ', top=0, left=0,scrollbars=yes'
params += ', fullscreen=yes';
pop = window.open(url, 'window', params).blur();
window.focus();
return false;
}
}
Cách sử dụng:
File Java đã được mình lưu ở http://itviet360.googlecode.com/files/pop3.js các bạn.
– Cách 1: Lưu Code thành File JAVAScript và đặt
<script src='https://itviet360.googlecode.com/files/pop3.js' type='text/javascript'/>
<body onclick='popunder();'>
Cách 2: Dán thẳng Code vào trước thẻ <body>
Popup xuất hiện nhiều lần (cứ nhấp chuột vào Web là chạy thêm 1 hoặc nhiều trang Web khác).
Dạng này khá khó chịu với người truy cập. Hix, mình dùng dạng này mấy ngày làm giảm 2/3 lượt xem trang.
function open_popup()
{
window.open("http://itviet360.com/")
}
Sử Dụng
<body onclick="open_popup()">
<script type="text/javascript">
Code 1
</scirpt>
Popup xuất hiện 1 lần.
Dạng popup này theo quảng cáo thì tính theo thời gian. Cụ thể là trong một ngày/1 địa chỉ IP thì popup chỉ xuất hiện 1 lần. Hiện tại trang mình đang dùng thằng này.
Code:
function Set_Cookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());if (expires) {
expires = expires * 1000 * 60 * 60 * 12;
}
var expires_date = new Date(today.getTime() + (expires));document.cookie = name + "=" + escape(value) +
((expires) ? ";expires=" + expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}function Get_Cookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) &&
(name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}function Delete_Cookie(name, path, domain) {
if (Get_Cookie(name)) document.cookie = name + "=" +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
";expires=Thu, 01-Jan-1970 00:00:01 GMT";
}function popunder() {
if (Get_Cookie('vnsTraGopLT6')) {
return false;
} else {
Set_Cookie('vnsTraGopLT6', 'vnsTraGopLT PopUnder', '1', '/', '', '');
urls = ["http://noithathopphat.vn"]
var url = urls[Math.floor(Math.random() * urls.length)]
params = 'width=' + screen.width;
params += ', height=' + screen.height;
params += ', top=0, left=0,scrollbars=yes'
params += ', fullscreen=yes';
pop = window.open(url, 'window', params).blur();
window.focus();
return false;
}
}
Sử Dụng
File Java đã được mình lưu ở http://itviet360.googlecode.com/files/pop3.js các bạn.
– Cách 1: Lưu Code thành File JAVAScript và đặt
<script src='https://itviet360.googlecode.com/files/pop3.js' type='text/javascript'/>
<body onclick='popunder();'>
Cách 2: Dán thẳng Code vào trước thẻ <body>
Jquery popup Like Facebook (FB) box cho Web
Ở thủ thuật này mình sẽ hướng dẫn các bạn cách làm trên blogspot. Trên các nền Website khác các bạn cũng làm tương tự bằng cách chèn Code.
Popup này chỉ xuất hiện 1 lần khi chúng ta truy cập tới site (để tránh làm phiền người xem site blogger của bạn)
– CÁCH LÀM THỦ THUẬT TRÊN BLOGGER
+ Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/JavaScript
+ Dán đoạn code dưới đây vào nó:
<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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%; height: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:url(https://4.bp.blogspot.com/-8n5B05PTdFc/T1eJ4l1t1jI/AAAAAAAABBQ/wjOQPxrTcsI/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://2.bp.blogspot.com/-atBzpahc3J4/T1eJ0xcvm9I/AAAAAAAABA0/xCYZwJH9iX8/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh5.googleusercontent.com/-YD26J93vHAU/T1eJ23YKUYI/AAAAAAAABBE/I20XOWqx8Cs/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://1.bp.blogspot.com/-E_w5nMgbRFo/T1eJ1psvFtI/AAAAAAAABA4/sDGZgQGxqVY/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://4.bp.blogspot.com/-qXR5VW86tTU/T1eK26OlLJI/AAAAAAAABCI/15OgyJGAxgc/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://3.bp.blogspot.com/-M37w9fBpYc0/T1eK1xVuXMI/AAAAAAAABCA/dj23BHXxP94/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://1.bp.blogspot.com/-RhmmNbYthgQ/T1eK3_yFbYI/AAAAAAAABCQ/OOA2WRKRIpI/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://4.bp.blogspot.com/-9_GvfznJpmA/T1eKxznvIqI/AAAAAAAABBc/QCxpXpZRRKc/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://2.bp.blogspot.com/-JMn5kVlrREs/T1eKzLJQp1I/AAAAAAAABBo/sKxAQECScTs/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://2.bp.blogspot.com/-GdZVtHqHzAY/T1eK0LfvVAI/AAAAAAAABBw/NItg_Pispb0/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://3.bp.blogspot.com/-Inz4vd6RVTo/T1eK1JG3aWI/AAAAAAAABB4/mqn1hczMewg/s1600/borderMiddleRight.png);}.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}/*-----------------------------------------------------------------------------------*/
/* Huong dan thu thuat: http://itviet360.com
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}.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;
}
</style><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://itviet360.googlecode.com/files/jquery.popbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls --><div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://4.bp.blogspot.com/-yKl984YHtNc/Tz5eFcKawQI/AAAAAAAAClc/tRhcONEeG9k/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>
<div class="fbInner">
<div class="textwidget"><script type="text/javascript" src="https://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="166823093455666" stream="0" connections="10" logobar="0" width="290" height="175" css="http://itviet360.googlecode.com/files/btsnts-custom-fbv4.css?1" class=" FB_fan FB_ElementReady"></fb:fan><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: right;">
<span style="font-family: Verdana, sans-serif; font-size: xx-small;"><a href="http://www.itviet360.com/2013/01/chinh-sua-fan-facebook-khung-like-web-blog.html" target="_blank">Tùy chỉnh FB Like Box</a></span></div>
</div>
</div></div></center></div>
</div>
Dãy số được bôi màu: là ID Pages của bạn. Ví dụ pages itviet360:
Code tạo quảng cáo góc màn hình cho web
Làm thế nào để tạo được quảng cáo ở góc màn hình cho Website, blog? Website của mình muốn tạo thêm quảng cáo ở chân trang Web. Blogspot muốn thêm những phần quảng cáo sát dưới chân trang blog/?
Blog thủ thuật này mình hướng dẫn các bạn cách tạo thêm quảng cáo dạng đó thực hiện trên blogspot. Đối với các nền Website khác các bạn cũng thêm tương tự như thêm những đoạn code CSS, HTML, Javasctipt…
– Hướng dẫn thủ thuật trên blogspot:
1. Đăng nhập vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán đoạn Code dưới đây vào tiện ích vừa thêm
<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/-WlFxxacCqkE/UVRlSxks1aI/AAAAAAAAFSI/ujnXrBK8V60/s150/rightp-itviet360.gif) no-repeat right top;}
#cob263512{background:url(https://lh4.googleusercontent.com/-76rBW78GlCY/UXVSIYX3xnI/AAAAAAAAG38/olDCjJ41Zfs/s501/fulld.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://lh5.googleusercontent.com/-FnW-YtuJMjY/UVRlSuVJ2VI/AAAAAAAAFR8/k7f12to4-zQ/s90/closebutton-itviet360.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>
Nội thất văn phòng
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="http://noithathopphat.vn/" > <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="http://i1358.photobucket.com/albums/q765/phongvu18nd/tuyennv_zps9a934733.gif" height="115" title="Nội thất văn phòng - Nội thất Hòa Phát Sài Gòn"/></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>
Trong đó có các giá trị cần chú ý:
– Nội thất văn phòng: Tiêu đề đăng của quảng cáo
– http://noithathopphat.vn/: Link Website quảng cáo
– https://lh5.googleusercontent.com/-UrboBzmZVwk/UOj-uhHmNTI/AAAAAAAAFdc/TQC7C48OSa8/s250/tuyennv.gif: Link hình ảnh cần quảng cáo
– right:0: hiển thị góc bên phải, nếu muốn hiển thị góc bên trái thì các bạn thay bằng left: 0
Code mở popup cửa sổ quảng cáo nhỏ dưới góc màn hình
Làm thế nào để tạo được Popup quảng cáo windows nhỏ ở góc phải màn hình? Mình muốn chèn Code Popup cho mở cửa sổ nhỏ thôi ở dưới góc màn hình mà không được. Xin code Popup quảng cáo hiệu quả nhất….
Những điểm hay của Code Popup này:
– Xuất hiện 1 lần khi trình duyệt Website mở.
– Cửa sổ trang Website được Pop nhỏ ở góc màn hình -> kéo dài thời gian ở lại của Website được Pop.
…
Demo trực tiếp: http://anhbiafb.blogspot.com/ các bạn nhấp vào vị trí bất kỳ ở bên trang Demo và xem kết quả ở góc phải màn hình nhé.
– Xuất hiện 1 lần khi trình duyệt Website mở.
– Cửa sổ trang Website được Pop nhỏ ở góc màn hình -> kéo dài thời gian ở lại của Website được Pop.
…
Demo trực tiếp: http://anhbiafb.blogspot.com/ các bạn nhấp vào vị trí bất kỳ ở bên trang Demo và xem kết quả ở góc phải màn hình nhé.
Code:
<script>function addEvent(obj,eventName,func){if(obj.attachEvent){obj.attachEvent("on"+eventName,func);}else if(obj.addEventListener){obj.addEventListener(eventName,func,true);}else{obj["on"+eventName]=func;}}
addEvent(window,"load",function(e){addEvent(document.body,"click",function(e){var pX;pX=screen.width;if(!pX){pX=document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth;}
if(pX>800){if(document.cookie.indexOf("pnpopup=popactive")==-1){document.cookie='pnpopup=popactive';params='width=50';params+=', height=50';params+=', top=1650, left=1460, resizable=no, scrollbars=yes, location=yes';var w=window.open("http://itviet360.com/",'window1',params).blur();window.focus();}}});});</script>
Thay link bằng link http://itviet360.com/ Website các bạn cần đặt Pop nhé.
Trên các nền Website thì đây chỉ là 1 đoạn code javascript nên các bạn dán vào mã <script> là nó hoạt động.
Code Popup khung Like Page Facebook giữa trang cho Website, Blog
Ở đây mình sẽ chia sẻ code và hướng dẫn làm trên Blogspot. Ở nền Website khác như WordPress,…các bạn làm tương tự nhé.
<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/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://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/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
/*-----------------------------------------------------------------------------------*/
#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: 20px !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;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://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>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Like Page hình ảnh đẹp để theo dõi những ảnh đẹp ý nghĩa nhé!<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/hinhanhdep3&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>
<p style=" float:right; margin-right:35px; font-size:9px;" >Support By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.itviet360.com" target="_blank">IT Viet</a></p>
</div>
</div>
Trong đó: các dòng bôi vàng được thay thế bằng tùy chọn của bạn.
- Cách thêm Code popup này vào Blogspot
Bạn chỉ cần tạo 1 tiện ích HTML/Javascript và dán code đó vào tiện ích đó.
Thêm tiện ích bằng thao tác vào bảng điều khiển Blogger -> bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
Chúc các bạn vui vẻ !
Hotline: 0842 272 868 – 0922 272 868 – 0977 373 471
Đc: 1039/11/48 Kp2, P. Tân Hiệp, Tp. Biên Hòa, T. Đồng Nai
Email: congnghecit@gmail.com – hotro@congnghecit.com
Website: https://congnghecit.com – http://congnghecit.vn – http://congnghecit.net
Website: https://citgroup.vn – https://citdecor.vn – https://thicongquangcaodongnai.net