Sekilas Penjelasan Anatomi Template New Blogger
Tutorial Blogger Bab 1
bag 11
Di bandinghkan dengan
Blogger Clasic ( old Blogger ). New blogger yang kita pelajari ini, lebih mudah
dan gampang. Tampa perlu mempelajari kode-kode html sekalipun.
Namun ngga ada
salahnya kita sedikit mempelajari anatomi kode-kode atau serangkain script yang
ada di new blogger ini. terutama gunannya untuk mengkostumisasi biar New
Blogger yang kita pake keliatan lebih dinamis dan sedikit cangih.
Untuk itu, buka Template klik
-> tab Edit Html .
setelah terbuka di
bawah tulisan Edit Template. keliatan serangkain kode-kode
Html.
Secara garis besar
yang perlu kita ketahui hanya dua bagian script yang perlu kita ketahui. pertamakode
atau script Css dan kedua kode atau script Html.
Cara mengenali atau
mengetahui ke dua bagian di atas cukup mudah.
Pertama : Kode atau Script Css. di
awali dengan selector body dan di akhiri dengan script ]]></b:skin> (
atau kita anggap saja itu sebagai tag penutup css ).
Yang setiap bagiannya
di beri kata keterangan atau komentar seperti kode ini.
/* Header
----------------------------------------------- */
artinya ini bagian
kode css untuk header ( judul blog ).
Kode Css Bermula:
body { margin:0px;
padding:0px; background:$bgcolor; color:$textcolor; font-size: small; }
#outer-wrapper { font:$bodyfont; } a { color:$linkcolor; }
... Sampai dengan ...
/** Tweaks for layout
editor preview */ body#layout #outer-wrapper { margin-top: 0; } body#layout
#main, body#layout #sidebar { margin-top: 10px; padding-top: 0; }
Biasanya untuk meletakan
javascript tambahan dari para blogger hack di simpan diantara kode di bawa ini.
]]></b:skin>
Javascript atau kode
hack </head>
Kedua : code html. yang di awali
dengan tag <body> dan tag penutupnya </body></html>. baris
paling akhir.
<body> <div
id='outer-wrapper'><div id='wrap2'>
<!-- skip links for
text browsers --> <span id='skiplinks' style='display:none;'> <a
href='#main'>skip to main </a> | <a href='#sidebar'>skip to
sidebar</a> </span>
<div
id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'
showaddelement='no'> <b:widget id='Header1' locked='true' title='Milek
Mile (Header)' type='Header'/> </b:section> </div>
.... sampai dengan
....
<div
id='footer-wrapper'> <b:section class='footer' id='footer'/>
</div>
</div></div>
<!-- end outer-wrapper --> </body> </html>
kode-kode html di
atas, saya tulis secara garis besar . dan Jika kita tandai kotak kecil di
samping tulisan Expand Template Widget
maka akan terlihat
serangkai kode-kode html yang lebih rinci lagi.
Jika kita tertarik
ingin lebih memperdalam lagi tentang penjelasan setiap bagian kode-kode
template new blogger , kita bisa klik di alamat ini :
0 comments:
Post a Comment