Mecha versi 2.6.4 sudah dirilis!

Solusi untuk Masalah Blog Bertema Komik

Tabel Konten
  1. Markup HTML 
  2. Memulai Manipulasi 
    1. Menyisipkan Angka-Angka 
    2. Memasukkan Perintah 
  3. Lebar dan Tinggi Halaman yang Berbeda 
  4. Membuat Halaman Meloncat ke Posisi yang Tepat 
  5. Kode Lengkap 
    1. jQuery 
    2. CSS 
    3. Dasar Kerangka 
Menambahkan Sistem Navigasi pada Komik
Menambahkan Sistem Navigasi pada Komik

Ini soal pengalaman pribadi. Selama Saya berkeliling mencari situs-situs penyedia baca komik online, ada tiga macam jenis penyajian yang Saya temukan. Pertama, situs tersebut menunjukkan setiap halaman komik tunggal pada satu posting. Sehingga jika kita ingin membaca cerita pada halaman berikutnya, kita harus mengeklik tombol Next atau semacamnya untuk memuat posting baru yang berisi satu halaman komik berikutnya.

Ke dua, situs tersebut akan menyajikan semua halaman komik dalam satu posting, sehingga kita bisa membaca dari awal sampai akhir tanpa harus berpindah-pindah halaman. Namun resikonya adalah kita akan kehilangan begitu banyak waktu hanya untuk menunggu semua halaman komik termuat pada posting tersebut. Belum lagi jika situs yang kita kunjungi telah dipenuhi berbagai macam iklan yang akan semakin memperlambat proses muat halaman. Tidak berbeda dengan konsep penyajian pertama, karena saat kita berpindah-pindah halaman kita harus menunggu bermenit-menit hanya untuk memuat satu gambar saja.

Bagi Saya ini tidak efektif, mengingat yang para pembaca butuhkan pada dasarnya hanyalah halaman komik dan bukan halaman situs secara keseluruhan. Jika waktu kita dihabiskan hanya untuk menunggu seluruh halaman situs termuat, padahal yang sebenarnya kita butuhkan adalah halaman komik, maka resikonya adalah kita akan kehilangan masa-masa mendalami alur cerita.

Solusinya biasanya adalah dengan cara memuat halaman komik secara bertahap. Artinya adalah kita hanya akan melihat satu halaman komik saja pada satu posting, namun saat kita mengeklik tombol halaman berikutnya, kita tidak akan dibawa menuju ke halaman/posting situs baru, melainkan hanya akan berdiam diri pada satu tempat dan menunggu gambar baru selesai termuat pada satu tempat yang sama.

Saya tidak tahu pasti apa teknik yang mereka gunakan untuk itu. Mungkin AJAX. Tapi Saya pikir itu terlalu berlebihan. Kita bisa menggunakan Lightbox! Hanya saja, lightbox yang satu ini tidak menampilkan gambar di atas tabir hitam seperti lightbox pada umumnya. Kita akan menampilkan gambar tepat di atas navigasi, dengan begitu suasana membaca akan tetap terasa seperti halnya saat kita membaca komik biasa.

Konsep dasarnya masih sama seperti tutorial pembuatan lightbox yang pernah Saya tuliskan di sini. Yaitu kita akan menembak URL gambar pada tautan ke dalam elemen <img> setiap kali aksi klik dilakukan:

$('ul a').click(function() {
    $('div').html('<img src="' + this.href + '" alt="Loading..."/>');
    return false;
});

Lihat Konsep

Di sini kita akan membuat markup yang berbeda agar setiap tautan tampak sebagai navigasi halaman berangka, dan gambar yang termuat akan ditampilkan di atasnya sebagai halaman komik tunggal:

Lihat Hasil Akhir

Markup HTML 

Yang kita perlukan tidak banyak. Kita hanya akan membuat daftar tautan yang mengarah ke setiap unit halaman komik (halaman komik adalah gambar). Jadi buat saja seperti ini:

<ul class="img-gallery" data-width="750" data-height="1088">
  <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>
  <li><a href="img/04.png">Judul Halaman 4</a></li>
</ul>

