Cách Tạo Popup quảng cáo trên Website/Blogspot

Tạo Popup quảng cáo trên website thì có phần hơi khác với blogger(Bài sau mình sẽ chia sẻ về blogger). Chức năng của Popup là gì thì hẳn các bạn đã biết nên mới tìm bài hướng dẫn này. Chủ yếu của nó là thông báo sự kiện, một vấn đề nào đó , hay đơn giản là một quảng cáo giúp bạn có thu nhập..... vv. Popup cũng khá là nhiều chức năng, miễn sao Popup đáp ứng nhu cầu cho bạn thì nó là một chức năng. 
Giờ mình đi vào nội dung chính vấn đề này nhé !


Tạo Popup quảng cáo trên Website


Các bạn dán đoạn code sau vào trong thẻ <body> nhé !


<style type="text/css">

#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="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="link các bạn muốn đến" target="_blank">Thủ

Thuật Blogger</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 đó: - Khu vực chữ bôi đỏ là mã HTML hiển thị nội dung của quảng cáo. - Dòng chữ Chúc bạn vui vẻ ! bạn thay bằng câu của bạn hoặc có thể xóa đi nếu muốn. - Link hình ảnh nền được bôi xanh. Chúc các bạn thành công nha !

Bình Luận Của Bạn

vungve.com không chấp nhận bình luận thiếu văn hóa

Mới hơn Cũ hơn