Selasa, 31 Desember 2013

Memisahkan Header Blog Simple

Hal pertama yang membuat kebingungan dalam mengedit template menurut saya adalah saat memisahkan antara header dengan outerwraper,
maklumlah seorang yang baru belajar!
Kemudahan yang didapat jika memisahkan header dan outer ialah tampilan lebih enak dipandang dang untuk pembuatan menu header juga gak ngatung atau tidak sampai full ke sisi.
Lanjut ke prosesnya, cari kode berikut !!


* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}#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 */
}#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 */
}
kemudian ganti kode diatas dengan kode dibawah ini

/* Content
----------------------------------------------- */
.clear {
clear: both;
}
#content-wrapper {
width: 850px;
margin: 0px auto;
text-align: $startSide;
background:#ffffff;
border: 2px solid #000000;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
}
#main-wrapper {
margin-$startSide: 20px;
width: 510px;
float: $startSide;
text-align: justify;
display: inline; /* fix for doubling margin in IE */
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-wrapper {
margin-$endSide: 20px;
width: 240px;
float: $endSide;
display: inline; /* fix for doubling margin in IE */
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 */
}

Demikian cara singkatnya jika ada yang kurang paham silakan komentar.

terimakasih ^_^

0 komentar:

Posting Komentar

¶ Peraturan dalam berkomentar ¶
☛ UpsS,. Budayakan berkomentar sesudah membaca artikel ini sob.
☛ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT)
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya

☭ Copyright © 2014 - 2015 by Azi Kosasih ✓.