Tutorial Membuat Template Blogger

Struktur Dasar Template Blogspot
Pengantar I
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 :
Page
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
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 juduldeskripsi 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.
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.
Page
Source : http://u-sup.blogspot.com/2012/04/struktur-dasar-template-blogspot.html
Pengantar II
Mengenal Struktur Dasar Template Blogspot

Mengenal Struktur Dasar Template Blogspot. Dalam mengedit atau merubah tampilan
blog kita lebih baik mengenal dulu struktur Dasar template blogspot, kan aneh kalau
kita ingin menambah 3 kolom pada footer kita bertanya yang mana footer?
Untuk itulah kali ini Blogspot Pemula ingin memberikan sedikit informasi tentang struktur
dasar template blogspot, struktur dari beberapa template memang tidak semua sama.
Dengan mengenal struktur dasarnya, kita dapat dengan mudah mendapatkan ide bagaimana
mengembangkan template kita yang sekarang, mendesain template, dan bagaimana
mengubahnya sehingga memiliki struktur yang berbeda, Dan menarik untuk dilihat,
Beberapa bagian struktur template jelas terlihat dari mayoritas blog yang kita lihat adalah :
1. Header
2. Footer, dan
3. Bagian posting.
Sedangkan beberapa bagian lain yang (bisa disebut block atau containers berikutnya) yang
tidak terlihat di layar monitor tapi bagian penting dari HTML untuk membangun template
agar praktis dan benar kerjanya.
Page
1. Body: block paling lebar yang merupakan badan dari template (pada dasarnya
semua yang terlihat di layar komputer).
2. Outer-wrapper: kotak ini melapisi bagian template (Body lebih mirip bagian luar
template). Pada umumnya, kita membangun sebuah wrapper untuk menempatkan
beberapa kotak lebih kecil di dalamnya. Kotak-kotak yang paling umum di dalam
outer-wrapper adalah : header, content, dan footer
3. Header: Kotak ini adalah bagian teratas dari blog (namanya sudah memperlihatkan
dengan jelas. Tapi di dalam header kita punya sub-block lain-Header title block,
Header description block, dan lainnya contohnya adsense banner, menu bar, dll.
Jadi, untuk menggabungkan semua sub-block ini dalam satu kotak besar, kotak
paling besar di bagian header biasanya Header-wrapper yang menggabungkan
semua di dalamnya.
4. Content: Di bawah header adalah content wrapper- pada dasarnya ini bagian
terpenting dari semua block. Di dalam wrapper ini ada kotak-kotak sidebar (1,2
atau lebih) dan kotak utama ( main block) yang memuat Post, comment, dan
beberapa iklan.
5. Footer: adalah kotak paling bawah dari template. Seperti bagian header, kita juga
memerlukan Footer wrapper untuk memuat sub-block yang lain di bagian footer.
6. Main: Main-wrapper adalah kotak paling lebar dalam content wrapper. Di dalam
main-wrapper terdapat Post block, comment block, date header, dan widget lain
yang dibuat dari add page element option.
7. Sidebar: adalah block yang memuat semua side widget- About me, label, archieve,
text, Html and Javascript, adsense, dll. Dalam blogger template standard, kita
sering menemukan satu sidebar saja, oleh karena itu disebut 2-column template
(Main dan sidebar). Tapi sebenarnya mudah menambahkan banyak kolom sidebar.
Yang paling banyak setelah satu sidebar adalah 2 sidebar atau 3-column template.
Kita akan belajar itu nanti. Setelah mempelajari rangkaian tutorial ini, pertama kita
pahami dulu struktur template, nanti akan terasa mudah menambahkan maupun
memindahkan sidebar ke bagian kiri atau kanan main block.
8. Blog Post: block ini memuat isi terpenting- Judul posting, post, Post author, label,
dll.
Mari kita pelajari dulu dari blok yang paling besar sampai pada blok terkecil:
Satu cara lain untuk melihat struktur ini adalah dengan melihat bagian hierarkis. Dimulai
dengan kotak terbesar kemudian kotak-kotak di dalamnya, strukturnya terlihat seperti
bagian di bawah ini :
Body
Outer-wrapper
Header-wrapper
Blog Title
Blog Description
Other widgets
Content-wrapper
Sidebar-wrapper (1,2,3...)
Main-wrapper
Date Header
Posts
Post Title
Post Content (or called Post Body)
Post Footer (Author, Labels, etc)
Comments
Feed Link
Other widgets (mostly ad units)
Footer-wrapper
Footer text (disclaimer, copyrights, etc)
Other widgets
Semoga Manfaat.
Page
http://blogspotpemula.blogspot.com/2012/01/mengenal-struktur-dasar-template.html
BAB 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, masingmasing 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.
Page
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>
<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 {/* disini nanti kode css untuk header wrapper */}
/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
#sidebar1 { kode css untuk block sidebar1}
#sidebar2 { kode css untuk block sidebar2}
/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper { css untuk main wrapper dan posting}
/* Awal kode css untuk footer wrapper
======================================================== */
#footer { kode css untuk footer wrapper}
]]></b:skin> 
Page
<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>


</head>
- 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 #headerwrapper { }

<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.
Page
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 >>
Bab 2
Outer Wrapper
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;}
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;}
Page
/* 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.
Page
Selanjutnya ke tutorial bagian 3 Header >>
Bab 3
Header
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 a {
Page
#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:2px 2px 2px #fff;
text-transform:uppercase;
letter-spacing:.2em;
}
10
#header {
margin: 5px;
text-align: left;
color:#FFF;
}
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
Page
11
Bersambung ke bagian 4 Sidebar Wrapper >>
Bab 3
Block Sidebar
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;
}
Page
.sidebar ul {
list-style:none;
margin:0;
padding:0;
12
.sidebar {
font-color:#151515;
margin: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.
Page
13
Selanjutnya Bagian 5 Main Wrapper >>
Bab 5
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;
}
Page
.post h3 {
font-size:22px;
font-weight:normal;
margin:0px;
14
.post {
overflow:hidden;
float:left;
}
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;lineheight: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;
}
Page
#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;
15
#comments h4 {font-size:14px;padding:5px;}
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.
Page
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-
16
Sekarang template sudah bisa dilihat bentuknya dan sudah bisa digunakan untuk posting,
pasang widget, masih kurang satu langkah lagi template sempurna yaitu Footer Wrapper.
pindah.
Selanjutnya Bagian 6 Footer Wrapper >> Menunggu.....
Bab 6
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 {
}
Page
/* 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>
17
3. Kemudian ganti dengan kode CSS berikut :
</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.
Semangat dan salam blogger.
Source : Usup Blogspot
Edited and published by : Kerah Ledrek
Page
18
**********

Tutorial Membuat Template Blogger

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tutorial Membuat Template Blogger

Diunggah oleh

Hak Cipta:

Format Tersedia

Struktur Dasar Template Blogspot

lainnya (untuk blogspot menggunakan platform HTML/XML), jika tidak memiliki

2. Head : <head> </head>

3. Body : <body> </body>

Mengenal Struktur Dasar Template Blogspot

<?xml version="1.0" encoding="UTF-8" ?>

<div id='header-wrapper'> memiliki pasangan pada kode CSS yaitu #headerwrapper { }

Selanjutnya ke tutorial bagian 3 Header >>

Bersambung ke bagian 4 Sidebar Wrapper >>

Selanjutnya Bagian 5 Main Wrapper >>

Selanjutnya Bagian 6 Footer Wrapper >> Menunggu.....

/* AWAL KODE UNTUK FOOTER

3. Kemudian ganti dengan kode CSS berikut :

Anda mungkin juga menyukai