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

Komentar

  1. Udah ditunggu2 di FB gan pengumuman postingannya, Alhamdulillah akhirnya kelar juga :D

    BalasHapus
  2. Lapor mbah.. udah bisa komiknya di http://hikmahkomik.blogspot.com/ maturnuwun

    BalasHapus
  3. udah bikin blognya sob, tp belum punya komiknya hehe

    BalasHapus
  4. Mas Doy boleh tanya agak pribadi gak, kalau bikin template blogspot itu pakai software apa'an sieh mas, pingin pinter kayak mas doy, boleh tau kan??

    BalasHapus
    Balasan
    1. kebanyakan pake arister kang, tp kalau aku dulu kan pernah tu bikin serial minima today, yg intinya ngedit abis template minima jadi banyak varian, nah aku kode dasarnya itu aja baru kemudian aku midifikasi sesuka hati...

      jadi tanpa software alias penulisan manual

      Hapus
  5. Mas, yang navigator di Postingannya (Previous Page 1 / 2 / 3 / 4 / 5 Next Page) itu bisa di hapus gak? Caranya?

    BalasHapus
    Balasan
    1. bisaaa, hapus aja yang kode warna ijo mas

      Hapus
    2. Kalau nama page "http://comictmd.blogspot.com/2013/08/akb-49-chapter-47.html?page=2" yang "page=2" itu bisa diganti gak ya?

      Hapus
    3. bisa mas, tinggal diubah scriptnya

      Hapus
  6. wih tampilan komennya mirip google + comment

    BalasHapus
  7. mas cara edit merubah ukuran lebar gambar dipostingan gimana ya agar tidak terlalu besar? maksudnya dikecilin dikit gitu agr tidak terlallu full page

    BalasHapus
  8. kenapa si gan lu baik bener :D .. thank berat gan.

    BalasHapus
  9. kenapa si gan ente baik bener :D !! thanks berat gan.

    BalasHapus
  10. gan kalau mau ganti manga list nya gimana ya ? ane mau ganti isi komiknya, kalau buat dari laman malah beda gan

    BalasHapus
    Balasan
    1. postingnya dalam mode HTML, bisa juga baut manga list pake halaman postingan biasa atau gadget HTML

      Hapus
  11. uhhh Mantap amat sih kak Templatenya...
    Aku pake yahh.. :*

    BalasHapus
  12. thank's gan, this is a great post..
    dicoba dlu y..

    BalasHapus
  13. Klo bikin keag gini gimana gan? --> http://1.bp.blogspot.com/-hWoJVcaYJYw/UoWLK5PmMhI/AAAAAAAAANc/tkJBJNX3HUs/s1600/Untitled.png ^_^
    Trus Ngupload gambar klo keag gitu gimana?
    Oh iya satu lg gan, Klo buat home page buat naroh cover manga itu scriptnya gimana? mohon banget pencerahannya gan :'(

    BalasHapus
  14. Terima kasih banyak sobat, aku ijin pakai scriptnya iya ^^

    BalasHapus
  15. kalau di wordpress gemana caranya mas

    BalasHapus
  16. kalau diwordpress gemana caranya mas...treima kasih

    BalasHapus
  17. om klo di buat responsive image dan halaman nya gmn om?

    BalasHapus
  18. gan bisa ga index manganya yang ( 1 / 2 / 3 /.../ ) diganti jadi model option ?

    BalasHapus
  19. makasih gan..
    dengan begini, semoga blog ane semakin maju..

    Terima kasih gan.. :)

    BalasHapus
  20. mantep dah, lumayan buat publishing komik ane nanti. :3
    makasih mang...

    BalasHapus
  21. mas pengen nanya, cara ngeganti latar belakang/backgroundnya gimana?

    BalasHapus
  22. Siiip Gan Thx Ya :D
    Oh ya kalo baca manga disini aja http://komikbar.blogspot.com/ hehehe :v
    Like Buat agan

    BalasHapus
  23. mantap gan, terima kasih banyak ya atas ilmunya :)

    BalasHapus
  24. yang manga list (optional) saya kurang ngerti nih mas doy
    saya coba tarus css diats ]]> yang ada di atas header nya ada script ituu
    mohon bantuannya

    BalasHapus
  25. bang bantuin dong ane gk bsa2
    maaf newbie

    BalasHapus
  26. saya ingin mencoba di wordpress om.... Cara Membuat Blog Komik Online di Blogspot tapi di ganti di WP om...bisa gak ???

    BalasHapus
  27. cara ngeupload fotonya gmana gan. . .

    BalasHapus
  28. Setelah saya membaca artikel di atas saya jadi tau dan paham tentang cara membuat blog dengan cara cepat, terima kasih atas ifonya gan, pemula,salam

    BalasHapus
  29. Artikelnya sangat bagus dan bermanfaat buat kita, setelah saya membaca artikel di atas saya jadi tau dan paham tentang cara membuat blog komik online di blogspot , terima kasih atas ifonya gan, pemula,salam

    BalasHapus
  30. nggak ngerti yang point 2? Tolong jelasin?

    BalasHapus
  31. mantab nih,,,udah ane praktekin dan berhasil gan...cek comic ane disini

    BalasHapus
  32. gan mohon bantuannya coba deh buka http://mangamorfosa.blogspot.com/
    itu kenapa pstingannya ko cuman 3 ya padahal aku dah posting banyak, di pengaturan tata letak posting sudah 6. tapi gak bisa 6 kayak di demo atas. mohon bantuannya gan. terima kasih

    BalasHapus
  33. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  34. gan, kalo mau ganti background luffy nya itu gimana?

    BalasHapus
  35. gan cara ngurangin jarak header ke post gimana?
    http://4.bp.blogspot.com/-utALv5Fbqek/U-Lisqzz0yI/AAAAAAAAABU/Fd6-ewl4QYA/s1600/Untitled.jpg

    tolong dijawab gan...

    BalasHapus
  36. Gan Gimana caranya Memberi Gambar pada komik

    BalasHapus

Posting Komentar

Postingan Populer