Membuat Lightbox Dengan Jquery

type='html'>

Ada sejuta trik blogger untuk mengedit blog khususnya dalam editing tampilan gambar di blogger. Salah satunya dengan membuat lightbox dengan jquery. Trik membuat lightbox itu sendiri sebenarnya sudah lama sekali dibuat oleh master-master blog. Namun akhir-akhir ini banyak website ternama bahkan jejaring sosial Facebook dan Google+ masih menggunakan trik ini.

Sebenarnya apasih lightbox di Blogger itu? Lightbox di blogger bukan diartikan sebagai kotak lampu atau lampion di blogger melainkan menampilkan gambar yang masih dalam halaman posting. Maksudnya menampilkan gambar blogger di halaman posting dengan lebih mengutamakan gambar itu sendiri. Bukan halaman gambar atau alamat gambar. Maka dari itu di luar tampilan gambar agak samar, terarsir, atau bahkan hitam.

Sebagai contoh klik gambar di atas atau yang lebih menarik (lihat Cewek Imut) dan akan terlihat hasilnya seperti saat kita melihat foto di facebook atau google+. Daripada berpanjang lebar malah gak jelas, Mari kita buat lightbox dengan jquery.

1. Login di blogger.

2. Dalam posisi dasboard blog sahabat semua klik Design

3. Klik lagi Edit HTML

4. Centang Expand Template Widget

5. Jangan lupa backup dulu ya sobat

6. Cari kode di bawah ini :

]]></b:skin>

7. Paste di atasnya kode berikut :

/*css lightbox dimulai dari sini*/<br /> /**<br /> * jQuery lightBox plugin<br /> * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)<br /> * and adapted to me for use like a plugin from jQuery.<br /> * @name jquery-lightbox-0.5.css<br /> * @author Leandro Vieira Pinho - http://leandrovieira.com<br /> * @version 0.5<br /> * @date April 11, 2008<br /> * @category jQuery plugin<br /> * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)<br /> * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US<br /> * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin<br /> */<br /> #jquery-overlay {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> z-index: 90;<br /> width: 100%;<br /> height: 500px;<br /> }<br /> #jquery-lightbox {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> z-index: 100;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #jquery-lightbox a img { border: none; }<br /> #lightbox-container-image-box {<br /> position: relative;<br /> background-color: #fff;<br /> width: 250px;<br /> height: 250px;<br /> margin: 0 auto;<br /> }<br /> #lightbox-container-image { padding: 10px; }<br /> #lightbox-loading {<br /> position: absolute;<br /> top: 40%;<br /> left: 0%;<br /> height: 25%;<br /> width: 100%;<br /> text-align: center;<br /> line-height: 0;<br /> }<br /> #lightbox-nav {<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> height: 100%;<br /> width: 100%;<br /> z-index: 10;<br /> }<br /> #lightbox-container-image-box > #lightbox-nav { left: 0; }<br /> #lightbox-nav a { outline: none;}<br /> #lightbox-nav-btnPrev, #lightbox-nav-btnNext {<br /> width: 49%;<br /> height: 100%;<br /> zoom: 1;<br /> display: block;<br /> }<br /> #lightbox-nav-btnPrev { <br /> left: 0; <br /> float: left;<br /> }<br /> #lightbox-nav-btnNext { <br /> right: 0; <br /> float: right;<br /> }<br /> #lightbox-container-image-data-box {<br /> font: 10px Verdana, Helvetica, sans-serif;<br /> background-color: #fff;<br /> margin: 0 auto;<br /> line-height: 1.4em;<br /> overflow: auto;<br /> width: 100%;<br /> padding: 0 10px 0;<br /> }<br /> #lightbox-container-image-data {<br /> padding: 0 10px; <br /> color: #666; <br /> }<br /> #lightbox-container-image-data #lightbox-image-details { <br /> width: 70%; <br /> float: left; <br /> text-align: left; <br /> } <br /> #lightbox-image-details-caption { font-weight: bold; }<br /> #lightbox-image-details-currentNumber {<br /> display: block; <br /> clear: left; <br /> padding-bottom: 1.0em; <br /> } <br /> #lightbox-secNav-btnClose {<br /> width: 66px; <br /> float: right;<br /> padding-bottom: 0.7em; <br /> }<br /> /*css lightbox berakhir */

8. Tambahkan di atas kode berikut :

<!--Start lightbox scripts info from http://www.spiceupyourblog.com--><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/><br /> <script src='http://spiceupyourblogextras.googlecode.com/files/jquery.lightbox-0.5.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> $(function() {<br /> $('a.spicebox') .lightBox({<br /> <br /> overlayOpacity: 0.6,<br /> imageLoading: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBtC6dBQAcWM8L2EdfJoXE-PrRnq9sQKVC-pYRJ6lJYXMxOoGk4dJHIiWddRaft0rObqDtgUTYXRNX3_NoRa97tr9CsyOrSfgzJ4K7AF8Cl205MpjgfsVOG94YBM4gl0xNXx19kI4_SS83/s1600/lightbox-ico-loading.gif',<br /> imageBtnClose: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TQRuUnG70ETxeRnRCPGUu7-5RIGMg1CIFwQXZZfEX_Ox_yIUUKleh1mUlvPOew41EW4wLXTucbzDE80kzPabnXVInOsT5Yig09lJEQCE3q6W5MGlqugdBduOWH0c2GHerPwJL-fUkkUU/s1600/lightbox-btn-close.gif',<br /> imageBtnPrev: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQBEmqwlU9RnHZ3HifZIV1CxQMuuT55t0TXUmckTkI-AVGPhAziZSWqmPZRFHphak847CLOtAYp0-9ju4dtSnm5Q45ho9sdJt-taMY6iESwN5Ln2ne7-pIJnNrI5-_APqmxKBRfC0Oke0/s1600/lightbox-btn-prev.gif',<br /> imageBtnNext: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAajQG-2XqcpOZ_4-7ejUPF-UCL67Cw3p1ZWFBalpKXspPsWb1KXd55xJkREQwRP5AkqLqmKyQIDbnzzVLlWOwSSekRQSy2to-vSiDAnGJ06IGelWD4Eggm3Eizvk_DihkWRqASY99SLIw/s1600/lightbox-btn-next.gif',<br /> containerResizeSpeed: 350,<br /> txtImage: 'Image',<br /> txtOf: 'Of'<br /> });<br /> });<br /> </script><br /> <!--end lightbox scripts-->

9. Sekarang klik

10. Untuk Uji coba sekarang Posting seperti biasa.

11. Tulis sesuka sobat. Dan Upload Gambar sobat.

12. Setelah Upload gambar. Klik Edit HTML di sebelah kiri Compose. (Dalam keadaan Edit HTML saat posting)

13. Dalam posisi Edit HTML. Gambar akan berubah menjadi kode seperti ini

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s1600/blogger_lightbox1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s320/blogger_lightbox1.jpg" width="320" /></a></div>

14. Edit kode gambar sahabat dengan menambahkan  class="spicebox" dan title="Judul Gambar" Sehingga ilustrasi kodenya menjadi :

<a class="spicebox" title="judul gambar" href="http://image.jpg"><img src="http://image.jpg"></a>

15. Untuk hasil akhirnya kode gambar no. 13  kurang lebih akan menjadi seperti berikut :

class="spicebox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW2cJbrS4aJP3lR9AkQSXu7uNscHC-QGNPLLlagDxp-rcS7Bgo-JMwf7Nw1M3WRQeCxvZZ7CUdJ8lHpp8lyJJ-iD48Iu7MBQOuAHpZxOmLCF6XUyEVxfqkI6fr6TZndHmwpYxvVERcV7M8/s1600/blogger_lightbox1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Judul Gambar Sahabat ">

16. Klik atau untuk melihatnya. Dan jadilah lightbox dengan jquery.

Jika sahabat tidak menggunakan cara 1 sampai 16. Dengan cara berikut ini sahabat bisa juga membuat lightboxt di blogger dengan jquery dengan script berikut ini.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script><br /> <script src="http://code.fyglab.com/colorbox/blogger-colorbox-min.js" type="text/javascript"></script>

Copy kode di atas dan pastekan di atas dan simpan. Sahabat tidak perlu susah payah menambah kode setiap postingan. Cukup posting seperti biasa. Namun jika menggunakan cara tersebut, secara tidak langsung menelanjangi kemampuan atau ilmu sahabat dan mematikan kreatifitas sahabat. Sekarang terserah sahabat semua mau bersusah payah sedikit atau yang praktis tanpa tahu bagaimana membuat lightbox di blogger dengan jquery. 

Bagi sahabat yang menggunakan tampilan dasboard baru, berbeda dengan cara di atas. Sahabat bisa membuat lightbox di blogspot dengan alamat di bawah ini :

http://www.bloggerplugins.org/2011/09/official-blogger-light-box.html
http://bloggerfreelayouts.blogspot.com/2011/08/jquery-blogger-image-gallery-blogspot.html

Happy Blogging! by. Sejuta Trik Blogger