Mengenal Bagian template blogger Part1

Browse » Home » Blog tip N trik » Mengenal Bagian template blogger Part1

Oke pada kesempatan ini saya akan mencoba share Mengenal bagian template blogger, Sebelum kita mengedit template blogger alangkah baiknya kita Mengenal bagian template blogger itu sendiri ya ngak?

Oke kalau begitu langsung saja berikut ini beberapa bagian template blogspot yang saya contohkan menggunakan template simple bawaan blogger:

1. Deklarasi file XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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'>

Ini merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table.

2. Head

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk menaruh berbagai meta tag.

3. Variable definitions

<Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#66bbdd"/>

<Group description="Page Text" selector="body">
<Variable name="body.font" description="Font" type="font"
default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
</Group>

Kode diatas hanya contoh, saya hanya mengkopi sebagian saja karena bila dikopi semua akibatnya akan memenuhi postingan ini. Biasanya disini juga bisa digunakan untuk keperluan edit ukuran text, warna text, mulai dari warna tek header, judul postingan tek postingan tek link dan lainnya yang ikut dimasukkandalam kode tersebut oleh sipembuat templatenya. Dan memungkinkan untuk keperluan edit yang lainnya.

4. Body

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

5. Link

a:link {
text-decoration:none;
color: $(link.color);
}

Untuk merubah warna text link

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

Untuk merubah warna text link yang telah dikunjungi

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

Merubah warna text link bila disorot menggunakan mouse

a img {
border-width:0;
}

Untuk mengubah tampilan link bila bergambar

6. Header

Berasal dari kata head yang artinya kepala, Adalah Posisi konten yang bagian atas biasanya berfungsi untuk menampilkan Judul blog atau description. Dalam blogger header juga memungkinkan untuk menampilkan Gambar juga.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

Kode ini adalah untuk menampilkan bagian paling akhir dari header, lho belum apa-apa udah outer, hehehe kebetulan di template simple yang saya jadikan contoh kodenya kebolak eh kebalik gitu.... hihihi

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

Kode diatas adalah berfungsi untuk mengubah tampilan judul dan description tingkat 1

.Header h1 a {
color: $(header.text.color);
}

Untuk mengubah tampilan link pada header

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya tingkat 2 atau H2

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

Kode CSS ini mengubah tampilan header bagian dalam

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);

Kode CSS ini mengubah tampilan description bagian dalam

Oke kalau begitu udahan dulu yaw udah capek nulis nih. Bagi yang berminat membaca lebih lanjut bisa di baca Mengenal Bagian template blogger Part2... we he he

Posted by Fayes Cool » Rating 4.5 » at Friday, July 29, 2011

Postingan Terkait

NOTE : Bila anda suka artikel Mengenal Bagian template blogger Part1 diatas, berilah komentar. Saya tidak menggunakan kode captcha ataupun moderasi komentar yang bikin boring, jadi diharapkan tidak ada SPAM, dan harap tidak menggunakan kata-kata yang membuat orang lain jengkel saat membacanya. Disarankan pilih Name/URL...

FAYES COOL BLOG

Quick Tips

Category

Komentar Baru