Lytebox adalah sebuah lightbox yang dibuat untuk menampilkan suatu objek secara mandiri dengan menghapus ketergantungan prototype.js, effects.js, dan scriptaculous.js. Sejak versi asli Lytebox yang dibuat oleh Lokesh Dhakar (yang dirilis dengan dukungan iFrame) dibuat, modifikasi besar telah dilakukan untuk meningkatkan kinerjanya sebaik mungkin dan juga "Sildeshow", "Tema", dukungan konten HTML (sebagai lawan dari hanya gambar) dan masih banyak lagi pilihan yang dapat dikonfigurasi yang memungkinkan Anda untuk menyesuaikan tampilan dan nuansa Lytebox. (ini intro yang saya kutip dari Dolem)

Anda mungkin sudah pernah (saya juga) membaca tips tentang cara memasang lytebox di blog-blog lain. Saat pertama membaca dan melihat demonya, Lytebox berjalan dengan baik. Namun beberapa hari setelah itu sampai sekarang, Lytebox yang berasal dari trik blog-blog tersebut tidak berfungsi lagi. Saya berpikir itu karena hostingan tempat menaruh script nya sudah melewati batas bandwitch, jadi saya coba upload script tersebut ke hostingan baru, namun hasilnya tetap sama. Huft, pusing juga. Apa penyebabnya?

Karena saya sangat penasaran dengan Lytebox ini, saya coba mengutak-atik kode css dan javascript nya. Setelah memakan waktu kurang lebih 5 jam, akhirnya usaha saya untuk bertahan di depan monitor pun membuahkan hasil. Lytebox yang saya masukkan ke bengkel html saya (Macromedia Dreamweaver 8) berjalan sesuai dengan rencana.

Lytebox yang akan saya jelaskan ini adalah Lytebox v3.22. Di postingan sebelumnya tentang Lightbox, yaitu Facebox, Lytebox menggunakan prototype sebagai pengendali akitifitasnya sedangkan Facebox mengandalkan jQuery.
Berikut beberapa fitur v3.22 :
- Menampilkan satu gambar
- Menampilkan gambar-gambar dalam satu grup
- Membuat slideshow
- Menampilkan halaman atau link eksternal, bisa untuk satu link atau link dalam sebuah grup

Gimana menarik kan? Mau tau cara membuatnya? ("ah, dari tadi kek, kebanyakan ceramah nih si zacky", jawab si pembaca)

Berikut Cara Memasang Lytebox di Blogger / Blospot

1. Memasang kode CSS dan Javascript
- Pilih Layout > Edit HTML
- Cari kode </head>, lalu paste kode berikut di atasnya:

<!-- Lytebox v3.22 fixed by http://tipsbloggerzacky.blogspot.com //-->
<script src='http://doigirls.megabyet.net/lytebox/lytebox.js' type='text/javascript'></script>
<link href='http://doigirls.megabyet.net/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Lytebox v3.22 fixed http://tipsbloggerzacky.blogspot.com //-->

- Klik Save Template

2. Penerapan Lytebox
Seperti yang sudah saya jelaskan tadi, Lytebox bisa digunakan untuk menampilkan satu gambar atau lebih, membuat slideshow, dan menampilkan halaman eksternal. Anda bisa menggunakannya di postingan atau di Page Element template anda.
Berikut kode-kode pengaplikasian Lytebox:

- Menampilkan Satu Gambar

<a title="JUDUL LINK" href="URL-GAMBAR" rel="lytebox"><img src="URL-GAMBAR" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Menampilkan Beberapa Gambar Dalam Satu Grup

<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lytebox[grup]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lytebox[grup]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lytebox[grup]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[grup]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Membuat Slideshow

<a title="JUDUL LINK 1" href="URL-GAMBAR-1" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-1" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 2" href="URL-GAMBAR-2" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-2" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 3" href="URL-GAMBAR-3" rel="lyteshow[slideshow]"><img src="URL-GAMBAR-3" style="width:320px;height:240;border:0" /></a>

<a title="JUDUL LINK 4" href="URL-GAMBAR-4" rel="lytebox[slideshow]"><img src="URL-GAMBAR-4" style="width:320px;height:240;border:0" /></a>

demo » klik disini

- Menampilkan Halaman Eksternal
1. Satu Halaman Eksternal