Kelas img-gallery digunakan sebagai identitas, sehingga jQuery hanya akan memanipulasi elemen daftar yang memiliki kelas img-gallery saja. data-width digunakan untuk menentukan lebar halaman komik, data-height digunakan untuk menentukan tinggi halaman komik. Ini diperlukan karena kita akan membuat aplikasi yang tidak hanya bisa digunakan untuk menangani satu komik saja per satu posting tapi juga beberapa komik sekaligus dalam ukuran yang berbeda-beda. Dalam satu halaman.

Memulai Manipulasi 

Pertama-tama kita akan membungkus grup tautan halaman komik di atas dengan elemen yang kita beri nama .img-show:

$('.img-gallery').each(function() {
    $(this).addClass('img-nav').wrap('<div class="img-show"></div>');
});

Saya juga menambahkan kelas baru bernama .img-nav. Itu akan kita gunakan sebagai selektor CSS untuk mengubah tampilan daftar menjadi tampak sebagai navigasi halaman. Sehingga markup HTML akan menjadi seperti ini:

<div class="img-show">
  <ul class="img-gallery img-nav" data-width="750" data-height="1088">
    <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>
    <li><a href="img/04.png">Judul Halaman 4</a></li>
  </ul>
</div>

Setelah itu sisipkan kontainer kosong yang akan kita gunakan sebagai tempat untuk meletakkan gambar:

$('.img-gallery').each(function() {
    $(this).addClass('img-nav').wrap('<div class="img-show"></div>');
    $(this).parents('.img-show').prepend('<div class="img-holder"></div>');
});

Sehingga markup HTML akan menjadi seperti ini:

<div class="img-show">
  <div class="img-holder"></div>
  <ul class="img-gallery img-nav" data-width="750" data-height="1088">
    <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>
    <li><a href="img/04.png">Judul Halaman 4</a></li>
  </ul>
</div>

Pada dasarnya itu saja markup yang diperlukan untuk membuat aplikasi komik digital ini. Selebihnya hanya tinggal menentukan ukuran dan perintah. Sekarang kita ringkas semua kode yang terlalu panjang, dan ambil data lebar dan tinggi halaman yang sudah kita simpan di dalam atribut data-width dan data-height:

