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 melaksanakan penelitian sendiri, mencicipi bagaimana sulitnya membuat posting unik dan mengetahui apa yang dapat dipermudah dan apa yang membuat Saya merasa sulit untuk membuatnya, pada hasilnya Saya memutuskan untuk merilis templat blogspot khusus Blogazine yang diperlukan dapat menjadi standar:
Tampilannya memang sangat sederhana, tapi justru itulah tujuan Saya. Saya membuat halaman muka templat ini polos, dan dapat dibilang tidak mempunyai unsur desain sama sekali. Saya harap kalian dapat memodifikasi tampilan halaman muka sesuka hati dan membuat identitas kalian masing-masing. Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian isyarat CSS di dalam <b:skin> sebab Saya sudah merancangnya supaya dapat mempermudah pembuatan posting unik pada halaman item. Untuk mengedit/mendesain tampilan halaman muka, kalian dapat mencoba berkreasi pada cuilan 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 memakai 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, sebab sistem grid sudah disusun dalam satu paket di dalam templat. Berikut ini yakni konsep dasar pembuatan kolom pada posting:
Pertama-tama buat pembungkus luar berupa elemen .row:
<div class="row"> ... </div>Setelah itu kalian tentukan sendiri, akan memakai model grid berapa kolom. Dalam sistem grid ini ada setidaknya sebelas macam ukuran. Masing-masing dibagi dalam kelas yang berbeda ibarat ini:
- onecol untuk standar 12 kolom sama lebar
- twocol untuk standar 6 kolom sama lebar
- threecol untuk standar 4 kolom sama lebar
- fourcol untuk standar 3 kolom sama lebar
- fivecol
- sixcol untuk standar 2 kolom sama lebar
- sevencol
- eightcol
- ninecol
- tencol
- elevencol
fivecol, sevencol, eightcol, ninecol, tencol dan elevencol dipakai untuk layout kolom lanjutan. Misalnya kalau kita ingin membuat dua kolom dengan lebar yang berbeda. Contoh sederhana, untuk membuat dua kolom sama lebar, kita dapat memakai .sixcol ibarat ini:
<div class="row"> <div class="sixcol"> ... </div> <div class="sixcol last"> ... </div> </div>Catatan: Jangan lupa untuk menyertakan kelas .last pada setiap selesai kolom. Itu dipakai untuk menghilangkan margin-right yang berlebih pada kolom terakhir.
Gambaran selengkapnya mengenai hasil penerapan kelas-kelas grid di atas dapat kalian lihat di halaman ini:
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, kalau kalian ingin menerapkan perataan gambar ke samping kiri, tambahkan kelas left ibarat ini:
<img class="left" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" />Sisanya perataan kanan dan tengah Saya rasa dapat dengan gampang dipahami:
<img class="right" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /> <img class="center" src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" />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 ibarat ini:
<div class="separator center"> <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div> <div class="separator left"> <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div> <div class="separator right"> <a href="#"><img src="gambar.jpg" alt=" Utamakan Konsistensi Tampilan Artikel Sebelum Layout Template Blogazine 21.04.92" /></a> </div>Hapus semua inline-style bawaan dari editor Blogger (Misalnya: style="margin-left:1em;margin-right:1em;"). Kita cukup memakai kelas perataan pada setiap elemen.
Perataan teks tidak sulit, cukup buat elemen gres lalu 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>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.