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:
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>Bagian head template blog yang berisi judul blog dan awal dari kode CSS. Biasanya, di sini digunakan untuk menaruh berbagai meta tag.
<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[/*
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 {Untuk merubah warna text link
text-decoration:none;
color: $(link.color);
}
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.
Kode diatas adalah berfungsi untuk mengubah tampilan judul dan description tingkat 1
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
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 {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
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.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);
}
.Header h1 a {Untuk mengubah tampilan link pada header
color: $(header.text.color);
}
.Header .description {Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya tingkat 2 atau H2
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {Kode CSS ini mengubah tampilan header bagian dalam
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {Kode CSS ini mengubah tampilan description bagian dalam
padding: 0 $(header.padding);
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
4.5
»
Postingan Terkait
» Rating
1 comments :
@Ahma Indraki: malamat rss biasanya seperti ini
Atom 1.0: http://blogname.blogspot.com/feeds/posts/default
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss
thank udah mampir....
Post a Comment