$('.img-gallery').each(function() {
    var w = $(this).data('width'),
        h = $(this).data('height');
    $(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
    var $parent = $(this).parents('.img-show');
    $parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
});

Sehingga hasilnya akan menjadi seperti ini:

<div class="img-show" style="width:750px;">
  <div class="img-holder" style="height:1088px;"></div>
  <ul class="img-gallery img-nav" data-width="750" data-height="1088">
    <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>
    <li><a href="img/04.png">Judul Halaman 4</a></li>
  </ul>
</div>

Dimensi halaman sudah tercipta, sekarang saatnya mengubah setiap item tautan menjadi navigasi berangka. Kita akan menggunakan jQuery .each() untuk merayapi semua elemen tautan satu persatu kemudian menyisipkan angka sesuai dengan urutannya, memindah semua teks judul halaman pada masing-masing tautan ke dalam atribut title. Tapi sebelum itu kita atur dulu agar saat halaman pertama kali dibuka, gambar pada navigasi halaman pertama bisa tampil tanpa diperintah:

$('.img-gallery').each(function() {
    var w = $(this).data('width'),
        h = $(this).data('height');
    $(this).addClass('img-nav').wrap('<div class="img-show" style="width:' + w + 'px;"></div>');
    var $firstNav = $('li:first a', this), // Mendapatkan tautan pertama dari semua tautan dalam daftar
        current = $firstNav.attr('href'), // Mendapatkan nilai href tautan pertama untuk ditampilkan sebagai gambar pada saat pertama kali komik diakses
        $parent = $(this).parents('.img-show');
    $firstNav.addClass('active'); // Menambahkan kelas active pada tautan pertama
    $parent.prepend('<div class="img-holder" style="height:' + h + 'px;"></div>');
    // Sisipkan gambar (halaman komik) pada elemen .img-holder...
    // dengan nilai src yang diambil dari atribut href tautan pertama
    $parent.find('.img-holder').addClass('loading').html('<img class="transparent" src="' + current + '" alt="Loading..."/>');
});

Kelas .loading ditambahkan untuk mengaktifkan CSS khusus yang akan memberikan latar berupa gambar animasi loading:

<div class="img-show" syle="width:750px;">
  <div class="img-holder loading" style="height:1088px;">
    <img class="transparent" src="img/01.png" alt="Loading..."/>
  </div>
  <ul class="img-gallery img-nav" data-width="750" data-height="1088">
    <li><a class="active" 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>
    <li><a href="img/04.png">Judul Halaman 4</a></li>
  </ul>
</div>
.img-show .img-holder.loading {
  background:white url('img/loading.gif') no-repeat 50% 300px;
}

Atur tampilan gambar yang berhasil ditambahkan dengan tingkat transparasi sebesar 0, sehingga gambar akan tampak menghilang dan memperlihatkan latar animasi loading di belakangnya:

$parent.find('img.transparent').css('opacity', 0);

Saat ini gambar masih memuat, saat gambar telah benar-benar berhasil termuat, animasikan tingkat transparasi menuju 1 (opaque) sehingga efek fading akan tercipta setiap kali gambar selesai termuat:

$parent.find('img.transparent').css('opacity', 0).load(function() {
    $parent.find('.img-holder').removeClass('loading'); // Singkirkan kelas loading pada kontainer saat gambar telah berhasil dimuat
    $(this).animate({opacity:1}, 400); // Animasikan nilai transparasi dari 0 menuju 1
});

Menyisipkan Angka-Angka 

Untuk menyisipkan angka-angka, kita gunakan .each() untuk merayapi semua tautan yang ada kemudian ganti semua teks di dalamnya menjadi angka sesuai dengan urutannya. Di sini Saya juga akan memindah teks asli pada masing-masing tautan ke dalam atribut title, sehingga tidak akan ada yang sia-sia:

$('.img-gallery').each(function() {
    var w = $(this).data('width'),
        h = $(this).data('height');
    $(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..."/>');
    $('a', this).each(function(i) {
        i = i+1; // Proses pengurutan dalam JavaScript dimulai dari nol, untuk mengangkat nilai awal pengurutan, naikkan satu tingkat!
        $(this).attr('title', $(this).text()); // Pindahkan semua teks (judul halaman) pada tautan menjadi nilai atribut title pada setiap tautan
        $(this).html(i); // Terakhir, sisipkan nomor urut pada masing-masing tautan
    });
});

Sehingga hasilnya akan menjadi seperti ini:

<div class="img-show" syle="width:750px;">
  <div class="img-holder loading" style="height:1088px;">
    <img class="transparent" src="img/01.png" alt="Loading..."/>
  </div>
  <ul class="img-gallery img-nav" data-width="750" data-height="1088">
    <li><a class="active" href="img/01.png" title="Judul Halaman 1">1</a></li>
    <li><a href="img/02.png" title="Judul Halaman 2">2</a></li>
    <li><a href="img/03.png" title="Judul Halaman 3">3</a></li>
    <li><a href="img/04.png" title="Judul Halaman 4">4</a></li>
  </ul>
</div>

Memasukkan Perintah 

Sekarang kita tambahkan perintah pada setiap navigasi halaman. Jika navigasi halaman diklik, sisipkan nilai href dari navigasi halaman tersebut ke dalam elemen <img>, kemudian atur efek animasi seperti pada efek animasi yang kita buat sebelum ini:

$('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');
    // Bergantian mengganti kelas setiap kali klik pada navigasi
    $activeNav.removeClass('active');
    $(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() {
        $(this).removeClass('loading').find('img').animate({opacity:1}, 400);
    });
    return false;
});

Lebar dan Tinggi Halaman yang Berbeda 

Tidak semua halaman komik memiliki tinggi dan lebar yang sama. Terkadang mereka juga bisa tampak sebagai gambar lebar berbentuk persegi panjang mendatar. Oleh karena itu menganimasikan tinggi dan lebar kontainer juga penting. Kita bisa mendapatkan lebar dan tinggi gambar saat gambar telah termuat, sehingga kita misa menganimasikan ukuran kontainer sesuai dengan ukuran gambar yang tampil. Modifikasi dilakukan pada saat fungsi telah menunjukkan bahwa gambar sudah termuat:

$('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');
    $(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() {
        // Animasikan lebar dan tinggi kontainer setelah gambar termuat
        $parent.animate({width:$(this).width()}, 600).find('.img-holder').animate({height:$(this).height()}, 600, function() {
            // Setelah animasi tinggi dan lebar selesai dijalankan,
            // set nilai transparasi gambar menjadi opaque
            $(this).removeClass('loading').find('img').animate({opacity:1}, 400);
        });
    });
    return false;
});

