Untuk bergaya-gaya sobat mesti baca artikel satu ini TestKing :-bd Kalau yang suka dengan blog dofollow maka postingan directories karya salah satu sobat kita ini bisa sobat pertimbangkan MyFundoo-Blog :D Sobat sudah baca artikel mengenai popup versi master Abdul Gamal faceblog!!! Setelah dipikir-pikir ternyata popup banyak kegunaannya sob :D Disamping menghemat tempat, yang tidak kalah itu yaaa jadi full stylish ;)) :)) Sekarang Beben si bloglang ganteng kalem tea akan berbagi bagaimana cara membuat popup versi jQuery plug-in :D
Oh iyah, seperti biasa nih sob, karena plug-in maka sobat harus sudah memiliki jQuery script yah :DClick Here for Demo
Happy gaya and popup la yaw \m/
Oh iyah, seperti biasa nih sob, karena plug-in maka sobat harus sudah memiliki jQuery script yah :D<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>Kalau sudah ada jangan dipakai lagi yah ;)) Kemon bekicot lets cek gi dot...Script Plug-in
Letakan script ini didalam bagian tag <head> template sobat. Dalam demo ada 3 jenis popup, disini Beben hanya akan memakai demo yang pertama saja yah sob :D<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel').fadeOut()
return false;
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel').fadeOut()
return false;
});
});
//]]>
</script>
Kode CSS
Sudah tahu dong dimana ini diletakan dimana!!! yes betul sekali sob, letakan diatas/sebelum kode ]]></b:skin>.popupbox {
width:500px;
height:300px;
background-image:url(http://webdesignersdesk.com/demo/custompopup/images/pop-up_03.png);
background-repeat:no-repeat;
display: none; /* Hidden as default */
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#fade {
display: none; /* Hidden as default */
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
Hosting gambar background tersebut (kode warna merah) kalau bisa edit-edit sendiri deh sesuai keperluan kode CSS mah yah ;)) Ini yang perlu diperhatikan nih sob, letakan kode HTML ini diatas tag </body>width:500px;
height:300px;
background-image:url(http://webdesignersdesk.com/demo/custompopup/images/pop-up_03.png);
background-repeat:no-repeat;
display: none; /* Hidden as default */
float: left;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
}
#fade {
display: none; /* Hidden as default */
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
<div id="fade"></div>Ketika mau memakai dalam postingan maka sobat bisa menggunakan syntax sebagai berikut<a href="#" rel="popuprel" class="popup">Click Here for Custom Model Window</a>
<div class="popupbox" id="popuprel">
YOUR CONTENT HERE
</div>
Loading... |
6 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...