Pop-up kode menggunakan CSS3 dan jQuery

Pop-up kode menggunakan CSS3 dan jQuery

Javascript jQuery

Menambahkan jendela pop-up dengan cara yang sangat mudah menggunakan CSS3, Hal ini dapat digunakan untuk menampilkan kode sumber, gambar dan apa pun yang kita inginkan. Posting ini menjelaskan cara menambahkan jendela pop-up sederhana untuk blogger menggunakan CSS3 dan beberapa baris kode jQuery.

Lihat Demo Buka jendela kode

Bagaimana membuatnya, Berikut ini adalah kode jQuery.

Cari kode tag </head> dan letakkan kode javascript dibawah ini diatasnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#showPopup&quot;).click(function() {
$(&quot;div#Popup&quot;).addClass(&quot;show&quot;);
return false;
});
$(&quot;#close-Popup-db&quot;).click(function() {
$(&quot;div#Popup&quot;).removeClass(&quot;show&quot;);
return false;
});
});
</script>

Periksa template Anda sudah ada belum library jQuerynya, seperti:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">

Jika sudah ada , jangan ditambahkan.

Dibawah ini adalah kode CSS.

Tambahkan css dibawah ini di atas kode tag ]]></b:skin>. Kode CSS ini mencakup untuk tampilan tombol (tombol dengan efek :hover).

div#Popup{ position: absolute; top: 40px; width: 560px; left: 170px; border: solid 1px #bbb; padding: 20px; background: #fff; -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25); opacity: 0.0; -webkit-transition: opacity 0.0s ease-out; z-index: 0; }
div#Popup.show {
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}

.button-db{
   border-radius: 10px;
    -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.5); 
    color: #FFFFFF !important;
    background:#33AD33;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    padding:1px 4px 1px 4px;
}
.button-db:hover{ background:#327F32;text-decoration:none;}

Jika langkah diatas selesai, silahkan simpan template anda.

Setelah menambahkan kode di atas untuk template, sekarang anda tambahkan kode berikut ke posting, untuk memanggilnya agar tampil.

<div id="Popup">
<h3>Jendela Script</h3>
Ini hanya tampilan sederhana untuk demo, jika anda ingin menambahkan lebih banyak style silahkan monggo... 
<br />
Anda bisa menambahkan kode, gambar, tulisan dan apa pun disini, menggunakan tag <pre> juga <blockquote>.
<br />
<a class="button-db" href="#" id="close-Popup-db">tutup</a>
</div>

Ini adalah kode untuk tombol. Tambahkan kode tombol ini ke manapun Anda ingin didalam postingan untuk membuka pop-up kode Anda.

<a href="#" id="showPopup" class="button-db">Buka jendela kode</a>

Demikian saja semoga berguna, pertanyaan silahkan sampaikan di kolom komentar...

11 komentar

  1. abang ichal30 Agustus 2013 pukul 18.31

    hmm males deh yg namanya popup

    BalasHapus
    Balasan
    1. Dafin defandaky31 Agustus 2013 pukul 03.57

      ini beda sob...

      Hapus
    2. YUNITHA DI TARAKAN10 November 2013 pukul 12.31

      Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

      Hapus
  2. Unknown8 Oktober 2013 pukul 16.12

    kalo pake iframe bisa ga?

    BalasHapus
  3. yuly medan19 Oktober 2013 pukul 11.16

    ALHAMDUHLILLAH DPT 127 JUTA.DAN SAYA SELAKU PEMAIN TOGEL,DAN KEPERCAYAAN ITU ADALAH SUATU KEMENANGAN DAN SAAT SKRAG SY TEMUKAN ORANG YG BISA MENGELUARKAN ANGKA2 GAIB YAITU MBAH RORO JIKA ANDA YAKIN DAN PERCAYA NAMANYA ANGKA GOIB ANDA BISA HUBUNGI LANSUNG HUB MBAH RORO DI NO_ 085394537578 Buktikan.

    BalasHapus
  4. yuly medan19 Oktober 2013 pukul 11.17

    ALHAMDUHLILLAH DPT 127 JUTA.DAN SAYA SELAKU PEMAIN TOGEL,DAN KEPERCAYAAN ITU ADALAH SUATU KEMENANGAN DAN SAAT SKRAG SY TEMUKAN ORANG YG BISA MENGELUARKAN ANGKA2 GAIB YAITU MBAH RORO JIKA ANDA YAKIN DAN PERCAYA NAMANYA ANGKA GOIB ANDA BISA HUBUNGI LANSUNG HUB MBAH RORO DI NO_ 085394537578 Buktikan.

    BalasHapus
  5. YUNITHA DI TARAKAN10 November 2013 pukul 12.29

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    BalasHapus
  6. YUNITHA DI TARAKAN10 November 2013 pukul 12.30

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    BalasHapus
  7. YUNITHA DI TARAKAN10 November 2013 pukul 13.19

    Kami sekeluarga ingin mengucapkan banyak terimakasih kepada MBAH SUGANDRI atas bantuannya.Sekian lama saya bermain togel baru kali ini saya benar-benar merasakan yang namanya kemenangan 4D dan alhamdulillah saya dpat Rp 250 juta dan semua ini berkat bantuan angka dari MBAH SUGANDRI karena cuma Beliaulah yang memberikan angka goibnya yg di jamin 100% tembus,,buat anda yg butuh angka yang dijamin tembus hubungi MBAH SUGANDRI DI 0823-3339-1086 insya allah beliu akan menbatu kesusahan anda apalagi kalau anda terlilit hutang trima kasih….??

    BalasHapus


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...