Membuat Halaman Meloncat ke Posisi yang Tepat 

Saat menekan tombol navigasi, pada dasarnya kita sedang berada pada posisi halaman paling bawah. Akan sangat merepotkan jika pembaca harus menggulung layar ke atas kembali setiap kali gambar baru termuat, jadi kita buat saja agar halaman meloncat ke atas setiap kali navigasi diklik. Kita gunakan jQuery .scrollTop() untuk urusan ini:

$('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');
    $('html, body').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() {
        // Animasikan lebar dan tinggi kontainer setelah gambar termuat
        $parent.animate({width:$(this).width()}, 600).find('.img-holder').animate({height:$(this).height()}, 600, function() {
            // Setelah animasi tinggi dan lebar selesai dijalankan,
            // set nilai transparasi gambar menjadi opaque
            $(this).removeClass('loading').find('img').animate({opacity:1}, 400);
        });
    });
    return false;
});

Selesai! Sisanya tinggal merapikan dan memidah semua hal yang berhubungan dengan durasi animasi ke dalam variabel baru, sehingga proses modifikasi kecepatan animasi menjadi lebih mudah dilakukan.


Kode Lengkap 

jQuery 

$(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;
        });

    });
});

CSS 

.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;
}

.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:2px 2px 0 0;
  padding:0;
  float:left;
  display:inline;
  list-style:none;
}

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

.img-nav li a.active {
  background-color:#900;
  color:white;
}

Dasar Kerangka 

<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>

75 Komentar

MUX SPARROW

MasyaAllah! Luar biasa banget dirimu, Mas Taufik! :-bd

Unknown

Orang pintar dan cerdas serta sensitip itu kalau tidak di kasi kerjaan yach kurang kerjaan selalu ubek-ubek sesuatu untuk di cari hal-hal yang bermanfaat, tapi aku cuma angkat 4 jempol aja bang kerena ini kerjaan yang bagus dan memberi banyak menfaat buat orang yang memerlukan serta tidak merugikan dan membuat susah orang banyak....

Terus bekarya dan salam untuk pencinta CSS stadium akud...

Unknown

cuma ikut menyimak saja mas ...
kapan-kapan mungkin dicoba ilmunya ...
salam ...

Taufik Nurrohman

@Selir Gue Kalau sekiranya masih bingung tidak perlu memaksakan diri membaca proses pembuatannya tahap demi tahap. Itu cuma untuk orang-orang yang ingin tahu saja. Selebihnya cukup mengobrak-abrik pada bagian kode lengkap/hasil akhirnya saja, atau cukup cek page-source pada halaman demo untuk dipelajari :-bd

Dixy

juga cocok dibuat untuk galeri foto... ;)

Unknown

Makasih banyak bang taufik atas ilmunya.
Udah saya coba bang. Bisa!!
Semoga blog ini makin maju. :-bd

uki

Akhirnya dapat juga yang cocok untuk img.TQ :-d

uki

Oiya kok biasa muncul,biasa tdak ya ?

Unknown

mas, kode css nya di taruh dmn ya?

Unknown

@Ibnu Hazar Biasa-nya diletakan diatas ]]></b:skin>
Bang taufik lagi Liburan apa bulan madu Ini kok lama banget..??

Unknown

@Ibnu Hazar coba Tambahkan code seperti ini:
<script type='text/javascript'>
-----Code jquery disini------
</script>
kalau tidak salah kerena jquery = JavaScript library.

Anonim

sampe puyeng kang

Unknown

makasih kak jadi malu dari td hapus2 komentar sendiri pas komentar kebikin eh malah ketemu solusinya

makasih y kak kapn2 kalo ada yg ragu lagi saya anya y \o/ \o/ \o/ \o/ \o/ \o/ \o/ \o/ \o/ \o/ \o/ \o/

Unknown

saya sedang membuat blog komik ini contohnya http://www.komikfly.com/2012/08/naruto-596.html
dan saya mengunakan script ini http://komik.bloganeh.com/reader.js
pageview blog saya tinggi tapi semua gambar yang ada di posting tdk bisa di index google... karena url gmbar ada pada javascript...........!
Nah yang saya mau tanyakan adlh bagaimana agar gmbr bisa di index google tp pageview tetap tinggi...?

