Membuat prettyPhoto With Jquery Blogger

prettyPhoto adalah clone lightbox jQuery. Tidak hanya mendukung gambar, juga mendukung untuk video, flash, YouTube, iframes dan ajax. Ini adalah media yang penuh sesak nafas lightbox.

Muncul dengan empat tema dan telah diuji dan diketahui bekerja dengan Firefox 2.0 +, Safari 3.1.1 +, Opera 9 +, Chrome, dan Internet Explorer 6.0 +.
prettyPhoto dirilis di bawah lisensi Creative Commons Attribution 2.5. Ini berarti itu tersedia secara bebas untuk semua proyek (termasuk proyek-proyek komersial).

Langkah Membuat prettyPhoto ke Blogger:

1.Login ke akun Blogger.
2. Sekarang Pergi ke Desain> Edit HTML.

3. Sekarang mencari tag </ head> dan paste kode dibawah ini di atas code </head>

<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery-1.4.4.min.js" type="text/javascript">
</script>  
<link charset="utf-8" href="http://dl.dropbox.com/u/27675057/PrettyPhoto/prettyPhoto.css" media="screen" rel="stylesheet" title="prettyPhoto main stylesheet" type="text/css"></link>  
<script charset="utf-8" src="http://dl.dropbox.com/u/27675057/PrettyPhoto/jquery.prettyPhoto.js" type="text/javascript">
</script> 

Sekarang mencari tag </ body> dan paste kode dibawah ini di atas kode </body>

<script charset="utf-8" type="text/javascript">
  
$(document).ready(function(){  
$("a[rel^='prettyPhoto']").prettyPhoto();  
}); 
</script>  

4. Cara memasukan kode untuk gambarnya harus memakai kode di bawah ini

<a href="Image.JPG" rel="prettyPhoto" title="Description"><img alt="Picture 1 title" height="60" src="Image.JPG" width="60" /></a>Beberapa Contoh Kode :
Single Image
<a href="http://dl.dropbox.com/u/27675057/pic/22.jpg" rel="prettyPhoto" title="Description">  
<img alt="Picture 1 title" height="60" src="http://dl.dropbox.com/u/27675057/pic/22%20%5B800x600%5D.jpg" width="60" />  
</a>

Image Gallery
<a href="http://dl.dropbox.com/u/27675057/3%20%282%29.jpg" rel="prettyPhoto[pp_gal]" title="You can add caption to pictures."><img alt="Red round shape" height="60" src="http://dl.dropbox.com/u/27675057/3%20%5B320x200%5D.jpg" width="60" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/1%282%29.jpg" rel="prettyPhoto[pp_gal]"><img alt="Nice building" height="60" src="http://dl.dropbox.com/u/27675057/1%20%5B320x200%5D.jpg" width="60" /></a>&nbsp;&nbsp;<a href="http://dl.dropbox.com/u/27675057/2.png" rel="prettyPhoto[pp_gal]"><img alt="Fire!" height="60" src="http://dl.dropbox.com/u/27675057/2%20%5B320x200%5D.png" width="60" /></a>

Flash Content
<a href="http://www.adobe.com/products/flashplayer/include/marquee/design.swf?width=792&amp;height=294" rel="prettyPhoto[flash]" title="Flash 10 demo"><img src="http://dl.dropbox.com/u/27675057/flash-logo.jpg" alt="Flash 10 demo" width="60" /></a>

Youtube Video
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""><img src="http://dl.dropbox.com/u/27675057/youtube.jpg" alt="YouTube" width="60" /></a>

Vimeo Video
<a href="http://vimeo.com/8245346" rel="prettyPhoto" title=""><img src="http://dl.dropbox.com/u/27675057/vimeo_logo1.png" alt="YouTube" width="60" /></a>

QuickTime Content

<a title="Tales from Earthsea" rel="prettyPhoto[movies]" href="http://trailers.apple.com/movies/disney/talesfromearthsea/talesfromearthsea-tlr1_r640s.mov?width=640&height=340"><img src="http://dl.dropbox.com/u/27675057/quicktime_logo.png" alt="Tales from Earthsea" width="50" /></a>

External Website[IFrames]
<a href="http://www.google.com?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" title="Google.com opened at 100%">Google.com</a>

Inline Content 
<a href="#inline-1" rel="prettyPhoto" ><img src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/images/thumbnails/earth-logo.jpg" alt="" width="50" /></a>
<div id="inline-1" class="hide" style="visibility:hidden" >
  <p>
This is inline content opened in prettyPhoto.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Description: Membuat prettyPhoto With Jquery Blogger