How to Add ColorBox to Your Blogspot

On this post, try clicking HERE to show how colorbox works. After clicking, you'll show Google page in a frame.
Then, I'll share how to add ColorBox to your own blogspot.

First step, log in to your Blogger and then select your blog. Then, click tab Design, and open Edit HTML

The next step, copy the all of code below :

<link href='http://colorpowered.com/colorbox/core/example4/colorbox.css' media='screen' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>
<script src='http://colorpowered.com/colorbox/core/colorbox/jquery.colorbox.js'/>
<script>
$(document).ready(function(){
$("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});
$(".example5").colorbox();
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".example7").colorbox({width:"80%", height:"80%", iframe:true});
$(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
$(".example9").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$("#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>

Paste the code above to "Edit Template" before </head> !
And you're done!

For use :
Just add rel="example1" for images or class="example7" for link in tag <a href="........">  so it will be <a rel="example1" href="http://domain.com/images.jpg"> or <a class="example7" href="http://google.com">

Try it! :)