Bagian Template Blogger Standar 3

Bagian Template Blogger Standar 3 ini merupakan lanjutan dari pembelajaran kita yang telah lalu yaitu bagian template blogger standar 2. Jika Anda belum membacanya, saya anjurkan kepada Anda untuk membacanya terlebih dahulu. Pada kesempatan kali ini kode css yang akan kita bahas yaitu bagian template blogger header, outer-wrapper, main-wrapper dan sidebar-wrapper agar memudahkan Anda untuk memahami bagian tersebut silahkan Anda melihat gambar layout template blogger disini.

Untuk mempersingkat waktu, langsung saja kita simak penjelasan mengenai bagian template blogger standar 3 dibawah ini :

/* Header

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

*/

Line diatas merupakan awal mula kode CSS untuk bagian header.

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

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

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Kode CSS ini berfungsi mengubah tampilan header bagian dalam.

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

fungsi dari kode diatas yaitu untuk mengubah tampilan judul blog dan deskripsi blog secara keseluruhan, Anda bisa saja mengganti margin, border dan color sesuai dengan keinginan dan kebutuhan blog Anda.

#header h1 {

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

Kode CSS ini memliki fungsi merubah tampilan judul dan deskripsi blog tingkat 1.

#header a {

color:$pagetitlecolor;

text-decoration:none;

}

Kode ini berfungsi untuk merubah 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;

overflow: hidden;

}

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;

overflow: hidden;

}

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  facebook like box 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 berfungsi untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar.

Agar tidak mempersulit Anda dalam pemahaman kode CSS bagian template blogger ini, saya sudahi dulu penjelasannya, dan akan saya lanjuti pada potingan berikutnya yaitu bagian template blogger standar 4. Happy Blogging...