Cara Membuat Artikel Baca Komik Yang Keren

FANSUBLOGGER - Haduh.. Udah lama tidak posting. Ok, hari ini di siang yang sangat cerah. Saya mau membagikan Cara Membuat Sistem Baca Komik. Apaan sih? Sistem ini menggunakan konsep LightBox. Memudahkan pembaca untuk memilih halaman berapa komik yang akan dibaca. Dan juga, bisa dibilang ini membuat loading menjadi aga ringan. Kenapa? Karena, kita tidak harus menunggu gambar muncul. Kita tinggal memilih, gambar mana yang ingin kita baca. Ya udah, dari pada di jelasin. Mendingan kalian liat sendiri deh. Sumber: dte.web.id.
Kebetulan, sudah saya coba di template DEMO SinpleManga. Untuk melihatnya silakan klik link dibawah!.

DEMO LIHAT DISINI!

Cara Pembuatan yang Mudah (Mudah-mudahan)

1. Pertama, pastekan kode Javascript berikut tepat di atas kode </head>.

<script type='text/javascript'>
    //<![CDATA[
$(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>

2.Pastekan CSS berikut tepat di atas </style> atau ]]></b:skin>. 

/* CSS Show Manga */
.img-show {
  width:400px;
  margin:50px auto;
  background-color:black;
  border:2px solid black;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  position:relative;
  overflow:hidden;
  padding:5px;
}

.img-show .img-holder {
  background-color:white;
}

.img-show .img-holder.loading {
  background:white url('data:image/gif;base64,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') no-repeat 50% 160px;
}

.img-show .img-holder img {
  display:block;
}

.img-show .img-nav {
  margin:0;
  padding:0;
  overflow:hidden;
}

.img-show .img-nav li {
  margin:5px 2px 0 0;
  padding:0;
  float:left;
  display:inline;
  list-style:none;
}

.img-nav li a {
  display:block;
  background-color:#FFF;
  color:black;
  padding:4px 7px;
  font:normal normal 12px/normal Arial,"URW Bookman L",Serif;
  text-decoration:none;
}

.img-nav li a.active {
  background-color:#1B5EFF;
  color:white;
  font-weight:bold;
}

3. Nah, sekarang gunakan HTML di bawah ini, untuk menggunakannya. Untuk pemasangannya terserah kalian, mau dipasang di postingan/halaman statis (Bebas). 

<ul class="img-gallery" data-width="750" data-height="1088">
    <li><a href="URL Gambar">Judul Halaman 1</a></li>
    <li><a href="URL Gambar">Judul Halaman 2</a></li>
    <li><a href="URL Gambar">Judul Halaman 3</a></li>
    <li><a href="URL Gambar">Judul Halaman 4</a></li>
</ul>

Semoga bermanfaat artikel kali ini. Mohon maaf apabila banyak kesalahan.