Taufik Nurrohman

Kalau gambar ingin terindeks, coba gunakan tag <noscript> sebagai kontainer gambar jika JavaScript dinonaktifkan. Ini sama artinya dengan menyisipkan gambar yang sebenarnya, tapi gambar tersebut tidak terlihat. Mungkin Google bisa mengindeks gambar dengan cara ini, meskipun proses penerbitan posting akan jadi sedikit merepotkan.
Format kerangka komik nantinya akan jadi seperti ini:

<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>
<!-- Bagian ini tidak akan terlihat jika JavaScript aktif -->
<noscript><div class="img-show">
<img src="img/01.png" alt="Judul Halaman 1"/>
<img src="img/01.png" alt="Judul Halaman 2"/>
<img src="img/01.png" alt="Judul Halaman 3"/>
</div></noscript>

Kemudian tambahkan kode CSS ini di atas </head>:

<noscript>
<style type='text/css'>
.img-gallery {
display:none;
}
.img-show {
display:inline-block;
}
.img-show img {
display:block;
margin:0 0 15px;
padding:0 0;
border:none;
outline:none;
}
</style>
</noscript>

KMKO Sipil Unhas

wahh.. ini nihh..
mas kalo maunya tulisan yang ada url nya gimana??
maksudnya gambarnya tuh diganti jadi daftar tulisan yang ada urlnya..

kan blog kami blog chord2 musik.
jadi bisa nga tulisan 1, 2, 3 nya diganti jadi A, B, C dst.
terima kasih..

Taufik Nurrohman

Bisa. Pakai Array. Gunakan i bukan sebagai teks navigasi, tapi sebagai indeks untuk memanggil array yang kita buat. Saya buat array alfabet dari A sampai Z seperti ini:

var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];

Kemudian, pada bagian pembangun navigasi, buang kode i = i+1, kemudian ganti $(this).html(i); menjadi $(this).html(alphabet[i]); sehingga menjadi seperti ini:

$('a', this).each(function(i) {
$(this).attr("title", $(this).text());
$(this).html(alphabet[i]);
});

Demo: http://jsfiddle.net/tovic/5hBfn/

KMKO Sipil Unhas

waduhhh.. asli bingung...
hahahaha
maksudnya tuh isinya bukan dalam bentuk gambar mas, tetapi dalam bentuk tulisan2 yang bisa di klik (punya URL)
terima kasih..

Taufik Nurrohman

Pakai slideshow konten... Tapi di sini tidak ada tutorialnya ~x( Kurang menarik.

KMKO Sipil Unhas

hmm.. kayaknya mas nga ngerti apa yang saya maksud. :D

Coba mas buka ini..
http://www.suaranafiri.com/song/index/1

trus pake fitur transpose, Bold, lyric..
bisa nga ajarkan cara bikinnya tuhh???
terima kasih..

Taufik Nurrohman

Itu pakai AJAX mas, kalau di blogspot tidak bisa. Pas Saya klik, keluar respon seperti ini:

Kalau di cek di kode sumbernya, akan kelihatan bagian ini:

Navigator untuk SelectBox

function go_transpose(key) {
update_song("http://www.suaranafiri.com/ajax/song/1/" + key);
}

Fungsi Ajax dari JSON

function update_song(link) {
$.getJSON(
link,
function(data) {
if (data.result) {
$("#song").html(data.song);
}
}
);
}

KMKO Sipil Unhas

iyaa..
benar juga sihh..

pas saya liat source kodenya.. says masukkan smua yang bisaa..nah, emang pas sampe di Navigator untuk SelectBoxnya yang function go_transpose(key), langsung bingung stengah mati..

kasian juga ya pake blogspot.. hahahhahaa.

tapi saya bisa buat mas fitur TRANSPOSE yang kayak gitu tapi pake cara yang beda dikit (klik tombol2)
hahahahahaa...
Lumayan lah, yang penting tujuannya sama.. :D
kalo mau cek disini :
http://kmkosipil.blogspot.com/2012/09/doa-mengubah-segala-sesuatu.html

admin

pertanyaan saya simple, bagaimana membuat pagination didalam artikel. kalo di wp kan bisa pake kode sehingga artikel panjang bisa dipecah2 menjadi beberapa halaman otomatis. nah kalo di blogger gimana mas?

Taufik Nurrohman

Pakai CSS :target saja ⇒ http://jsfiddle.net/tovic/gzrxS/5/

Unknown

Di blog saya ternyata CSS target yag mas Taufik sarankan HTML buat href #page nya jadi kaya buat bikin footnot (harus didahului dulu oleh kode sup), apa memang harus seperti itu mas?

Terus apakah desain CSS page target ini bisa dipadukan dengan

Unknown

mas bisa ga mas slidenya dibikin kaya fb, jadi buat mindahin dari gambar ke gambar itu ga harus klik di angka halamannya, tapi cukup klik dimana pun di bagian gambarnya pun bisa pindah... :-)
soalnya saya ada permintaan dari temen buat bikinin blog komik mas... makasih :-bd

