Template Blogazine 21.04.92

Tabel Konten
  1. Sistem Grid 
  2. Perataan Gambar dan Teks 
  3. Lainnya 
  4. Lisensi 

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!

Template Blogazine 21.04.92

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

18 Komentar

  • IRIL SAGITA

    Bagus banget ni template kak, ijin cobain ya ?

  • Damar Zaky

    ReMangstab mas :D

  • Taufik Nurrohman

    Tidak perlu repot-repot mengomentari... Ini cuma postingan recover dari posting lama yang hilang/tidak bisa dipublikasikan ulang.

  • Anonim

    Kalau templatenya bagus Mas,tapi mau gimana masih konsisten sama template sekarang.Bagi blog baru template ini bisa diimplementasikan ini Mas. :)

  • kamu info

    Sama aja mas :D

  • Beben Koben

    duh repot mengomentar nih :Ozz

  • Anonim

    Komentar ini telah dihapus oleh administrator blog.

  • Unknown

    Dari kemaren cari Template Blogazine yg simpel baru nemu sekarang, ijin comot ya gan... :-bd

  • Unknown

    woo,, woo,,
    simple tampilannya, tapi setiap post beda gaya,, beda beda beda dan luar biasa.. :-bd

  • Unknown

    Keren Mas, templatenya sederhana skali :-bd

  • Unknown

    Mas, kalo Dropcapnya gimana?

    Asik nih untuk yang mau jadi Blogazine :-bd

  • Unknown

    Template nya oke nih! Saya coba download dulu dah.. :D

  • Unknown

    :-bd SALUT! ternyata responsive juga!! jarang loh, template magazine responsive dikasih gratis... cm ini mas, buat masukan aja ya. makin perfect klo template yang dibikin memperhatikan SEO dan Validit HTML5. banyak pembuat template skrg bikin template bagus tp kurang perhatian, dari segi Error template. Template ini sendiri (tes di W3) error-nya cuma 28! Cool...! \o/

  • Unknown

    Ini template Blogger paling keren yang saya temui dari google :D mantap blog yang satu ini... salam kenal bang,

    Mohamad Fahmi :)

  • Depresi Art

    gan terima kursus online ga? mau belajar css sm javascript buat bikin TA

  • Taufik Nurrohman

    Tidak. Saya melakukan ini cuma sebatas hobi.

  • you

    saya baca di profil mas taufik katanya terkadang menerima jasa pembuatan template.. budget yang harus disediakan untuk memperbaiki struktur template seperti html css dan JS nya berapa mas...? saya bertanya lwat form pesan v tidak ada balasan..

  • Anonim

    Mantap juga ini

Komentar telah ditutup.