Cara Membuat Jendela Pop Up Dengan CSS Di Blog

Cara Membuat Jendela Pop Up Dengan CSS Di Blog - Baiklah sekarang saya akan membagikan tutorial blog lagi, cekidot....

Jendela Pop Up

Gimana ? keren gak sob, ini menurut saya berguna, contohnya untuk pengumuman, dan lain-lain, ingin menerapkannya di blog sobat ? simak caranya

Pertama-tama masuk ke Blogger > Template > Edit HTML, Setelah itu letakkan kode dibawah ini tepat di atas ]]></b:skin>

/* Pop Up Blogsiryan.blogspot.com */

#button {

margin: 5% auto;

width: 100px;

text-align: center;

}

#button a {

background-image: linear-gradient(to bottom,#2a95c5,#21759b);

background-image: -o-linear-gradient(to bottom,#2a95c5,#21759b);

background-image: -ms-linear-gradient(to bottom,#2a95c5,#21759b);

background-image: -moz-linear-gradient(to bottom,#2a95c5,#21759b);

background-image: -webkit-linear-gradient(to bottom,#2a95c5,#21759b);

background-color: #2e9fd2;

width: 86px;

height: 30px;

vertical-align: middle;

padding: 10px;

color: #fff;

text-decoration: none;

border: 1px solid transparent;

border-radius: 5px;

}

#popup {

width: 100%;

height: 100%;

position: fixed;

background: rgba(0,0,0,.7);

top: 0;

left: 0;

z-index: 9999;

visibility: hidden;

}

.window {

width: 400px;

height: 100px;

background: #fff;

border-radius: 10px;

position: relative;

padding: 10px;

box-shadow: 0 0 5px rgba(0,0,0,.4);

text-align: center;

margin: 15% auto;

}

.close-button {

width: 20px;

height: 20px;

background: #000;

border-radius: 50%;

border: 3px solid #fff;

display: block;

text-align: center;

color: #fff;

text-decoration: none;

position: absolute;

top: -10px;

right: -10px;

}

#popup:target {

visibility: visible;

}

Jangan di Simpan dulu templatenya, kemudian cari kode </body> lalu letakkan kode dibawah ini tepat di atas </body>

<div id="button"><a href="#popup">Click Me</a></div>
<div id="popup">
    <div class="window">
        <a href="#" class="close-button" title="Close">X</a>
        <h1>Jendela Pop Up</h1>
        <p>Ini adalah jendela Pop Up sederhana tanpa javasript<br/>
        Jendela ini dimunculkan oleh CSS<br/>
        Untuk menutup jendela ini, klik tombol close di kanan atas</p>
    </div>
</div>
<style>

Keterangan :
Silahkan ganti tulisan yang berwarna biru dengan tulisan yang anda inginkan

Langkah terakhir silahkan klik Simpan template anda, dan jangan lupa silahkan di Optimasi sendiri letak widgetnya, jika ada pertanyaan silahkan bertanya melalui komentar
Semoga Bermanfaat.