Home » , » ColorBox Effect

ColorBox Effect




A new photo effect on blogger is Colorbox...It can zoom image,On blog Video,and Inframe Webpage,try it now on your blog Bloggers.
Hope you Enjoy using this Tricks or hack on your blogger,and Increase Coolness.


How to Put Colorbox on your blogger?
First of all, log in to your Blogger account
Next go to Edit html
Back your templates before doin this effect ok.
Now Find this piece of code
</head>
Immediately before that paste this code
<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>
Then click Save.


For pictures format: (Change rel"Example2,example3,example1,)
Example1, Example2 and Example3

<a href="http://i36.tinypic.com/nosp4x.jpg" imageanchor="1" rel="example2" title="You Image title Here" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i36.tinypic.com/nosp4x.jpg" width="420" /></a>

For Video format: (remove "/watch/v=")

<a class='youtube' href="http://www.youtube.com/v/Q021grFmB4s" imageanchor="1" rel="example2" title="Your video title here" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="Your Image url here" width="420" /></a>

For Inframed page format:

<a class='iframe' href="http://www.google.com/">Google Inframed</a>

Share this games :

0 comments:

Post a Comment

Sign up for FREE daily Updates.