Tampilkan posting dengan label Template Design. Tampilkan semua posting
Tampilkan posting dengan label Template Design. Tampilkan semua posting

2014-03-13

Tutorial Cara Membuat Template Blogger Sendiri

Bosen dengan template buatan orang lain dan ingin membuat template sendiri yang elegant...??? Mulailah membangun template blogger kamu sendiri dengan mengikuti tutorial membuat template blogspot/blogger dibawah ini atau tidak mau repot-repot alias terima bersih baca disini:

  1. Mengenal Struktur Dasar Template Blogger
  2. Bagian 1 dasar element / Pola
  3. Bagian 2 Body dan Outer Wrapper
  4. Bagian 3 Header
  5. Bagian 4 Block Sidebar
  6. Bagian 5 Main Wrapper, Post dan Kotak komentar
  7. Selesai Bagian 6 Footer 
  8. Mengganti header dengan gambar
  9. Pnyempurnaan (bersambung)

Diatas merupakan list tutorial sederhana bagaimana membuat template blogger sendiri, menciptakan template blogspot, cara membuat blogger template.

2012-07-19

Tutorial ini merupakan kelanjutan dari Tutorial cara membuat template blogger, nah jika belum mengikuti langkah dari awal sebaiknya lihat langkah-langkah sebelumnya yaitu :

Dari template yang telah dibuat kemarin header template berwarna hitam tanpa gambar, sekarang bagaimana jika merubah tampilan header dengan gambar,,,,,bagaimana caranya?

Jika dilihat dari kode CSSnya header yang terdapat pada (langkah 3 disini) memiliki kode seperti 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;
}

Dari kode header diatas terlihat bahwa header memiliki tampilan sebagai berikut:
width:960px; (lebar header)
height:150px; (tinggi header)
background:#191919;  warna latar header hitam dengan kode warna #191919

Sekarang bagaimana cara mengganti dengan gambar?
Pertama : Siapkan terlebih dahulu gambar yang akan digunakan, gambar harus berukuran sama dengan besar header yaitu 960px (pixel) X 150px (pixel) agar hasilnya rapi dan sesuai, kamu bisa membuat dengan photoshop, photoscape atau editor gambar lainnya.

Kedua  : uploadlah gambar tersebut di blogger atau di image hosting lainnya / baca (cara upload gambar) dan ambilah URL gambar tersebut.

Ketiga : Perhatikan kode dibawah ini, kode yang harus kamu rubah :
#header-wrapper {
width:960px;
height:150px;
background:#191919; /* <--- ini kode yang dirubah */
}
Dan rubah kode warna biru background:#191919; 

Menjadi :

background:#191919 url(URL-GAMBAR-DISINI) top center no-repeat;
}

Maka contoh lengkapnya jadi seperti ini :

#header-wrapper {
width:960px;
height:150px;
background:#191919 url(http://1.bp.blogspot.com/-do8UfHl7Cpk/UAf2-hDBymI/AAAAAAAABz0/DNIOmkUq19I/s1600/header2.jpg) top center no-repeat;
}
Rubah http://1.bp.blogspot.com/-do8UfHl7Cpk/UAf2-hDBymI/AAAAAAAABz0/DNIOmkUq19I/s1600/header2.jpg dengan URL gambar yang telah dibuat

Simpan template dan lihat perubahannya.
Jika tidak mau repot membuat gambar gunakan gambar dibawah ini yang sudah saya persiapkan untuk template tersebut.

URL Gambar 1 : http://1.bp.blogspot.com/-Iez_F_OmoH4/UAf29mnZd-I/AAAAAAAABzo/QQIln9b9zNQ/s1600/header1.jpg


URL Gambar 2 : http://1.bp.blogspot.com/-do8UfHl7Cpk/UAf2-hDBymI/AAAAAAAABz0/DNIOmkUq19I/s1600/header2.jpg


