Belajar Desain Layout Template Part.2

Aura Share Pembahasan mengenai cara membuat desain sendiri template blogspot sebenarnya sudah ada dalam draft saya sejak lama dan sudah dikemas dalam e-book yang nantinya akan saya bagikan secara gratis namun dalam pengerjaannya belum sempurna mengingat kesibukan saya sebagai seorang medical representative yang cukup menyita waktu, jadi kali ini saya akan melanjutkan bagaimana cara membuat template blogspot sederhana bagian 2, kalau sobat ingin membaca bagian sebelumnya silahkan baca kembali Belajar desain layout template bagian 1. Kalau sudah baca kita lanjutkan kembali di mana pada pembahasan sebelumnya membahas layout stuktur layout template dan telah saya gambarkan secara outlinenya.

Pada bagian kedua cara membuat template blogspot saya akan ajak sobat memahami struktur kode template yang tentunya akan berisi kode-kode yang menjlimet, yang penting buat sobat blogger adalah pemahaman kode tersebut sudah cukup untuk dasar membuat template sendiri.

Semua template blogspot umumnya dibagi menurut pembagian ini, dan menurut pengamatan saya bagian tersebut dibagi menjadi 3 section.

Bagian-bagian tersebut :

Section 1.

Merupakan keterangan kode pengenalan template dan berisi informasi-informasi didalamnya, biasanya peletakan metatag di taruh di bagian ini.

Umumnya di bagian section 1 :

<?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">
<html 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'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Section 2

Bagian ini menyimpan kode CSS untuk membentuk keindahan blog, bagian ini bisa kita modifikasi dan kita tambahkan. Pada bagian ini perlu pemahaman tentang CSS, ya ga perlu jago asal tahu perbedaan margin dan padding aja juga cukup :p , tetapi sobat secara dasar harus paham dengan kode CSS yang sederhana saja.

Umumnya section 2 bentuk kodenya seperti ini :

<b:skin><![CDATA[/*
body {...}
#header-wrapper {...}
#header-inner {...}
#header {....}
#outer-wrapper {....}
#main-wrapper {....}
#sidebar-wrapper {...}
h2 {...}
h2.date-header {
margin:1.5em 0 .5em;
}
.post {..... }
#comments h4 {....}
.sidebar {....}
#footer {.....}
]]></b:skin>

Perhatikan perbedaannya dengan section 1 dan section 2

Section 3

Pada bagian ini biasanya untuk memanggil data-data pada blog kita, seperti isi postingan, komentar, serta juga menentukan yang mana akan mau di tampilkan lebih dahulu seperti urutan yang standar dulu biasanya dimulai dari header, main, sidebar, dan footer kemudian bagian ini di percantik oleh section 2 (kontrol CSS) sehingga menampilkan tampilan yang unik atau serasi pada browser.

Umumnya kode section 3 seperti ini :

</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Just Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

<div class='clear'> </div>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> 
</body>
</html>

Pahami setiap section, umumnya untuk mempercantik biasanya pada section 2 dan sedikit pada section 3.

Semuanya menjadi satu kesatuan dan menghasilkan template yang anda bisa lihat, yang perlu ditekankan adalah keahliah sobat dalam memahami struktur dari template dan sedikit keahlian bahasa CSS.

NB : Untuk variable umumnya seperti ini terletak pada section 2 dan biasanya hal ini untuk mengubah setting font dan color dalam dashboard blogspot Layout > Fonts and colors dan tidak perlu mutlak untuk di gunakan.

-----------------------------------------------
Blogger Template Style
Name:     Minima
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">

   <Variable name="startSide" description="Side where text starts in blog language"
             type="automatic" default="left" value="left">
*/

Pada section variabel ini yang perlu di perhatikan adalah ketika merubah variabel harus di ikuti string $ di depan variabel kemudan di terapkan pada bagian section CSS. contoh : variabel bgcolor diganti menjadi latarwarna maka penulisan di section cssnya harus memakai tanda $ sehingga menjadi $latarwarna.

Aura Share Google Very Loved Writings Natural

Belajar Desain Layout Template Part.2

Artikel terkait :

0 komentar "Belajar Desain Layout Template Part.2", Baca atau Masukkan Komentar

Posting Komentar