Rabu, 12 September 2012

Tutorial Blog Bagian 2



Jika kita kesulitan dalam mengedit template, mungkin karena kita belum mengenal bagian template Blogger. Berikut ini tutorial untuk mengenal bagian-bagian template Blogger

Pada Postingan saya sebelumnya tentang Kode Penyusun sebuah template Bagian I telah dijelaskan tentang struktur dari sebuah template Blog. Nah kali ini saya ingin menjelaskan bagian-bagian dari sebuah template. Sebenarnya sudah banyak sahabat kita mengupas masalah ini, tapi sebagai bahan referensi boleh doong saya ulas lagi, tentunya dengan versi saya.

Pada kesempatan ini saya akan mengupas bagian-bagian dari sebuah template Blog yang sangat simple agar mudah untuk dipahami. Disini saya akan menjelaskan lebih lanjut pengembangan struktur dari sebuah Blog.

Oke, tanpa berpanjang-panjang kita mulai saja. Sebelum itu Simpan dulu template anda untuk menjaga segala kemungkinan yang tidak diinginkan.


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

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.


<head>
<b:include data="blog" name="all-head-content">
<title><data:blog.pageTitle/></title>
<b:skin>&lt;![CDATA[/* </b:skin></b:include>

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


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

Kode ini untuk mengubah tampilan link pada template blog Anda.


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

Ini untuk mengubah tampilan link yang pernah dikunjungi.


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

Mengubah tampilan link jika pointer mouse berada di atas link.


a img {
border-width:0;
}

Mengubah tampilan link bergambar


# post
.post{margin-bottom:15px;}
.post-title{color:#333333;margin:0 0 10px 0;padding:0;font-family:'Oswald',sans-serif;font-size:20px;line-height:20px;font-weight:normal;}

Semua pengaturan posting disini tempatnya. Jenis huruf dan ukuran serta pengaturan spasi dan warna dapat dilakukan sesuai kebutuhan.


.sidebar{margin:10px 0;font-family:Arial, Helvetica, Sans-serif;font-size:15px;color:#262626;}
.sidebar{font-family:Arial, Helvetica, Sans-serif;font-size:15px;color:#222;margin: 10px;}

Semua pengaturan sidebar dapat dilakukan disini sama halnya seperti pada kode pos diatas


.footer{margin-bottom:15px}
#copyrights{color:#FFF;background:#090909;text-align:center;padding:20px 0}

Kode ini digunakan untuk mengatur bagian bawah sebuah blog (footer)

Sebenarnya masih banyak kode-kode lain sebagai penunjang kode utama diatas, tapi kali ini sampai disini dulu ya, lain waktu disambung lagi. Bye.

Related Post:

Ditulis Oleh : Unknown ~ Deskripsi Blog Anda

Artikel Tutorial Blog Bagian 2 ini diposting oleh Unknown pada hari Rabu, 12 September 2012. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

Tinggalkan Alamat Email Anda

Tinggalkan alamat email anda. dan Kami akan Menghubungi Blog! Anda

3 komentar: