Membuat Pop Up Dengan CSS Di Blogger

Membuat Pop Up Dengan CSS Di Blogger - Penggunaan CSS di Blogspot memang memberikan fungsi tertentu pada tampilan blog dan hampir semua kode CSS bisa terpasang kedalam Blogspot (Blogger), apapun hasil yang ditampilkan dari kode CSS tersebut, CSS ternyata bisa memiliki kelebihan tersendiri jika dibandingkan dengan kode javascript. Misalkan dalam artikel membuat pop up dengan CSS ini, ternyata tidak semua pop up yang terpasang didalam blog memerlukan kode script untuk memfungsikan pop up tersebut

DEMO Klik Saya

X

Pop Up dengan CSS

Salah satu fungsi yang bisa dijalankan hanyan dengan menggunakan CSS adalah Pop Up. Kita semua tahu penggunaan dan pemasangan Pop Up di Blogger hampir semuanya menggunakan kode script untuk memanggil jendela munculan yang akan ditampilkan, seperti pada artikel: Memasang pop up windows di Blogger yang menggunakan kode CSS dan javascript

Sedangkan pada artikel membuat pop up dengan css ini merupakan artikel kedua dengan kategori yang sama yaitu Pop Up dengan artikel sebelumnya yaitu Memunculkan pesan saat di sorot dengan mouse. Dan pada artikel ini lebih sempurna dari artikel-artikel sebelumnya karena yang dibutuhkan untuk menampilkan pop up dengan CSS ini hanya diperlukan fungsi pseudo-element didalam kode CSS. Lantas bagaimana menerapkan pseude-element ini dalam setiap kode CSS? Kalau mengenai pseudo-element ini silahkan searching saja karena didialam artikel ini saya sudah memasukkannya kedalam CSS untuk pop up berikut ini :

#popme{
margin:0 auto;
width:100%;
height:100%;
position:fixed;
background:rgb(225, 104, 4);
top:0;
left:0;
z-index:9999;
visibility:hidden;
}
#popme_button a{
background:#ff6804;
width:auto;
height:30px;
vertical-align:middle;
padding:10px;
color:#000000;
font-weight:bold;
text-decoration:none;
}
.popme_box{
width:400px;
height:auto;
background:#fff;
border-radius:10px;
position:relative;
padding:10px;
text-align:center;
margin:10% auto;
}
.popme_box p{
margin-top:-10px;
padding:0px;
}
.popme_close{
width:20px;
height:20px;
background:rgb(225, 104, 4);
border-radius:50%;
border:3px solid #b6118d;
display:block;
text-align:center;
color:#000000;
text-decoration:none;
position:absolute;
top:-10px;
right:-10px;
}
a.popme_close{color:#000000;}
#popme:target{
visibility:visible;
}

HTML Markup
<div id="popme_button"><a href="#popme">DEMO Klik Saya</a></div>
<div id="popme">
<div class="popme_box">
<a href="#" class="popme_close" title="Close">X</a>
<p>Pop Up dengan CSS</b></p>
</div>
</div>

* Pop Up dengan CSS ganti dengan tulisan Anda

Selain memiliki kode yang sangat simpel dan tidak membuat loading blog melambat, membuat pop up dengan ccs di Blogger yang telah saya di artikel ini, juga sangat mudah untuk membuatnya. Jadi, meskipun tanpa menggunakan javascript, kita masih bisa berkreasi dengna menggunakan kode CSS. Selamat berkreasi....

Membuat Pop Up Dengan CSS Di Blogger 2014-12-25T07:30:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni