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

    @Suwardi Unggit mas, knp jquery-nya ga bisa disimpan ya pas ditaruh diatas kode </head>?

  • Unknown

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

  • Unknown

    @Suwardi Unggit kode jquery-nya apa ya mas??
    ga ngerti. ~x(

  • Taufik Nurrohman

    @Ibnu Hazar Biasanya masalahnya datang dari Blogger yang mengira JavaScript mengandung tag HTML ⇒ Penolakan-Penolakan Blogger terhadap JavaScript dan URL

  • 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

              • Taufik Nurrohman

                Ralat: Baca pos ini ⇒ Mengimplementasikan AJAX pada Blogspot :)

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

      • thole05

        thanks replynya, rasa penasaran tuntas :D
        misal bukan img tp diganti dengan eleman class apa mungkin bisa di terapkan juga ?
        semoga cepet sembuh buat thread commentnya mas taufik :)

      • 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

    bang kok kode jquerynya ga mau di taruh diatas /head.
    keterangannya.. : div should not appear inside head

    terimakasih sblumny

  • 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

  • Unknown

    bingung

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