Sekilas Anatomi Template New Blogger

Jan 28, 2008

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 manteb.

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. pertama kode 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

expand-template_thumb[1]

maka akan terlihat serangkai kode-kode html yang lebih rumit lagi.

Jika kita tertarik ingin lebih memperdalam lagi tentang penjelasan setiap bagian kode-kode template new blogger , kita bisa klik di alamat ini :

http://www.wilkinsons.com/Bananna/BetaCodeLargeType.htm

 

Artikel Selanjutnya : Menganti Template atau Layout Blog

 

Technorati tags: ,

No comments:

Post a Comment