URL Gambar 3 : http://4.bp.blogspot.com/-IDmkgEwTBrg/UAf2-0Sj5eI/AAAAAAAAB0A/LB3GoSW9ox8/s1600/header3.jpg


URL Gambar 4 : http://4.bp.blogspot.com/-e7gUXXQE-J4/UAf2_OASm3I/AAAAAAAAB0M/s8ythmggVN8/s1600/header4.jpg


URL Gambar 5 : http://3.bp.blogspot.com/-T6ekbuq4C0c/UAf2_YbkrcI/AAAAAAAAB0c/QZuUVXlAzCE/s1600/header5.jpg

2012-04-18

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.

2012-04-17

 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>
Jika kode pada langkah 4 sudah sama atau menyerupai kode langkah 5, langkah ini bisa dilewati.

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

2012-04-15

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

2012-04-12

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

2012-04-08

Membuat Template Blogger / Blogspot, selama ini saya membagikan template blogger secara gratis sudah puluhan  template saya hasilkan dan saya bagikan secara gratis, akan tetapi pada artikel kali ini saya akan membahas langkah demi langkah bagaimana membuat template blogger mulai dari nol, Jika kamu belum pernah membuat sebuah template pernah membayangkan bagimana sulitnya membuat template tetapi harus diketahui bahwa membuat template tidak sesulit yang dibayangkan asalkan kita punya kemauan dan juga ketelitian sebuah template dapat dibuat dengan mudah.
Membuat template blogger merupakan salah satu pekerjaan yang susah-susah gampang , template blogger menggunakan platform HTML/XML, untuk itu saya akan membahas membuat template blogspot dengan XML/HTML version agar dalam panduannya tidak membingungkan dan mudah dipahami oleh siapa saja yang mengikuti saya bagi dalam beberapa sub bagian yang akan posting secara berkala.

Dokumentasi :
Pertama kita harus memiliki pola atau gambaran seperti apa template yang akan kita buat, nah di sini kita akan membuat sebuah template untuk blogspot 3 kolom dengan rincian elemen laman Header, Block Sidebar1 dan Sidebar2, Main-wrapper dan Footer, masing-masing block tersebut nanti sebagi wadah tampilnya konten widget, dan keperluan lainnya (hal ini dimaksudkan agar kita lebih mudah dalam membuat template). agar lebih mudah untuk diidentifikasi dikemudian hari maka template ini akan saya beri nama Blogger2Go..!!!

1. Pertama kita harus mempersiapkan Struktur Dasar Template tersebut, disini kita akan membuat template langsung diblog secara Online dengan maksud agar langsung bisa dilihat hasilnya, untuk itu buatlah satu blog baru jangan menggunakan blog yang aktif, karena saya tidak bertanggung jawab dengan kerusakan apabila kamu menggunakan blog yang aktif.

2. Kalau blog sudah jadi silahkan masuk ke halaman Edit HTML dari blog yang baru saja dibuat tadi
- 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.
- Hapus semua kode tersebut kemudian ganti dengan kode Struktur Dasar Template Blogger Versi XML dibawah 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>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>  <!-- ini judul blog -->

    <b:skin><![CDATA[
/*
-----------------------------------------------
Blogger Template Style
Name:     Blogger2Go
Designer: U-sup
URL:      http://u-sup.blogspot.com/
----------------------------------------------- */
/* AREA KODE CSS */
body { /* disini nanti kode CSS untuk body */

}

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

}


/* Awal untuk kode css header wrapper
======================================================== */

#header-wrapper {

}

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

}

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

}

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

}

]]></b:skin>  <!-- ini batas akhir css / skin -->

   <!-- Disini bisa diletakkan kode javascripts -->
  </head>
  <body>
   <div id='outer-wrapper'> <!-- Awal dari Outer Wrapper -->

       <div id='header-wrapper'>
               <!-- Ini untuk Wadah Judul dan keterangan Blog -->
        </div>

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

        <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='Posting Blog' type='Blog'/>
