Colorbox apply to bloggers

Colorbox by Jack Moore apply to bloggers?
okay ... I will discuss this.
first of all you are doing must sign in to blogger.
select the menu design then edit HTML.
Stop Do not edit it before you download full template. This avoids later if you fail in doing Colorbox installation.
ok, already downloaded it?
Now copy the code below

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxContent{margin-top:20px;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL_ouj7oQoKZA7cTsEGIizGIYC1rWYj3YcQHriBDuD9svtBuHuah1ldwnYLDJBfung5gjd6hwGs_Klw64gvueLTRvrgd7_1I6KaZru3DHe-U1ieuSohIQty9m0DB-FH9n4ZhX3d-ZqeI/) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL_ouj7oQoKZA7cTsEGIizGIYC1rWYj3YcQHriBDuD9svtBuHuah1ldwnYLDJBfung5gjd6hwGs_Klw64gvueLTRvrgd7_1I6KaZru3DHe-U1ieuSohIQty9m0DB-FH9n4ZhX3d-ZqeI/) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext.hover{background-position:bottom right;}
        #cboxLoadingOverlay{background:#000;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQMPYqT8u9OAU1rJxO4sItlzvSWiYbJ5B5ElNPve-QXj2eIteVpERJgy08DMlESZDApbROPb68KQA4wsuTeYAmhBJJQCGGux99tu1-DKYI16znnUfzJ6yJDJuOe6Y1c2fKXEunYXvoPRs/) no-repeat center center;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRL_ouj7oQoKZA7cTsEGIizGIYC1rWYj3YcQHriBDuD9svtBuHuah1ldwnYLDJBfung5gjd6hwGs_Klw64gvueLTRvrgd7_1I6KaZru3DHe-U1ieuSohIQty9m0DB-FH9n4ZhX3d-ZqeI/) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose.hover{background-position:bottom center;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script src="http://little-sharing.googlecode.com/files/jquery.colorbox.js">
</script>
<script>
        $(document).ready(function(){
            //Examples of how to assign the ColorBox event to elements
            $("a[rel='colorbox']").colorbox();
            $("a[rel='colorbox2']").colorbox({transition:"fade"});
            $("a[rel='colorbox3']").colorbox({transition:"none", width:"75%", height:"75%"});
            $("a[rel='colorbox4']").colorbox({slideshow:true});
            $(".colorbox5").colorbox();
            $(".colorbox6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
            $(".colorbox7").colorbox({width:"80%", height:"80%", iframe:true});
            $(".colorbox8").colorbox({width:"50%", inline:true, href:"#inline_example1"});
            $(".colorbox9").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'); }
            });
          
            //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 paste the code before </head>
like this

<head> ... </head>

then save your template.

ok. Sekarang colorbox sudah siap di gunakan

you only need to look at the code code below

Elastic Transition

<p><a href="../content/ohoopee1.jpg" rel="colorbox" title="title">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="colorbox" title="title">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="colorbox" title="title">Grouped Photo 3</a></p>

Fade Transition

<p><a href="../content/ohoopee1.jpg" rel="colorbox2" title="title">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="colorbox2" title="title">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="colorbox2" title="title">Grouped Photo 3</a></p>
  

No Transition + fixed width and height (75% of screen size)

<p><a href="../content/ohoopee1.jpg" rel="colorbox3"  title="title">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="colorbox3"  title="title">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="colorbox3"  title="title">Grouped Photo 3</a></p>
  

Slideshow

<p><a href="../content/ohoopee1.jpg" rel="colorbox4"  title="title">Grouped Photo 1</a></p>
<p><a href="../content/ohoopee2.jpg" rel="colorbox4"  title="title">Grouped Photo 2</a></p>
<p><a href="../content/ohoopee3.jpg" rel="colorbox4"  title="title">Grouped Photo 3</a></p>
  

Other Content Types

<p><a class='colorbox5' href="../content/ajax.html" title="title">Outside HTML (Ajax)</a></p>
<p><a class='colorbox5' href="../content/flash.html" title="title">Flash / Video (Ajax/Embedded)</a></p>
<p><a class='colorbox6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0&amp;wmode=transparent" title="title">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
<p><a class='colorbox7' href="http://google.com">Outside Webpage (Iframe)</a></p>
<p><a class='colorbox8' href="#">Inline HTML</a></p>
  

Demonstration of using callbacks

<p><a class='example9' href="../content/marylou.jpg" title="Marylou on Cumberland Island">Example with alerts</a>. Callbacks and event-hooks allow users to extend functionality without having to rewrite parts of the plugin.</p>
  
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_example1' style='padding:10px; background:#fff;'>
<center><embed src="http://www.metrotvnews.com/andyprabowo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="340" width="490"></center>
</div>
<div id='inline_example1' style='padding:10px; background:#fff;'>
<center><embed src="http://www.metrotvnews.com/andyprabowo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" height="340" width="490"></center>
</div>
</div>