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….
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
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é.
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.
Share code popup hiện quảng cáo giữa trang
Khi mình chia sẻ Code Popup hiện quảng cáo hoặc thông báo ở giữa trang tại Blog cá nhân Vũ Văn Phong thì có khá nhiều bạn quan tâm tới loại Code Popup này. Gần đây khi sử dụng những code Popup làm khó chịu cho người xem khiến tỷ lệ thoát khỏi trang web nhiều đã không còn được ưa chuộng và sử dụng. Mặc dù vậy, người quản trị Web vẫn phải có những hình thức cho thuê quảng cáo hoặc tạo những thông báo khác nhau làm chú ý được ngay với người xem. Không phiền toái và không khó khăn, Popup hiện quảng cáo giữa trang dưới đây sẽ giúp bạn thực hiện được điều đó.Share code Popup hiện quảng cáo giữa trangCode:
<style type="text/css">
/* Huong dan boi vuvanphong.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(http://1.bp.blogspot.com/-DrMdgQi7Uq4/UsMDvui64fI/AAAAAAAAM3k/QLhbbmjPwnM/s1600/happy-new-year.png) 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="https://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 bạn vui vẻ !";
//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="http://www.vuvanphong.com" target="_blank">Blog Vũ Văn Phong</a></h2>
<script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
<a class="close-reveal-modal">×</a>
</div>
Trong đó:
– Nội dung màu đỏ là hiển thị của nội dung quảng cáo.
– Link ảnh: http://1.bp.blogspot.com/-DrMdgQi7Uq4/UsMDvui64fI/AAAAAAAAM3k/QLhbbmjPwnM/s1600/happy-new-year.png là ảnh nền
– Dòng chữ: Chúc bạn vui vẻ! bạn thay bằng nội dung của bạn nhé
– Đối với Website thì code trên được dán vào nội dung của <body> … </body>
– Đối với Blogspot bạn có thể tạo 1 Widget HTML/Javascript để thực hiện. Vào bảng điều khiến Blogger -> Bố cục -> Thêm tiện ích -> HTML/Javascript. Và dán code trên vào tiện ích vừa thêm
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ẻ !
Code popup Javascript tạo quảng cáo cho Web
Đánh giá
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.net – http://congnghecit.vn
