everything here is mine. unless stated.

Tutorial: Pop up untuk blogger

Assalamualaikum

So basically orang buat pop up untuk blogskins dan blogger and buatkan some of you wonder how I put it in template designer. so let's begin :)

  • layout > add gadget > html / javascript
1. ini code untuk style pop up (warna, kedudukan) copy code di bawah dan paste dalam kotak tersebut

<body><style type="text/css">
#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none;
background: #FFFFFF;
padding: 20px;
float: left;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
2. ini code javascript
<head><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//
//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://tiny.cc/closeimg" class="btn_close" title="Close Window" alt="Close" /></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});
});
</script></head></body>
3. ni code html
<div id="02" class="popup_block">
BLEH BLEH BLEH
</div>
4. copy dan paste code di bawah kat mana-mana korang nak dia muncul
 <a href="#?w=500" rel="02" class="poplight">your title</a>
5.  in case korang nak tambah lagi pop up tu, copy code no. 3 dan 4 lagi sekali tapi tukar nombor yang saya merahkan kepada 03 dan seterusnya.

6. PASTIKAN KORANG COPY DAN PASTE SEMUA CODE DALAM TURUTAN

truth to be told, saya tak reti sangat macam mana nak buat tuto about this. but kalau ada apa-apa yang korang tak faham, feel free to ask me :)
Labels:

No comments:

Post a Comment