Apa itu outer wrapper..? Penerangan ini berdasarkan classic template.. dalam penerangan ni aku sertakan gambar untuk memudahkan pemahaman...
Outer wrapper ialah pembalut untuk main wrapper dan sidebar wrapper..tanpa outter wrapper blog anda akan jadi lebar selebarnya mengikut lebar screen pengunjung..jika pengunjung menggunakan wide screen lebar sangat la blog anda..
Berikut adalah gambar outer wrapper
pada gambar di atas dalam petak merah tu adalah outer wrapper..ini adalah pandangan umum.. apa yang terdapat pada outer wrapper ialah main wrapper dan sidebar wrapper...
Gambar di atas adalah pada pandangan admin blog..dalam petak merah tu la outer wrapper.....
pada gambar di atas yang dalam petak merah tu adalh main wrapper...
gambar di atas ni adalah sidebar wrapper...
Berikut adalah contoh CSS untuk outer wrapper
#outer-wrapper {
width: 970px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Simple kan CSS outer wrapper..efek tu anda blh tambah ikut kemahuan anda..sebagai contoh..anda blh tambah warna background pada outer wrapper...
#outer-wrapper {
background:#ff3366;
width: 970px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
apabila anda masukkan code seperti di atas..warna background outer wrapper dan warna background blog suda berbeza...
Berikut adalah contoh code HTML untuk outer wrapper..contoh ini adalah sebelum anda tick pada expand widget template..sangat berbeza jika anda klik pada expand widget template...
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='eh kr3w' type='HTML'/>
</b:section>
</div>
</div>
pada code di atas anda boleh lihat code html untuk main wrapper dan sidebar wrapper..
Apa macam blh ikut...ada paham?...lalalala...senangkan...
jika anda ingin memasukkan header dan footer pada outer wrapper..,,tiada masalah..yang penting anda faham pembuka dan penutup code..
Berikut adalah contoh susunan code CSS dan HTML untuk outer wrapper pada template..
<html>
<head>
<b:skin>
#header
#outer-wrapper {
background:#ff3366;
width: 970px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper#sidebar-wrapper
#footer
]]></s:kin>
</head>
<body>
<div id='header'>
</div>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML5' locked='false' title='eh kr3w' type='HTML'/>
</b:section>
</div>
</div>
<div id='footer'>
</div>
</body>
</html>
Tiada ulasan:
Catat Ulasan