Memasang prettyPhoto di Template Blogger

9/17/2014 Blogger JQuery
Setelah sekian lama yang tak terhingga tidak muncul-muncul karena males ngurusin Blog plus tidak ada Koneksi Internet :D kali ini Kang Fathur muncul lagi mau bagi-bagi Tips dan Trik yang Kang Fathur juga dapatkan dari Sahabat2 Blogger Indonesia. dan Blogger Luar Negeri.

Baik di Pagi yang cerah ini saya akan membagikan tentang cara memasang efek lightbox prettyPhoto di template Blogger dengan langkah-langkah yang sangat mudah, lebih mudah dari pemasangan efek lightbox yang pernah dibahas sebelumnya. Apa itu prettyPhoto? prettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.  Kurang lebihnya, prettyPhoto adalah kloning dari jQuery Lightbox (yang terkenal itu) yang tidak hanya mendukung gambar, tetapi juga video, flash, YouTube, dan iframe. prettyPhoto dikembangkan oleh Mas Stephane Caron.


Itulah kurang lebihnya untuk penjelasan tentang PrettyPhoto, baik selanjutnya kita langsung ke TKP.

Pertama seperti biasa Sobat" pergi ke Blogger Dasbor dan langsung ke halaman HTML.
Selanjutnya cari kode </head> (gunakan Ctrl + F untuk memudahkan pencarian.), kalau sudah ketemu, letakkan kode berikut di atasnya.



<link href='http://dl.dropbox.com/u/18548998/Javascript/facebook.css' media='screen' rel='stylesheet' type='text/css'/>

 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/18548998/Javascript/jquery.prettyPhoto.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){ $(&quot;a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
theme: &#39;facebook&#39;, /* light_rounded / dark_rounded / light_square / dark_square / facebook */
});
});
</script>


Keterangan kode di atas (tidak berlaku untuk kode di bawah):
Oranye - kode jQuery, cek dahulu di template Anda, bila kode ini dobel, efeknya tidak akan bekerja.
Biru - tema default prettyPhoto adalah tema facebook, anda dapat menggantinya dengan tema lainnya dengan cara mengedit css prettyPhoto (bila Anda tidak paham bagaimana cara mengedit css, gunakan tema facebook)



Simpan template blogger Sobat. Sampai disini pemasangan PrettiPhoto di template blogger sudah beres, selanjutnya adalah memanggil efek prettyPhoto dengan sedikit modifikasi kode.

Untuk memasang prettyPhoto pada satu gambar saja
<a href="http://lh5.ggpht.com/_BiYlG6sktcY/TDWDYPILmwI/AAAAAAAAA-Q/M_SwruKC-Z8/patung.jpg" rel="prettyPhoto" title="Patung"><img alt="Judul gambar" src="http://2.bp.blogspot.com/_BiYlG6sktcY/TDVoCXxZY4I/AAAAAAAAA80/2QIPkhqvVXc/s320/tr-wp2.jpg" /></a>

Untuk memasang prettyPhoto pada kelompok gambar (group)

<a href="http://lh6.ggpht.com/_BiYlG6sktcY/TDVvG5kh_fI/AAAAAAAAA94/UPjBxxlXmZo/contoh%203.jpg" rel="prettyPhoto[gallery]"><img src="http://1.bp.blogspot.com/_BiYlG6sktcY/TDVoDUtAW7I/AAAAAAAAA88/8SJF3H36USI/s320/tr-wp3.jpg" /></a><a href="http://lh4.ggpht.com/_BiYlG6sktcY/TDWDXfBpreI/AAAAAAAAA-M/X1QAwF2pDjA/Gerbang.jpg" rel="prettyPhoto[gallery]" title="Gerbang"><img src="http://4.bp.blogspot.com/_BiYlG6sktcY/TDVoGIJgIyI/AAAAAAAAA9E/paQgCQkv8w8/s320/tr-wp4.jpg" /></a><a href="http://lh6.ggpht.com/_BiYlG6sktcY/TDVvHdDX09I/AAAAAAAAA-A/vOn39pc2WtA/contoh%205.jpg" rel="prettyPhoto[gallery]" ><img src="http://3.bp.blogspot.com/_BiYlG6sktcY/TDVqDSV2pTI/AAAAAAAAA9M/tdMEjZtu18Q/s320/tr-wp6.jpg" /></a>


Cukup gunakan rel="prettyPhoto" (untuk satu gambar), rel="prettyPhoto[gallery]" untuk kelompok gambar, tambahkan title dan alt untuk menambahkan keterangan pada gambar.

Keterangan Untuk membedakan galeri yang satu dengan yang lain (agar tidak tercampur), ubah rel="prettyPhoto[gallery]" menjadi rel="prettyPhoto[gallery1]", atau rel="prettyPhoto[gallery2]", atau rel="prettyPhoto[piknik]", atau rel="prettyPhoto[liburan]".

Untuk memasang video YouTube dengan prettyPhoto#

<a href="http://www.youtube.com/watch?v=hTMrlHHVx8A?width=640&amp;height=360" rel="prettyPhoto" title="Kings and Queens - 30 Seconds To Mars"><img alt="YouTube" src="http://2.bp.blogspot.com/_BiYlG6sktcY/TDgX0-xgXnI/AAAAAAAAA-o/4c-0FGC0YMk/s320/king_%26_queen.jpg" /></a>

Untuk memasang video QuickTime dengan prettyPhoto#

<a href="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov?width=640&amp;height=360" rel="prettyPhoto" title="Despicable Me"><img alt="QuickTime" src="http://1.bp.blogspot.com/_BiYlG6sktcY/TDgdT_mjekI/AAAAAAAAA-w/zYGLd5ruSAg/s320/quicktime.jpg" /></a>

 Mungkin hanya itu untuk Tutorial kali ini, mudah"an lain nanti kita bisa bagi" lagi. Semoga bermanfaat.

Sumber : http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 comments

nice post sob..
article yang menarik,saya tunggu article berikutnya yach.hehe..
maju terus dan sukses selalu...
salam kenal yach...
kunjungi blog saya juga ya sob,banyak tuh article2 yang seru buat dibaca..
agen situs poker online,poker online terpercaya...
http://chaniaj.blogspot.com/ dan situs kesayangan kami http://oliviaclub.com
serta sites.google kebanggaan kami https://sites.google.com/site/pokeronlineterpopuler/
di oliviaclub.com poker online uang asli terbaik di indonesia dengan teknologi teraman dan tercanggih.
main dan ajak teman anda bergabung dan dapatkan 20% referral fee dari house commision untuk turnover teman ajakan anda...
kunjungi link unggulan kami:
-http://oliviaclub.com
-http://mentaripoker.com
-http://royalflush99.com
-http://rimbapoker.com
blognya temen nih http://poker-online-indonesia-2014.blogspot.com/

Balas

sama sama Bos, terimakasih juga tas kunjungannya

Balas