Mengenal 5 bagian utama pada template blogger | OOM RIO
Home » CSS » HTML » JavaScript » template blogger » Tutorial blog » xml » Mengenal 5 bagian utama pada template blogger

Friday, February 3, 2012

Mengenal 5 bagian utama pada template blogger
Memiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak tutorial-tutorial yang ditulis.
Nah..., untuk mengatasi masalah diatas, sebaiknya kita mengetahui dan memahami terlebih dahulu 5 Bagian utama yang ada pada Template blogger.

OK, langsung saja...
Dibawah ini adalah 5 Bagian utama berikut contoh yang ada pada Template blogger :

1. XML declarations 
XMl atau eXtensible Markup Language adalah deklarasi standar header yang mendefinisikan versi XML. XML declarations terletak pada bagian paling atas yang bentuknya seperti berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

2. HEAD, TITLE dan META TAG
Elemen head merupakan wadah yang didalamnya terdapat elemen - elemen yang dapat menginstruksikan browser untuk menemukan script, style sheet atau CSS, title, informasi meta data yang di dalamnya termasuk meta tag description dan meta tag keywords, dll.
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta content='N4RVxgZiRiM2VUDOtv5yhKWJn628E3qhZqOcUNnfqus' name='google-site-verification'/>
<META content='c2ad550e993554a3' name='y_key'></META>
<!-- 0cUQtmDWaVCyDtpxS4TBa8B64Iw -->
<meta content='0cUQtmDWaVCyDtpxS4TBa8B64Iw' name='alexaVerifyID'/>
<title>Cara buat web | Cara buat blog | Tutorial Blogger</title>
<meta content='web,web gratis,website,website gratis,situs,situs gratis,situs website.situs web.blog,blogger,blogspot,buat blog,tutorial blog,tutorial blogger,tutorial,tutorial gratis,tutorial blogspot,tutorial blogger blogspot,tutorial blogger blog,tips blogger,widget blog,widget blogger,widget blogspot,templates blogger blogspot,theme blogger,html,css,javascript,jquery,peluang usaha,peluang,bisnis online,0cUQtmDWaVCyDtpxS4TBa8B64Iw' name='keywords'/>
<meta content='Belajar cara buat web disini menggunakan blogspot dari blogger, selain gratis juga lebih interaktif dengan pengunjung. Ada form chat box untuk berdiskusi tentang tips, trik, tutorial blog, blogspot, blogger, Css, Html, javascript dll. ' name='description'/>
<meta content='Noer Cholis' name='author'/>
<meta content='Noer Cholis' name='ownership'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='Indosesia' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<meta content='width=1100' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

3.Variable Definitions
Variable Definitions diperlukan sebagai klasifikasi atau untuk menentukan nilai, warna, dari beberapa atribut yang dianggap sama.
<b:skin><![CDATA[/*


/* Variable definitions
  ====================
  <Variable name="bgcolor" description="Page Background Color"
  type="color" default="#dd9" value="#CAF99B">
  <Variable name="textcolor" description="Text Color"
  type="color" default="#333" value="#333333">
  <Variable name="linkcolor" description="Link Color"
  type="color" default="#684" value="#0066CC">
  <Variable name="pagetitlecolor" description="Blog Title Color"
  type="color" default="#874" value="#000000">
  .............................

4. CSS (Cascading Style Sheet)
CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.
body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

...............

/* Footer
----------------------------------------------- */
#footer {
  width:950px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
  margin-left: 0px;
  margin-right: 0px;
}
]]></b:skin>
  </head>

5.Body
Tag yang mendefinisikan tubuh dokumen, yaitu seluruh unsur berisi semua isi dari sebuah dokumen HTML, seperti teks, hyperlink, gambar, tabel, daftar, dll.
<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='4' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Cara Buat Web Gratis' type='Header'/>
<b:widget id='HTML17' locked='false' title='' type='HTML'/>
<b:widget id='HTML19' locked='false' title='' type='HTML'/>
</b:section>
  </div>

  <div id='content-wrapper'>

  <div class='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML6' locked='false' title='Recent Post' type='HTML'/>
<b:widget id='LinkList2' locked='false' title='Arsip' type='LinkList'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

  <div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML14' locked='false' title='' type='HTML'/>
<b:widget id='HTML20' locked='false' title='Search ' type='HTML'/>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
  </div>

  <div class='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='HTML10' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='HTML15' locked='false' title='' type='HTML'/>
</b:section>
  </div>

  <!-- spacer for skins that want sidebar and main to be the same height-->
  <div class='clear'>&#160;</div>

  </div> <!-- end content-wrapper -->

  <div id='footer-wrapper'>
  <b:section class='footer' id='footer'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML12' locked='false' title='Feed Directories' type='HTML'/>
</b:section>
  </div>

  </div></div> <!-- end outer-wrapper -->

<script type='text/javascript'>
var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);
document.write(unescape(&quot;%3Cscript src=&#39;&quot; + gaJsHost + &quot;google-analytics.com/ga.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker(&quot;UA-8271964-1&quot;);
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

Jadi dari keseluruhan penjelasan dan contoh isi dari setiap bagian, dapat disimpulkan sebagai berikut :
<html>
  XML (eXtensible Markup Language)

<head>
  Titel dan meta data
  Variable Definitions
  Script
  CSS (Cascading Style Sheet)
</head>

<body>
  Seluruh dokumen yang ditampilkan.
</body>

</html>

Dengan mengetahui 5 bagian utama yang berada pada template, maka pada saat kita akan mengedit template, tentu kita tidak akan kesulitan lagi. Sebab kita sudah tahu bagian - bagian yang mana yang akan kita edit.

Semoga bermanfaat....

Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Judul: Mengenal 5 bagian utama pada template blogger; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:


Posted by at 9:37 AM
Labels: , , , , ,

0 comments:

Post a Comment

Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan).

Subscribe to: Post Comments (Atom)