Cảm nhận tư duy và tổng hợp kiến thức

Hiển thị các bài đăng có nhãn Popup. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Popup. Hiển thị tất cả bài đăng

Thứ Sáu, 22 tháng 7, 2016

Code Chèn Quảng Cáo cho Web Blog

Trong bài nầy, Khanhnguyen' s blog giới thiệu cùng các bạn một cửa sổ quãng cáo có thể cho đóng mỡ được từ trên các góc trái hoặc phải của Blogspot, khác với các cửa sổ Like Fanpage ở dạng thụt vô, thò ra. Ở cạnh trên của cửa sổ có một nút [x], khi Click chuột vào, lập tức cửa sổ sẽ được thu gọn lại.

Đây là bộ source code mình sưu tập được ở  Blogspot http://thegioiblogaz.blogspot.com/. 
Code chèn quảng cáo góc trái website: 


<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-->
   <embed src="http://www.cn11111.com/swf/fengjing/17.swf" width="250" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" allowScriptAccess="always"/>
<!-- End --> 
</div>
</div>



Code chèn quảng cáo góc phải website: 


<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-->
  <embed src="http://www.cn11111.com/swf/fengjing/17.swf" width="250" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" wmode="transparent" allowScriptAccess="always"/>
<!-- End -->
</div>
</div>




Ghi chú:
Thay thế nội dung code quảng cáo của bạn vào giữa dòng <!– Start –> <!– End–>.
Trong trường hợp trên là địa chỉ của một file flash http://www.cn11111.com/swf/fengjing/17.swf

Bạn có thể thử với địa chỉ của các file flash ở bài: Flash ảnh thiên nhiên đẹp 
Chú ý:
Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:
Một số thuộc tính trên Source Code trên cũng đều có thể thay đổi giá trị được. Các bạn có thể tùy nghi sử dụng. Chúc các bạn thành công.


Khanhnguyen' s blog


Share:

Thứ Ba, 9 tháng 2, 2016

Hướng dẫn code quảng cáo đứng & trượt dọc 2 bên trang Web

Sau khi đọc bài viết Code Popup quảng cáo tổng hợp tại ITViet360 thì nhiều bạn có nhu cầu và hỏi thêm dạng code quảng cáo đứng hoặc trượt dọc 2 bên trang Web. Với code quảng cáo trượt dọc 2 bên Website sẽ gây được sự chú ý lớn.
Ở bài viết này ITViet360 sẽ giới thiệu với bạn 2 loại quảng cáo 2 bên được dùng thông dụng nhất hiện nay. Và cách thêm chúng như thế nào?

Đối với Blogspot



- Bạn chỉ cần dán code vào 1 tiện ích HTML/Javascript/
Đối với Website
- Bạn thêm code vào nằm trong thẻ <body> ... </body> là được
1. Code quản cáo đứng dọc cố định 2 bên trang Website.





<div id="left_ads_float">

        <a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQH86xakOYO-ObLkeYsO-IenEC-FXb0vDfWP6CrhRSiscXsx8Cj7W0yBL7Q-ddAxVkDMEL9_qRTtHFB8zgDD3Bp-9HEEBUz-w1jLMj5CfuAbn0-f6rQHSemZWJ1aN_FnFYHT516uG5Y4r/s1600/banner-doc-web.jpg" width="170" /></a>

    </div>

    <div id="right_ads_float">

       <a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQH86xakOYO-ObLkeYsO-IenEC-FXb0vDfWP6CrhRSiscXsx8Cj7W0yBL7Q-ddAxVkDMEL9_qRTtHFB8zgDD3Bp-9HEEBUz-w1jLMj5CfuAbn0-f6rQHSemZWJ1aN_FnFYHT516uG5Y4r/s1600/banner-doc-web.jpg" width="170" /></a>

    </div>

<style>

#left_ads_float

{

    bottom:20px;

    left: 10px;

    position:fixed; }

#right_ads_float

{

    bottom:20px;

    right: 10px;

    position:fixed;

}

</style>

<script>

var vtlai_remove_fads=false;

function vtlai_check_adswidth()

    {

        if(vtlai_remove_fads)

        {

            document.getElementById('left_ads_float').style.display='none';

            document.getElementById('right_ads_float').style.display='none';

            return;

        }else if(document.cookie.indexOf('vtlai_remove_float_ads')!=-1)

        {

            vtlai_remove_fads=true;

            vtlai_check_adswidth();

            return;

        }

        else

        {

            var lwidth=parseInt(document.body.clientWidth);

            if(lwidth<1110)

            {

                document.getElementById('left_ads_float').style.display='none';

                document.getElementById('right_ads_float').style.display='none';

            }

            else

            {

                document.getElementById('left_ads_float').style.display='block';

                document.getElementById('right_ads_float').style.display='block';

            }

            setTimeout('vtlai_check_adswidth()',10);

        }

    }

</script>

2. Code quản cáo trượt dọc khi kéo thanh cuộn lên xuống.
Demo tại Blog: Công ty SEO uy tín




2. Code quản cáo trượt dọc khi kéo thanh cuộn lên xuống. Demo tại Blog: Công ty SEO uy tín
width="170" : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím, LeftAdjust = 5 : khoảng cách từ mép trái trang web đến banner RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner Read more: http://www.itviet360.com/2014/04/code-quang-cao-truot-doc-2-ben-web.html#ixzz3zfdB3cH5; word-wrap: break-word;">
<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px">  
<a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQH86xakOYO-ObLkeYsO-IenEC-FXb0vDfWP6CrhRSiscXsx8Cj7W0yBL7Q-ddAxVkDMEL9_qRTtHFB8zgDD3Bp-9HEEBUz-w1jLMj5CfuAbn0-f6rQHSemZWJ1aN_FnFYHT516uG5Y4r/s1600/banner-doc-web.jpg" width="170" /></a>
</div>  
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px">  
<a href="http://seophongvu.com" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQH86xakOYO-ObLkeYsO-IenEC-FXb0vDfWP6CrhRSiscXsx8Cj7W0yBL7Q-ddAxVkDMEL9_qRTtHFB8zgDD3Bp-9HEEBUz-w1jLMj5CfuAbn0-f6rQHSemZWJ1aN_FnFYHT516uG5Y4r/s1600/banner-doc-web.jpg" width="170" /></a> 
</div>
 
<script>  
    function FloatTopDiv()  
    {  
        startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80;  
        startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80;  
        var d = document;  
        function ml(id)  
        {  
            var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
            el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};  
            el.x = startRX;  
            el.y = startRY;  
            return el;  
        }  
        function m2(id)  
        {  
            var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];  
            e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';};  
            e2.x = startLX;  
            e2.y = startLY;  
            return e2;  
        }  
        window.stayTopLeft=function()  
        {  
            if (document.documentElement && document.documentElement.scrollTop)  
                var pY =  document.documentElement.scrollTop;  
            else if (document.body)  
                var pY =  document.body.scrollTop;  
             if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else  {startLY = TopAdjust;startRY = TopAdjust;};  
            ftlObj.y += (pY+startRY-ftlObj.y)/16;  
            ftlObj.sP(ftlObj.x, ftlObj.y);  
            ftlObj2.y += (pY+startLY-ftlObj2.y)/16;  
            ftlObj2.sP(ftlObj2.x, ftlObj2.y);  
            setTimeout("stayTopLeft()", 1);  
        }  
        ftlObj = ml("divAdRight");  
        //stayTopLeft();  
        ftlObj2 = m2("divAdLeft");  
        stayTopLeft();  
    }  
    function ShowAdDiv()  
    {  
        var objAdDivRight = document.getElementById("divAdRight");  
        var objAdDivLeft = document.getElementById("divAdLeft");    
        if (document.body.clientWidth < 1000)  
        {  
            objAdDivRight.style.display = "none";  
            objAdDivLeft.style.display = "none";  
        }  
        else  
        {  
            objAdDivRight.style.display = "block";  
            objAdDivLeft.style.display = "block";  
            FloatTopDiv();  
        }  
    }
</script>  
<script>  
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>");  

</script>

width="170" : chiều rộng của banner. Có 2 giá trị được đánh dấu màu cam
MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu tím,
LeftAdjust = 5 : khoảng cách từ mép trái trang web đến banner
RightAdjust = 5 : khoảng cách từ mép phải trang web đến banner

TopAdjust = 10 : khoảng cách từ mép trên trang web đến banner



Share:

Share code popup hiện quảng cáo giữa trang [Hướng dẫn]

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 đó.
Demo TẠI ĐÂY
http://demo-thuthuat.blogspot.com/


1. Share code Popup hiện quảng cáo giữa trang

Code:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtTw3GAdl5_lzUcKLcKJh_PEn1iM1aLwRi0f6tOtl8j9V8aOeuzURHnm4G5S0YYr1RzKBpK5o5SjclojsHUqi3tDsiHFcxhVt-LYiFHYsaKvfKoawTzZSLpS6cDIKLWxPBJ1vu3Ace2fS/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: 600px; 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 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">&#215;</a>
        </div>


Trong đó:
- Nội dung màu đỏ là hiển thị của nội dung quảng cáo.
- Link ảnh: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLtTw3GAdl5_lzUcKLcKJh_PEn1iM1aLwRi0f6tOtl8j9V8aOeuzURHnm4G5S0YYr1RzKBpK5o5SjclojsHUqi3tDsiHFcxhVt-LYiFHYsaKvfKoawTzZSLpS6cDIKLWxPBJ1vu3Ace2fS/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é

2. Cách thêm popup thông báo vào giữa trang Web, Blogspot

- Đố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
Chúc các bạn vui vẻ !

Read more
: http://www.itviet360.com/2014/07/share-code-popup-hien-quang-cao-giua-trang.html#ixzz3zfXLUiln

http://www.itviet360.com/2014/07/share-code-popup-hien-quang-cao-giua-trang.html#ixzz3zfXLUiln

Share:

Thứ Bảy, 6 tháng 2, 2016

Hướng dẫn tạo popup nhỏ góc màn hình

Ưu điểm :
– Chỉ Xuất hiện 01 lần khi Website mở.
– Cửa sổ trang rất nhỏ gọn ở góc màn hình
Code:
Thay thuthuatblogspot.com bằng Website của bạn. 

Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP