Membuat Template Blog sendiri Dengan Notepad



Membuat Template Blog sendiri Dengan Notepad

Kamis, 19 April 2012
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
contoh Tag HTML
Teh and Cemilan(buat sambilan)
Sudah siap? Ayo kita mulai :P

1. Langkah Awal
Download Contoh Tag HTML Diatas agar mudah untuk menjelaskannya dan mudah untuk dimengerti. Tenang aja, filenya tidak ada Virusnya kok ;) hanya berisi Tag HTML.txt dan juga CSS.txt


2. Buka File Tersebut di Notepad.
Didalamnya terdapat beberapa contoh CSS dan juga Tag HTML yang saya tulis sendiri.


3. Buat Blog Baru pada Blogger.com
Berfungsi agar menghindari hal yang tidak diinginkan pada template blog anda. Seperti kesalah pada Jarak, Warna, Ukuran, Font, sampai dengan Gambar.


4. Letakkan semua Tag HTML Tersebut
Maksudnya adalah Copy dan Paste semua kode yang terdapat pada Tag HTML.txt tersebut ke dalam Edit HTML pada blog yang baru anda buat.


5. Ganti seluruh Tag head dengan kode XML
Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML, caranya dengan mengganti kode dari <html> hingga </head> dengan kode dibawah ini :P


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


6. Masukkan CSS
edit file CSS.txt dan Ganti tulisan  /* Insert CSS here */ diatas dengan seluruh kode yang terdapat pada file css.txt tersebut. Css pada XML template blogger dimulai dengan tulisanadalah tulisan<b:skin><![CDATA[  dan berakhir pada kode ]]></b:skin> .

7. 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. Mengganti Header
Ganti <!-- Batas Awal Title --> ... <!-- Batas Akhir Title --> 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. Memberikan Dynamic Content pada Posting
Ganti <!-- Awal Post Kontent --> ... <!-- Akhir Post Kontent --> dengan kode berikut :P


    <div id="main-content">
      <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
      </b:section>
    </div>

c. Memberi efek Dynamic Content pada Widget
Ganti <!-- Awal Widget --> ... <!-- Akhir Widget --> dengan kode dibawah ini :D


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

8. Save dan Preview
 Save template anda, jika ada kesalahan ataupun error pada kode tersebut, anda diharuskan untuk mengulang lagi dari langkah 4 diatas.

9. Sedikit Mengedit Kode CSS
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:

a{
  color:red;
  text-decoration:none;
}
a:hover{
  font-weight:bolder;
}
a:visited{
  color:darkred;
}

/* Link yang berada pada Widget */
#widget-wrapper a{
  color: yellowGreen;
  text-decoration: none;
}

/* Penanggalan pada Posting */
.post-outer h3 a{
  text-decoration:none;
  color:red;
}
.post-outer h3 a:hover{
  color:orange;
}



Sekarang, tambahkan beberapa Properties seperti Gambar latar ataupun warna pada elemen <body> :

body{
  background: #888 url('http://alamatgambaranda') repeat;
  color: #eee;
  text-shadow:1px 1px 1px #555;
}


Tambahkan beberapa Properties pada Main page (elemen posting) :

/* Penanggalan */
.post-outer h3{
  display: block;
  border-bottom: 1px solid;
  color: red;
  border-right: 5px solid;
  font: 20px cursive;
  text-decoration:none;
}


Dan Merubah beberapa CSS yang telah jadi ;)

/* Element pada Wrapper */
#inner {
  background: #AAA;
  padding: 12px;
  float: left;
  width: 900px;
  margin: 35px 0px;
  border-radius: 10px;
  box-shadow: 15px 15px 11px #999;
}

/* Element pada Post */
#postwidget {
  width: 640px;
  float: left;
  background: #222;
  border-radius: 10px;
  box-shadow: 6px 6px 6px #555;
}

#postcontent {
  padding: 10px 20px 30px;
  font: 13px arial;
  color: white;
}

/* Element pada Widget */
#widget-wrapper {
  float: right;
  padding: 7px;
  background: #222;
  border-radius: 10px;
  box-shadow: 3px 3px 9px #555;
}

Save dan Preview ;)
untuk DEMO, anda dapat ke sample blog saya ;)


Artikel Terkait:



0 Responses to "Membuat Template Blog sendiri Dengan Notepad"

Post a Comment

 
Return to top of pageCopyright © 2012 | Blog Koleksiku Saja Converted into Blogger Template by Gusmanto