Template Blogazine 21.04.92

Pembaharuan 19 Maret 2013: Memperbaiki framework templat dengan menyusun ulang satuan-satuan elemen yang lebih fleksibel + mengaktifkan hack meta deskripsi Blogger. Saya sarankan Anda untuk mengunduh ulang/melihat ulang blog demo framework templat Blogazine ini!

Setelah beberapa bulan melakukan penelitian sendiri, merasakan bagaimana sulitnya membuat posting unik dan mengetahui apa yang bisa dipermudah dan apa yang membuat Saya merasa sulit untuk membuatnya, pada akhirnya Saya memutuskan untuk merilis templat blogspot khusus Blogazine yang diharapkan bisa menjadi standar:

Lihat Demo Unduh Templat

Tampilannya memang sangat sederhana, tapi justru itulah tujuan Saya. Saya membuat halaman muka templat ini polos, dan bisa dibilang tidak memiliki unsur desain sama sekali. Saya harap kalian bisa memodifikasi tampilan halaman muka sesuka hati dan menciptakan identitas kalian masing-masing. Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian kode CSS di dalam <b:skin> karena Saya sudah merancangnya agar bisa mempermudah pembuatan posting unik pada halaman item. Untuk mengedit/mendesain tampilan halaman muka, kalian bisa mencoba berkreasi pada bagian ini:

<!-- MODIFIKASI TAMPILAN HALAMAN MUKA DI SINI! -->
<style>

/* General */
body {}

/* Header */
#headace {
  text-align:right;
  padding:2em 2.5em;
}
#headace h1 {
  margin:0 0;
  font-size:400%;
}
#headace p {
  font-size:120%;
  margin:.5em 0 0;
}

/* Posts */
.post {
  margin:0 0;
  padding:0 0;
}
.post-outer {margin:0 5%}
.post .post-title {
  margin:0 0;
  font-size:120%;
  text-align:left;
}
.post-footer {margin:.5em 0 1.5em}
.date-header {display:none}

</style>

Sistem Grid

Saya menggunakan sistem grid 1140px Grid dari Andy taylor yang juga Saya gunakan dalam blog Blogazine Saya. Dengan sistem grid, kalian tidak perlu lagi membuat peraturan media queries berkali-kali pada setiap posting, karena sistem grid sudah disusun dalam satu paket di dalam templat. Berikut ini adalah konsep dasar pembuatan kolom pada posting:

Pertama-tama buat pembungkus luar berupa elemen .row:

<div class="row">
    ...
</div>

Setelah itu kalian tentukan sendiri, akan menggunakan model grid berapa kolom. Dalam sistem grid ini ada setidaknya sebelas macam ukuran. Masing-masing dibagi dalam kelas yang berbeda seperti ini:

1. onecol untuk standar 12 kolom sama lebar
2. twocol untuk standar 6 kolom sama lebar
3. threecol untuk standar 4 kolom sama lebar
4. fourcol untuk standar 3 kolom sama lebar
5. fivecol
6. sixcol untuk standar 2 kolom sama lebar
7. sevencol
8. eightcol
9. ninecol
10. tencol
11. elevencol

fivecol, sevencol, eightcol, ninecol, tencol dan elevencol digunakan untuk layout kolom lanjutan. Misalnya jika kita ingin membuat dua kolom dengan lebar yang berbeda. Contoh sederhana, untuk membuat dua kolom sama lebar, kita bisa menggunakan .sixcol seperti ini:

<div class="row">
    <div class="sixcol">
        ...
    </div>
    <div class="sixcol last">
        ...
    </div>
</div>

Catatan: Jangan lupa untuk menyertakan kelas .last pada setiap akhir kolom. Itu digunakan untuk menghilangkan margin-right yang berlebih pada kolom terakhir.

Gambaran selengkapnya mengenai hasil penerapan kelas-kelas grid di atas bisa kalian lihat di halaman ini:

Lihat Demo

Perataan Gambar dan Teks

Sistem perataan gambar dan teks sudah Saya buat dalam satu paket CSS di dalam templat. Tugas kalian hanya tinggal menerapkan kelas-kelasnya saja pada elemen yang dikehendaki:

/* CSS Float */
.clear {clear:both} /* clear float */
.left {float:left} /* left alignment */
.right {float:right} /* right alignment */
.hidden {display:none} /* hidden element */
.visually-hidden {
  position:absolute !important;
  top:-9999px;
  left:-9999px;
} /* accessible hidden element */

/* Text Alignment */
.text-left {text-align:left} /* text-align left */
.text-right {text-align:right} /* text-align right */
.text-center {text-align:center} /* text-align center */

/* Image Alignment */
img.left {margin:0 1em .2em 0} /* left alignment */
img.right {margin:0 0 .2em 1em} /* right alignment */
img.center {margin:0 auto} /* center alignment */

Sebagai contoh, jika kalian ingin menerapkan perataan gambar ke samping kiri, tambahkan kelas left seperti ini:

<img class="left" src="gambar.jpg" alt="" />

Sisanya perataan kanan dan tengah Saya rasa bisa dengan mudah dipahami:

<img class="right" src="gambar.jpg" alt="" />
<img class="center" src="gambar.jpg" alt="" />

Editor Blogger biasanya akan menyisipkan elemen .separator pada setiap gambar yang berhasil diunggah. Jadi, dibandingkan menerapkan kelas pada gambar secara langsung, Saya lebih menyarankan kalian untuk menerapkan kelas perataan pada elemen .separator seperti ini:

<div class="separator center">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator left">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>
<div class="separator right">
    <a href="#"><img src="gambar.jpg" alt="" /></a>
</div>

Hapus semua inline-style bawaan dari editor Blogger (Misalnya: style="margin-left:1em;margin-right:1em;"). Kita cukup menggunakan kelas perataan pada setiap elemen.

Perataan teks tidak sulit, cukup buat elemen baru kemudian tambahkan kelas perataan, atau tentukan elemen mana yang ingin diberi kelas perataan:

<div class="text-right"> ... </div>

<div class="row">
    <div class="fourcol text-right">
        ...
    </div>
    <div class="fourcol text-center">
        ...
    </div>
    <div class="fourcol last">
        ...
    </div>
</div>

Lihat Demo

Lainnya

Formulir komentar tersembunyi dan fitur thread-commenting bawaan Blogger siap pakai.

Lisensi

http://creativecommons.org/licenses/by/2.5/ - Artinya bahwa Anda boleh mengubah nama pembuat, mengubah identitas templat dan footer namun dengan syarat tetap mempertahankan keterangan sumber. Tidak perlu repot-repot membuat tautan aktif yang dipasang di catatan kaki blog, cukup biarkan semua atribusi yang ada di dalam kode. Selebihnya terserah Anda: Tidak ada lisensi/tidak mewajibkan atribusi, kecuali sistem grid, kalau mau.

Unduh Templat