searchbox

Selasa, 27 Agustus 2013
no image

Cara Membuat Blog Komik Online di Blogspot - THEMASDOYOK.COM


Cara Membuat Blog Komik Online di Blogspot

Posted: 27 Aug 2013 03:31 PM PDT

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 (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 merah pada baris pertama dengan URL gambar yang ingin ditampilkan pada homepage.
- ID controlimage, baris berwarna hijau tidak perlu Anda rubah, karena itu navigasi otomatis untuk membaca komik.
- 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 yang berwarna merah 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)

NB: 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

Baca selengkapnya »
Minggu, 25 Agustus 2013
no image

Pengaturan Margin dan Padding di Bootstrap - THEMASDOYOK.COM


Pengaturan Margin dan Padding di Bootstrap

Posted: 25 Aug 2013 05:06 PM PDT

Pengaturan Margin dan Padding di Bootstrap - Bootstrap v3 telah dikembangkan. Versi ini memungkinkan responsibility di berbagai device seperti mobile, tablet dan desktop tanpa pengaturan css manual. Sistem grid yang fleksibel memungkinkan kita mengatur lebar kolom yang akan menyesuaikan device tanpa penambahan rumus kondisional secara manual di blog.

Saya mencoba membuat template full bootstrap, paling tidak dari segi CSS, sama sekali tidak ada CSS yang ditulis manual di blog, dan ternyata cukup membuat puyeng. Contoh project: http://project-bootstrap.blogspot.com/. Mungkin akan terjadi error atau apa, karena masih saya utak atik terus menerus sambil belajar. Template tersebut juga sudah lolos validasi HTML5.

Sementara ini, lebih banyak kesulitan yang didapatkan ketimbang kelebihan yang saya rasakan ketika mencoba mengembangkan template berbasis bootstrap. Kode memang menjadi lebih ringkas dan tentu saja loading cepat, tapi belum keseluruhan class CSS bootstrap bisa mewakili kebutuhan desainer.

Misalkan saja untuk masalah padding dan margin kita akan dibuat sangat ribet. Di web resmi bootstrap (getbootstrap.com), diajarkan tentang pergeseran widget ke kanan (bisa mewakili margin-left) menggunakan sistem offseting column, tapi untuk kebalikannya juga belum ada class standard yang bisa kita gunakan.


Jadi, untuk menentukan margin dan padding kita harus memberikan tambahan kode CSS internal, seperti contoh: 

.selector {
margin: 0px;
padding: 0px;
}  

Info Tentang: Pengaturan margin, padding dan color di Bootstrap

Membuat Bootstrap di Blogger - Blogspot

Posted: 25 Aug 2013 06:21 PM PDT

Instal Bootstrap di Blogger Blog - Banyak pengguna blogger yang bingung soal bootstrap. Mungkin banyak yang mempunyai keinginan untuk aplikasikan bootstrap di blog blogspot mereka, tapi bingung step-step nya. Ya, sambil belajar bareng mari kita coba buat bootstrap di blogger.

(Sebaiknya dibaca: Bootstrap belum tepat untuk blogspot). Tapi untuk belajar boleh juga lah, biar tidak ketinggalan jaman.

Langkah-langkahnya:
1. Download File Bootstrap
2. Upload di Google Drive
3. Pemasangan di Blogspot

Download File Bootstrap
Untuk versi terbarunya bisa di download di https://github.com/
File nya terus di update, jadi nanti kita bisa ikuti perkembangannya.
- Download file tersebut, hasil download berupa zip file
- Extract file ke folder yang Anda tentukan. File zip tersebut terdiri dari file xss, images dan js


Upload di Google Drive
- Sementara 2 file aja dulu yang di upload di Google Drive. Baca Tutorial: Host JavaScript di Google Drive.
- File yang diupload adalah file bootstrap.min.css dan bootstrap.min.js

Pemasangan di Blogspot
Nah, ini langkah terpenting.
- Login Blogger
- Klik Template
- Klik Edit HTML
- Masukkan script bootstrap yang sudah diupload di atas </head>

Nah, setelah script ditambahkan Anda mulai bisa menggunakan class-class bootstrap.

Kalau Mau Mudah,
Kalau bingung cara upload file dan pasangnya, cukup tambahkan kode berikut ini di atas </head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://html5shim.googlecode.com/svn/trunk/html5.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"/>



Jika, sudah silahkan Simpan Template Anda. Sekarang Anda mulai bisa menambahkan berbagai component dengan mudah. Untuk penambahan elemen silahkan lihat di: Componen . Btotstrap

Sekarang sudah update versi 3: http://getbootstrap.com/

Item Info: Membuat Bootstrap di Blogger - Blogspot

Baca selengkapnya »