Template Blogazine Terbaik

Monday, August 19, 2013

Template blogazine merupakan template unik, sebab setiap posting halaman berbeda tergantung darimana anda menilai dan dari mana pula anda ingin mengkresikan code CSS, HTML ataupun jQuery pada template blogazine ini. Template blogazine banyak orang menyebutnya dengan template ala majalah, yang bisa dilayout sesuai dengan pemiliknya

Template ini dibuat dan dipublikasikan oleh DTE

Unduh Template

Mungkin hanya ini yang bisa diposting kali ini, semoga bermanfaat.

Sebagai catatan, disarankan untuk tidak menyentuh bagian-bagian kode CSS di dalam <b:skin> karena Admin 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 type='text/css'>

/* 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

Admin menggunakan sistem grid 1140px Grid dari Andy taylor yang juga Admin gunakan dalam blog Blogazine Admin. 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:

Demonya

Perataan Gambar dan Teks

Sistem perataan gambar dan teks sudah Admin 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 Admin 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, Admin 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>

Live Demo

Lainnya

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

Lisensi

https://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 Template

Source » DTE :]

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini