Hướng dẫn tạo quảng cáo hiện giữa trang Blog hoặc Website

posted in: Thủ thuật Blogspot | 0

Trong bài viết này, chúng tôi sẽ hướng dẫn người quan tâm cách đưa quảng cáo hiện giữa trang Blog hoặc Website một cách nhanh chóng và đơn giản nhất chỉ với đoạn Code sau:

1. Tạo Popup Trên Trang Blogspot

- Đối với Blogspot, bạn chỉ cần tạo 1 Widget HTML/Javascript và dán code dưới đây vào.

Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.

Code:

 <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(https://1.bp.blogspot.com/-DrMdgQi7Uq4/UsMDvui64fI/AAAAAAAAM3k/QLhbbmjPwnM/s1600/the-may-chu.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/dichvuthuemaychu-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 = ” Dịch vụ cho thuê máy chủ giá rẻ”;

            //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 dichvuthuemaychu</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>

>>> Xem thêm: Phân trang cho Blog dạng “Load More Post”

2. Tạo Popup Trên Trang Website

- Đối với mã nguồn Website tự code, WordPress, Joomla, Drupal, ASP.Net… thì các bạn hoàn toàn có thể dán code trên vào vị trí <body> của Website để hoạt động.

Nguồn: vuvanphong.com

>>> Xem thêm: Hướng dẫn cách thêm thẻ Meta Description cho Blog đơn giản nhất.

Bình luận