Cara Membuat Blog Komik Online

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.

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.

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.

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.