Updated 20 Januari 2013
Hai Sobat! Sudah lama saya tak berjumpa lagi, udah jarang ngepost lagi, dan otak-atik blog lagi nih :D . Untuk itu, saya mohon maaf dikarenakan kemarin saya lagi ulangan tengah semester :) . Pada saat ulangan telah usai saya menyempatkan diri membeli pulsa modem, saya browsing dan menemukan satu blog yang templatenya keren.. saya menanyakan ke Admin blog tentang templatenya, dan ternyata dia membuatnya sendiri dengan Notepad dan sedikit gambar yang dibuat dari Corel Draw. Sayangnya Admin blog tersebut mungkin tidak mau membocorkan cara untuk membuat template, tapi saya Mencoba membuat template tersebut secara online di Tataletak blog. Beberapa elemen saya ubah dan ubah, Beberapa kode saya tulis, dan beberapa kode juga saya hapus, beberapa waktu kemudian saya menemukan caranya.. :P Check it out ;)

Hal yang harus diperhatikan dalam mendesain template blog ada lah anda harus memahami "Tag HTML" dan juga beberapa kode CSS untuk membuat Blog menarik.

Alat dan Bahan:
Notepad
Pemikiran Logika yang matang
Teh and Cemilan(buat sambilan)
Sudah siap? Ayo kita mulai :P

1. Langkah Awal

Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html". Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:

<html>
<!-- bagian kepala -->
<head>
  <style>
/* CSS di tag ini */
  </style>
</head>

<!-- bagian badan -->
<body>
<div id='wrapper'>

 <!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<h1>Judul BLOG</h1>
</div>

 <!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>

<h3>Ini adalah Judul Posting anda </h3>
Tulis sesuka anda, terserah itu apa, yang penting anda dapat melihat ISI dari bagian POST ini, atau anda dapat memberikan warna background dari masing-masing ELEMENT pada template ini ;)
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis

</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>

<h2> Judul Widget </h2>
Lorem ipsum dolar si dawet, consectetur adipisicing si pelit, sad do re mi fa eit unmod lempar sana lempar sini incididunt ut labore et dolore et kasire et indire magna akuilah. Ut enim ad minim caina cau, quis nonstop exercitation ullamco laboris sisi atas sisi bawah ex ea ada comodo tersesat. Duit ente kayak color in jemuran in atap in everywhere velit amat minta dolore lu fugiat nullar penyakit. Excepteur sint occaecat ada nona proident, sunt in curi que di office deket rumah pelit anim id est laborum autis

</div>
</div>

<div style='clear:both'>
  <!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
  <!-- tambahkan elemen footer disini -->
  <!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
  <!-- end of Bagian badan -->
</html>


Save kode diatas dengan nama Project.html

2. Berikan CSS pembentuk Tata Letak Sederhana.

Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.

Misalkan kita akan membuat tata letak seperti ini :

Kepala BadanWidget


Maka CSS yang akan kita gunakan adalah seperti ini:

#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}


3. Preview, lalu EDIT!

Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)

Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!

4. Berikan beberapa tag XML template Blog

Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.
Perhatikan kode template berikut :

<html>
<!-- bagian kepala -->
<head>

<style>
/* CSS HERE */

</style>
</head>

<!-- bagian badan -->
<body>
<div id='wrapper'>.....

Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:

<?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>
<b:skin><![CDATA[

/* Insert CSS Here */

]]></b:skin>
</head>

Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:

<?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>
<b:skin><![CDATA[

/* Start CSS HERE */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
/* End CSS HERE */

]]></b:skin>
</head>


<!-- bagian badan -->
<body>
<div id='wrapper'>.....


5. Memberi Blogger Tag

Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.

a. Tambahkan element Judul Blog.

Ganti kode yang berwarna biru dengan kode berikut :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>


b. Tambahkan element Post.

Ganti kode yang berwarna hijau diatas dengan kode berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>


c. Tambahkan element Widget.

Ganti kode yang berwarna kuning dengan kode dibawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>


Sehingga akan terlihat seperti ini :

<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>

<div style='clear:both'>
</body>


6. Save dan Upload.

Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)

Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.

7. Sedikit Mengedit Kode CSS Kembali

CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border), hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)

Mulailah mengedit text dan link yang terdapat di template tersebut:

/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}

/* Link atau tautan */
a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }

/* Penanggalan pada Posting */
.date-header{ color: orange; }

/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */

/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */


Dan selebihnya anda kerjakan sendiri ya ;)

Final Kode :


<?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>
<b:skin><![CDATA[
/* Inti dari Element */

#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}

/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}

/* Link atau tautan */a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }

/* Penanggalan pada Posting */
.date-header{ color: orange; }

/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */

/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */

]]></b:skin>
</head>

<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

</div>


<div style='clear:both'>
<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
<!-- end of Bagian badan -->
</html>


Jika anda telah merubah beberapa widget melalui centangan Expand Widget sebelum mengikuti langkah-langkah artikel ini, ada kemungkinan tag didalam widget tersebut sama. Dan itu pengaruh juga pada tag Judul posting, Judul Entri, Judul Blog, isi dari Widget tersebut.
Ada baiknya anda Restore ke template Default bawaan blogger yang orsinil lalu buatlah template baru seperti ini. Gunanya untuk mereset seluruh tag widget ke semula.

Jika kalian tidak mau repot dengan Langkah-langkahnya, silahkan Langsung ke Kode Akhir, namun anda diharuskan untuk menambahkan CSS lain.
Karena Kode akhir adalah Template yang "Paling Sederhana"

16 komentar

  1. bermanfaat nih tutorialnya.

    www.gozineinfo.com

    BalasHapus
  2. wah mantap artikelnya gan,,sangat membantu terima kasih
    jangan lupa kunjungi juga blog saya

    BalasHapus
  3. semoga bermanfaat ya gan :D
    makasih udah berkunjung ;)
    sip..

    BalasHapus
  4. ohh begitu toh caranya simpen dulu mas hehehe :D

    BalasHapus
  5. Artikel yang menarik..
    Lanjutkan.

    #Salam. By Tutorial Blogz

    BalasHapus
  6. @Ari, @Tutorial Blogz, @SolSepatu : Terima Kasih Udah Mampir :))

    BalasHapus
  7. mampir balik ya gan.
    www.thirddownload.com

    BalasHapus
  8. keren banget , thanks ya , mau belajar bikin template sendiri nih :)

    BalasHapus
    Balasan
    1. iya, lagipula menyenangkan untuk dipelajari daripada menjiplak template orang lain -_-

      Hapus
  9. @all : terima kasih ya teman :)

    BalasHapus
  10. wah keren nih. mau bikin template sendiri juga nih.

    sekalian ijin follow yah. jika berkenan mangga mampir. :)

    BalasHapus

Lain-lain

Followers

About Me

Foto Saya

Hi, my name is adi nugraha. I was in school at SMK 9 Bekasi. Nice to meet you :)
Desain template oleh Adi Nugraha Diberdayakan oleh Blogger