BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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. 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 rinci 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: ,
Page views this post: reader

6 komentar:

Nama : Julio Reinaldo Latidjan said...

Keren juga niyh blog
bantu banget
www.joelioujesus.blogspot.com

Baka Kelana said...

Makasih Bos atas penjelasannya

sekarang jadi lebih jelas tentang struktur blog

scout_moslem said...

Makasih yah

Calvin Tedja said...

Makasih..sgt membantu..

www.deho-id.blogspot.com said...

Wah, mntap flend..?!
nue..yg gwa cari...tq abiz decc!!!

dimas anggara said...

keren lah ..... kalo bisa sih jelasin juga langkah awal jadi seorang hacker heheeee just kidink..!!

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial