Tutorial Membuat Template Blog

Newest Post

Tutorial Membuat Template Blog

// Posted by :Sinta Swift // On :Sabtu, 16 Februari 2013

Cara Bikin Template Blog Sendiri - Template blog buatan sendiri adalah kebanggan bagi setiap blogger, Kali ini saya akan kasih tips membuat template blog sendiri yang saya pelajari selama mengutak - atiktemplate. Template yang akan kita gunakan adalah template minima.

Mengapa saya menggunakan template minima?? seperti kita ketahui bersama bahwa template minima adalah template tata letak yang paling banyak di gunakan para blogger dalam ber eksperimen. Berbeda dengan templae tata letak lain, seperti rounder, template minima mempunyai kode css yang tidak rumit dan tentu saja mudah di edit. Karna itu, tanpa basa - basi silahkan sobat ikuti tutorial membuat template blog sendiri berikut.

Pertama - tama kita membahas dulu bagian paling mendasar dari pembuatan template blog, yaitu pengenalan akan bagian - bagian template blogger.

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

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>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <b:skin><![CDATA[/*

Bagian kepala atau head template blog yang berisi judul blog dan awal dari kode CSS. Di sinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag 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;
}

Merubah tampilan link ketika pointer di atas link

a img {
border-width:0;
}

Mengubah tampilan link bergambar

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca serach engine.

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

mengubah tampilan header bagian dalam.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan