Membuat Kotak Iklan Atau Pengumuman Di Website

Sering kali kita melihat sebuah kotak yang berisi iklan atau pengumuman saat membuka sebuah website. Pada artikel ini kita akan mempelajari mengenai proses pembuatannya. Hal pertama yang kita lakukan adalah membuat kotak pembuka, berikut ini kode HTML:

<html>
    <head>
        <title>Welcome Box</title>
        <style>
        .kotak{
            background-color: black;
            position:fixed;
            top:150px;
            bottom:150px;
            left:150px;
            right: 150px;
            opacity: 0.4;
            box-shadow: 5px 5px 5px black;
        }
        </style>
    </head>
    <body>
        <div class="kotak">
        </div>
        <div class="kontent">
        <h1>Onestring Lab</h1>
        <h3>Kreatifitas, Kode dan Kopi</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Sit inventore fuga nulla, quae esse, placeat neque voluptate
        hic assumenda, ad voluptas harum minus! Quam a consectetur
        deserunt, voluptatibus reiciendis iste.</p>
        </div>
    </body>
</html>

Maka didapat hasil seperti ini :

welcomeBox1Tampak kotak hitam transparan pada gambar diatas. Selanjutnya kita membuat tanda silang untuk menjadi bagian yang diklik, berikut kode tambahannya.

HTML

<div class="kotak">
    <div class="tutup">
        <img src="icon-close-128.png" width="30px">
    </div>
</div>

CSS

.tutup{
    width: 30px;
    height: 30px;
    background-color: white;
    border: 3px solid black;
    border-radius: 50%;
    position: absolute;
    top:-15px;
    right: -15px;
}

Gambar

icon-close-128

Maka hasil yang terlihat adalah sebagai berikut:

welcomeBox2

Selanjutnya kita tambahakan kode jQuery untuk menutup kotak hitam transparan saat diklik tanda silang. Berikut ini kodenya:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('.tutup').on('click',function(){
            $('.kotak').fadeOut("slow");
        });
    });
</script>

Program jQuery ini akan menghilangkan kotak hitam transparan secara perlahan. Kode lengkap dari keseluruhan program adalah sebagai berikut:

<html>
    <head>
        <title>Welcome Box</title>
        <style>
        body{
            height: 2000px;
        }
        .kotak{
            background-color: black;
            position:fixed;
            top:150px;
            bottom:150px;
            left:150px;
            right: 150px;
            opacity: 0.4;
            box-shadow: 5px 5px 5px black;
        }
        .tutup{
            width: 30px;
            height: 30px;
            background-color: white;
            border: 3px solid black;
            border-radius: 50%;
            position: absolute;
            top:-15px;
            right: -15px;
        }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $('.tutup').on('click',function(){
                    $('.kotak').fadeOut("slow");
                });
            });
        </script>
    </head>

    <body>
        <div class="kotak">
            <div class="tutup">
                <img src="icon-close-128.png" width="30px">
            </div>
        </div>
        <div class="kontent">
        <h1>Onestring Lab</h1>
        <h3>Kreatifitas, Kode dan Kopi</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Sit inventore fuga nulla, quae esse, placeat neque voluptate
        hic assumenda, ad voluptas harum minus! Quam a consectetur
        deserunt, voluptatibus reiciendis iste.</p>
        </div>
    </body>
</html>

Selamat bereksplorasi dan memodifikasinya menjadi lebih baik.

Be the first to comment

Leave a Reply

Your email address will not be published.


*