Cara Membuat PageList seperti Komik

Hallo Sobat Mafia Hacker, kali ini saya akan membahas tentang " Cara Membuat PageList seperti Komik " . Sobat pasti tau kan? jika disetiap komik manga online selalu identik dengan Page Photo List yang bisa next atau prev page? Yup , setelah kita tau . Bahwa kita pun bisa membuat itu semua sendiri, bagaimana caranya? Ikuti tutorial dibawah ini

DEMO 

Step by step :
1. Login di Blogger
2. Pasang Script Image Selector untuk Komik Online
3. Tutorial Posting
Sampai langkah ini Anda sudah bisa membuat sebuah blog Komik Online.
4. Membuat Halaman Manga List (optional)

1. Login di Blogger

Masukkan Link di address bar - http://blogger.com

2. Pasang Script Image Selector untuk Komik Online

Letakkan script dibawah ini diatas kode </head>

<script src='https://googledrive.com/host/0B69aOIwUyEZmTDVPc1J6c2lBZEk' type='text/javascript'/>

3. Tutorial Posting

Setiap kamu akan memposting komik baru, maka kamu diwajibkan untuk menggunakan kode script dibawah ini . Diletakkan dibagian HTML bukan Compose . Ingat ya!

<div id="comiccover"><img src="#"></div>
<div id="controlimage"><a href="javascript:void(showPrevious());">Previous Page</a><span ID="index">index</span><a href="javascript:void(showNext());">Next Page</a></div>
<span ID="page">page</span>
<span ID="caption">caption</span>
<script language="javascript">
addPhoto("#", "", "1");
addPhoto("#", "", "2");
addPhoto("#", "", "3");
addPhoto("#", "", "4");
addPhoto("#", "", "5");
</script>

<script language="javascript">initPhoto();</script>

Keterangan:
- ID comiccover, berguna untuk setting gambar komik yang muncul di homepage. Ganti pagar berwarna putih pada baris pertama dengan URL gambar yang ingin ditampilkan pada homepage.
- ID controlimage, baris ini tidak perlu dirubah.
- span ID page, lokasi penampilan komik dan ID caption untuk memberikan keterangan pada gambar komik. Sebaiknya tidak usah diubah.
- addPhoto, bagian ini adalah isi konten komik. Ganti tanda pagar putih dengan alamat gambar komik. Isikan seterusnya berurutan. Anda bisa menambahkan halaman lain tidak terbatas dengan menambahkan script berikut: addPhoto("#", "", "5"); angka 5 ganti dengan angka 6 dan seterusnya.
- Jadi, yang perlu Anda rubah pada script di atas hanya pada bagian #.

Agar tidak susah payah menulis script dasar tersebut berulang-ulang, Anda bisa menambahkannya ke template Postingan (Setelan -> Pos dan Komentar -> Copykan kode di atas ke Templat Entri -> Simpan)

Kalau kamu menggunakan Template buatanmu sendiri, maka letakkan kode dibawah ini diatas kode </head> atau dibawah script diatas tadi .

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <style>#comiccover {display:none}</style></b:if>

4. Membuat Halaman Manga List (optional)

Untuk Membuat Page ini berjalan dengan baik, Letakkan kode CSS dibawah ini, diatas kode ]]></b:skin>

#subheadpost {position:relative;margin-right:10px;float:left;}
#subheadpost header {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 15px;
    padding: 0 5px;
    position: absolute;
    width: 120px;}

#subheadpost h5 {
    color: #C00C0C;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 11px;
    font-weight: 700;
    height: 5px;
    margin: 0;
    text-shadow: 1px 1px 1px #0B0B0B;
    width: 100%;
}
#subheadpost h6 {
    color: #FFFFFF;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px;
    text-shadow: 1px 1px 1px #0B0B0B;
}

Lalu buatlah Sebuah halaman Static Page/Laman kemudian posting dalam mode HTML . Bisa juga langsung Posting di bagian Entri baru (Jika tidak mau menggunakannya di Laman) . Lalu masukan kode dibawah ini pada HTML tersebut

<div id="subheadpost"><a href="#"><img width="140px" height="190px" src="#"><header><h5>Action</h5><h6>Komik Mafia Sitez</h6></header></a></div>

Keterangan:
- # pertama ganti dengan URL tujuan, misalkan halaman label
- # kedua ganti dengan alamat gambar, misalkan gambar naruto
- Action ganti dengan label komik, misal petualangan
- Komik Mafia Sitez ganti dengan judul komik
- Tambahkan kode serupa di bawahnya jika ingin menambahkan kotak list mangan yang lain

Nah, mudah sekali kan membuat Komik Online di Blog? Jadi Postingan " Cara Membuat PageList seperti Komik " Telah selesai .
Kalau ada yang tidak dimengerti bisa langsung ditanyakan dengan berkomentar di bawah .
Semoga Bermanfaat  :)