</b:section>
        </div>

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

        <div class='clear'>&#160;</div>

<div class='clear'/> <!-- batas ruang dari outer: JANGAN DIHAPUS!!! -->

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

    </div> <!-- Akhir dari Outer Wrapper -->

  </body>
</html>

- Simpan template dan lihat blog (untuk keterangan lanjut dari kode tag diatas bisa dibaca di sini)
- Hasilnya masih kosong karena belum ada isi tunggu artikel berikutnya....!!!


Informasi Penting Membuat Template Blogger
Dalam setiap penambahan sebuah element juga harus disertai dengan kode CSS untuk mengkonfigurasi tampilannya, jadi ketika menambahkan widget baru harus ada pasangannya masing-masing antara Widget HTML dengan CSS. Dari kode diatas bisa dilihat bahwa :

Pemanggilan ID HTML dan CSS
  • <div id='header-wrapper'>  memiliki pasangan pada kode CSS yaitu #header-wrapper { } 
  • <div id='sidebar1'>  memiliki pasangan pada kode CSS yaitu #sidebar1 { } begitu juga yang lainnya.
ID ini harus bersifat unik atau tidak boleh ada yang sama, jika tidak maka template tidak akan bekerja dengan baik, bahkan tidak akan ada pengaruh perubahan pada template.
Jika akan menggunakan sebuah CSS untuk pemanggilan lebih dari satu element kamu harus mengganti <div id= menjadi <div class= dan juga merubah prefix pada CSS menjadi tanda titik (.) bukan tanda pagar (#)

Contoh :
CSS : #sidebar1 { }

HTML :
<div id='sidebar1'>
</div>

Maka bisa diganti dengan metode pemanggilan class bukan id

CSS : .sidebar1 { }

HTML
<div class='sidebar1'>
</div>

perubahan terjadi pada kode yang saya cetak biru.
Semua Elemen harus diawali dengan tag pembuka dan diakhiri dengan tag penutup, tanpa tag pembuka atau tag penutu sebuah HTML tidak akan berjalan sama sekali atau percuma.
Tag pembuka ditandai dengan < dan penutup ditandai dengan   </

Contoh 1:
<div class='sidebar1'>

</div> << ini adalah tag penutup dari div

Contoh 2 :
<title><data:blog.pageTitle/></title>

<title> : Tag pembuka
</title> : Tag penutup
 
Itu merupakan langkah awal dari membuat template blogspot, posting ini masih bersambung dalam beberapa bagian lagi jika tertarik silahkan bisa ditunggu kelanjutannya. Bila  ada kejanggalan dengan artikel diatas atau mungkin hal yang kurang jelas untuk dimengerti atau bahkan ada kesalahan mohon koreksinya.
Terima kasih.
Selanjutnya Bagian 2 Outer Wrapper >>
Mengenal Struktur Dasar Template? Apakah itu harus? ya mengetahui atau mengenali struktur pada sebuah template pada sebuah blog perlu dimengerti bagi seorang blogger lebih khusus lagi jika kamu ingin menjadi seorang Web Designer, dengan mengetahui struktur dari template itu kita akan lebih mudah mengembangkan model tampilan layout template kita bagian mana yang ingin kita olah, tapi itu saja sebenarnya belum cukup karena minimal 10% kita juga harus sedikit mengerti tentang CSS (Cascading style sheet) dan HTML (Hyper Text Markup Language) dan juga Javascripts.
Struktur sebuah template pada dasarnya memliki struktur yang sama namun bisa juga kadang berbeda tergantung designer tersebut yang membuatnya, namun dasar sebuah template memiliki struktur dibawah ini :


Keterangan :
  1. Body: block paling lebar, body ini yang menampung seluruh konten dari blog atau website.
  2. Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian luar template), jadi kebanyakan pada umumnya outer wrapper ini sebagai wadah header, sidebar, main-wrapper dan juga footer.
  3. Header: Kotak ini adalah bagian teratas dari blog mungkin dari namanya sudah bisa kita tebak dari sebuah header ini. Biasanya header ditempati oleh judul-deskripsi  blog, logo, dan juga kebanyakan dibawahnya ditempai oleh Navigasi Menu.
  4. Sidebar : Block ini digunakan sebagai wadah widget blog atau aksesoris misalnya  About me, Link list, gambar slide, dan juga widget-widget lainnya
  5. Main: Main-wrapper yaitu sebuah block atau kolom dalam yang paling lebar, dalam block ini juga masih menampung seperti Judul Post, Post konten, kotak komentar dan juga keterangan lainnya mengenai artikel atau posting blog.
  6. Footer: adalah kotak paling bawah dari sebuah template. Seperti bagian header namun terletak dibagian bawah biasanya footer ini ditempati sebuah tautan dan juga teks keterangan hak cipta.
