Lightbox mac style gadgets for blogger

Lightbox mac style gadgets for blogger (google images)

Gadgets For Blogger - FancyBox is a tool for displaying images, html content and multi-media in a "lightbox" that floats from the Mac-style web pages. It is easy to use and make the web really be good, mainly dealing with images.You can see the demo. Oky to start a blog how to apply them in the following way.

First thing to do is go click Login at Blogger.com Template / Design> Edit HTML
Find the code </ head> enter the following code right above </ head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://donor-ilmu.googlecode.com/files/fancybox-1.3.4.js' type='text/javascript'/>
<link href='http://masuk.webuda.com/fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/> &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&quot;a[imageanchor=1]&quot;).fancybox({
&#039;transitionIn&#039; : &#039;elastic&#039;,
&#039;transitionOut&#039; : &#039;elastic&#039;,
&#039;titlePosition&#039; : &#039;over&#039;,
&#039;overlayColor&#039; : &#039;#000000&#039;,
&#039;overlayOpacity&#039; : 0.9,
&#039;titleFormat&#039; : function(title, currentArray, currentIndex, currentOpts) {
return &#039;&lt;span id=&quot;fancybox-title-over&quot;&gt;Image &#039; + (currentIndex + 1) + &#039; / &#039; + currentArray.length + (title.length ? &#039; &amp;nbsp; &#039; + title : &#039;&#039;) + &#039;&lt;/span&gt;&#039;;
}
});
$(&quot;#login&quot;).fancybox({
&#039;titlePosition&#039; : &#039;inside&#039;,
&#039;transitionIn&#039; : &#039;elastic&#039;,
&#039;transitionOut&#039; : &#039;elastic&#039;
});
$(&quot;a.fancy&quot;).fancybox({
&#039;width&#039; : &#039;75%&#039;,
&#039;height&#039; : &#039;75%&#039;,
&#039;autoScale&#039; : false,
&#039;transitionIn&#039; : &#039;elastic&#039;,
&#039;transitionOut&#039; : &#039;elastic&#039;,
&#039;type&#039; : &#039;iframe&#039;
});
});
&lt;/script&gt;

3. Click Save Template

At this point the installation script Fancybox in your Blogger template has been completed. The next step is the application of Fancybox call effect of a link.

Guest Book

<a class="fancy" href="guestbook-url">Guest Book</a>

Replace the blue text with the address of your Guest Book, for example "http://www5.shoutmix.com/?jakarta?"

(Not a guest book that can only call, you can also make a lot of iframe links as long as the link between the opening <a class="fancy" her="...."> script contained class = "fancy".)

Login Menu Bogger

<a id="login" href="#login1">Login</a>

<div style="display: none;">

<div id="login1" style="width:400px;height:252px;overflow:auto;">

<form action='https://www.google.com/accounts/ServiceLoginAuth' id='gaia_loginform' method='get' onsubmit='return(gaia_onLoginSubmit();'>

<p>

<label>E-mail :<br />

<input type="text" name="Email" id="Email" class="input" value="" size="20" tabindex="4" /></label>

</p>

<p>

<label>Password :<br />

<input type="password" name="Passwd" id="Passwd" class="input" value="" size="20" tabindex="5" /></label>

</p>

<p class="forgetmenot"><label><input id='PersistentCookie' name='PersistentCookie' tabindex='7' type='checkbox' value='1'/> Remember Me</label></p>

<p class="submit">

<input type="submit" class="button-primary" value="Log In" tabindex="6" />

</p>

</form>

okay, may you want to see fancybox site, just click here

See you Gadgets For Blogger

Thanks for donorilmu ^^