Lightbox » Blogger Plugins : Cara Mengaktifkan dan Menggunakan

Ada lightbox yang tak perlu repot-repot kita buat. Lightbox ini merupakan blogger plugins. Sampeyan hanya perlu mengaktifkan lightbox-nya, kemudian gunakan untuk posting. Lighbox Blogger plugins dilengkapi dengan button Close, mini gallery yang berfungsi sebagai image selector sekaligus juga dillengkapi dengan javascript mousewheel yang memungkinkan pengguna untuk menggeser gallery lightbox dengan memanfaatkan scroller (mouse).

Cara mengaktifkan lightbox blogger plugins

• Login ke Blogger.
• Dasboard
• Setelan (Settings)
• Format (Formatting)
• Tampilkan gambar dengan Lightbox (Showcase images with Lightbox)
• Ya (Yes)
• Simpan Setelan (Save Settings)

D E M O

Buka link demo di bawah ini untuk melihat hasil penggunaan lightbox dan contoh kode html posting lightbox:

D E M O Lightbox

Cara menggunakan kode

Kode yang digunakan untuk membuat lightbox bekerja sangat sederhana karena kita tak perlu menambahkan kode khusus. Penambahan yang terpenting hanyalah menentukan ukuran width dan height thumnail.

• Buatlah image dalam ukuran besar (image.jpg). Sampeyan sebaiknya menggunakan ukuran berkisar 400px (width) hingga 900px (width) dan 200px (height) hingga 500px (height).
  Catatan: Preview image dalam lightbox blogger berukuran sekitar 800px (width) dan 500px (height).
• Buat Posting dalam Mode Compose
• Klik toolbar insert Image untuk upload gambar (image) yang telah dipersiapkan sebelumnya. Tunggu proses upload selesai.
• Klik image di kolom (box) posting.
• Atur Ukuran image:
  • Small : untuk image (thumbnail) berukuran kecil.
  • Medium : untuk image (thumbnail) berukuran sedang.
  • Large : untuk image (thumbnail) berukuran besar.
  Karena image akan dipreviewkan melalui lighbox dalam ukuran besar sebaiknya gunakan small atau medium.
• Atur Posisi Image:
  • Left: untuk image di posisi sebelah kiri.
  • Center: untuk image di posisi tengah.
  • Right: untuk image di posisi sebelah kanan.
• Menambah Teks: Klik Caption kemudian tuliskan teks yang berhubungan dengan image.
• Terbitkan posting.

Gambar Tunggal (Single Image)

Bentuk kode posting lightbox dengan image pada posisi sebelah kiri (Bisa dilihat dengan klik mode Edit HTML).

<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Y9uS1ookrT3mVt5PtXDKB2rJ64QHyAm_2rmCDnIrKYjQnhYiOTjdRzLSstWl08_LAlYx5dLHwU5Q5SnM9jYBXJ4538n0FspFMfxFJP157M0NEF2eSV6sAWMbCnZuZcicOn38M-lVsuA/s1600/.....jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="..." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Y9uS1ookrT3mVt5PtXDKB2rJ64QHyAm_2rmCDnIrKYjQnhYiOTjdRzLSstWl08_LAlYx5dLHwU5Q5SnM9jYBXJ4538n0FspFMfxFJP157M0NEF2eSV6sAWMbCnZuZcicOn38M-lVsuA/s200/.....jpg" width="..." /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Teks di sini</td></tr>
</tbody></table>

Dalam bentuk sederhana dapat dituliskan sbb:

<a href="image.jpg"><img src="thumbnail.jpg" border="0" width="200" height="150" style="float:left;margin:5px 12px 5px 0;" /></a>

Image Gallery

<a href="image-1.jpg"><img src="thumbnail-1.jpg" border="0" width="200" height="150"></a><a href="image-2.jpg"><img src="thumbnail-2.jpg" border="0" width="200" height="150"></a><a href="image-3.jpg"><img src="thumbnail-3.jpg" border="0" width="200" height="150"></a><a href="image-4.jpg"><img src="thumbnail-4.jpg" border="0" width="200" height="150"></a>

