2. Template
3. Edit HTML

4. Masukan Kode Dibawah Ini Sebelum  ]]></b:skin>

.img-show {
width:400px;
margin:50px auto;
background-color:black;
border:2px solid black;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
position:relative;
overflow:hidden;
}
.img-show .img-holder {
background-color:white;
}
.img-show .img-holder.loading {
background:white url('img/loading.gif') no-repeat 50% 300px;
}
.img-show .img-holder img {
display:block;
}
.img-show .img-nav {
margin:0px 0px;
padding:0px 0px;
overflow:hidden;
}
.img-show .img-nav li {
margin:2px 2px 0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
}
.img-nav li a {
display:block;
background-color:#ccc;
color:black;
padding:3px 7px;
font:normal 12px Georgia,Serif;
font-style:italic;
text-decoration:none;
}
.img-nav li a.active {
background-color:#900;
color:white;
}

5. Ke Posting >> HTML (Sebelah Compose) :

Masukan :

<ul class="img-gallery" data-width="750" data-height="1000"> <li><a href="img/01.png">Judul Halaman 1</a></li> <li><a href="img/02.png">Judul Halaman 2</a></li> <li><a href="img/03.png">Judul Halaman 3</a></li> </ul>

<script type="text/javascript">$(function() {
    $('.img-gallery').each(function() {
        var w = $(this).data("width"),
            h = $(this).data("height"),
            viewport = $('html, body'),
            fadeSpeed = 400, // Kecepatan efek fading
            resizeSpeed = 600; // Kecepatan efek pelebaran/penyusutan
        $(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
        var $firstNav = $('li:first a', this),
            current = $firstNav.attr('href'),
            $parent = $(this).parents('.img-show');
        $firstNav.addClass('active');
        $parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
        $parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
        $parent.find('img.transparent').css('opacity', 0).load(function() {
            $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
            });
        });
     
        $('a', this).each(function(i) {
            i = i+1;
            $(this).attr("title", $(this).text());
            $(this).html(i);
        }).on("click", function() {
            var $activeNav = $(this).parents('.img-gallery').find('a.active'),
                $activeParent = $(this).parents('.img-show');
            $activeNav.removeClass('active');
            viewport.scrollTop($activeParent.offset().top-40);
            $(this).addClass('active').parents('.img-show').find('.img-holder').html('<img class="transparent" src="' + this.href + '" alt="Loading..."/>');
            $parent.find('.img-holder').addClass('loading').find('img.transparent').css('opacity', 0).load(function() {
                $parent.animate({width:$(this).width()}, resizeSpeed).find('.img-holder').animate({height:$(this).height()}, resizeSpeed, function() {
                    $(this).removeClass('loading').find('img').animate({opacity:1}, fadeSpeed);
                });
            });
            return false;
        });
    });
});
</script>

Ganti : img/01.png - img/02.png - img/03.png Dengan URL Gambar Mu -_-" Yang Baca Ini MAHO !!