Memasang prettyPhoto di Template Blogger

Tulisan ini akan membahas 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, yang juga membuat prettySociable. Oke, sudah siapkah Anda membaca lanjutan dari tulisan (yang saya buat dengan sedikit basa basi :D) ini?


Apa selanjutnya? mari kita cari kode </head>, kalau sudah ketemu, letakkan kode berikut di atasnya.

<!-- CSS prettyPhoto -->
<link href='http://dl.dropbox.com/u/18548998/Javascript/facebook.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- jQuery -->
<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):
Hijau - link dari css dengan tema facebook untuk prettyPhoto, silakan ganti dengan link css Anda sendiri atau gunakan saja link saya tersebut.
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 Anda. Sip, pemasangan di template blogger sudah beres, agenda 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.

#Tips
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 prettyPhoto pada link ke situs tertentu (iframe)

<a href="http://www.google.com/?iframe=true&amp;width=80%&amp;height=100%"  rel="prettyPhoto"><img src="http://4.bp.blogspot.com/_BiYlG6sktcY/TDVsBWmD19I/AAAAAAAAA9U/atLz7Kf0sL0/s320/google.jpg" /></a>

Ubah nilai (dalam %) pada kode yang ditandai dengan warna biru sesuai kebutuhan.


Untuk memasang prettyPhoto pada konten yang disembunyikan (inline)

<a href="#data" rel="prettyPhoto">Klik untuk membuka Lorem Ipsum</a>

<div style="display: none;">
<div id="data">
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.</div>
</div>



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>

#Nilai width dan height (dalam pixel) dapat disesuaikan sesuai kebutuhan.

Ada masalah? kurang jelas? tenang, masih ada kotak komentar :D, selamat mencoba :)




38 komentar:

  1. keren tutorialnya, saya ijin save ya.. thankies... :)

    BalasHapus
  2. Terima kasih info dan tutorialnya. Untuk lebih mempererat silaturahim dan mendapatkan update dari blog sahabat ini sekalian follow.

    Salam ukhuwah

    BalasHapus
  3. Pake ini makin berat ga ya gan Blog kite?

    BalasHapus
  4. pas bgt buat yg Blognya isinya gambar2 semua ^^

    BalasHapus
  5. wah keren demonya,,.. jd pingin...
    tapi saya sudah coba kuq ga bisa?
    pliss Jawabannya..

    BalasHapus
  6. Mantap nih...izin bookmark ya siapa tau nati saya perlu.

    BalasHapus
  7. Googlid
    Silakan sob..

    Beda
    Sama-sama sob...

    Download One Piece Indonesia
    Menambah kode berarti menambah ukuran templatemu sob hehe....

    BalasHapus
  8. Sebuah Tips
    iframe, inline, dan video pas juga sob...

    Rachmath
    Kamu nyoba di blog yang mana sob?

    Goomelar
    Oke sob, silakan saja...

    محمد نور الإمام ألجوهرئ
    Lumayan ringan sob, tapi tergantung kecepatan koneksi internet juga sih hehe...

    BalasHapus
  9. Mas Ardiansyam : Koneksi Saya Kayak Siput Mas

    Pajang Blog Saya Juga Yah Di tautan Sobat.Saya Udah Pasang Di Blog Saya Ngikutin Cara Mas Ardians Pake Thumbshot

    BalasHapus
  10. kira-kira kalau ditambah di tempat saya, jadi berat gak ya?!?!?

    BalasHapus
  11. Sepertinya Akan Saya Coba Nih ...

    BalasHapus
  12. Wah terimakasih neh tipsnya sangat bermanfat dan membantu bangets, salam blogging

    BalasHapus
  13. tutorial yang sedang saya cari2, pretty photo emang penting banget di blog kita, langsung dicoba boss

    BalasHapus
  14. Bagus tutorialnya..nyoba dulu..bikin blog berat apa gak ya?

    BalasHapus
  15. tambahan ilmu buat saya nih gan...
    bisa diaplikasikan untuk beberapa blog blogspot milik saya nih...
    meski kliatannya aga ribet nih langkah2nya tapi sangat membantu sekali informasinya
    terima kasih ya gan...

    BalasHapus
  16. buat semua saja
    yang pasti nambah kode pasti nambah berat template.. bukan begitu? :D

    Terima kasih sudah berkunjung dan berkomentar :)

    BalasHapus
  17. Mas untuk belajar sangat begus lho mas untuk hosting sendiri, cuma 35.000 per tahun mas, he...he...salam sukses selalu, ini blog wp hasil dari hosting 35.000 lho mas, ndak kepingin

    BalasHapus
  18. salam persahabatan
    thanks tutornya kawan sangat bermanfaat

    BalasHapus
  19. terimakasih Infonya! sayang blog saya terlalu berat sekarang, bagaimana lagi kalau ditambah foto.

    BalasHapus
  20. blogspot makin keren aja mas, fitur2 dari plugin wordpress bisa diterapkan di blogspot :)

    BalasHapus
  21. Semakin mantabs !!!

    BalasHapus
  22. Wah nggak bisa beraksi bang prettyphotonya. knp ya??

    BalasHapus
  23. Sekadar mampir utk baca update dan menambah sahabat blogger.
    Salam.

    BalasHapus
  24. assalamualikum bang ardhian :)

    makasih yah tutorialnya :)

    tapi ada prob;em buat komnetarnya :(

    ada ide ???

    BalasHapus
  25. Balasan
    1. Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id turpis lectus. Maecenas suscipit enim sit amet diam mattis tristique nec vel nunc. Etiam condimentum mi commodo sapien aliquet sodales. Curabitur lacinia ante id elit laoreet sagittis. Morbi auctor accumsan turpis a tincidunt. Suspendisse nisl turpis, venenatis a auctor et, cursus ac odio. Proin elit nunc, sodales vel iaculis et, bibendum vulputate sem. Sed consectetur imperdiet fringilla. Nunc fermentum massa turpis, sit amet tempor dolor. In vehicula lorem ante. Sed magna nisl, venenatis nec pulvinar vel, ullamcorper sit amet risus. Cras lacus magna, aliquet at rutrum sit amet, porta sit amet sem. Suspendisse non nunc eu ligula dapibus mollis pulvinar vitae nunc.

      Hapus
  26. Terimakasih banyak atas Inspirasinya PAK !!

    BalasHapus
  27. Masih bingung cara pasangnya.....sewaktu di postingan...

    BalasHapus
  28. tolonmg lebih detail lagi.. kalau bisa pasang tutorial.. masih bingung nih.. :(

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