Yuk Kita Bedah Isi Template (part 2)

Apa kabar sobat sharelikers dimanapun berada??. Semoga dalam keadaan sehat walafiat.Hufth setelah 1 minggu disibukkan dengan tugas kuliah akhirnya saya bisa juga untuk ngeblog ria bareng sahabat.Tapi kayaknya gak seperti dulu.Hehehe,tapi saya janji deh akan ngeblog lagi secara rutin.Janji seorang blogger hahaha.

Oh ya kali ini saya mau ngelanjutin bedah template part kedua,hemmm membedah template part 1 nya udah saya bahas sebelumnya monggoo law belum dibaca dibaca dulu hehehe,biar tahu kejelasan dari isi postingan ini.

Pada episode kali ini (ceilahh episode wkwkwk), kita akan membahas yang namanya ada wraper-wrapper -an. bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper. Untuk mempersingkat postingan dan ngga usah panjang lebar dikali tinggi, langsung saja ke TEKAPE …hehehehehehe…


/* 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.Sobat bisa mengganti $bordercolor dengan kode warna sobat sendiri misal #ffffff (putih atau yang lainnya)

#header-inner {

background-position: center;

margin-left: auto;

margin-right: auto;

}

Kode CSS ini mengubah tampilan header bagian dalam.Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan.Sobat bisa mengganti center dengan posisi lain yang sobat kehendaki (misalnya right,left,justify)

#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 atau h1 (title blog biasanya).Sobat bisa mengganti $pagetitlefont dengan kode font sobat sendiri misal Helvetica,trebuchet,dll)

#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. Sobat bisa mengganti $pagetitlecolor dengan kode warna sobat sendiri misal #ffffff (putih atau yang lainnya)

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

}

Outer wrapper adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini.Sobat bisa mengganti $bodyfont dengan kode font sobat sendiri.sobat juga bisa menyesuaikan ukuran outer wrapper sobat sendiri dengan mengganti 660 px dengan ukuran bagian lainnya

#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.sobat juga bisa menyesuaikan ukuran main wrapper sobat sendiri dengan mengganti 410 px dengan ukuran bagian lainnya

#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.Sobat juga bisa berkreasi dengan sidebar sesuai kemampuan sobat mengolah template.dan juga bisa menyesuaikan ukuran sidebar wrapper sobat sendiri dengan mengganti 220 px sesuai ukuran template sobat

/* 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 di sini dulu ya Sob.Saya harap Sobat tidak bosan berkunjung ke blog saya. Yah meskipun saya jarang update hehehe.Terima kasih untuk Sobat yang sudah berkunjung, berkomentar dan membaca artikel di blog saya.Ditunggu lanjutannya yaaaa.Salam sharelikers ^^.

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854