Mengatur CSS Template Blog

Keberadaan bagian CSS sangat penting untuk mengatur tampilan dan layout sebuah template. Pada bagian ini akan menjelaskan struktur bagian CSS template minimal. Dengan memahami bagian CSS ini saya harap anda bisa mengembangkannya untuk membuat template blogger sendiri. CSS adalah singkatan dari Cascading Style Sheet. Dengan CSS setiap elemen didalam template diatur layoutnya. Kita bisa mengatur lebar, tinggi, font, warna font, letaknya, dan background.

Penulisan CSS mempunyai standar, yaitu harus terdiri dari selector, properties, dan value. * Selector untuk menunjukkan elemen mana yang kita atur, misalnya header, main, sidebar, dll. * Properties adalah bagian apa yang ingin kita atur dari sebuah selector, misalnya lebar, background, margin dll. * Sedangkan value adalah nilai dari setiap properties, misalnya properties background mempunyai value black, white, dll. Untuk memudahkan pemahaman bloggertrick juga akan membagi bagian CSS menjadi beberapa subbagian.

Subbagian 1: Variable definition
Subbagian ini berfungsi untuk mendeklarasikan atau mengenalkan variable font dan warna yang akan digunakan didalam tab fonts and colors. Jika anda ingin mengatur font dan warna melalui cara ini anda tinggal klik tab fonts and colors dibagian atas halaman layout. Cara lain mengatur font dan warna adalah dengan mengaturnya di dalam kode CSS setiap elemen.

Subbagian 2: Global body

{ background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; }

Bagian ini mengatur tampilan secara global (semua yang tampak di layar monitor anda) misalnya background, font, warna font, warna link, link hover, dll. Pengaturan global ini tidak mengatur elemen template secara detail. Kalau kita ingin mengatur setiap elemen maka kita harus mengaturnya dengan menuliskannya tersendiri. Misalnya jika kita ingin mengatur background header maka kita harus menuliskan kode CSS untuk background header secara terpisah. Jika kita mengatur properties sebuah elemen secara tersendiri maka pengaturan yang ada di bagian global ini tidak akan digunakan.

Subbagian 3: Header

/* Header ———————————————– */
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Didalam subbagian ini kita bisa mengatur segala sesuatu mengenai header template. Biasanya yang diletakkan didalam header adalah judul dan deskripsi blog. Kita juga bisa menambahkan objek tambahan didalam header, misalnya menu horizontal. Sayangnya kita tidak bisa menambahkan widget/objek didalam header dengan menggunakan tab add page element.

Subbagian 4: outer-wrapper

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Outer-wrapper adalah elemen terluar yang membungkus semua elemen didalam sebuah template. Elemen ini kadang tidak tampak didalam tampilan blog. Pentingnya elemen ini adalah karena elemen ini menentukan ukuran lebar dari sebuah template. Jika kita ingin mengatur ukuran lebar template maka ukuran elemen inilah yang harus kita atur.

Subbagian 5: main-wrapper

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Main-wrapper adalah elemen yang membungkus area dimana kita meletakkan postingan kita. Disubbagian ini kita bisa mengatur tampilannya (ukuran, layout, dll).

Subbagian 6: sidebar-wrapper

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sidebar biasanya terletak disisi kiri atau kanan tampilan template. Melalui subbagian ini kita bisa mengatur tampilan sidebar.

Subbagian 7: heading

/* Headings ———————————————– */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Disubbagian ini anda bisa mengatur tampilan teks yang menggunakan ukuran h2, biasanya terdapat pada tanggal postingan dan judul sidebar. Jika anda ingin memberi background pada judul sidebar, anda bisa mengaturnya di subbagian ini.

Subbagian 8: post area

/* Posts ———————————————– */
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Ini adalah tempat dimana anda bisa mengatur tampilan postingan anda.

subbagian 9: Komentar

/* Comments ———————————————– */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Subbagian ini mengatur tampilan area untuk komentar

Subbagian 10: sidebar content

/* Sidebar Content ———————————————– */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}

Subbagian ini mengatur tampilan isi sidebar terutama widget didalamnya.

Subbagian 11:profil

/* Profile ———————————————– */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform:
uppercase;
letter-spacing: .1em;
}

Subbagian ini mengatur properties dari elemen-elemen tambahan di dalam blog anda yang tidak diatur oleh subbagian diatas. Elemen-elemen tersebut seperti area profil atau “about me”.

Subbagian 12: Footer

/* Footer ———————————————– */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Subbagian ini mengatur tampilan footer dari template blog anda. Kira-kira seperti itu penjelasan untuk bagian CSS dari template minima. Untuk membuat template sendiri anda bisa mengatur subbagian-subbagian didalam bagian CSS tersebut sesuai dengan selera dan keinginan anda. Bloggertrick akan memberi contoh bagaimana mengatur bagian CSS di bagian memodifikasi template minima.