Catatan/Keterangan:

Untuk membuat image gallery buatlah kode tanpa terputus (bersambung) antara image pertama hingga terakhir seperti yang terlihat pada contoh kode di atas!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - mitrabaraya «

CSS & Javascript Hosting: Simpan file di Google Sites Ditanggung Aman & Tahan Lama

Kepala jadi pusing klo mikirin dimana harus simpan javascript dan CSS. Hampir semua file hosting, terutama javascript dan CSS hosting telah mati ditelan minimnya dana. Dus..., pada akhirnya Google Sites dan Google Code jadi pilihan yang terbaik karena ditanggung aman dan awet. Jaminan seperti itu sangat penting karena ketika sebuah hosting bangkrut dan javascript atau CSS kita tersimpan di sana, sementara beberapa waktu kita lagi "non aktif" ngeblog, maka .... hancur leburlah blog yang selama ini kita bangun dengan susah payah, telaten hingga mengorbankan banyak waktu dan pikiran, seperti yang telah beberapa kali terjadi di blog ini. Hosting javascript dan CSS di Google Sites maupun Google Code terutama dapat dimanfaatkan secara maksimal oleh sobat2 yang eksis di blogspot/blogger, sedang bagi yang di Blogdetik harap sabar-sabar saja karena apa yng tersimpan di sini tak dapat digunakan di Blogdetik sampeyan. Yah ...., aku sudah coba beberapa kali dengan berbagai cara dan strategi ternyata tetap nggak nembus juga.

Cara SimpanJavascript dan CSS di Google Sites

1. Untuk memudahkan proses buatlah sebuah account google dengan membuat email di google mail.
2. Setelah mengaktifkan account google melalui gmail, Buka google sites.
3. Tulis Alamat Email (contoh: careuhl@gmail.com).
4. Tulis Password.
5. Klik CREATE
6. Ada beberapa pilihan template, sementara sebaiknya gunakan saja Blank template. Silahkan klik Blank template.
7. Isi Your Sites Name dengan nama yang diinginkan. Sampeyan bisa berikan nama sesuai blog yang sampeyan pakai saat ini. (contoh : mitrabarayaonline).
8. Tuliskan Captcha pada box yang tersedia.
9. Klik CREATE SITE. Tunggu beberapa saat!
10. Klik New page (c) yang terletak di bagian atas-kanan halaman (lihat gambar di atas!).
11. Isi pada bagian Name your page sesuai dengan apa yang akan disimpan. Jika berupa file javascript maka tuliskan saja javascript.
12. Select a template to use (Learn more):
    Klik pada Web page, kemudian pilih File Cabinet.
13. Klik CREATE.
14. Lakukan upload dengan Klik Add File
15. Setelah file terupload, untuk mendapatkan link hasil upload-nya silahkan klik kanan - copy link (location) pada link download yang terlihat di bawah nama file.
    contoh : https://sites.google.com/site/mitrabarayaprojec/javascript/jualan-macam2-baju.js?attredirects=0&d=1.
16. Gunakan kode hingga sebelum kode "?...", seperti contoh di bawah ini :
    https://sites.google.com/site/mitrabarayaprojec/javascript/jualan-macam2-baju.js
17. Selesai!
18. Jika ingin melakukan upload kode CSS, silahkan mulai lagi dari langkah ke-10 (New page (c)). Berikan nama css pada box Name your page:.

Catatan/Keterangan:

• Javascript dan kode CSS yang tersimpan di google sites sangat bagus digunakan di blogger/blogspot, namun tidak dapat digunakan untuk blogdetik.
• Selain untuk hosting javascript dan CSS berbagai bentuk file yang lain seperti video/movie, music/audio, flash (.swf, .flv) dan image dapat juga sampeyan simpan.
• Untuk memudahkan saat cek data file tersimpan, sebaiknya setiap filedikelompokkan sesuai dengan jenis (format) masing-masing. (pemisahan pada langkah ke-10).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

» Happy Blogging - mitrabaraya «