<a title="JUDUL HALAMAN EKSTERNAL" href="URL-HALAMAN-EKSTERNAL" rel="lyteframe" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

demo » klik disini

2. Beberapa Halaman Eksternal Dalam Satu Grup

<a title="JUDUL HALAMAN EKSTERNAL-1" href="URL-HALAMAN-EKSTERNAL-1" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Google Search</a>

<a title="JUDUL HALAMAN EKSTERNAL-2" href="URL-HALAMAN-EKSTERNAL-2" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Yahoo! Search</a>

<a title="JUDUL HALAMAN EKSTERNAL-3" href="URL-HALAMAN-EKSTERNAL-3" rel="lyteframe[external]" rev="width:640px;height:380px;scrolling:auto">Bing Search</a>

demo » klik disini


Keterangan:
1. http://doigirls.megabyet.net/lytebox/ adalah tempat hostingan script Lytebox.
Silahkan download source Lytebox v3.22 disini. Ekstrak source Lytebox v3.22 dan upload ke hostingan anda, letakkan ke satu folder. Ingat!, url gambar backgroud yang ada di dalam lytebox.css, misalnya images/close_grey.png tidak perlu anda ganti, karena file tersebut sudah berada folder yang sama. Saya sarankan anda memilih hostingan untuk free web hosting yang yang memiliki batasan bandwitch yang besar, untuk hal ini saya rekomendasikan anda untuk memilih Megabyet Internet. "Inilah rahasia berjalannya Lytebox".

2. title="JUDUL LINK" dan title="JUDUL HALAMAN EKSTERNAL" sangat berguna untuk Lytebox karena JUDUL LINK dan JUDUL HALAMAN EKSTERNAL tersebut akan muncul di sebelah kanan bawah Lytebox dan gunanya untuk memberi informasi tentang gambar apa yang sedang dilihat oleh pengunjung.

3. style="width:320px;height:240;border:0" berfungsi untuk mengatur ukuran tampilan sebelum masuk ke Lytebox, karena sangat tidak efisien jika kita menampilkan ukuran sebenarnya di blog sedangkan kita telah menggunakan Lytebox sebagai image viewer.
Misalnya ukuran gambar anda adalah 800x600 pixel, maka ganti kode width:320px;height:240 menjadi width:400px;height:300px sehingga gambar yang muncul di blog berukuran 400x300 pixel.

4. rel="lytebox" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!

5. rel="lytebox[grup]" , kode grup berfungsi sebagai id pengelompokkan gambar. Kode ini bisa anda ganti sesuai keinginan.

5. rel="lytebox[slideshow]" , kode slideshow berfungsi sebagai id pengelompokkan gambar untuk menampilkannya ke dalam sebuah Slideshow. Kode ini bisa anda ganti sesuai keinginan.

6. rel="lyteframe" berfungsi untuk memanggil kode javascript yang anda pasang. Kode ini tidak perlu diganti!

7. rel="lyteframe[external]" , kode external berfungsi sebagai id pengelompokkan halaman eksternal. Kode ini bisa anda ganti sesuai keinginan.

8. rev="width:640px;height:380px;scrolling:auto" berfungsi untuk mengatur ukuran Lytebox yang menampilkan halaman ekternal. Kode width:640px;height:380px bisa anda ganti sesuai keinginan.

9. Jika anda ingin memasangnya di postingan, maka lakukan pembuatan postingan di tab edit Html. Jika anda ingin memasangnya di template blog, maka tambahkan Page Elements dengan HTML/Javascript.

Huft, akhirnya selesai juga... Demo Lytebox bisa anda lihat disini.
Jika anda memiliki keraguan, kotak komentar di bawah ini akan menerima anda dengan senang hati..

Oya, sebelum postingan ini sampai di tanda titik yang terkahir, mari sama kita berterima kasih kepada:
1. Lokash Dhakar, sang penemu Lytebox

2. Dolem Lytebox, sang editor Lytebox

3. Megabyet Internet, hostingan saya

4. Macromedia Dreamweaver 8, bengkel web designer saya

5. Terakhir, tentunya kepada saya sendiri (Zacky Adrihayuni), wuahahahahaha...!

Semoga berhasil...

