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
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(){
$("#showPopup").click(function() {
$("div#Popup").addClass("show");
return false;
});
$("#close-Popup-db").click(function() {
$("div#Popup").removeClass("show");
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...
Belum ada tanggapan untuk "Pop-up kode menggunakan CSS3 dan jQuery"
Post a Comment