Cara Bikin Template Blog Sendiri Bagian 3

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.

hasil template pada tutorial sebelumnya.


Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

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

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )
  color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont; ( jenis font dari judul blog )
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont; ( jenis font dari deskripsi blog )
  color: $descriptioncolor; ( warna dari deskripsi blog )
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
  • kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
  • kode berwarna ungu adalah kode untuk judul blog.
  • kode berwarna merah adalah kode untuk deskripsi blog
  • kode berwarna hijau adalah kode untuk efek hover pada judul blog
  • kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

ganti kode di atas dengan kode berikut.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

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

#header {
  margin: 10px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
font-size:16px;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

hasilnya akan seperti ini


Setelah membahas tentang header, sekarang kita masuk di Heading.

Seperti yang saya jelaskan pada cara bikin template blog bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

ubah dengan kode berikut

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}
 kode bercetak tebal adalah kode yang di tambahkan.


berikut tempilannya...


Pada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar berada dalam satu kotak, kita akan mencoba membuat area postingan secara terpisah - pisah dengan mengedit kode berikut.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

ganti dengan kode berikut
.post {
margin-right:px;
margin-bottom:10px;
color:#000;
background:#ffffff;
line-height:20px;
border:1px solid #222;
padding:5px;
}
.post h1{
margin:5px;
padding-right:10px;
 font-size:20px;
border-bottom:1px solid #000000;
font-weight:normal;
line-height:1.4em;
color:$titlecolor}

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.
.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

ganti dengan kode berikut
.main .widget{
border:0px solid $bordercolor;
background:#FFF;
padding:0 0 0em}

.sidebar .widget {
margin-bottom:10px;
color:#000;
background:#ffffff;
border:1px solid #222;
padding:3px 10px 10px 10px;
}

dengan kode di atas, tampilan template nya akan jadi seperti ini..


tunggu kelanjutannya di cara bikin template bagian 4..
Previous
Next Post »

23 comments

Write comments
agam
AUTHOR
04:41:00 delete

nunggu ke yg 4 :D

Reply
avatar
Saufi Rahman
AUTHOR
06:13:00 delete

NUnggu KE 4 nih bermanfaat banget.......

Reply
avatar
Unknown
AUTHOR
18:22:00 delete

wah sob tahnks infonya sayang nunggu yang ke 4 nih heehehe. ...

Reply
avatar
Anonymous
AUTHOR
02:23:00 delete

IZIN SHARE :D
makasih :D

Blog saya : incubame.blogspot.com
aku pasang banner mu juga ya :D
dan jangan lupa pasang banned blog ku juga ya :D
makasih om !

Reply
avatar
Unknown
AUTHOR
04:27:00 delete

KUNJUNGAN SORE??

Mas Kalo Yang bagian 1,2,3 udah,Yang Bagian 4,5,6
Nya Kapan,Ditunggu Ampe Ada Ya Mas?

NB:http://dj-doo.blogspot.com/

Reply
avatar
yoyok
AUTHOR
18:58:00 delete

makasih info-nya sob.. pingin bisa bikin template sendiri soal-nya...

Reply
avatar
Anonymous
AUTHOR
10:46:00 delete

Ditunggu yang ke 4 kang,,,

www.komputermedia.com

Reply
avatar
eDeN~
AUTHOR
06:20:00 delete

BLog yang Bagus..!

Reply
avatar
Unknown
AUTHOR
23:56:00 delete

kalo gitu berarti harus bisa bahasa pemorgaman , warna nya jga harus pake warna link,kalo gitu harus pake xml maker dong yah ? , biar lebih gampang

Reply
avatar
10:15:00 delete

Mantap Sob Sangat Bermanfaat n Terims Sob ini yang Saya Cari2 Sob,,...

Reply
avatar
19:22:00 delete

akan sy coba buat gan

Reply
avatar
18:47:00 delete

terima kasih mas infonya

Reply
avatar
Unknown
AUTHOR
14:45:00 delete

Susah bro, saya sudah lama mencoba bikin template blog sendiri, tapi selalu gagal! :)

Reply
avatar
Unknown
AUTHOR
00:34:00 delete

Saya Gagal Terus bikin template sendiri :/

Reply
avatar
Mang Juhro
AUTHOR
07:35:00 delete

wahh mantap dachhh...

sukses dach gan...

Reply
avatar
Gagaje
AUTHOR
20:43:00 delete

Sippp..mana yang ke 4 gan...

Reply
avatar
FORUM JNR
AUTHOR
13:08:00 delete

Tutorial cara membuat templatenya bagus bro,tapi aku paling pusing kalau membahas HTML,lebih enak terima beres saja Bro.
so..ada gak yang sudah siap pakek bro?

Reply
avatar
Sep Zunot
AUTHOR
01:50:00 delete

widihhh kerennnn

sukses gan

Reply
avatar
17:09:00 delete

Thanks gan, walaupun masih pusing liatnya...scriptnya...hehehhe...

Reply
avatar
Unknown
AUTHOR
04:13:00 delete

ini sangat bermanfaat...
sukses selalu gan.. :)
kunjungi jg..
http://shavino-bramasta.blogspot.com

Reply
avatar
yanuri
AUTHOR
18:06:00 delete

kereeen ini yang gua cari sob... trimakasih infonya bermanfaat sekali...

Reply
avatar