Membuat Template Blogspot Bagian 6 (Footer Wrapper)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 5 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 5.

Footer Wrapper
Element footer / kaki-kaki ini terletak dibagian paling bawah mungkin sudah pada tau didengar dari namanya saja Footer pasti dibawah. Element ini biasanya menyimpan sebuah catatan atau informasi yang berupa tautan penting seperti tentang Hak Cipta / Copyright  dan informasi sejenisnya, akan tetapi tidak mutlak harus seperti itu kita bisa menempatkan link atau info apa saja di bagian footer ini.
Pada pembuatan template ini memiliki lebar Outer Wrapper 960px berarti kita juga harus memberi lebar Footer sebesar 960px jangan kurang ataupun lebih, karena jika lebih akan nampak tak rapi dan jelek pastinya dan jika kurang pasti tampilannya juga akan lebih jelek lagi karena tidak ada keserasian.

Oke kita lanjutkan menerapkan kode untuk footer wrappernya :
1. Buka Edit HTML template yang telah dibuat

2. Cari dan hapus kode CSS dibawah ini :

/* Awal kode css untuk footer wrapper
======================================================== */
#footer {

}

3. Kemudian ganti dengan kode CSS berikut :

/* AWAL KODE UNTUK FOOTER
======================================================== */
#footer {
margin-top:15px;
margin-bottom:5px;
width:960px;
height:50px;
background:#CCC;
padding-top:25px;
}
.hakcipta{
text-align:center;
font-size:11px;
}

4. Tuju bagian bawah dan cari hapus kode HTML dibawah ini :

<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
</div>

5. Kemudian ganti dengan kode berikut :

<div id='footer'>
<!-- Ini untuk Wadah isi dari footer -->
<div class='hakcipta'>
(c) Hak Cipta 2012 <data:blog.title/><br/>
Original Template oleh : <a href='http://u-sup.blogspot.com/'>U-sup Blog</a> | Desiain ulang oleh : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Didukung Oleh : <a href='http://blogger.com/'>Blogger</a>
</div>
</div>

6. Sekarang Simpan template
7. Silahkan Lihat hasilnya

Keterangan :
- Width:960px : Lebar footer
- Height:50px : tinggi footer 50px kamu bisa mencoba merubah dengan menambah atau mengurangi angka 50px
- background:#CCC; : memiliki warna latar silver / abu-abu, bisa dirubah menjadi warna hitam dengan kode #000 atau yang lainnya juga bisa.
- text-align:center; Posisi Teks cenderung ketengah
- font-size:11px; ukuran huruf sebesar 11px bisa dirubah angkanya untuk memperbesar / memperkecil tulisan.
- <data:blog.title/> : kode ini akan memanggil dan menampilkan judul blog
- expr:href='data:blog.homepageUrl' kode ini akan memanggil URL halaman utama blog.

Sampai disitu langkah membuat template blogger sederhana sudah selesai dan sekarang tinggal memodifikasinya sedemikian rupa agar sesuai dengan selera, mungkin template tersebut masih perlu dioptimalkan agar template bisa bekerja dengan bagus dan maksimal.
Saya juga masih akan meneruskan artikel ini sampai tahap Optimasi dan juga Modifikasi bagi yang tertearik mengikuti tutorial ini silahkan bisa berlangganan melalui email kamu dengan mendaftar dibagian samping.

Membuat Template Blogspot Bagian 5 (Main Wrapper)

 Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 4 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 4.

Main Wrapper
Main wrapper merupakan salah satu elemen yang paling penting pada sebuah blog dimana Semua isi posting, judul post, meta dan komentar akan disimpan diarea ini, jadi kita harus secara teliti menentukan tampilan dan ukuran agar bisa serasi dan rapi.
Diposting sebelumnya telah kita tentukan lebar masing-masing Sidebar memiliki lebar 200px nah sekarang kita akan menggunakan sisa lebar dari body tersebut, template yang akan kita buat ini memiliki lebar 960px bisa dilihat pada posting (bagian 1) :
- Jadi body 960px dikurangi
- Sidebar1 200px X Sidebar2 200px = 400px
- Berarti memiliki sisa 560px.
Tapi kita tidak akan mengambil habis 560px supaya rapi dan kolom tidak saling bertabrakan kita harus menyisakan sebagai padding dan margin agar ada jarak antara Block Sidebar dan Block Post, jadi saya akan memberi lebar Main Wrapper sebesar : 535px, dan margin kiri 10px - margin kanan 10px sisa 5px biarin aja untuk ruang cadangan.

Lalu penerapannya sebagai berikut :
1. Buka Edit HTML Templatenya...!

2. Cari dan hapus kodeCSS  berikut ini :

/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper {

}

3. Kemudian ganti dengan CSS dibawah ini :

/* AWAL KODE MAIN WRAPPER DAN POSTING
======================================================== */
#main-wrapper {
width: 535px;
float: left;
margin:10px;
padding:0;
word-wrap: break-word;
overflow: hidden;
border:1px solid #CCC;
}

.date-header {
font-size:14px;
font-weight:normal;
color:#CCC;
}

.post {
overflow:hidden;
float:left;
}

.post h3 {
font-size:22px;
font-weight:normal;
margin:0px;
padding:0px;
line-height:1.6em;
}

.post blockquote {
font-style:normal;
font-size:13px;
padding:10px 20px;
margin:5px 0px 5px 25px;
background:#F3F6F9;
border:1px solid #D8D8D8;
}
.post-footer{
padding:3px 8px;
font-size:11px;
background:#F5F5F5;
margin:10px 0 10px 0;
border:1px solid #E3E3E3;
}
.post-body { padding:10px 25px 0px 0; }
.post-body h2 {font-size:16px;font-weight:normal;margin:0px; padding:0px;line-height:1.6em;}
.post-body ul {font-size:12px; line-height:18px; padding-left:12px}
.post-body ol{list-style-type:decimal; line-height:18px; margin:0px; padding:0px 0px 10px 35px}
.post-body ul{list-style:none; line-height:18px; margin:0px; padding:0px 0px 10px 0px}
.post-body li{margin:0px; padding:0px}
.post-body ul li{list-style:disc outside; line-height:18px; margin:0px 30px 0px 30px; padding:5px 0px 0px 0}

/* KODE CSS UNTUK KOMENTAR
================================================== */
#comments {
padding-left:18px;
padding-right:18px;
margin-top:10px;
}

#comments h4 {font-size:14px;padding:5px;}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block .comment-author {
margin:.5em 0;
margin-top:10px;
padding:5px;
background:#F5F5F5;
border-bottom:1px solid #D8D8D8;
}
#comments-block .comment-body {
padding:5px 5px 5px 10px;
margin:-6px 0 -9px 0;
background:#F5F5F5;
border-top:1px solid #fff;
}
#comments-block .comment-footer {
padding:0px 5px 0px 5px;
font-size:11px;
background:#F5F5F5;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
margin-right:10px;
}
#blog-pager {
text-align:center;
padding:0px 2px 10px 12px;
}
#blog-pager-older-link,#blog-pager-newer-link {
background:#F5F5F5;
padding:1px 8px;
border:1px solid #D8D8D8;
}
.feed-links {
display:none;
}

4. Tuju bagian bawah cari kode berikut ini (letakknya diantara kode sidebar1 dan sidebar2)

<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
</div>

5. Hapus dan ganti dengan kode dibawah ini :

<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

6. Simpan Template.

Sekarang template sudah bisa dilihat bentuknya dan sudah bisa digunakan untuk posting, pasang widget, masih kurang satu langkah lagi template sempurna yaitu Footer Wrapper. 


Keterangan :
- showaddelement='no' : Ini menunjukkan bahwa Link "Add Gadget" tidak dipampilkan kamu bisa merubah 'no" menjadi 'yes' jika ingin menampilkan Link "Add Gadget".
-  locked='true' : Ini menunjukkan bahwa Element posting terkunci dan tidak bisa dipindah-pindah.

Selanjutnya Bagian 6 Footer Wrapper >>

Membuat Template Blogspot Bagian 4 (Block Sidebar)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Mmebuat Template Blogspot Bagian 3 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 3.

Sidebar Wrapper
Kemarin telah saya bahas mengenai yaitu mengenai penentuan dan pembuatan Header Wrapper sekarang masuk ke tahap selanjutnya yaitu menentukan dan membuat Block untuk Sidebar Wrapper dimana block sidebar tempat untuk menyimpan segala macam aksesoris dari blog kita nah langsung saja berikut langkah-langkahnya :

1. Buka Halaman Edit HTML yang kemaren dibuat
2. Cari dan hapus kode berikut ini :

/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
#sidebar1 {
}
#sidebar2 {

}

3. Lalu ganti dengan kode dibawah ini

/* AWAL KODE SIDEBAR 1 DAN SIDEBAR 2
======================================================== */
#sidebar1 {
  width:200px;
  float:left;
  margin:10px 0 0 0;
  padding:0;
  word-wrap: break-word;
  overflow: hidden;
  }
#sidebar2 {
  width:200px;
  margin:10px 0 0 0;
  padding:0;
  float:right;
  word-wrap: break-word;
  overflow: hidden;

  }


#sidebar1 h2, #sidebar2 h2 { /* judul sidebar gan */
background:#CCC;
margin:0;
  padding:5px;
  font-size:14px;
  font-weight:bold;
  color:#191919;
  }

.sidebar {
  font-color:#151515;
  margin:0;
}
.sidebar ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar ol {
list-style:decimal;
}
.sidebar li {
line-height:1.4em;
border-bottom:1px dotted #EAEAEA;
}
.sidebar .widget-content {
padding:10px;
margin:0;
}
.sidebar .widget {
margin:0px;
margin-bottom:10px;
border:1px solid #CCC;
}
.clear {
  height:1px;
  margin:0;
  padding:0;
  clear:both;
  }
/* BATAS AKHIR KODE SIDEBAR GANN...... */

4. Sekarang tuju bagian bawah dan cari kode seperti berikut ini:

<div id='sidebar1'>
<!-- Ini untuk Wadah widget blog sidebar1 -->
</div>

Kemudian ganti dengan kode dibawah ini :

<div id='sidebar1'>
<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
</div>

5. Masih diarea ini cari kode berikut :

<div id='sidebar2'>
<!-- Ini untuk Wadah widget blog sidebar2 -->
</div>

Kemudian ganti dengan kode seperti berikut ini :

<div id='sidebar2'>
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
</div>

Sekarang Simpan template dan lihat hasilnya...!!! gimana masih berantakan ya tenang dulu masih ada kelanjutannya.
Keterangan :
Sidebar memiliki ukuran lebar masing-masing 200px kamu bisa menambah atau mengurangi lebar sidebar tersebut, tetapi harus diingat dalam penambahan lebar setiap element akan mempengaruhi element yang lain jadi jika melakukan perubahan pada lebar sidebar harap rubah juga lebar main-wrapper dengan menyesuaikan mengurangi lebar main-wrapper.

Selanjutnya Bagian 5 Main Wrapper >>

Membuat Template Blogspot Bagian 3 (Header)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Membuat Template Blogspot Bagian 2 jika belum mengikuti bagian 2 yaitu Bagian Dasar Template silahkan masuk ke Bagian 2.

Setelah bagian body dan Outer wrapper telah ditentukan sekarang langkah selanjutnya yaitu menentukan bentuk atau model Header Wrapper, pada bagian header ini yang ditentukan yaitu meliputi :
- Lebar dan tinggi Header
- Warna latar header
- Judul blog dan deskripsi (kita juga bisa menentukan logo blog melalui bagian header ini)

1. Sekarang masuk ke Edit HTML blog kamu caranya (blog yang digunakan untuk experiment) :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu. 


2. Cari dan hapus kode dibawah ini :

/* Awal untuk kode css header wrapper
======================================================== */
#header-wrapper {

}

3. Kemudian ganti kode tersebut dengan kode dibawah ini :

/* HEADER WRAPPER
==================================================== */
#header-wrapper {
width:960px;
height:150px;
background:#191919;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#FFF;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}

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

#header a:hover {
color:#FFF;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#FFF;
}

#header img {
margin-left: auto;
margin-top: auto;
}

Keterangan :

• #header-wrapper :  memiliki lebar 960px dan tinggi 150px dengan warna latar hitam
• #header h1 : ini akan menentukan karakter judul blog
• #header .decription : ini akan menentukan karakter deskripsi atau keterangan blog

Bersambung ke bagian 4 Sidebar Wrapper >>

Membuat Template Blogspot Bagian 2 (Outer Wrapper)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Mmebuat Template Blogspot Bagian 1 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 1.
Setelah kemarin memposting Artikel membuat template blogspot bagian 1 sekarang saya lanjutkan tentang membuat template blogspot untuk bagian 2, pada bagian 2 ini akan membahas penentuan tampilan pada bagian body dan Outer Wrapper, dimana body akan menentukan keseluruhan isi blog nantinya :

1. Sekarang masuk ke Edit HTML blog kamu caranya :
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.


2. Kalau sudah hapus kode berikut :

body { /* disini nanti kode CSS untuk body */

}

#outer-wrapper { /* disini nanti kode css untuk outer wrapper */

}

3. Kalau sudah kemudian ganti dengan kode dibawah ini

* {
margin:0;
padding:0;
border:none;
vertical-align:baseline;
outline:none;
}
.clear {clear:both;}
a:active {outline:none;}
a:focus {moz-outline-style:none;}

body {
background:#FFF;
font-size:13px;
font-family:Arial;
margin:0;
padding:0;
}
a {color:#0378B2;text-decoration:none;}
a:hover {color:#0378B2;text-decoration:underline;}
a:visited {color:#084B8A;text-decoration:nounderline;}
a img {border-width:1px; color:#EAEAEA;}

/* OUTER WRAPPER
==================================================== */
#outer-wrapper {
width:960px;
margin:0 auto;
padding:0;
}

Keterangan :
Body :

• Background warna #FFF yaitu putih kamu bisa menggantinya dengan warna lain
• Ukuran font 13px dengan jenis font Arial (kamu juga bisa menggantinya dendan font yang kamu inginkan misalnya 12px atau 14px dan Arial bisa diganti misalnya Tahoma, Georgia dll.)
• a {color:#0378B2;text-decoration:none;} ini menentukan warna link dasar
• a:hover {color:#0378B2;text-decoration:underline;} ini menentukan karakter Link ketika disorot
• a:visited {color:#084B8A;text-decoration:nounderline;} ini menentukan karakter Link yang sudah dikunjungi
• a img {border-width:1px; color:#EAEAEA;} ini menentukan karakter sebuah Link gambar

Outer-Wrapper

• Width:960px : memiliki ukuran lebar 960px kamu bisa merubahnya nanti ingat (perubahan ini akan mempengaruhi elemen yang lain jadi kalau ingin merubah lebar Outer-wrapper harus merubah juga elemen yang lain)
• margin:0 auto : maksudnya margin atau jarak luar akan ditentukan secara otomatis berarti posisi tampilan akan tepat berada ditengah-tengah karena auto bersifat adil.

Selanjutnya ke tutorial bagian 3 Header >>