Shadowbox untuk Blogger

Sesuai dengan judulnya, tulisan ini akan membahas langkah demi langkah penerapan Shadowbox pada template blogger/blogspot. Namun sebelumnya, saya akan memberikan sedikit gambaran tentang Shadowbox. Anda mungkin menebak-nebak, tulisan ini sepertinya akan membahas tentang box (atau lightbox), dan Anda benar 100%. Dengan menggunakan Shadowbox, kita dapat menampilkan efek lightbox pada gambar, video, konten flash, dan juga iframe. Seperti namanya, Shadowbox cocok diaplikasikan pada template dengan background berwarna gelap (mengarah ke warna hitam). Tetapi tidak menutup kemungkinan diterapkan pada template dengan background berwarna terang (cenderung putih), nanti akan saya bahas lebih lanjut.

 

Shadowbox

 

Oke, seperti biasa, mari kita mulai langkah pertama :)

 

Langkah 1

Silakan unduh css dan javascript untuk Shadowbox (kata kunci: berandabumi.co.cc)

 

Langkah 2

Buka file ShadowboxBlogspot.css, kemudian salin semua isinya dan letakkan di atas kode ]]></b:skin>

 

Langkah 3

(Bila belum ada) Tempatkan kode JQuery berikut di atas kode </head>

 

<!—jQuery --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

 

 

Langkah 4

Unggah/upload file shadowboxBlogspot.js di hostingan file terdekat, cari yang gratisan seperti fileave.com, googlecode, atau fileden.com (sebelum mengunggah berkas di fileden, ubah ekstensi .js menjadi .txt). Lalu tempatkan tautan file tersebut seperti contoh berikut

 

<!—Shadowbox Blogspot js --> <script src='http://ALAMAT-HOSTINGAN-ANDA/shadowboxBlogspot.js' type='text/javascript'/>

 

 

Langkah 5

Tempatkan kode hasil dari Langkah 4 di bawah kode JQuery pada Langkah 3.

 

 

Langkah 6

Untuk template dengan warna gelap (mengarah ke hitam), sisipkan kode pemanggil berikut di bawah kode hasil dari Langkah 5.

 

<script type='text/javascript'> Shadowbox.init(); </script>

 

Bila Anda ingin menerapkan Shadowbox pada template dengan warna terang (cenderung putih), ganti kode di atas dengan kode berikut.

 

<script type='text/javascript'> Shadowbox.init({ overlayOpacity: 0.9 }); </script>

 

Ganti angka 0.9 untuk memergelap overlay Shadowbox (semakin besar semakin gelap).

 

Seperti yang telah saya tuliskan di atas, Shadowbox dapat digunakan untuk menampilkan bermacam elemen, namun kali ini saya batasi satu fungsi saja, yaitu galeri gambar.

 

Untuk memanggil sebuah gambar dengan Shadowbox, silakan buat kode berikut.

 

<a href="gambarsaya.jpg" rel="shadowbox" title="Judul Gambar">Gambar Saya</a>

 

 

Selanjutnya untuk galeri gambar, perhatikan deretan kode berikut.

 

<a href="pantai.jpg" rel="shadowbox[Liburan]" title="Pantai">Gambar Pantai</a> <a href="dermaga.jpg" rel="shadowbox[Liburan]" title="Dermaga">Gambar Dermaga</a> <a href="ombak.jpg" rel="shadowbox[Liburan]" title="Ombak">Gambar Ombak</a>

 

Bagaimana, mudah bukan? untuk fungsi-fungsi lainnya, Insya Allah akan dibahas pada tulisan selanjutnya. Jangan lupa kunjungi juga situs Shadowbox :)

 

 




Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