Redirect URl berfungi untuk mengalihkan url awal yang diklik atau dituju oleh pengunjung ke url yang ditentukan. Script ini sudah saya pakai ketika url blog Tips Blogger Zacky yang lama (http://tips-blogger-zacky.blogspot.com) bermasalah dalam SEO nya. Karena tidak tahu apa masalahnya, sempat terpikir untuk membuat blog baru dengan nama yang baru juga. Saya sangat pusing, tak tahu apa yang harus dilakukan.

Sebenarnya url blog bisa saja diganti pada tab Settings akun Blogger, namun itu sangatlah merugikan karena url http://tips-blogger-zacky.blogspot.com sudah mendapat PR 2 dan Alexa Traffic Rank sudah mencapai 600an. Ditambah lagi semua url postingan sudah adem ayem nongkrong di beberapa blog directory, forum, dan beberapa situs social bookmark. Gimana nih caranya?, tanya saya kepada mbah Google. Saya dikasih solusi yang baik, tepat, dan tidak merugikan, yaitu dengan membiarkan url lama tetap eksis dan membuat url baru.

Saya memasang script redirect url ke url baru (http://tipsbloggerzacky.blogspot.com) pada template url lama (http://tips-blogger-zacky.blogspot.com). Sebagai hasilnya, silahkan anda klik url blog yang lama disini. Gimana? Langsung diarahkan balik ke http://tipsbloggerzacky.blogspot.com kan?
Nha, kali ini saya akan membagikan tips memasang script redirect url tersebut untuk anda yang memiliki masalah yang sama dengan saya. Mau?

Sebelum kita masuk ke kode untuk membuat scipt ini, ada beberapa hal yang harus anda perhatikan, yaitu:

1. Backup terlebih dahulu blog anda
Caranya mudah, masuk ke tab Settings > Basic. Lihat tulisan Blog Tools, disampinya terdapat tiga opsi: Import blog - Export blog - Delete blog. Pilih Export blog lalu klik DOWNLOAD BLOG, maka semua postingan anda akan tersimpan dalam sebuah file .xml. Jangan hapus postingan blog lama.

2. Buat blog baru dengan nama yang sama dengan blog lama anda, usahakan url barunya hampir sama dengan url baru.

3. Edit semua data di blog directory tempat anda submit url lama.

Sudah, sekarang mari kita masuk ke kodenya..

Berikut Cara Membuat Script Redirect Url

1. Login ke akun Blogger anda.

2. Pilih Layout > Edit HTML (ingat, pilih settingan ini untuk blog anda yang lama)

3. Cari kode <head>, lalu paste kode berikut di bawahnya:

<meta content='nofollow' name='robots'/>
<meta content='noindex' name='robots'/>

<script type='text/javascript'><!--//--><![CDATA[//><!--
var url = "http://tipsbloggerzacky.blogspot.com"
(document.images) ? location.replace(url) : location.href = url;
//--><!]]></script>
<meta content='0;URL= http://tipsbloggerzacky.blogspot.com/' http-equiv='refresh'/>

Keterangan:
- Kode meta tags di atas berguna supaya blog yang lama tidak diinidex lagi oleh search engine (Google, Yahoo, Bing), jadi blog baru anda tidak akan disangka blog jiplakan.
- Ganti http://tipsbloggerzacky.blogspot.com dengan url blog baru anda.

4. Terakhir, klik Save Template.

Supaya tampilan blog lama anda menjadi kosong atau muncul sedikit pesan tentang pengalihan url, anda harus menghapus semua isi tag body dan memngisinya dengan yang baru.
Begini caranya:

1. Pastinya anda masuk ke Layout > Edit HTML, tidak perlu mencentang Expand Widget Templates.

Misalnya isi template anda seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Nama : Blog ini gak ada gunanya lagi, wuahahahahaaa!!!!
----------------------------------------------- */
#navbar, #navbar-iframe {height:0;visibility:hid ...............
...............
...............
...............
]]></b:skin>

</head>

<body>
...............
...............
...............
</body>

</html>

2. Pertama, hapus dulu semua kode css template. Perhatikan tanda titik-titik diantara kode ----------------------------------------------- */ dan ]]></b:skin>, hapus kode css template anda sehingga kodenya hanya tinggal seperti ini:

----------------------------------------------- */

]]></b:skin>

3. Kedua, hapus isi tag body. Perhatikan tanda titik-titik diantara kode <body> dan </body>, hapus isi tag body anda sehingga kodenya hanya tinggal seperti ini:

<body>

</body>

