.
,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

Ads Popout with Jquery

Posted By admin Sunday, March 27, 2011

Ads will be involved Popout jQuery and the jQuery Cookie jQuery Plugin who used to remember that the ad never been opened or closed. Ads Popout better seen and accessed by using a very small room with the effects of open-close (slide-in-a slide-out). Also easier to apply to bloggers because it only involves a few lines of code XHTML, CSS and JavaScript. (Download the first supporting files and upload to your web hosting)

Install the CSS Code In Templates
Step 1
Login to Blogger
Step 2
Go to the "Draft - Edit HTML"
Step 3
Find the code below:

]]></ B: skin>

Step 4
Enter (copy and paste) the following CSS code in step 3 above code:

# Infout {margin: 0; padding: 0; position: absolute; top: 250px; left: 0; width: 320px; height: 350px; z-index: 100; overflow: hidden;}
# Infout a, # infout a img {text-decoration: none; border: 0; outline: 0}
# Infout a span {display: none}
# Infout # title {width: 20px; height: 350px; position: relative; left: 0; z-index: 102}
# Infout a # close {position: absolute; background: transparent url (http://lh3.ggpht.com/_6-JIvzw7Lbs/TO6BMNhIrXI/AAAAAAAAABQ/r4s_MBsv5GM/s800/trans_pixel.gif); top: 0; left: 230px; height: 25px; width: 65px; cursor: pointer}
# Infout a # open {cursor: pointer}
# Infout # container {position: absolute; top: 10px; left: 20px; margin-left:-300px; z-index: 101}

Installing jQuery Code In Templates
Step 5
Find the code below:

</ Head>

Step 6
Enter (copy and paste) the following jQuery code above the code in step 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script language='JavaScript' src='http://plugins.jquery.com/files/jquery.cookie.js.txt'/>
<script type='text/javascript'> //<![ CDATA [
$ (Document). Ready (function () {
var infoOut = "# infout";
var infobox = "# container";
infoLebar var = $ (Infobox). width () + $ ("# title"). width ();
var infoCookie = "infokuki";
bukaInfo function () {
$ (InfoOut). Width (infoLebar + "px");
$ (Infobox). Animate ({marginLeft: "0"}, 1200)
$. Cookies (infoCookie, null);
}
tutupInfo function () {
$ (Infobox). Animate ({marginLeft: "-" + infoLebar + "px"}, 1200, "linear",
function () {$ (infoOut). width ($("# title "). width () +" px ");}
);
$. Cookies (infoCookie, 'closed', {expires: 28});
}
$ ("# Open"). Click (function () {
if (! $. cookies (infoCookie)) {
tutupInfo ();
} Else {
bukaInfo ();
}
return false;
});
$ ("# Close"). Click (function () {
tutupInfo ();
return false;
});
if (! $. cookies (infoCookie)) {
$ (InfoOut). Animate ({opacity: 1.0}, 1500, "linear", bukaInfo);
}
});
//]]></ Script>

In XHTML Code Integration Template
Step 7
Find the code below

</ Body>

Step 8
Enter (copy and paste) the code below the above code in step 3:

<div id='infout'>
<div id='judul'>
<a id='buka'> <img src='URL/popout-cap.gif' width='20' height='350' alt='Buka Informasi'/> </ a>
</ Div>
<div id='wadah'>
<a id='tutup' title='close ads'> <span> Close </ span> </ a>
<a href='url target.com' title='Informasi Interesting from Sponsor' target='_blank'> <img src = 'URL / popout-ad.png' width = '300 'height = '330 'alt =''/></ a>
</ Div>
</ Div>

Step 9
Save the template and preview your blog ...

Description:

* Change the URL in accordance with the URL address that you are prepared (according to the file that you upload to the web hosting)
* Change http://url target.com according to the ad's URL (address URL of the destination)
* To view Ads jQuery Popout not participate shift when compiled movable (fixed in position) change the code position: absolute; into position: fixed; in step 4 to 1 line


Related Post



Follow by Email