Memasang 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 Example1

View Demo Colorbox Example1

<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 Example2

View Demo Colorbox Example2

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example2/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 Example3

View Demo Colorbox Example3

<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 Example4

View Demo Colorbox Example4

<link type="text/css" media="screen" rel="stylesheet" href="http://dl.getdropbox.com/u/2863383/js/colorbox132/example4/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 Example5

View Demo Colorbox Example5

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

Setelah anda menentukan jenis Colorbox yang anda ingin pasang, sekarang masuk pada menu Edit HTML pada blog anda dan Paste salah satu kode tersebut tepat diatas kode </head>, setelah itu klik Simpan Template. Sekarang anda dapat memposting berupa gambar, video Youtube dan link menggunakan Jquery Colorbox dengan menambahkan kode pada saat memposting.

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 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 video Youtube

<a class="youtube" href="http://www.youtube.com/v/TGyDDQ5eKvs" title="Colorbox Tutorial">Colorbox Tutorial (Direct Link To YouTube)</a>