4. Untuk menambahkan pesan pengalihan url, caranya:
- Paste kode berikut di atas kode ]]></b:skin> :

#navbar, #navbar-iframe {height:0;visibility:hidden;display:none}
body {
background: #FFF;
font:12px Arial, Helvetica;
color: #333
}
#wrap {
background:transparent;
width:980px;
margin:100px auto 10px;
padding-top:2px;
position:relative;
text-align:center;
}

- Paste kode berikut di atas tag </body> :

<div id='wrap'>

<a href='http://tips-blogger-zacky.blogspot.com' target='_blank'><img border='0' src='http://i46.tinypic.com/33mvn7d.jpg'/></a>

<h2><a href='http://tipsbloggerzacky.blogspot.com'>TIPS BLOGGER ZACKY</a></h2>
<h2>HAS BEEN MOVED TO:</h2>

<h1><a href='http://tipsbloggerzacky.blogspot.com'>http://tipsbloggerzacky.blogspot.com</a></h1>

<a href='http://tipsbloggerzacky.blogspot.com'>Click here if browser doesn&#39;t redirect you automatically...</a>

</div>

Silahkan ganti tulisan yang dicetak tebal.

5. Terakhir, klik Save Template

Selesai sudah ceramah saya untuk hari ini, jika ada pertanyaan silahkan berkomentar, mumpung Blogger.com belum banned para spammers, hahahaha...

Selamat mencoba...

Selamat malam semuanya... Maaf lama tak update dan posting seputar tips blogging. Soalnya belakangan ini saya bantu teman bikin blog, dan saya juga bikin blog baru, yaitu IndoGals (promosi nih, hehehe...), jangan lupa visit ya...

Nha, untuk tips pembuka setelah beberapa lama vakum yaitu cara membuat script bookmark site. Anda mungkin sudah pernah melihat blog atau situs yang di bagian atasnya terdapat link bertuliskan "Bookmark this, Bookmark this site, dll". Fungsi dari link itu adalah untuk mememerintahkan browser kita untuk menyimpan alamat blog atau situs tersebut di daftar bookmark browser kita itu. Sebagai contoh, coba anda klik link di bagian kanan atas blog saya ini yang bertuliskan Bookmark Blog Ini. Gimana hasilnya? Ada tampilan pop-up yang yang berfungsi untuk menyimpan bookmark baru kan?

Keuntungan dari script ini adalah untuk memudahkan pengunjung untuk mengakses blog kita secara cepat dan bisa selalu mengingatnya, jadi kita bisa mempertahankan kunjngannnya itu untul seterusnya. Ok, daripada memperpanjang muqodimah, mari kta langsung aja masuk ke judul ceramah kali ini, eh cara untuk membuat script bookmark site ini, hehehe...

Berikut Cara Membuat Script Bookmark Site

1. Login ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Cari kode </head>, lalu paste kode javascript berikut di atasnya:

<script type='text/javascript'>
function bookmarksite(title,url){
if (window.sidebar)
window.sidebar.addPanel(title, url, &quot;&quot;);
else if(window.opera &amp;&amp; window.print){
var elem = document.createElement(&#39;a&#39;);
elem.setAttribute(&#39;href&#39;,url);
elem.setAttribute(&#39;title&#39;,title);
elem.setAttribute(&#39;rel&#39;,&#39;sidebar&#39;);
elem.click();
}
else if(document.all)
window.external.AddFavorite(url, title);
}
</script>

4. Klik Save Template

5. Untuk menampilkan linknya bisa anda buat dengan text link biasa atau dengan gambar, kodenya:
Text link biasa:

<a href="javascript:bookmarksite('Judul Blog', 'URL Blog')">Bookmark Blog Ini!</a>

Link dengan gambar:

<a href="javascript:bookmarksite('Judul Blog', 'URL Blog')"><img src="url-gambar-anda" border="0"/></a>

Note:
Jika judul blog anda terdapat tanda kutip misalnya Zacky's Blog, maka anda harus menambahkan sebuah backslashed di javascript link anda, sehingga menjadi:

<a href="javascript:bookmarksite('Zacky\'s Blog', 'URL Blog')">Bookmark Blog Ini!</a>

Link tersebut bisa anda letakkan di tempat yang anda inginkan.

Gimana? Mudahkan?
Oya, jangan lupa bookmark blog saya ini dan visit blog baru IndoGals ya.. Makasi...

Selamat mencoba...