Link Indexing Service

Hai sahabat Antoni Semuanya, kali ini saya akan membagikan sebuah tutorial yang saat ini saya gunakan pada tombol Tulis Artikel yang ada pada menu di blog ini. baiklah  kali ini saya akan mengajarkan kepada teman-teman bagaimana caranya membuat Tombol Jendela Pop Up menggunakan HTML dan CSS.

Jendela Pop Up Dengan CSS

Jendela Pop Up adalah jendela yang muncul secara otomatis dan tiba-tiba di depan layar aplikasi kita atau saat kita membuka website seseorang atau menekan tombol tertentu, Fungsi jendela Pop Up sendiri adalah untuk menyampaikan pesen yang berada di website kita atau website seseorang sebelum kita membuka halaman-halaman lain yang ada di website tersebut. Biasanya jendela Pop Up di buat dengan bantuan Plugin jQuery , tetapi semakin berkembangnya teknologi CSS jendela POP Up juga bisa di buat menggunakan CSS. Baiklah kita langsung saja praktek kan ya teman-teman.

Pertama buatlah file HTML nya seperti di bawah ini :

<body>
<div id=”button”><a href=”#popup”>pesan</a></div>
<div id=”popup”>
<div class=”indow”>
<a href=”#” class=”close-button” title=”close”>X</a>
<h2> Selamat Datang Di Website Saya</h2>
</div>
</div>
</body>

Lalu teman-teman save dan lihat hasilnya. Masih belum jadi apa-apa kan teman-teman. Sekarang kita buat CSS nya seperti di bawah ini.
Pertama kita buat CSS nya untuk Button Pesannya seperti di bawah ini :

/* Tombol Button Pesan */
#button {margin : 5% auto;width: 100px; text-align: center;}
#button a {
width : 100px;
height : 30px;
vertical-align : middle;
background-color : #F00;
color : #fff;
text-decoration : none;
padding : 10px;
border-radius : 5px;
border : 1px solid transparent;
}

Berikutnya CSS untuk tampilan jendela Pop Up nya di bawah ini :

/* Jendela Pop Up */
#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;
position : relative;
padding : 10px;
text-align : center;
margin : 15% auto;
}

Bisa di lihat CSS yang di atas terdapat Property CSS visibility: hidden;  fungsinya adalah untuk menyembunyikan jendela Pop Up nya. Setelah itu kita buat CSS untuk Button Close nya.
Berikut ini CSS untuk Button Close nya :

/* Buton Close */
.close-button {
width : 6%;
height : 20%;
line-height : 23px;
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;

Nah setelah semua CSS nya di buat tambahkan CSS di bawah ini untuk memunculkan jendela Pop Up nya saat kita klik Button Pesan :

/* Memunculkan Jendela Pop Up */
#popup:target {
visibility: visible;
}

Itulah Untuk membuat Jendela Pop Up, Fungsi Property CSS visibility: visible; di atas adalah untuk memunculkan jendela Pop Up saat kita klik Button Pesannya.

Sedang kan  jika ingin membuat tombol seperti punya saya yg di tombol Tulis Artikel maka Kita melakukan Sedikit Modifikasi pada link di Menu seperti link menu ini :

<li><div id=’button’><a href=’#popup’><i class=’fa fa-pencil’/>  Tulis Artikel</a></div></li>

Bisa di lihat dari kode <div id=’button’> di atas bahwa yang kita panggil adalah id=’button’ sedang kan untuk menuju ke atau memunculkan Pop Up nya sendiri adalah <a href=’#popup’> kode tersebut berfungsi menampilkan jendela pop up.

Sudah jadi deh jendela Pop Up nya mudahkan teman-teman bisa memahami penjelasan saya ini jika merasa kurang paham boleh di tanyaka  pada kolom komentar. Sekian dulu tutorial dari saya selamat mencoba. Terima Kasih….

WASALAM, JAYA SELALU PARA BLOGGER AND KEPP SMILE. salam jomblo 😅

tabloid pulsa