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>

DEMO 

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>

DEMO

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

Tweet