Membuat Template Blogspot Bagian 2 (Body Template)

Membuat Template Blogspot Bagian 2 (Body Template)

Monday, July 23, 2012
Pada tutorial kali ini merupakan lanjutan dari cara membuat template SEO Friendly sendiri yang dituliskan Kang Onk sebelumnya. Pada bagian 1 tersebut hanyalah struktur dasar yang belum dilengkapi kode CSS dan HTML sama sekali alias blank. Jika anda belum paham apa yang akan dibahas pada tutorial kali ini sebaiknya anda mengunjungi dulu pada pembahasan bagian 1.

Setelah dipaparkan pada artikel sebelumnya tentang struktur dasar pada template blogger, dibawah ini merupakan kode CSS dari body blog yang akan dibuat nantinya. Ini merupakan penentuan dari body blog.

1. Pada template bagian 1 carilah kode berikut :

body{   /*code CSS body*/

}

2. Ganti dengan kode berikut :

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#135" value="#000000">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#666666">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9bd" value="#999999">
   <Variable name="pagetitlecolor" description="Title Color"
             type="color" default="#eee" value="#cccccc">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#79b" value="#666666">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#fc6" value="#999999">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#468" value="#4c4c4c">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#579" value="#666666">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#ccc" value="#999999">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#999999">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
*/

body {
      background:$bgcolor;
      margin:0;
      color:$textcolor;
      font: x-small $bodyfont;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: left;
      }
   
a:link {
      color:$linkcolor;
      text-decoration:none;
      }
   
a:visited {
      color:$visitedlinkcolor;
      text-decoration:none;
      }
   
a:hover {
      color:$titlecolor;
      text-decoration:underline;
    }

a img {
      border-width:0;
      }

3. Simpan Template

Continued on the next article ( bag. 3 Header Wrapper)