Mengenal 5 bagian utama pada template blogger ~ Tutorial Blogger

Jumat, 03 Februari 2012

Mengenal 5 bagian utama pada template blogger

Jumat, 03 Februari 2012 | 09.37

Noercholis

19 comments

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>

<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'>


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


<div class='clear'> </div>

</div> 

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

<script type='text/javascript'>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type='text/javascript'>
try {
var pageTracker = _gat._getTracker("UA-8271964-1");
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.

Ping your blog, website, or RSS feed for Free

Informasi Artikel :
	Judul : "Mengenal 5 bagian utama pada template blogger" Diulas Oleh : Noercholis \| Jumat, 03 Februari 2012 \| 09.37 Description : Memiliki Blog sangat menyenangkan, tapi terkadang kita masih merasa kesulitan pada saat kita ingin mengedit template. Walaupun sudah banyak ... Label : Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 1900+ Dari 19 000+ Pengunjung.
Sampai saat ini baru ada : 19 komentar >>> Silahkan tambahkan komentar Anda...

19 komentar:

Kang Ajay4 Februari 2012 pukul 19.05
wah trik yg bagus gan...
follback ya gan
BalasHapus
Balasan
Unknown5 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
Balasan
Noercholis19 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
Balasan
henrikus21 Maret 2012 pukul 11.05
makasih gan info nya. Langsung ane pake buat ngedit blog ane ya gan...
BalasHapus
Balasan
Putra Pgkasih9 April 2012 pukul 21.58
Posting anda sangat membantu, thank's gan....
BalasHapus
Balasan
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
Balasan
Noercholis29 Mei 2012 pukul 06.41
terimakasih...
BalasHapus
Balasan
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
Balasan
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
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
Balasan
Unknown28 Oktober 2012 pukul 17.18
oke, terimakasih
BalasHapus
Balasan
Lostsector23 Desember 2012 pukul 03.26
Thanks mas ats ilmunya...!!!
BalasHapus
Balasan
Unknown25 Februari 2013 pukul 23.10
ilmu yang berguna untuk saya yang baru menekuni dunia web
BalasHapus
Balasan
sutrimo2 Juni 2013 pukul 14.00
mlaku-mlaku men...
BalasHapus
Balasan
Unknown23 Juli 2013 pukul 23.23
Good to see your horde work i like to i like to read this article rubber bracelets cheap thanks for sharing
BalasHapus
Balasan
Unknown5 Agustus 2013 pukul 01.13
Good to see your horde work i like to i like to read this article thanks for sharing rubber bracelets cheap
BalasHapus
Balasan

Tambahkan komentar

POST POPULER

TESTIMONI

Tutorial Blogger

Jumat, 03 Februari 2012