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 :)

 

 




9 komentar:

  1. wah... perlu di coba ni... ditunggu artikel terbarunya ya... buat tambah ilmu.

    BalasHapus
  2. kalo saya lebih suka alami aja, supaya memaksimalkan loading page saat di akses, terima kasih infonya. datang ke tempat saya ya, di tunggu. komen+follow akan saya balas. www.ch4ndr4.com

    BalasHapus
  3. jauh
    silakan dicoba

    Beben
    Sip dah Kang Beben

    CH4NDR4
    Klasik sob, coba ukur live demo Shadowbox di http://tools.pingdom.com, lalu bandingkan dengan dengan laman lain (salah satu laman blog Anda misalnya) yang tidak menggunakan Shadowbox, berapa selisihnya? saya yakin cuma beberapa detik

    BalasHapus
  4. langsung praktek deh.. thanks

    BalasHapus
  5. Wah.. bagus sekali hasilnya..
    Saya udah peraktekin...

    Kalo untuk menampil kan buku tamu dgn Shadowbox ini bagaimana cara mangil nya..?

    Thk...

    BalasHapus
  6. maksudnya efek shadow di gambar kita yah?

    BalasHapus
  7. Admin
    Thanks :)


    arashikensho
    Selamat mencoba

    Andreas
    Untuk buku tamu insya Allah akan dibahas di tulisan selanjutnya

    r10
    Bukan sob, ini tentang efek lightbox

    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 ↑