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

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-14<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).

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-22div#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.

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-8<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.

1code-line:4-1<a href="#" id="showPopup" class="button-db">Buka jendela kode</a>

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

Artikel Terkait

  • Modifikasi Alert Emoticon
    Saya telah membuat postingan Emoticon komentar otomatis namun pada postingan dahulu itu tidak ada modifikasi pemberitahuan pada saat emoticon tersebut di klik yang mana tampilannya masih menggunakan tampilan alert default. Demo Dan pada postingan saya kali ini saya akan membagikan cara modifikasi tampilan alertnya sesuka hati kita agar t…
  • Nivo Slider, jquery slider dengan 9 efek transisi
    Saya ingin memperkenalkan Nivo Slider jquery kepada Anda. Ini plugin Jquery mengagumkan untuk slider dengan 9 efek transisi yang unik, dan terlihat sangat profesional seperti slide show Flash. Salah satu slider yang paling mengesankan yang pernah saya lihat. Demo Bagaimana tentang efek? Keren? Plugin ini telah diuji untuk sebagian besa…
  • Membuat tooltip sederhana menggunakan jQuery
    Sebenarnya ada banyak cara untuk membuat tooltip, tidak hanya satu trik saja yaitu bisa dengan pseudo elements, dengan gaya CSS3 juga dengan javascript. Tooltip merupakan tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website/blog. Untuk kali in…
  • Syntax Highlighter sederhana
    Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator at…
  • Efek Toggle Slide dengan jQuery
    Bagaimana cara membuat Efek toggle pada blog ini, seperti pada sidebar, Kode Konverter, dan Emoticon. Disini saya tidak akan menjelaskan pada penggunaan di blog saya, melainkan akan mencoba menjelaskan cara kerja efek toggle. Sebelum menggunakan efek ini tentunya blog sobat harus sudah tertanam framework jQuery seperti ini : <script src='…
  • Tag pre toltip autoselect
    Tujuan dari pemasangan syntax higlighter pada halaman blog sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak pengkodean lainnya) yang ingin ditampilkan oleh publisher yang umumnya di …

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

      Bloked link! Link tidak di ijinkan baca disini.

      Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

      Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

      Hapus
  2. Unknown8 Oktober 2013 pukul 16.12

    kalo pake iframe bisa ga?

    BalasHapus
  3. yuly medan19 Oktober 2013 pukul 11.16

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus
  4. yuly medan19 Oktober 2013 pukul 11.17

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus
  5. YUNITHA DI TARAKAN10 November 2013 pukul 12.29

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus
  6. YUNITHA DI TARAKAN10 November 2013 pukul 12.30

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.

    BalasHapus
  7. YUNITHA DI TARAKAN10 November 2013 pukul 13.19

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.

    Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima 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...