Unknown

satu lagi mas, ditambahin tombol nafigasi kaya di anythingslider gitu mas, tapi bisa sembunyi sendiri... gimana yah mas??

Taufik Nurrohman

Fungsi tambahan:

function nextPrev(dir) {
var $li = $('.img-gallery li');
if (dir == "prev" && $li.prev().length) {
$('.img-gallery .active').parent().prev().find('a').trigger("click");
} else if (dir == "next" && $li.next().length) {
$('.img-gallery .active').parent().next().find('a').trigger("click");
}
}
$('.prev').on("click", function() {
nextPrev("prev");
return false;
});
$('.next').on("click", function() {
nextPrev("next");
return false;
});

Markup tambahan:

<a class="prev" href="#">Sebelumnya</a>
<a class="next" href="#">Berikutnya</a>

Sembunyikan navigasi angka:

.img-gallery {display:none}

Demo: http://jsfiddle.net/tovic/5hBfn/2/

Unknown

tapi maaf nih mas, kok pas saya klik photonya, ga bisa berpindah ke photo berikutnya ya mas??

centraldata

maaf master..
akhirnya berhasil sukses 90% niiiihhhh..
HAHAHAHA...

tapi nomer2 halaman yg dibawah komik kalo saya klik bukan ganti gambar malah menuju ke url link gambarnya
pengennya sih kalo gambarnya diklik pindah ke gambar berikutnya

satu hal lagi master..
menurut saya enakan kasih prev - next diatas gambar biar kalo halamannya sampe ratusan bisa simple kalo visitor mau baca

Mohon pencerahan dari sang master admin

Makasih banget sebelumnya gan
^_^

budkalon

Ah! Saya punya saran! Gimana kalau membuat sebuah satu postingan, tetapi dibagi menjadi 2 bagian, menggunakan fasilitas next dan prev dan navigasinya menggunakan cara ini :)
Atau ada cara yang lebih baik? :D

Kalau ada, kodenya harus seperti apa? Saya masih sangat pemula dengan ini...

Zainalakbara

mas saya udah menirukan semuanya tanpa ada yang error atau gk di terima scriptnya, nah pas saya buat posting blog kok malah tidak berfungsi ya? malah waktu aku klik page 2,3,4, bukannya terganti gambarnya, malah page 2,3,4 menjadi link gambarnya. dan kalau di klik langsung menuju ke link asli gambar? kok bisa ya?

Unknown

Mas, kalo cuma buat beberapa post/artikel/entri bisa gak?

Xavier224

Aduh...Saya pusing :p x@

:-bd

thole05

salam kenal mas taufik
kalo penerapan JS di blog di bawah ini gimana ya ? :p
www.manga4indo.com
keknya lebih simple tp tetep landing page
dilihat url page per img nya ada tambahan
?page1, page2, page3, dst
yg seolah2 tidak terlihat kalo itu blogger :p
thanks
thole

Taufik Nurrohman

<div id="comic-page-area"></div>
<a href="?page=1">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
...
function loadComicPage(imageUrl, page) {
var regex = new RegExp('page=' + page, 'i');
if (window.location.search && regex.test(window.location.search)) {
document.getElementById('comic-page-area').innerHTML = '<img src="' + imageUrl + '" alt="Loading...">';
}
}
loadComicPage("Halaman-1.jpg", 1);
loadComicPage("Halaman-2.jpg", 2);
loadComicPage("Halaman-3.jpg", 3);
...

