Kamis, 25 Desember 2014

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


X

Membuat Pop Up Dengan CSS Di Blogger
Pop Up dengan CSS


Membuat Pop Up Dengan CSS Di Blogger

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 Rating: 4.5 Diposkan Oleh: ana sriwahyuni

13 komentar:

  1. Balasan
    1. sekalian coba mbak ipah pop up yang pakai css nya ya mbak?

      Hapus
    2. mba Ipah @ silahkan mbak..
      mas Saud @ iya, silahkan di coba di pasang ya mas

      Hapus
  2. baru saya tau nih Mbak Ana. Pop up pakai CSS. Saya coba dulu ya Mbak. Terima kasih.

    BalasHapus
    Balasan
    1. silahkan mas Saud coba di pasang.. terimakasih

      Hapus
  3. Rasanya kalau pakai Pop-up, bukannya itu menambah beban blog memuat halaman yah

    BalasHapus
    Balasan
    1. tidak perlu khawatir mas, pop up yang ini tidak akan membuat loading blog melambat, karena hanya menggunakan sedikit kode css dan tanpa kode script

      Hapus
  4. baru tau aku, cara bikin pop up cuma dgn css, jadi nggak nambah beban blog.
    biasanya, di tutor2 yg lain mesti javascript yg akan nambah beban blog.
    makasih udah sharing mbak Ana.. :)

    BalasHapus
    Balasan
    1. iya mas Indra, lebih sederhana dan lebih nyaman buat blog,
      sama-sama mas..

      Hapus
  5. Boleh juga ni Mbak tipsnya buat di terapkan di blog wp saya

    BalasHapus
  6. dicoba ah.. lumayan buat template saya.. mksh bu ana tentang artikelnya

    BalasHapus
  7. blom pernah pasang pop up...dg css lebih ringan ya mbak
    cocok untuk kayaknya iklan yah..makasih

    BalasHapus
  8. Wah ini bisa saya praktekan untuk minta dukungan vote dong...he..he.he,, thank for sharing.... awasome tutorial...gut job mbak

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia