Iklan

Iklan
Advertorial
News Update :

Bagian Template Blogger Standar 2

Sabtu, 14 April 2012

Bagian Template Blogger Standar 2 ini merupakan lanjutan dari postingan sebelumnya yang membahas bagian template blogger standar 1. Namun jika sebelumnya saya menjelaskan layout template blogger, pada kesempatan kali ini saya akan menjelaskan kode css didalamnya. Sebagaimana telah dijelaskan, bahwa didalam bagian template blogger itu terdiri dari komponen kode-kode, diantara kode-kode tersebut adalah berupa css, html dan javascript yang memiliki tautan atau kaitan antara satu dengan yang lainnya.

Pada kesempatan kali ini, saya akan mencoba menjelaskan sedikit mengenai kode-kode dalam bagian template blogger tersebut khususnya kode css-nya. Umumnya kode css dalam template blogger itu terdiri dari spesifikasi kode yang berbentuk jenis huruf, ukuran (size), warna yang digunakan, dan sebagainya. Nah, jika kode-kode ini ditautkan dengan kode yang lainnya maka akan  membentuk realitasnya.

Dalam upaya pengeditan template, hal yang paling dasar yang harus kita kenali adalah kode-kode ini, serta struktur dan tata letaknya. Standar atau pada umumnya, kode css ini berada di atas template blogger yang ditandai setelah kode <b:skin><![CDATA[/ hingga berakhir pada kode ]]></b:skin>. Sedangkan kode javascript pada umumnya ditandai oleh awalan kode <scrip ...> dan kode HTML biasanya ditandai oleh fungi-fungsi yang berawalan < b:if >, <div> dan sebagainya. Untuk para master web desainer, jika kebetulan membaca postingan ini, saya juga minta bantuan apabila terjadi kesalahan dalam penjelasan, karena saya bukanlah seorang webdesain, melainkan seorang accounting, dan juga masih dalam pembelajaran mengenai kode-kode ini.

Sekarang mungkin sudah ada pencerahan atau sedikit gambaran kepada kita tentang kode-kode yang telah saya jelaskan diatas. Agar tidak memperluas atau lari dari tema bagian template blogger ini khususnya pada kode CSS nya dan agar lebih paham, yuk mari kita simak struktur kode css dalam template blogger dan penjelasannya.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Kode diatas 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.


<head>
<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 meta tag keyword dan meta tag yang lainnya.


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Body merupakan bagian paling dasar dari bagian-bagian template lainya (lihat gambar bagian template blogger standar 1), body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.


a:link {
color:$linkcolor;
text-decoration:none;
}

Kode ini berfungsi untuk merubah tampilan link yang digunakan pada template blog Anda, dengan realitas warna dan text nya.


a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

Fungsi kode ini untuk mengubah tampilan link saat dikunjungi.


a:hover {
color:$titlecolor;
text-decoration:underline;
}

Fungsi dari kode ini adalah untuk merubah tampilan link jika pointer mouse berada di atas link. Untuk lebih jelasnya silahkan Anda coba untuk mengarahkan pointer atau coursor moust Anda disalah satu link pada blog Super-Bee ini yang berada di footer blog.


a img {
border-width:0;
}

Fungsi dari kode ini yaitu untuk merubah tampilan link bergambar

Agar Anda lebih mudah memahami isi dari kode bagian template blogger ini, penjelasannya saya sudahi sampai disini dulu dan akan berlanjut pada postingan berikutnya yaitu bagian template blogger standar 3. Hal ini saya lakukan agar Anda lebih mudah mengerti.
Share this Article on :

0 komentar:

Posting Komentar

Terimakasih telah berkomentar di website kami

 

© Copyright Berita Lamongan Terkini 2010 -2011 | Design by Kabarlamongan.com | Published by Nirwana Digital Print | Powered by Blogger.com.