Demohttp://jsfiddle.net/tovic/gzrxS/8/show/

Unknown

bagaimana cara menambahkan pagernya yg ini
http://jsfiddle.net/tovic/5hBfn/2/
sama fungsi diatas
terima kasih

Willy Prasetyo

mas, kok lebar gambar di blog demo sekali menyusut, nggak bisa melar lagi ?
tolong di cek http://manggaasgard.blogspot.com/2013/07/fairy-tail.html

sebelumnya terima kasih atas script bermanfaat ini. mungkin nantinya bisa sy pake buat ngegantiin script yang udah sy pake diblog ini http://mangaasgard.blogspot.com/

Taufik Nurrohman

Kamu memiliki template dengan deklarasi dimensi gambar global berupa max-width:100%. Itu artinya lebar gambar tidak akan bisa melebihi lebar kontainer ketika kontainer menyusut. Jika gambar berikutnya ukurannya lebih besar, maka gambar tersebut tidak akan membuat kontainer mengembang lagi karena gambar sejak awal sudah dipaksa untuk menyesuaikan diri dengan lebar kontainer. Beda kasusnya jika ukuran kontainer mengalami perubahan dari lebar ke sempit. Solusinya bisa dengan cara menormalkan sikap gambar terhadap kontainer:

.img-show .img-holder img {
display:block;
width:auto;
height:auto;
max-width:none;
max-height:none;
}

Unknown

gini mas untuk blogspot saya sudah jadi tapi ? apa masa bikinya 1 image 1 post
kan nantinya banyak post gitu ??... untuk image pertama jadi tapi image" selanjutnya kek na ga bsa di muat di blog. tlong mas buatin navigasi yang untuk blogspot ...

Unknown

Huaaa susah begini bang ada yang langsung jadi aja gak bang ? yang Berformat .xml gitu biar gampang atau cara buat yang kayak beginian bang Pagenya >> http://terpaksa-tampan.blogspot.com/2013/09/naruto-chapter-645-bahasa-indonesia.html << kalau bisa tolong Pos bang sekali kasih yang jadinya (.xml) kalau udah kabari lewat email y bang atau balas di sini Email saya : kholidblog@gmail.com

Mohon secepatnya bang

Taufik Nurrohman

⇒ http://www.themasdoyok.com/2013/08/cara-membuat-blog-komik-online-di.html

centraldata

saya pake cara masdoyok gan,maklum newbie

sukses sih cuma gambarnya gede banget, gimana caranya agar gambar otomatis menjadi 70%-80% dari lebar gambar aslinya?

mohon pencerahan master

thanks
:D

Taufik Nurrohman

$parent.animate({
width: parseInt($(this).width(), 10) * (80 / 100) // 80 persen
}, resizeSpeed).find('.img-holder').animate({
height: parseInt($(this).height(), 10) * (80 / 100) // 80 persen
}, resizeSpeed, function() { … });

Unknown

mas, sudah saya ikuti cara2nya, saya meng-copy yg Kode Lengkap mulai dari J-Query, CSS, dan Dasar Kerangka HTMLnya, tpi tidak mau keluar malah ke link gambar tsb..

btw. saya tidak pakai blogspot melainkan membuat web sendiri di localhost di laptop saya..website itu untuk tugas akhir saya..
mohon pencerahannya

bisa dikirim lewat email saya : xanxusviper@gmail.com

Taufik Nurrohman

Loh, tugas kuliah kamu kok Saya yang mengerjakan? :(

Unknown

masalah saya juga seperti itu. yang keluar di hasil akhir hanya link untuk menuju gambar tersebut. gimana ini ya??

Unknown

bang, apa untuk HTMLnya bisa dipakai di blog dari blogger?

Unknown

bang.. cara membuat tombol next dan prev nya pas mousenya nyentuh gambar.. tombol next prev nya muncul. berada di samping gambar gimana ? kayak situs NgomikDotCom

pleasse.. :D

pyordova

saya udah berhasil mas.. alhamdulillah bisa ngubek" sendiri sampe puyang ni kelapa.. :)
mau nanya memperbesar gambar yg ditampilkan gimana ya...?????
thanks

Unknown

instalasi ke bloggernya bagaimana Gan?, masih bingung.
j query dan css itu di hosting ato di tambahin langsung ke xml templatenya..., kalo emang di tambahin.., naruhnya di bagian mana saja??.

kalau berkenan, mohon dibuatkan tutorial untuk instalasi ke blogger. saya yakin banyak pemula lain yang pengen...

please... -_-. masih newbie...

Unknown

saya ada saran untuk bahan postingan Mas Taufik dan masih seputar komik serta berbagai kebutuhan untuk buku online.

coba buat artikel tentang : Turn.js
demo bisa dilihat disini : DEMO

menggunakan HTML (XML juga bisa), CSS, Javascript/Jquery, Tanpa Flash element-murni html (HTML 5 Disarankan).

browser pendukung:
Safari 5, Chrome 16, Firefox 10, InternetExplorer 10, 9, 8.

mendukung fitur seperti ZoomPage, Viewport, dll. pokoknya keren dah, mohon pencerahannya. :-bd

Taufik Nurrohman

Tinggal dimasukkan saja gambarnya ke dalam item halaman:

<div id="flipbook">
<div class="hard">Turn.js</div>
<div class="hard"></div>
<div><img alt="Page 1" src="page-1.jpg"></div>
<div><img alt="Page 2" src="page-2.jpg"></div>
<div><img alt="Page 3" src="page-3.jpg"></div>
<div><img alt="Page 4" src="page-4.jpg"></div>
...
...
<div class="hard"></div>
<div class="hard"></div>
</div>

Tapi Saya tidak merasa kalau plugin ini akan bagus jika diterapkan pada web komik yang fungsinya untuk dibaca, karena dari segi usability, plugin ini sangat jelek: Tidak ada seorangpun yang mau susah-susah membuka halaman komik dengan cara seret-lepas. Orang lebih suka membuka halaman komik dengan cara mengeklik (atau mengulung layar ke bawah, kalau mereka tidak keberatan dengan mengunduh seluruh gambar sekaligus dalam satu halaman) kalau tujuan mereka adalah untuk membaca isinya. Itu lebih praktis + cepat. Plugin ini lebih cocok untuk penghias halaman saja (atau sebagai bagian dari toko buku misalnya, yang hanya mengizinkan orang untuk membaca isinya sebagian saja).

Zamboez

tapi malah gk jadi yah yang ini. gak jai Flip book nya.. ??

Unknown

waduh binggung saya :D
ada videonya kh ??

Niichan

Mas, itu yang jQuery di diletakan di bagian mana ya?

Watti

kak buat teritorial videonya dong ... :-bd
please... ^_^

Unknown

gan teritorial videonya dong...
please... :-bd

Anonim

mumet 0:)
tapi keren banget nih blog...eh, bukan, kayaknya ini web bukannya blog diliat dr urlnya. si admin dah pro nih. ampe' kotak komennya aja gak biasa.

Hilman Maulana

Om, kalau misalkan mau buat jadi ada pilihan full mode itu gimana?

Taufik Nurrohman

Belakangan ini Saya lebih banyak fokus ke PHP, posting ini jadi agak terbengkalai. Kalau Saya benar-benar ada waktu luang untuk ini akan Saya coba buatkan versi JavaScript mentah-nya supaya tidak lagi dependen ke jQuery, ditambah fitur full-mode juga.

Madao De lanoste

bang kalau template dari yamanga ini gimana "http://demo.kaizentemplate.com/2016/06/yamanga-responsive-blogger-templates.html". bingung nyari solusinya, gambarnyanya distorsi and kalau dibuka pake laptop atau computer, di klik prev atau next nya gambarnya semakin mengecil. ada solusinya ga bang.???

Taufik Nurrohman

Biasanya karena gambar pada blog diset secara global sebagai gambar responsif seperti ini:

img {
max-width:100%;
height:auto !important;
}

Agil

terima kasih sudah membantu saya membuat blog baca manga. cuman saya masih bingung kenapa ya setiap saya klik next chapter malah tidak muncul ? mangaret.blogspot.com/2018/10/one-piece-chapter-1-english.html coba dilihat gan dan mohon pencerahannya

Mardakom

mas request navigasi next manga, prev manga di label yang sama dan indexnya dong mas :D

Komentar telah ditutup.