belajar membuat template blogspot

Struktur Dasar Template Blogspot

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.

http://3.bp.blogspot.com/-lHSNGjGySQc/T4CqqXN4mGI/AAAAAAAAB0I/6FOq7MRPcBk/s1600/struktur+template.png

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

http://u-sup.blogspot.com/2010/04/membuat-menu-navigasi-horizontal.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.

Membuat Template Blogspot Bagian 1 Pola

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

http://u-sup.blogspot.com/2012/04/struktur-dasar-template-blogspot.html

- 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> <html b:version='2' class='v2' 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>  <b:skin><![CDATA[/* <<---- ini awal kode CSS/Skin ----------------------------------------------- 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>   </head> <body> <div id='outer-wrapper'>  <div id='header-wrapper'>  </div> <div id='sidebar1'>  </div> <div id='main-wrapper'>  </div> <div id='sidebar2'>  </div>

<div class='clear'> </div> <div class='clear'/>  <div id='footer'>  </div> </div>  </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....!!!

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 :

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

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.

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 Template

- Klik Edit HTML



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

http://u-sup.blogspot.com/2012/04/membuat-template-blogspot-bagian-1.html


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.

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 Template

- Klik Edit HTML



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

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;


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



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



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

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;





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 {


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;


}

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



</div>

5. Hapus dan ganti dengan kode dibawah ini :

<div id='main-wrapper'>



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

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



</div>

5. Kemudian ganti dengan kode berikut :

<div id='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>

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.

belajar membuat template blogspot

Documents