Body
seluruh bagian yang tampil pada Browser termasuk Navbar atau Navigasi bar dimana sobat dapat melihat icon dari Blogger, navbar sendiri berfungsi untuk memudahkan kita melakukan sign atau sigout dari halaman blog.Outer Wrapper
element yang membungkus element Header wrapper, Main wrapper, Sidebar wrapper, dan footer wrapper.Header Wrapper
element teratas yang terdapat di dalam element Outer wrapper. Di dalam element header inilah kita meletakkan judul serta Deskripsi/keterangan dari blog yang kita kelola.Main Wrapper
Terletak persis di bawah header, pada gambar diatas Main wrapper berada di sebelah kiri sidebar. Nah, di main wrapper inilah nantinya semua postingan yang kita buat akan ditampilkan serta komentar dari pengunjung blog kita nanti.Sidebar Wrapper
adalah element yang biasanya di gunakan untuk memuat Widget seperti, Profil, Arsip, Iklan, dan lain lain. Letak nya ada di sebelah kanan element Main wrapper yang dapat sobat lihat pada gambar diatas.Footer Wrapper
adalah element yang ada dibawah main dan sidebar, fungsinya hampir sama dengan sidebar, atau dapat di gunakan sesuai keinginan si empunya blog.
Semua elemen diatas sebenarnya merupakan rangkaian dari kode CSS dan HTML sehingga dapat membentuk seperti kolom-kolom seperti digambar. untuk yang sudah familiar dengan kode dari keduanya yaitu css dan html pasti bukanlah hal yang sulit untuk melakukan edit pada template. Berhubung saya hanya tahu sedikit mungkin gak ada salahnya saya mencantumkan kode CSS dari element yang saya sebutkan, Untuk melihat kode css dari element diatas silahkan sobat login dulu ke Blogger.com, setelah berada di DASBOR pilih Rancangan
, lalu edit HTML
, di bawah ini adalah kode css standar dari Template Minima Orchre :
Body
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Outer Wrapper
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$endSide;
font: $bodyfont;
}
Header Wrapper
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid
$bordercolor;
}
Main Wrapper
#main-wrapper {
width: 410px;
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 Wrapper
#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 */
}
Footer Wrapper
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Demikian sedikit kode dari element atau kolom dari template minima, harapan saya mudah mudahan dapat bermanfaat untuk sobat pemula yang ingin membuat blog di Blogspot.
0 komentar (Mengenal struktur dasar Template Minima)
Back to form