Kenali Bagian-bagian Template Blog Kita (bag.2)

Setelah kita kenali bagian-bagian blog kita (bag.1) maka kali ini kita akan mencoba mengenali bagian-bagian selanjutnya dari template blog kita. Pada bagian ini kita akan mengenal mengenai bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper.

/* Header

-----------------------------------------------

*/

Header berawal di sini

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Kode CSS ini mengubah tampilan header bagian dalam

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Mengubah tampilan judul dan deskripsi blog tingkat 1

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

Mengubah tampilan link yang terdapat pada header

#header a:hover {

color:$pagetitlecolor;

}

Mengubah tampilan link pada header jika pointer mouse berada di atas link.

#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;

}

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

#header img {

margin-$startSide: auto;

margin-$endSide: auto;

}

Mengubah tampilan gambar header

/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini

#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 sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog

#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 ini berfungsi sebagai tempat penyimpanan gadget/widget.
Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper

/* Headings

----------------------------------------------- */

h2 {

margin:1.5em 0 .75em;

font:$headerfont;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.2em;

color:$sidebarcolor;

}

Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll

Sampai sini dulu ya perkenalan kita terhadap bagian-bagian template blog. Untuk selanjutya silahkan disimak posting tentang Kenali Bagian-bagian Template Blog Kita (bag.3).