Cara Membuat Blog Komik Online di Blogspot

Bonus Template Komik Online di Blogger/Blogspot - Serial blog project kembali hadir, sebuah serial pembuatan blog profesional secara detail dan komplit, menggunakan mesin tercinta kita blogger atau blogspot. Lewat serial blog project ini saya berharap pengguna blogger tidak perlu berkecil hati karena blogger tetap bisa dimanfaatkan secara luas untuk banyak hal, jika kita kreatif. Oke kita mulai.

LIHAT DEMO | DOWNLOAD TEMPLATE

Step by step:
1. Membuat Blog 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)
5. Bonus Template (optional)

1. Membuat Blog di Blogger

Paling awal, Anda harus memiliki sebuah blog. Mulai buat!

2. Pasang Script Image Selector di Blogger

Letakkan script berikut di atas </head>

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

Akan lebih baik lagi jika script tersebut di host sendiri agar tidak berat saat load. (Baca: Host JavaScript di Google Drive)

3. Tutorial Posting

Posting dalam mode HTML, bukan mode compose. Masukkan script berikut ini ke postingan Anda:

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

Jika Anda menggunakan template sendiri, maka perlu ditambahkan kode berikut ini di atas </head>

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

4. Membuat Halaman Manga List (optional)

Untuk membuat halaman manga list silahkan tambahkan CSS berikut ini ke template Anda, letakkan di atas ]]></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;
}

Buatlah sebuah static page/laman kemudian posting dalam mode HTML, masukkan script berikut:

<div id="subheadpost"><a href="#"><img width="140px" height="190px" src="#"><header><h5>Action</h5><h6>TORIKO</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
- TORIKO ganti dengan judul komik
- Tambahkan kode serupa di bawahnya jika ingin menambahkan kotak list mangan yang lain

5. Bonus Template

Jika Anda menggunakan template ini, maka
- Anda tidak perlu menambahkan script image selector. Sudah terinstal
- Anda tidak perlu menambahkan script NB pada poin 3
- Anda tidak perlu menambahkan CSS pada poin 4
- Belum ane SEO-in, SEO ini sendiri ya :D maklum cepet2 editnya.

Link download templatenya ada di atas ya! Kalau tidak bisa didownload kabari saya lewat facebook.

Item Info: Membuat Komik Online di Blogspot/Blogger