Membuat jQuery Colorbox di Blogger

Jquery Colorbox adalah sebuah aplikasi lightbox yang dapat membuat blog anda terlihat menarik. Contohnya pada saat image pada blog anda di klik, maka akan muncul semacam slide. Disini saya akan membantu anda untuk memilih lima jenis Colorbox. Saya sarankan untuk melihat demo sehingga anda dapat memutuskan menggunakan jenis Colorbox yang mana. 

Colorbox Exemple1
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example1/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Colorbox Exemple2
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example3/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>

Colorbox Exemple3
<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example5/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.getdropbox.com/u/2863383/js/colorbox132/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({transition:"fade"});
$("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"});
$("a[rel='example4']").colorbox({slideshow:true});
$(".single").colorbox({}, function(){
alert('Howdy, this is an example callback.');
});
$(".colorbox").colorbox();
$(".youtube").colorbox({iframe:true, width:650, height:550});
$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".inline").colorbox({width:"50%", inline:true, href:"#inline_example1"});

//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
DEMO


Pemasangan Kode
1. Login Blogger
2. Pilih Rancangan lalu Edit HTML
3. Cari kode </head> ,letakkan kode jQuery Colorbox diatas kode </head>
4. Simpan Template

Kode yang harus anda tambahkan pada gambar
Elastic Transition : rel="example1"
Fade Transition   : rel="example2"
No Transition + fixed width and height (75% of screen size) : rel="example3"
Slideshow           : rel="example4"

Contoh Penulisan kode pada gambar
<a href="http://www.google.co.id/intl/en_com/images/srpr/logo1w.png" imageanchor="1" rel="example1" title="Google Logo" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://www.google.co.id/intl/en_com/images/srpr/logo1w.png" width="420" /></a>
Kode yang harus anda tambahkan pada Iframe atau Link
class='iframe'
 Contoh Penulisan kode pada link
<a class='iframe' href="http://www.google.com/">Web Page - Iframed Content</a>
Kode yang harus anda tambahkan pada video Youtube 
class='youtube'
Kemudian hapus tulisan "watch?" dan ganti tanda "=" dengan tanda "/" pada url video Youtube anda

Sebelum
http://www.youtube.com/watch?v=TGyDDQ5eKvs
Sesudah
http://www.youtube.com/v/TGyDDQ5eKvs 
Contoh Penulisan kode pada YouTube
<a class="youtube" href="http://www.youtube.com/v/TGyDDQ5eKvs" title="Colorbox Tutorial">Colorbox Tutorial (Direct Link To YouTube)</a> 
Selamat Mencoba dan Semoga Berhasil !! 

20 Responses to "Membuat jQuery Colorbox di Blogger"

  1. Jquery memang menawan dan indah.

    ReplyDelete
  2. Habil.. gak ngerti.. demonya gak bisa kubuka T_T

    ReplyDelete
  3. masa?.. aku bisa kok kak.. coba lagi

    ReplyDelete
  4. Mantaap bil tutorialnya. Baru baca kali ini nih. Siip

    ReplyDelete
  5. @Nabil Ftd : ok.. gunakan dengan baik ya!!
    @all : Makasih semua dah Comment di artikel ku ini :D

    ReplyDelete
  6. pertamax,,,,,,,,,!!
    nice info gan ;)

    ReplyDelete
  7. ok2.. sipp, tapi kamu bukan pertamaxx ..??
    tapi ke enamxxx

    ReplyDelete
  8. makasih infonya... perlu dicoba nie gan biar tambah sip!

    ReplyDelete
  9. Wah,... mantab gan...
    tapi ane ko' kurang suka sama jQuery..
    karna scriptnya berat banget gan heheheh

    ReplyDelete
  10. @Kang Robby : Ok kang..!! tapi saya sudah pasang 4 jQuey di blog ini dan tidak berat sama sekali ...? :D

    ReplyDelete
  11. wew, boleh dicoba nih.. :D

    ReplyDelete
  12. waw, kerenn banget gan.. TKP goo..

    ReplyDelete
  13. manteb nih bil, thanks ya.

    ReplyDelete
  14. waduh mas broo,, beta gak paham-paham belajar gituan
    hehehe

    ReplyDelete
  15. jiahahah... gk apa2.. om :D

    ReplyDelete
  16. Wah mantap!! mau nyoba ah di blog ku :D

    ReplyDelete
  17. contohnya dimana gan ??
    bisa liat gak ??
    kyknya keren kalau liat dri jqurynya . . .

    ReplyDelete
  18. @Pusat Artikel : kan udah ada DEMO nya disitu :D

    ReplyDelete