Mengenal 5 bagian utama pada template blogger

18
A+ A-
Print Email
http://tutorialbloggermasnoer.blogspot.com/2012/02/mengenal-5-bagian-utama-pada-template_80.html
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.
Diposting oleh

Related

28-10-2011

Perlunya penggunaan translate bahasa pada blog

28-10-2011

Menggunakan translate bahasa  pada web maupun blog, ternyata merupakan bagian dari sarana online yang sangat penting. Mengingat pengguna internet, bukan hanya pada beberapa negara saja, melainka...

28-10-2011
08-9-2011

Cara buat form kontak free PHP

08-9-2011

Form kontak email terkadang sangat diperlukan, sebab dengan form ini tentu lebih bersifat prifasi. Terutama untuk pengunjung yang ingin menghubungi secara pribadi dengan pemilik  web atau blog ....

08-9-2011
208-9-2011

Cara buat slide menu drop down

208-9-2011

Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down. Dibuat menggunakan fitur CSS dan beberapa HTML, cara kerjanya ringan dan memiliki efek slide yang bervariatif. Pengaturan...

208-9-2011
Posting Lebih Baru Posting Lama Beranda item
Posting Lama Cara membagi gadget menjadi dua kolom
Posting Lebih Baru Green Compact News

Posting Komentar

  1. corolla784 Februari 2012 pukul 19.05

    wah trik yg bagus gan...
    follback ya gan

    BalasHapus
  2. Tu Sad5 Februari 2012 pukul 05.36

    wah ini yang saya cari,,,mo tanya boss,,biasanya dari lima bagian utama tsb yang mana bisa dirubah,,tambah,,ato dikurangi.,, maklum awam. THKS

    BalasHapus
  3. Noer19 Februari 2012 pukul 09.12

    Tu Sad..., semua bisa dirubah,,tambah,,ataupun dikurangi....,

    Tapi sekedar merubah warna, anda bisa olah pada bagian CSS nya saja...

    BalasHapus
  4. Putra Pgkasih9 April 2012 pukul 21.58

    Posting anda sangat membantu, thank's gan....

    BalasHapus
  5. anakmude-kedau18 April 2012 pukul 00.41

    thnks gan atas ilmunya,,sangat berguna sekali,,terutama bagi ane yang lagi coba-coba design template sendiri,,,salam pesahabatan,,semoga sukses selalu

    BalasHapus
  6. Noer Cholis18 April 2012 pukul 19.17

    sama-sama..

    BalasHapus
  7. Sepeda Bunda28 Mei 2012 pukul 09.19

    mantap gan di tunggu kunjungan baliknya gan http://zet-3.blogspot.com

    BalasHapus
  8. Hendarmin Saleh6 Juni 2012 pukul 20.26

    alhamdulillah, sangat bermanfaat. sedikit banyak dengan penjelasan di atas, bagi seorang yang awam seperti saya ini, saya mulai memahami, kalo boleh tanya, bagaimana caranya memodifikasi template blog supaya tampil dengan kotak-kotak untuk memperlihatkan barang dagangan. Mohon petunjuk selanjutnya, semoga Allah memberikan keberkahan ilmu padamu dan web ini semakin banyak dikunjungi oleh para sahabat lainnya....

    BalasHapus
  9. Hendarmin Saleh6 Juni 2012 pukul 20.32

    oh iya saya lupa, saya lagi ingin buat toko online dengan blog, sudah coba nyari, tetapi pengen buat template kreasi sendiri. atau paling minimal saya bisa ndapetin pelajaran untuk membuat kotak2 yang saya maksudkan tadi.

    BalasHapus
    Balasan
    1. Noer Cholis6 Juni 2012 pukul 22.52

      Iya..., maaf ya... soalnya saat ini belum ada banyak waktu untuk buat modulnya.

      Mudah-mudahan suatu saat saya akan bongkar, bagaimana secara detail template blogger bisa diedit dengan mudah....

      Hapus
  10. Jefry4 Oktober 2012 pukul 01.42

    Kalau diuraikan seperti ini saya jadi tahu struktural dasar template blogger seperti apa dan ternyata tak serumit yang dikira
    terima kasih atas share ilmunya

    BalasHapus
  11. pendaki gunung28 Oktober 2012 pukul 17.18

    oke, terimakasih

    BalasHapus
  12. Lostsector23 Desember 2012 pukul 03.26

    Thanks mas ats ilmunya...!!!

    BalasHapus
  13. Unknown25 Februari 2013 pukul 23.10

    ilmu yang berguna untuk saya yang baru menekuni dunia web

    BalasHapus
  14. sutrimo2 Juni 2013 pukul 14.00

    mlaku-mlaku men...

    BalasHapus

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

Tabs

Hot in weekRecentComments

Hot in week

Recent

366-6-2012

Slide down random post

366-6-2012

Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil seca...

366-6-2012
324-10-2012

Slice Random Recent Post

324-10-2012

Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan ya...

324-10-2012
914-7-2012

Buat Toko Online dengan blogger tidak kalah Profesional

914-7-2012

Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.Kendati ...

914-7-2012
323-15-2012

Cara mengaktifkan Thread Comments blogger

323-15-2012

Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang...

323-15-2012
353-12-2012

Cara Pasang Rating Bintang Rich Snippets

353-12-2012

Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.Sebelum menuju caranya, sebaik...

353-12-2012

Comments

10-14-2020

VektorSagara:

10-14-2020

Thanks Bray, work..2020.

10-14-2020
8-16-2019

Manly tours:

8-16-2019

artikel ini beserta kode kodenya untuk di passang di website blogger ya mas keren juga mas saya kepingin tapi saya tidak menggunakan website blogger yang saya gunakan website word press, kalau begitu...

8-16-2019
4-11-2015

peluang usaha:

4-11-2015

wah.. keren nih..tanks gan dah share

4-11-2015
3-1-2015

muhammad isra:

3-1-2015

kalau batas waktu 10, apa tidak terlalu cepat gan....salam sukses selalu...ditunggu kunjungan balik dan kritik sarannya......

3-1-2015
2-25-2015

agen wsc biolo:

2-25-2015

thanks very much

2-25-2015
item