Cara dan Langkah Membuat Template Blogger Sendiri Part 2

Pada Cara dan Langkah Membuat Template Blogger Sendiri Part 1, template yang dibuat belum ditambahkan CSS. Mari kita lanjutkan perbincangan.

#LANGKAH 5 - SETTING LAYOUT PART 2

Ingatlah selector class yang sudah dibuat pada template yaitu outer, header, content, main-content, sidebar dan footer.

Contoh Layout (CSS)

header, article, aside, footer {display: block}
#blog-pager, .clear {clear: both}
.outer {
width: 100%;
margin: 0;
padding: 0;
}

.header {
max-width: 1200px;
margin: 0 auto 0;
background: #ffffff;
color: #000000;
text-align: center;
padding: 30px 40px
}

.content {
max-width: 1200px;
margin: 0 auto 0;
padding: 0;
}

.main-content {
float: left;
width: 63%;
margin: 0;
padding: 0;
overflow: hidden;
word-wrap: break-word;
background-color: #ffffff;
color: #111111;
}

.sidebar {
float: right;
width: 33%;
margin: 0;
padding: 0;
overflow: hidden;
word-wrap: break-word;
backgroud-color: #ffffff;
color: #111111;
}

.footer {
width: 100%;
margin: 0;
padding: 20px;
}

Seharusnya layout kira-kira seperti ini;

.header

.main-content

.sidebar

.footer

#LANGKAH 6 - FINALIZING

Langkah ini sebenarnya bukan langkah terakhir, tapi ini adalah langkah akhir dari template dasar yang dibuat. Pada langkah ini hanyalah penjelasan mengenai CSS diatas. Untuk navigasi, pagination, custom widget, dll. dibahas pada artikel terpisah.

KETERANGAN

header, article, aside, dan footer

Value yang digunakan adalah display: block, ini agar blok header, article, aside dan footer tampak berbaris ke bawah. Untuk memisahkan blok gunakan float dan tentukan lebar masing-masing (width).

outer

Saya memberikan value width: 100%, ini untuk garis terluar halaman memiliki lebar yang sama dengan lebar browser. Value margin: 0 dan padding: 0 untuk menghapus jarak / margin luar outer dan jarak konten yang ada didalam outer.

header

pada header ditulis max-width: 1200px yang dimana maksudnya adalah lebar maksimal header hanya sampai pada 1200px (pixel), jika lebar browser melebihi angka tersebut, maka lebar header akan fixed pada 1200px. Value margin: 0 auto 0 digunakan agar posisi header berada ditengah.

content

Ini adalah container untuk main-content dan sidebar. Saya memberikan value yang sama dengan outer, namun dengan margin yang berbeda, yaitu margin: 0 auto 0 agar posisinya berada ditengah (bukan align teks).

main-content dan sidebar

Untuk mengubah posisi section Blog, gunakan float: ... dan tulis value left atau right. Sesuaikan dengan keinginan.

Hasil diatas bisa dilihat disini Demo
Silahkan bereksperimen dengan imajinasi kamu, hal utama dan wajib yang perlu dilakukan adalah kesabaran, ketekunan, dan yang paling penting dari semua itu adalah do'a.
Selamat berjuang, kawan!!!!

NOTE: Template diatas belum di setting ke responsive. Karena ini menggunakan selekror kustom, maka value CSS / media query untuk setting responsive berbeda dari tutorial artikel lain. Dibawah ini adalah media query untuk setting responsive template. Tempatkan semua CSS dan media query didalam <b:skin>, jika bingung tempatkan tepat diatas ]]></b:skin>.

Contoh

@media screen and (min-width/max-width: value dalam pixel) {
#id-selektor / .class-selektor {value CSS}
}

Sekarang mari buat template diatas menjadi responsive..

Setting responsive

@media screen and (max-width:680px) {
.main-content, .sidebar {
float: none; /* Menghapus float kanan dan kiri agar main-konten dan sidebar menjadi blok baris */
width: 100%; /* Untuk lebar penuh */
display: block;
margin: 0;
padding: 5px;
}
}

Untuk setting post image ke responsive, cukup tambahkan CSS diatas ]]></b:skin>, tulis .post-body img {display: block; width: 100%; height: auto; margin: 0; padding: 0}.
Setelah template dipasang, klik tombol Format Template atau reload (tekan F5 pada keyboard) untuk me-refresh halaman browser.

CONTOH TEMPLATE

Untuk melihat contoh demo, silahkan klik tombol demo di atas atau lihat iframe dibawah ini;

Demo

Click tombol diatas untuk melihat demo.

_________________________
featured image source: amazonaws.com