Beberapa bagian template lain yang tidak terlihat pada layar monitor yaitu HTML bagian ini wajib dimiliki oleh sebuah template entah itu Website atau Blog atau template yang lainnya (untuk blogspot menggunakan platform HTML/XML), jika tidak memiliki bagian ini template tidak akan bekerja atau tidak berjalan sebagaimana mestinya, bagian tersebut adalah :
<html> <--- tag pembuka untuk html

       <head> <--- tag pembuka untuk head
  
             Disini letak dari CSS atau juga Javascript

       </head> <--- tag penutup untuk head

       <body> <--- tag pembuka untuk body
  
            Disini tempat yang akan ditampilkan yaitu HTML dan juga bisa Javascript

      </body> <--- tag penutup untuk body

</html> <--- tag penutup untuk html

Berikut penjelasan yang saya ketahui mengenai struktur tag HTML diatas :

1. HTML : <html> </html>
  • Sebuah template Blog/Website selalu diawali dengan tag pembuka <html> dan harus diakhiri tag penutup </html> 
  • Diantara tag inilah tag-tag atau struktur lainnya diletakkan yang akan menciptakan sebuah tampilan blog/website.
2. Head : <head> </head>
  •  Tepat setelah  <head>  biasanya diletakkan kode tag pengenal mulai dari tag title/judul, deskripsi, keywords dan tag-tag pengenal lainnya.
  • Diantara kode ini harus diletakkan sebuah kode CSS yang akan menampilkan sebuah tampilan model atau karakter dari template itu sendiri.
  • Sebelum kode tag penutup </head>  biasanya ditambahkan sebuah kode Javascript untuk sekedar menambahkan fitur-fitur menggunakan kode Javascript.
3. Body : <body> </body>
  • Tag body merupakan yang paling utama pada sebuah template Blog/Website karena ini akan menampung dan menampilkan semua konten blog/website itu sendiri.
  • Pada bagian tag ini masih terbagi dalam 4 struktur penting lagi yaitu Header, Sidebar, Content dan juga Footer, di atas sudah saya jelaskan tentang struktur ini.
 Jika kita sudah paham dengan struktur diatas kita akan mudah membuat model template dan memodifikasi template kita, tapi ingat bahwa untuk membuat sebuah template dibutuhkan pengetahuan dalam kode CSS dan HTML ya minimal kamu harus menguasai 10% tentang CSS/HTML, secara berkala jika kamu memang memiliki minat yang kuat dalam hal tersebut pasti bisa melakukannya, karena tak ada yang mustahil, jadi jangan malas untuk belajar dan terus mengambangkan yang kita pelajari.

Berikutnya saya akan memposting tentang Bagaimana Membuat template untuk Blogger / Blogspot dan membangunnya dari nol, mungkin saya harus mempersiapkannya terlebih dahulu karena agar mudah untuk dipahami oleh semua yang membacanya.