TUTORIAL DASAR

TEMPLATE BLOGGER












By : Desak Putu Okta Veanti
Site : http://kamuspengetahuan.blogspot.com
Translate from : http://www.ourbloggertemplate.com

ATURAN MAIN



















E-book ini disusun dan menjadi hak milik Desak Putu Okta Veanti. Anda
tidak diperkenankan untuk mengubah, mengambil, atau menjual sebagian atau
keseluruhan dari isi yang terkandung dalam buku ini.
Anda diperkenankan untuk membagikan e-book ini secara gratis kepada siapa
saja secara cuma-cuma, dengan catatan tidak melakukan modifikasi sebagian
atau keseluruhan dari isi e-book ini.
Pemilik




Desak Putu Okta Veanti
http://kamuspengetahuan.blogspot.com

O'chan nemu tutorial cara membuat template di suatu blog. sayangnya blog itu
berbahasa inggris, jadi ochan coba translate ke bahasa indonesia agar gampang
dipelajari.

STRUKTUR BLOGGER TEMPLATE

Sebelum mendesign template, kita harus punya ide bagaimana struktur dasar
dari template tersebut. Pada umumnya, struktur dari beberapa template tidak
persis sama. Tapi, dengan mengenal struktur dasar, kita dapat dengan mudah
mendapatkan ide bagaimana mengembangkan template kita yang sekarang,
mendesain template, dan bagaimana mengubahnya sehingga memiliki struktur
yang berbeda.

beberapa bagian struktur template jelas terlihat dari kebanyakan blog yang kita
lihat. Contohnya : header, footer, dan bagian posting. Tapi ada beberapa bagian
lain yang (bisa disebut block atau containers berikutnya) yang tidak terlihat di
layar monitor, tapi bagian penting HTML untuk membangun template agar
praktis dan benar kerjanya.

Untuk memulai kita lihat dulu struktur dasar template di bawah ini,
kebanyakan template memiliki struktur seperti ini :




Kita pelajari dulu dari blok yang paling besar sampai blok terkecil:

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.

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
Pertama-tama kita pahami dulu struktur dasar ini, akan lebih mudah untuk
mulai belajar tentang structure kode blogger template. Belajar struktur kode
tidak hanya belajar HTML or CSS, tapi lebih banyak tentang bagaimana
mengorganisasi template code, yang sangat seperti bagaimana mengorganisasi
kotak-kotak ini. Sangat mengejutkan jika ternyata meskipun dengan
pengetahuan kecil dalam pemrograman, kita bisa menyesuaikan menyesuaikan
template dengan baik dengan memahami struktur dasar dan beberapa bahasa
CSS.

STRUKTUR BLOGGER TEMPLATE CODE

Inilah penampakan struktur blogger template, ini adalah cara paling sederhana
untuk melihatnya (sebenernya ribet sih. Hehehe). Banyak template yang struktur
kodenya seperti ini. Gambar di bawah ini menunjukkan cara membagi bagian
kode menjadi tiga bagian dan memperlihatkan baris atas saja dari setiap bagian
sehingga kita bisa melihat dari baris pertama dan selanjutnya.





Bagian 1: Header dari kode. Pada dasarnya bagian ini mengandung informasi
penting tentang template kode dan judul dari blog. Tapi, yang terpenting, kita
tidak perlu kawatir tentang apapun di bagian ini. Sudah ada header standard
untuk semua template. Kita cuma perlu menambahkan beberapa kode saat
menyisipkan meta tag (informasi tambahan untuk SEO).

Bagian 2: Ini adalah CSS Styling Section. CSS singkatan dari Cascading Style
Sheets, bahasa pemrograman web yang digunakan untuk mengatur style
(desain) dari HTML dokumen. Inilah bagian yang harus paling dipahami untuk
memodifikasi template kita sekarang atau membuat template baru. Meskipun ini
merupakan kode pemrograman web, kita masih bisa melakukan banyak hal
pada template kita jika mengerti struktur dari bagian ini tanpa perlu banyak
tahu tentang HTML dan CSS. Kita akan membahas bagian ini nanti di tutorial
berikutnya.

Bagian 3 : Ini adalah Body (badan) atau data dari kode- bagian paling penting
yang mengambil semua content dari blogger database dan meletakkannya di
bagian yang benar ke dalam blog ketika seseorang melihat blog kita.Ini juga
bagian yang memberitahu blog bagian mana yang muncul duluan- header,
sidebar, Main, Post, Footer, dll. Tapi bagian ini tidak mengatur tampilan blog
dan bagaimana kelihatannya di internet(karena bagian CSS-lah yang punya
peran di sini).

Kita tidak perlu kawatir terlalu banyak tentang bagian ini juga, hanya seperti
tahap permulaan. Tapi kita harus tahu sedikit tentang bagian ini jika ingin
menambahkan extra widget yang tidak bisa dilakukan dengan menggunakan
tombol add page element, seperti tombol social bookmarking-Digg, AddThis,
RSS button, atau jika ingin meletakkan adsense kode di tempat special seperti
pada bagian post, atau meletakkan google Analitics code untuk menarik visitor
ke blog kita, dan lebih banyak lagi. Saat ini sudah banyak instruksi mudah untuk
membantu kita menyisipkan semua di atas. Jadi tidak usah terlalu kawatir
dengan bagian ini.
STRUKTUR DARI BAGIAN CSS STYLE

Di tutorial ini akan diperlihatkan struktur dari CSS Styling Section, yang
merupakan bagian ke 2 dalam struktur blogger template code. Sekali lagi, tidak
semua template memiliki struktur yang sama. Itu tergantung style pribadi dari
desainernya. Tapi saya menemukan struktur yang memperlihatkan struktur
yang sangat logis dan banyak memudahkan ketika coding, debugging, dan
customizing template. Sekali lagi, Jika kita bisa mengerti tutorial ini, nanti kita
bisa mengubah desain dan struktur dengan cara yang kita mau. Tapi pertama-
tama kita harus mengerti ini dan di bawah ini ada struktur yang sangat
sederhana untuk dimengerti dan digunakan.

Kita bagi CSS Styling Section menjadi 9 bagian yang lebih kecil. Untuk saat ini
kita akan mempelajari bagian-bagian ini secara umum. Kita akan
mempelajarinya lebih detail mengenai coding di dalam sub-bagian2 ini nanti di
rangkaian tutorial ini. Selalulah mengacu pada struktur blogger template code
untuk membantu kita memahami sub-bagian yang dijelaskan di sini.




Subsection 1 - Variable:

Sub-bagian ini mengandung deklarasi (pengenalan) dari font dan warna
variable yang muncul di bagian Font and Color tab dalam page Layout.
Contohnya Text color atau text font variable yang bisa kita pilih dan ubah
menggunakan font and colors tab. Di dalam template-template yang dibuat
ourbloggertemplate.com, ditambahkan banyak variable (mendekati 40+)
disesuaikan dengan beberapa standard blogger template untuk memudahkan
kita mengatur banyak hal dalam template.


Subsection 2 - Global:

Bagian ini berisikan kode untuk mengontrol Layout dan tampilan umum. Jika
kita melihat kotak hijau d atas, kita akan melihat "body {.....}". ini berarti setiap
kode berada di dalam "{.....}" akan mengontrol property umum (size, layout, dan
tampilan) dari badan template (body/semua yang terlihat di layar komputer).
Sebagai contoh, bagian ini mengontrol lebar dari template dan warna latar
belakang atau gambar. Tapi ini tidak mengatur property detail dalam body
container, contohnya, jika ini mendeklarasikan text font kemudian dalam sub-
bagian memasang kembali property yang sama, property yang diatur dalam
body container akan tidak diperlihatkan atau dibatalkan.

Dalam sub-bagian, kita juga menemukan bagian besar yang penting lainnya-
Outer-wrapper dan content-wrapper- sehingga sub-bagian ini tempat untuk
mengatur bagian-bagian ini.

Subsection 3 - Header:

bagian ini mengatur property di dalam bagian header wrapper. Yang paling
umum adalah Blog Title dan Blog Description. Pada kebanyakan template di
ourblogspottemplate, sudah ditambahkan extra objek pada Header wrapper-
yakni Linkbar (Menubar Horisontal). Biasanya, kita tidak bisa menambah objek
pada header karena tidak bisa menggunakan tab Add Page Element. Untuk
menambahkan linkbar, kita bisa mengubah bagian ke 3 dari template code
struktur ( bagian data). Selain itu Ada juga yang menambahkan Google Search
Bar. Idealnya, kita bisa menambahkan apapun yang kita inginkan jika tahu
bagaimana caranya menggunakan bagian ketiga ini. Ini akan kita lakukan nanti.


Subsection 4 - Main:

Bagian ini mengatur segala property (ukuran, Layout, dan tampilan) dalam
Main Wrapper, antara lain- Date Header, Posting, Comment, feed link, dan
beberapa widget yang kita tarik ke bagian Main menggunakan tab add page
element.

Subsection 5 - Sidebar:

Bagian ini mengatur property dari segala sesuatu dalam Sidebar-wrapper,
contohnya label, Blog Archieve, adsense, links, dll. Tapi ini tidak mengatur
berapa banyak sidebar yang kita punya atau lokasinya di blog (contoh: template
Sidebar-main-sidebar atau main-sidebar-sidebar). Bagian yang mengatur hal itu
adalah bagian tiga dari struktur blogger template code - yaitu Data Section.

Subsection 6 - Miscellaneous:

Bagian ini mengatur property dari elemen-elemen tambahan yang tidak diatur
oleh bagian-bagian di atas. Elemen tersenut antara lain Profile (about me),
Blockquote, dan kode. Ini berarti jika ingin mengubah warna quoted text atau
font dari nama panggilan di profile, bagian inilah yang perlu diubah.





Subsection 7 - Post-Footer:

Dalam template umum, bagian ini mengatur 3 hal:
1. Post-Footer text di bawah post body. Ini bagian yang berisikan Informasi
tentang posting, atau text yang berkata "Posted by YourNickname, Labels: ....., 5
Comments, dll.
2. Blog-Pager Link di bawah posting yang berkata "Newer Posts, Home, atau
Older Posts".
3. Feed-Link link yang bilang "Subscribe to: Posts (Atom)".

Subsection 8 - Comment:

Bagian ini mengatur property dari bagian Comment di dalam blog.

Subsection 9 - Footer:

Bagian ini mengatur property dalam bagian footer. Pada umumnya, bagian
footer berisikan beberapa text yang menjelaskan kepemilikan atau copyright dari
blog. Dalam beberapa blog, mereka juga meletakkan bagian extra seperti :
Recent Posts atau Popular Posts dalam 2 kolom atau lebih. Pada dasarnya, kita
bisa meletakkan apapun dalam footer seperti dalam sidebar. Tapi jika kita ingin
menambahkan lebih dari 1 kolom di bagian footer, kita harus merombak bagian
ketiga dari struktur blogger template code
MENGATUR PROPERTI DARI CONTAINER

Dalam tutorial ini, kita akan belajar dasar dari kode apa saja yang mengatur
property dari kotak (selanjutnya sebut saja container). Untuk membuat
semuanya lebih sederhana, kita akan melihat 2 container saja, yaitu main dan
post. Jika kita mengerti dua ini otomatis kita juga bisa mengerti yang lain karena
kodenya mirip bahkan hampir sama.

Ini contoh kode keduanya :

#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}




#main and .post adalah judul dari setiap container. Setiap kode container harus
ditulis dalam {}. Untuk penjelasan di bawah ini, kita akan focus pada kode
dalam container post, terutama untuk penjelasan tentang margin dan padding (
kode yang berwarna merah)
Margin mengatur jarak antara garis luar container ke garis dari container
induk yang di luarnya (lebih besar). Ada 4 angka yang didefinisikan pada
margin property. Pertama, margin atas (top margin), kedua margin kanan(right
margin), tiga margin bawah (bottom margin), dan yang terakhir margin kiri (left
margin). Ini diatur dengan berdasar pada arah putar jarum jam yang dimulai
dari atas. Dalam kasus di atas, container induk dari container post adalah
container main. Lihat bagaimana garis putus-putus pada bagian biru (post)
ditempatkan di dalam bagian hijau (main), mengikuti post margin command
(pengaturan margin di atas). Jika semua margin diatur menjadi nol, post
container ukurannya akan sama seperti main container. Pahami bahwa margin
adalah perintah yang memindahkan garis tepi menjauhi garis tepi induk. Hal
lain, margin bisa memiliki nilai negative, dimana berarti itu menggeser keluar
garis tepi induk dan tumpang tindih (tidak jauh dari itu)

Padding mengatur jarak antara garis tepi container ke container anakan
(lebih kecil) di dalamnya. Contoh kasusnya adalah bagian post container dan
post body. Keempat angka itu mengatur padding searah jarum jam juga seperti
property margin. Kita bisa lihat bagaimana padding menempatkan post body di
dalam post container. Geraknya menjauhi garis putus2. Tidak seperti margin,
padding adalah perintah yang memindahkan tepi container anakan menjauhi
garis tepinya. Nilai padding tidak mungkin negative.

Min-width and Max-width Mengatur lebar container. Sebenarnya cukup
menuliskannya width=400px (hanya contoh), tapi ada yang punya kebiasaan
untuk mengatur lebar seketat mungkin, karena jika ukuran tersebut tidak
dikoding dengan ketat, lebar container mungkin membesar dan mengecil
dengan bebas dalam situasi tertentu dan browser yang berbeda. Jadi dengan
mengatur lebar dengan ketat, tampilan template akan terlihat sangat pas seperti
yang diinginkan pada setiap browser (Jadi dengan mengatur secara ketat,
tampilan blog di setiap browser pasti akan sama. Jika sempat melihat template2
baru di ourblogger.com, Template-template itu diatur secara berlebihan,
didefinisikan di dalam main wrapper lalu didefenisikan juga di main container
padahal sangat sama. Dengan melakukan itu kita akan menyelesaikan beberapa
aligment bug yang terlihat (meskipun sampai sekarang belum bisa dimengerti
mengapa hal itu bisa menyelesaikan masalahnya.

Background mengatur warna latar belakang kotak. Pengaturan ini
menggunakan warna dengan kode hexadecimal. Lihat di sini untuk mengetahui
semua kode warna. Kita juga bisa menambahkan latar belakang gambar yang
mengulangi dirinya sendiri untuk melapisi semua bagian container. Caranya
melakukan ini adalah mengarahkan url gambar. Untuk detailnya, lihat tutorial
dari W3Schools. Kita juga bisa mengatur nilai dari $samplevariable, dimana
variable ini bisa didefenisikan pada subsection 1 dalam Struktur Style CSS..
Color mengatur warna text menggunakan code warna hexadecimal, atau
variable yang sudah didefenisikan sebelumnya di Subsection 1.
Font mengatur text font. Kita masih bisa menggunakan variable yang diatur
pada subsection 1. Lihat W3Schools untuk lebih detail.
Text-align Mengatur text alignment. Ada 3 option, yaitu left, center, dan
right.

Line-height Mengatur jarak atau tinggi garis

Tutorial ini memberikan informasi dasar untuk beberapa kode blogger template.
Tutorial ini sudah mengungkapkan pengertian dasar dari margin dan padding.
Detailnya bisa dilihat di w3Schools CSS Tutorial Sebagai sumber yang cukup
dipercaya
CONTAINER DAN ELEMEN UMUM DALAM BLOGGER
TEMPLATE

Inilah daftar dari container dan elemen umum dalam blogger template dan
fungsi-fungsi mereka (elemen adalah dasar dari setiap objek yang membuat blog
berfungsi dan container adalah elemen besar yang mengandung elemen lebih
kecil atau content lain).

elemen elemen umum di bawah ini yang akan diperlihatkan tidak elemen yang
semestinya ada atau harus ada di dalam blogger template, tapi hanya beberapa
elemen umum yang mengontrol bagian terbesar dari template style. Dengan
mengetahui ini, akan memudahkan kita untuk mengetahui dimana melihat kode
itu dan bagaimana menyesuaikan dengan elemen baru lainnya yang mungkin
kita temukan di blogger template yang lain.

Aku tidak akan mendaftar semua elemen, tapi hanya elemen yang cukup
sehingga kita bisa mendapat ide dan bisa mengerti semua elemen lain dalam
template kita sendiri. Tutorial ini akan merefer kepada gambar dari CSS Styling
Section di bawah ini agar lebih mudah untuk diikuti.



Simbol pagar (#) dan titik (.) memperlihatkan atribut dari elemen ( klasifikasi
singkat dari tipe elemen). Tapi kita tidak perlu terlalu mengkhawatirkan itu. Jika
ingin tahu lebih banyak, silahkan lihat tutorial dari W3Schools .

Global:

body {.....} Properti umum dari template secara keseluruhan.
#outer-wrapper {.....} Permulaan dan container terbesar dari semua content
template. Di dalam sini ada header-wrapper, content-wrapper, dan footer-
wrapper.
#content-wrapper {.....} Wrapper yang mengandung sidebars dan main
containers.
a {.....} Ini mengatur semua property dari link text (hyperlink)
a:visited {.....} Ini mengatur semua property link yang sudah
dikunjungi(visited link text).
a:hover {.....} ini mengatur property semua link text ketika panah mouse
menunjuknya.

Karena semua code elemen harus ditulis dalam {}, kita akan menulis judul
elemen setelah ini.

Header:

#header-wrapper - container yang membelit Blog Title dan Blog Description.
#header container di dalam header-wrapper.
#header h1 tag di dalam container ini mengatur tampilan dan layout dari
Blog Title.
#header h1 a mengatur property Blog Title sebagai link text.
#header .description property Blog Description.
#header a img mengatur property dari gambar di dalam header





Main:

#main-wrapper container yang membelit Date Header, Blog Posts,
Comments, Feed Link, dan beberapa widget yang ditempatkan di atas atau di
bawah Blog Posts.
#main container di dalam main-wrapper.
#main .widget mengatur property dari semua widget di main container.
h2.date-header mengatur property dari Date Header (di atas Post Title).
.post mengatur Blog Posts container.
.post h3 mengatur property dari Post Title.
.post-body p mengatur property dari body atau content
.post ul mengatur property dari unordered list (daftar yang tidak bernomor).
.post ol mengatur property dari ordered list (daftar bernomor).
.post li mengatur property dari daftar sendiri di unordered list atau ordered
list.
a img mengatur property umum dari gambar (refer link dan gambar itu
sendiri dengan linknya).

Sidebar:

.sidebar-wrapper container yang membelit semua elemen dan content
sidebar.
.sidebar container di dalam sidebar-wrapper.
#sidebar1 mengatur property sidebar1.
#sidebar2 mengatur property dalam sidebar2. Jika ingin membuat property
sidebar1 dan sidebar2 sama, kita hanya perlu .sidebar dan tidak harus
menuliskan #sidebar1 dan #sidebar2 dalam CSS code.
.sidebar .widget mengatur property dari semua widget (add Page Element)
dalam sidebar.
#sidebar1 .widget hanya mengatur widget dalam sidebar1.
.sidebar .BlogArchive mengatur property Blog Archive. Tekniknya sih ini
sidebar juga, tapi aku tidak yakin mengapa pengaturan property untuk sidebar
widget tidak mengubah property Blog Archive. Itulah mngapa kita harus
menuliskan perintah untuk mengatur property BlogArchive.
.sidebar h2 mengatur property judul sidebar widget.
.sidebar #BlogArchive1 h2 mengatur judul Blog Archive.

Miscellaneous:

tekniknya, profile (about Me) diletakkan did alam sidebar, tapi sering
ditempatkan dalam Miscellaneous section karena ada elemen-elemen yang
lebih kecil bersamaan dengan Profile container dan meletakkannya dalam
Miscellaneous.
#Profile1 mengatur property umum About Me.
#Profile1 h2 mengatur title/header dari the About Me.
.profile-img a img mengatur gambar dari About Me.
.profile-textblock mengatur descripsi author About Me.
.profile-data mengatur author data About Me.
.profile-datablock mengatur semua blok dalam About Me.
blockquote - mengatur quoted text dalam postingan.
code mengatur text di dalam tag code dalam postingan.



Post-Footer:

.post-footer mengatur property keseluruhan post-footer.
.post-footer-line mengatur property setiap baris baru dalam post-footer.
.post-footer a mengatur property link text dalam post-footer.
.post-footer .post-comment-link a mengatur "comment" link dalam post-
footer.
#blog-pager mengatur property "newer posts", "home", dan "older posts"
link.
#blog-pager-newer-link mengatur property dari "newer posts" link.
#blog-pager-older-link mengatur property dari "older posts" link.
.feed-links mengatur "Subscribe to: Posts (Atom)" link.

Comment:

#comments mengatur property keseluruhan comment container.
#comments a - mengatur property link text dalam comment container.
#comments h4 mengatur header comment container.
.deleted-comment mengatur property deleted comment.
.comment-author mengatur property comment author.
.comment-body p - mengatur property comment body.
#comments ul - mengatur unordered list di dalam comment container.
#comments li mengatur individual list di dalam comment container.

Footer:

#footer-wrapper bagian yang membelit keseluruhan elemen dan content di
dalam footer section.
#footer container dalam footer-wrapper.
#footer h2 mengatur property footer title/header.
#footer .widget - mengatur footer widget properties.
.footer a mengatur semua footer link text.

Sekarang kita tahu semua elemen dan container ini, kita akan bisa melihat
dimana meletakkan template kode saat mengubah beberapa hal tentang (fonts,
text colors, background colors, padding, dll). Yang harus dilakukan setelah ini
hanya sedikit memodifikasi kode di dalam {.....} untuk elemen tersebut.
MENGGUNAKAN TEMPLATE YANG SUDAH JADI

Tutorial kali ini akan menjelaskan bagaimana caranya memanfaatkan Generic
Blogger Template untuk latihan dalam tweaking (mengubah setting dengan
menambahkan, mengurangi maupun memodifikasi) kode dan memodifikasi
template. Tujuan utama kita adalah untuk tahu bagaimana mendesain template
kita sendiri, tapi dengan mengetahui bagaimana memodifikasi template terlebih
dahulu (dan mendapatkan feeling bagimana template bereaksi pada modifikasi
kode) adalah step yang sangat penting yang kita perlukan sebelum memulai
mendesain template kita sendiri.

Mengubah template tidak semudah seperti mengubah atau menambahkan
beberapa kode, menekan tombol View Blog dan berpikir kalau segalanya
berjalan seperti yang kita inginkan. Dalam banyak kesempatan kamu akan
melihat banyak hal akan berbeda dari apa yang kita perkirakan. Khususnya jika
kamu bukanlah web programmer. Aku sendiri perlu bolak-balik membuka
halaman Edit HTML lalu menekan halaman "View Blog" berulang-ulang kali
sebelum aku mendapatkan apa yang aku inginkan.
Jadi, yang paling baik untuk dilakukan adalah benar-benar bereksperimen
dengan prilaku dari template kode, lihat bagaimana mereka membuat template
berubah, dan akhirnya mengerti (lebih kurang) mengapa mereka mengubah
jalan yang mereka ubah: dengan mudah letakkan-jadilah bagian dari kode.

Untuk membuatnya lebih mudah, kita bisa mendownload Generic Blogger
Template dari ourbloggertemplate dan bermain dengan benda ini. Sebenarnya
itu adalah template yang jelek, tapi perbedaan warna container akan menolong
kita mengetahui bagaimana template itu dapat berubah. Pertama-tama yang
harus dilakukan adalah membuat blog percobaan menggunakan blogger
account. Lalu upload Generic Blogger Template ke dalam blog percobaan
barusan. Letakkan beberapa posting yang banyak berisi text, gambar, dan
tambahkan beberapa widget juga, jadi dengan begitu kita bisa melihat effect
yang lebih nyata.

Tahap berikutnya hanya tinggal bermain dengan kode-kode di dalamnya. Paling
baik jika dilakukan satu per satu. Katakanlah pilih satu container, mungkin
header wrapper, dan ubah beberapa kode perintah untuk container itu. Lalu
lihat template baru dan lihat apakah perubahan yang terjadi sesuai dengan yang
kamu perkirakan. Sebagai permulaan, coba untuk bermain dengan padding dan
margin (bermain dengan color, font, atau beberapa appearance-setting tidak
lebih menantang dibandingkan bermain dengan perintah layout-setting. Jangan
bermain dulu dengan perintah pengaturan ukuran (size-setting) seperti lebar
container karena ini akan melibatkan container lain dan juga bisa membuat
sangat kacau. Kita akan melakukannya nanti. Setelah yakin pada satu container,
cobalah satu container lainnya atau beberapa sekaligus.

Dalam waktu singkat, kamu akan yakin dengan Generic Blogger Template dan
nantinya kamu bisa memulai tweaking kode blogger templatemu sendiri. Pada
poin ini, dapat dikatakan kalau semuanya hanyalah untuk mengetahui cara
tweaking kode. Tapi kamua akan cukup tahu untuk melakukan makeover pada
template anda dan mulai belajar hal baru dan mengatasi masalah baru pada
template anda sendiri. Kuncinya di sisni adalah koding skill akan tumbuh
selaras dengan waktu. Semoga kode berpihak pada anda.
MENGATUR UKURAN TEMPLATE

Mengatur ukuran template mungkin adalah hal pertama yang perlu dilakukan
ketika mulai mendesain template baru. Ada dua cara untuk mengatur ukuran
(pada dasarnya lebar) template.

1. Mengatur ukuran template dengan fixed width (ukuran tetap) lebar tertentu,
bilang saja 800 pixels.
2. Mengatur ukuran template dengan fluid size, lebar template berubah sesuai
dengan browser atau screen size

Untuk mengatur lebar template, kita sebenarnya harus mengatur lebar dari
sedikit container besar. Container yang paling umum diatur lebarnya adalah :

1. Body
2. Outer-wrapper
3. Header-wrapper
4. Content-wrapper
5. Footer-wrapper
6. Main-wrapper
7. Sidebar-wrapper*
8. Footer-wrapper

*Note: Kita juga bisa hanya mengatur lebar dari sidebar1 dan sidebar2 tanpa
mengatur lebar sidebar-wrapper. Mengatur sidebar-wrapper akan baik jika
kedua sidebar memiliki lebar yang sama.

Dalam template-template terbaru ourblogger.com, desainernya juga mengatur
lebar container yang hanya di dalam beberapa wrapper container (cukup
mubasir) untuk menghindari beberapa alignment bugs kecil yang mungkin
muncul. Lebar container ini diatur sama seperti lebar dari container induknya.
Container itu antara lain :

1. Header
2. Main


Ini adalah contoh kode dari Generic Blogger Template yang memperlihatkan
semua lebar container yang diatur untuk meyakinkan lebar template benar-
benar diatur (hanya lebar yang tepat yang ditampilkan). Dalam contoh ini, lebar
template adalah 800 pixel.

body {
min-width: 800px; }

#outer-wrapper {
margin: 0 auto; /* to make the template lays in the screen center */
min-width: 800px;
max-width: 800px; }

#content-wrapper {
min-width: 800px;
max-width: 800px; }

#header-wrapper {
min-width: 800px;
max-width: 800px; }

#main-wrapper {
min-width: 400px;
max-width: 400px; }

.sidebar {
padding: 10px 10px 10px 10px;
min-width: 180px;
max-width: 180px; }

#sidebar1 {.....}
#sidebar2 {.....}

#footer-wrapper {
min-width: 800px;
max-width: 800px; }



body diatur dengan perintah min-width = 800px, yang berarti bahwa lebar
terkecil haruslah 800px. Jika diatur dengan perintah width = 800px saja, lebar
template bisa saja berubah tergantung situasi. Mengatur min-width memberikan
jaminan ukuran terkecil itu akan digunakan.

Container selanjutnya adalah container di dalam outer-wrapper. Kebanyakan
hanya mengaturnya dengan perintah width = 800px saja. Tapi seperti yang
dijelaskan sebelumnya, kita sebaiknya mengatur ukuran ini dengan ketat untuk
menghindari, akan lebih baik jika mengatur container dengan min-width dan
max-width dari nilai sehingga ukuran container benar-benar mengikuti ukuran
tersebut- tidak akan berubah atau membesar atau melebar ke besaran yang lain.
Hal lain mengenai outer-wrapper, ini adalah tempat dimana kita mengatur
perintah untuk bagian lain dari template agar menempatkan diri di tengah-
tengah layer atau rata kiri dari outer-wrapper ini. Dalam kasus ini, margin: 0
auto akan menempatkan template di tengah-tengah. Hanya menuliskan margin:
0 akan menempatkannya rata kiri sebagai posisi utama.
Tiga container besar berikutnya, header-wrapper, content-wrapper, dan footer-
wrapper selalu diatur dalam ukuran yang sama, dalam kasus ini, 800px. Dalam
kasus lain, ketiganya dapat diatur lebih kecil dari lebar outer-wrapper tapi tidak
lebih besar, karena outer-wrapper 'membatasi' 3 container ini di dalamnya (kalau
dalamnya lebih besar, tidak akan terlihat di layar). Hal lain, jika kita
menambahkan border kanan, ini akan menambah lebar, dan akan memotong
apapun yang lebih besar darinya di bagian kanan. Jadi, jika kita mau
menambahkan border, sebut saja 2px di kiri dan 2px di kanan untuk header-
wrapper, kita harus mengatur lebar header-wrapper menjadi 796px sehingga
totalnya menjadi 796+2+2 = 800px. Hal yang sama berlaku pada container
lainnya.

Tiga container terakhir, yaitu 2 sidebar dan main-wrapper. Karena ketiganya
berdampingan, kita harus yakin lebar totalnya sesuai dengan header-wrapper
dan kawan-kawan dalam kasus ini lebar=800px atau kurang, tapi tidak boleh
lebih. Kembali mengacu pada kasus ini, kita bisa mengatur but main-wrapper
menjadi 400px dan dua sidebar yang ukurannya 200px. Tapi karena aq
menambahkan padding sebesar di kiri dan kanan setiap, yang mendorong
border sidebar keluar, kita harus mengurangi lebar sidebar menjadi 180px
sehingga total lebar sesudah diberi padding menjadi 200px. Kita harus mencatat
bahwa container sidebar terbesar adalah sidebar-wrapper (tidak hanya sidebar).
Kita bisa mengatur lebar dari sidebar-wrapper selain sidebar, Tapi aku lebih
suka mengatur lebar sidebar karena aku mungkin akan mengatur 2 sidebar yang
memiliki lebar berbeda. Tapi ini hanya tergantung pada selera individu, desainer
template yang lain mungkin punya cara-lain untuk mengatur lebar sidebar.
Selama itu bekerja, tidak masalah.

Mengatur fluid template size:

Untuk mengatur lebar yang berubah sesuai browser dan ukuran layar, silahkan
melihat W3Schools Tutorials untuk lebih detail.
BAGIAN BODY DARI BLOGGER TEMPLATE KODE

Dalam tutorial ini kita akan membahas struktur dasar dari kode pada bagian
Body sehingga kita mendapatkan ide bagaimana itu bekerja dengan kode kita
yang lain. Kode ini terletak dalam Section 3 dari Blogger Template Code
Structure. Ini adalah bagian utama dari kode Blogger template yang menerima
data untuk ditampilkan ke dalam blog. Itu pada dasarnya bagian inti yang
membuat seluruh fungsi blog berfungsi dengan baik.Kode yang mengatur
bagaimana itu muncul di dalam blog adalah CSS Styling code.

Merefer kembali pada tutorial Blogger Template Code Structure, Body code
terletak dalam Section 3 seperti diperlihatkan dalam gambar di bawah ini



Di bawah ini ditampilkan Body code yang dicopy dari Blogger Edit HTML
tanpa mencentang 'Expand Widget Button'. Sebaiknya kita tidak memasukkan
dulu kode komplitnya, ada 2 alasan. Pertama, belum perlu melakukan hal ini.
Sebenarnya kita tidak perlu tahu apa yang terjadi di dalam kode lengkapnya
untuk mendesain blogger template yang berfungsi dengan baik. Semua itu akan
dilakukan secara otomatis oleh blogger, yang merupakan kelebihan new Blogger
template dibandingkan dengan yang klasik. Yang kedua, dengan melihat kode
yang lebih sederhana, kita akan meletakkan lebih mudah ide bagaimana semua
container dalam template berposisi.

<body>
<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Testpage Two (Header)
type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive
type='BlogArchive'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | Bordr'
type='Text'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->
</body>

Untuk lebih simple, abaikan kode yang berwarna abu-abu. Semua itu adalah
komentar atau kode statis yang membuat semua bekerja dengan baik yang tidak
perlu dirubah. Bagian inti dari kode bisa dipisahkan menjadi empat bagian.

1. Header (merah)
2. Main (hijau)
3. Sidebar (biru)
4. Footer (cokelat)

Kita akan lihat di atas adalah semua kode yang dibungkus dalam tag body,
diikuti oleh tag outer-wrapper, kemudian tag wrap2. wrapper-wrapper ini
digunakan untuk mengelompokkan container bersama sehingga semuanya bisa
diedit bersama. Menggunakan wrapper juga membuat tempat untuk container
jauh lebih mudah khususnya jika kita akan membuat sidebar tambahan atau
container extra. (seperti linkbar container). Dalam penjelasan di bawah ini, aku
hanya mengacu pada outer-wrapper sebagai wrapper yang lebih besar tanpa
mengacu pada semua wrap2 wrapper. Semuanya sama (aku sampai sekarang
belum benar2 mengerti kenapa wrap2 ada di tempat pertama).

Di dalam kontainer besar ini, kita akan melihat 3 wrapper - header-wrapper,
content-wrapper, dan footer-wrapper. Mereka diposisikan secara vertikal
dengan header-wrapper ditempatkan paling atas, footer-wrapper paling bawah.
Sangat mudah karena header-wrapper disebutkan paling pertama , diikuti
content-wrapper, dan terakhir footer-wrapper. Dalam point ini, kita tidak harus
tahu apa yang ada di dalam content-wrapper. Itu membuat jauh lebih bersih dan
lebih mudah untuk menghindari kekacauan content-wrapper dan bekerjasama
dengan main-wrapper dan sidebar-wrapper bersamaan sekaligus. Itu bisa
menjadi kekacauan besar.

karena outer-wrapper adalah wrapper terbesar, kita harus yakin bahwa lebar
semua wrapper lainnya di dalamnya kurang atau sama dengan lebar outer-
wrapper. Tapi, jika kita menambahkan border, itu akan menambah extra pixels
untuk semua wrapper yang juga kita tambahkan border. Jadi hati-hati
menambahkan border.

menambahkan wrapper baru (container) di dalamnya di antara wrapper ini
mudah. Hanya paste dalam wrapper code (lihat di bawah ini sebagai contoh)
dan rename dengan nama baru, sebut saja banner-wrapper. Kode preferred='yes'
akan membuat tombol 'Add Page Element' yang membolehkan kita membuat
widget baru.

<div id='banner-wrapper'>
<b:section class='banner' id='banner' preferred='yes'>
</b:section>
</div>

Menambahkan wrapper hanya membuat container baru, atau kotak di dalam
blog. Itu tidak mengatur bagaimana itu terlihat atau dimana akan diletakkan.
Untuk customize bagaimana itu terlihat dan diletakkan di dalam blog, kita
BUTUH mengedit kode CSS.

Di dalam content-wrapper, kita punya main-wrapper dan sidebar-wrapper.
Untuk meletakkan dua wrapper ini side-by-side seperti kebanyakan blog, kita
harus mengatur lebar 2 wrapper ini yang jumlahnya kurang atau sama seperti
content-wrapper. Ditambah lagi, kita harus menambahkan beberapa perintah di
dalam CSS Styling code sehingga mereka dapat ditempatkan berdampingan. Di
lain pihak, mereka hanya akan bertumpuk secara vertical di atas yang lainnya.
Biasanya, kita perlu menggunakan perintah 'float:left' untuk ini. Lihat beberapa
contoh template untuk mengecek lebih banyak tentang ini. Jika kamu ingin
menambah sidebar lagi, katakana saja 3-column template, kita dengan mudah
menambahkan sidebar-wrapper code (warna biru). Nanti lihat pada Tutorial 10
untuk mengetahui bagaimana menambah atau mengurangi atau menempatkan
sidebar..

Setelah kita memahami ide dasar di belakang kode body, mudah untuk melihat
mengapa struktur umum Blogger template kode terlihat seperti ini (lihat di
bawah ini untuk contoh 3-kolom template). Jika kita ingin menambahkan ulang
atau kontainer atau wrapper, apa yang harus kita lakukan adalah untuk
mengubah body dari kode. Semudah itu! Tetapi kemudian, kita harus tweak
dengan kode CSS untuk mengatur bagaimana itu terlihat dalam blog.


PENJELASAN LEBIH LANJUT MENGENAI BODY CODE

Dalam tutorial ini menjelaskan sedikit lagi tentang beberapa perintah khusus
yang kamu akan lihat dalam bagian Body. Di bawah ini contoh kodenya.

<body>

<div id='outer-wrapper'><div id='wrap2'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blog Title' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

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

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

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue' type='Text'/>
</b:section>
</div>

</div></div> <!-- end outer-wrapper -->

</body>

Secara default, setiap container harus dibungkus dengan tag div dan tag
b:section setiap div dan b:section diberi nama dengan mengidentifikasinya
dengan id. Lebih jauh lagi bisa diklasifikasikan dengan kelas menggunakan
perintah class pengidentifikasian dan klasifikasi ini berguna sebagai acuan ketika
kita ingin mempermaknya menggunakan CSS. Dalam CSS kode, perintah id
adalah mengacu pada penggunaan symbol command # (pagar) dan perintah
class mengacu pada penggunaan symbol . (titik). Contohnya, dalam CSS kode,
kita mungkin melihat #main-wrapper {...} atau .sidebar {...} yang merupakan
kode untuk mendandani main-wrapper dan sidebar. Kita bisa melihat lebih jauh
tentang ini dalam w3school.com.

Semua yang dibatasi di dalam b:section adalah widget (sering disebut Page
Element). Sebagai contoh, di dalam Header ada sebuah widget bernama
Header1. Note : widget ini mengandung kode maxwidgets='1'
showaddelement='no'. maxwidgets='1 berarti jumlah maximum widget di
dalam header-wrapper hanya 1 saja. Ini berarti kita tidak bisa menyeret Page
Element dan menempatkannya di bawah atau di atas Header. Kode
showaddelement='no' berarti tombol Add a Page Element tidak akan muncul di
dalam bagian Header

di dalam main-wrapper, kita hanya punya kode showaddelement='no' yang
berarti kita tidak akan memiliki tombol Add a Page Element di sana, tapi kita
masih bisa menyeret widget lain dan menempatkannya di atas atau di bawah
Blog Posts di dalam main-wrapper.

dalam sidebar-wrapper, kita punya kode preferred='yes' perintah ini akan
membuat tombol Add a Page Element untuk menambah widget. Ditambah lagi,
kita tidak dibatasi untuk sebanyak apapun widget yang kita tambahkan. Seperti
yang sudah kita ketahui, kita selalu bisa menyeret widget ke wrapper lainnya
selama bagian tersebut tidak membatasi jumlah widget yang ditampilkan dalam
wrapper tersebut.

Di dalam footer-wrapper, tidak ada kode yang mengikuti perintah id. Ini berarti
kita tidak akan memiliki tombol Add a Page Element tapi kita bisa drag widget
ke dalam bagian footer.
MEMBUAT 3 KOLOM TEMPLATE ATAU LEBIH

Salah satu kemampuan dasar yang paling diinginkan para pembuat blogger
template adalah membuat 3-column template. Ga asik kan kalo cuma satu
sidebar terus sementara di luar sana para pembuat blogger template yang lain
bahkan sudah punya empat atau lebih kolom. Tutorial kali ini adalah hal
langsung dan simple untuk melakukannya sendiri tanpa haru terlalu banyak
melakukan code tweaking.

Tutorial ini dipersiapkan dengan asumsi bahwa kamu sudah mengerti bagian di
dalam BELAJAR MEMBUAT BLOGGER TEMPLATE 8 dan BELAJAR
MEMBUAT BLOGGER TEMPLATE 9, yang menjelaskan kode dasar bagian
Body.

Apa yang akan kita lakukan adalah untuk mengubah atau menambahkan
sidebar dengan tweaking XML code secara langsung dari halaman Blogger Edit
HTML TANPA Mencentang Expand Widget Templates. Ini berarti bagian Body
yang ada di bawah tidak akan diperlihatkan semua algoritma detailnya untuk
widget dan post data. Itu akan membuat segalanya sesimpel mungkin

Menambahkan Sidebar Untuk membuat 3-column
Template:

Ketika kita scroll ke bawah pada bagian Body, penampakan kode body mungkin
akan mendekati contoh di bawah ini( note : mungkin berbeda pada template
lainnya).

Contoh template 2-column:
<div id='content-wrapper'>
<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>

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

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

Kode di atas memperlihatkan kode 2-column-template dengan wrapper yang
disebut content-wrapper yang berisikan main-wrapper (yang berisikan Blog
Posts) dan sidebar-wrapper.

Untuk membuat sidebar yang lain, apa yang perlu kita lakukan hanyalah masuk
ke halaman Edit HTML dan tanpa mencentang Expand Widget Templates ,
paste kode sidebar-wrapper (diperlihatkan dengan warna merah) sebelum atau
sesudah kode main-wrapper. Sebagai contoh, untuk membuat kolom Sidebar-
Main-Sidebar, letakkan kode tersebut sebelum kode main-wrapper. Melihat pada
contoh di bawah ini yang id dari sidebar-wrapper pertama adalah sidebar1 dan
id dari sidebar-wrapper kedua adalah sidebar2.
Note: Kamu juga harus memastikan lebar dari kedua Sidebars dan blok Main
akan pas di dalam content-wrapper dan CSS code ditulis dengan baik untuk
menempatkan Sidebars secara berdampingan dengan main-wrapper. Beberapa
kesalahan yang sering dilakukan adalah salah satu atau kedua Sidebars akan
bertumpuk di bawah blok Main.

Contoh template 3-column dengan posisi S-M-S :

<div id='content-wrapper'>

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

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

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

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

Mengubah lokasi sidebar :

Jika ingin mengubah lokasi sidebar untuk membuat 3-column template dengan
konfigurasi Main-Sidebar-Sidebar contohnya, apa yang kamu perlu dilakukan
untuk meletakkan sidebar-wrapper dimana kamu ingin dia terlihat.

Untuk melakukan ini, simplenya masuk ke Edit HTML tanpa mencentang tanda
Expand Widget Templates, cut kode sidebar-wrapper yang pertama dan paste
di anatara main-wrapper dan sidebar2 lihat contoh kode di bawah ini :

Contoh template 3-column dengan posisi M-S-S :

<div id='content-wrapper'>

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

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

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

Sekarang kamu sudah mengetahui dasar-dasar bagaimana menambahkan atau
mengubah posisi sidebar. Sangat mudah.
CARA MEMBUAT BACKGROUND GAMBAR PADA BLOGGER
TEMPLATE

Jika kita melihat template beberapa template - Kita akan melihat bahwa banyak
template menggunakan latar belakang bukan dari warna polos, melainkan
dibuat dari pola yang berulang dari suatu gambar. Gambar ini disebut gambar
latar belakang (background image). Bisa saja satu gambar besar mengisi atas
layar atau gambar kecil (sebut saja 50 x 50 piksel) yang berulang secara
horizontal dan / atau vertikal. Hal yang rapi tentang penggunaan, atau
embedding gambar latar belakang adalah bahwa kita dapat membuat gambar
apapun yang kita inginkan dan menggunakannya di blog kita untuk
membuatnya unik dan berbeda dari blog lainnya.

Gambar latar belakang dapat ditempatkan dalam container - baik di dalam
kontainer Body (yang mengisi seluruh atas layar), di dalam Post, Sidebar,
Comment,, atau bahkan di sebuah header container (sebut saja, Comment
Header). Misalnya, jika Kita melihat template ini, Kita akan melihat bahwa
Comment Header di bawah posting adalah tombol hijau bulat - foto yang
tertanam di dalam Comment Header.

Kita juga dapat menggunakan sebuah gambar untuk membuat bingkai
berbayang (sekarang cukup umum di blog). Untuk melakukannya, Kita
membuat gambar latar belakang singkat dengan panjang span yang memenuhi
seluruh lebar template. Di ujung kanan dan kiri dari gambar latar belakang, Kita
dapat membuat pola muram (atau pola yang akan dijadikan frame), dan
menambahkan ini di dalam outer-wrapper, lalu diulangi secara vertikal.

Tapi, bagaimana cara untuk menambahkan dan mengulang gambar secara
vertikal, horizontal, atau di kedua arah?

MENAMBAHKAN BACKGROUND GAMBAR :

katakan saja kalau kita akan menggunakan gambar berukuran 100 x 100 pixels
sebagai background gambar di dalam container image Sidebar1. apa yang perlu
dilakukan adalah menemukan kode sidebar1 {...} di dalam CSS Styling dan
menambahkan kode yang berwarna merah di bawah ini (kode lainnya hanya
contoh saja).

#sidebar1 {
margin: 0px 10px 15px 10px;
padding: 0 0 0 0;
width: 150px;
background: URL(http://the-url-of-your-image) repeat left top;
text-align: left;
}

kode "background:..." akan menampilkan gambar dari URL yang kita letakkan
dan repeat (mengulanginya) di kedua sisi, vertical dan horizontal. Lokasi
gambar pertama adalah di paling atas dan paling kiri. Kode umum untuk
memasukkan background gambar adalah :

background: URL(http://...) repeat-command x-position y-position;


SEMUA PERINTAH PENGULANGAN (REPEAT COMMAND) :

no-repeat (gambar tudak akan diulangi)
repeat (diulangi secara vertical dan horizontal)
repeat-x (hanya diulangi secara horizontal)
repeat-y (hanya diulangi secara vertikal)

SEMUA PERINTAH POSISI HORIZONTAL (X) :

left (meletakkan gambar pertama di sisi paling kiri)
center (meletakkan gambar di tengah-tengah)
right (meletakkan gambar pertama di sisi paling kanan)

SEMUA PERINTAH POSISI VERTIKAL (Y) :

top (meletakkan gambar pertama di posisi paling atas)
center (meletakkan gambar pertama di tengah-tengah)
bottom (meletakkan gambar pertama di posisi paling bawah)
MULAI MEMBUAT TEMPLATE KITA SENDIRI

Sekarang kita sudah membaca seluruh tutorial, kamu sudah siap untuk memulai
mendesain templatemu sendiri. Di dalam tutorial ini saya akan memperlihatkan
langkah-langkah penting yang harus dilakukan untuk membuat template secara
cepat dan mudah.

Hal pertama yang perlu dimengerti tentang pendesainan template adalah
teknik mendesain adalah unik dan berbeda-beda pada masing2 orang. Pada
akhirnya semua terserah padamu bagaimana kamu ingin melakukannya- jika
dan hanya jika kamu familiar dan pernah membuat beberapa template sendiri.
Tapi jika kamu adalah pemula, yang paling baik dilakukan adalah mengikuti
langkah-langkah di bawah ini, sehingga tidak menemui banyak kesulitan.

Step 1 Memilih template yang sudah dibuat sebagai permulaan:

Untuk pemula, cara tercepat dan termudah mulai mendesain template adalah
mulai dengan menggunakan template yang sudah jadi. Tapi jangan lakukan itu
dengan keinginan menconteknya (plagiarism)

Step 2 Mengatur jumlah dan lokasi sidebar:

Jika kamu adalah pemula, pastikan kamu memulai dengan template yang
mendekati pola template yang kamu inginkan. Contohnya, jika kamu ingin
membuat 3-column template, Jangan memulai dengan 2-column template yang
sudah jadi. Atau jika ingin mengubah dan menambahkan sidebar sendiri, baca
Tutorial 10: membuat 3-Column Template atau lebih ..

Step 3 Mengatur lebar template:

Hal pertama yang perlu dilakukan setelah memulai membuat template adalah
mengatur lebar dari template tersebut. Untuk melakukan ini, kita perlu
mengatur lebar dalam CSS Style code. Itu semua dijelaskan dalam Tutorial 7:
Mengatur ukuran Template. Container umum yang perlu diatur lebarnya adalah
:

body
outer-wrapper
content-wrapper
header-wrapper
main-wrapper
sidebar-wrapper (or sidebar1, sidebar2, and so on)
footer-wrapper
Kamu juga bisa mengatur lebar menjadi fluid width(berubah sesuai dengan
browser atau screen size) atau mengatur lebar secara fixed width. Catatn untuk
mengatur lebar di dalam container-wrapper bisa jadi sedikit menipu karena
kamu memiliki Main dan Sidebar containers di dalamnya. Jika lebar tidak diatur
dengan baik, Sidebars bisa menumpuk dengan Main container.

Step 4 Membangun Objects Percobaan:

jika kamu mendesain template baru, bagaimakah kamu mengetahui bahwa
kode-kodemu benar jika kamu melihat hasilnya?? Jadi, apa yang perlu dilakukan
adalah membangun object percobaan- contohnya 3 postingan atau lebih,
postingan yang memiliki quote, a numbered list, un-numbered list, membuat
widget yang banyak untuk melihat bagaimana sidebar kelihatannya, pastikan
kamu punya label yang terlihat dalam Labels widget,buat beberapa comment
percobaan untuk mengetahui bagaimana terlihat, dan sebagainya.

Step 5 - Tweaking CSS code untuk meng-customize tampilan blog:

Di sini tempat kamu memulai tweaking CSS code untuk meng-customize layout
dasar dari blog dan perlahan-lahan menyempurnakannya sampai menjadi
template yang diinginkan. Ini adalah proses yang bisa kamu lakukan berulang-
ulang karena kita tidak akan selalu mendapat template yang sempurna hanya
dengan sekali tweaking kode saja. lihat Tweaking CSS Code untuk lebih jelas

Step 6 Mengetes di Browser Lain:

Bagian ini bisa menjadi sangat mengganggu, tapi seperti orang bilang, kamu
harus melakukan apa yang harus kamu lakukan. Untuk ini akan ditulis di
subpost yang nanti aq posting. Untuk sementara lihat Testing and Viewing in
Other Browsers dulu, belum sempet translate soalnya.

Step 7 Menggunakan Gambar Untuk Background:

Jika bosan menggunakan warna polos, gunakan saja gambar yang lebih manis
untuk menjadi background dari seluruh blog atau di beberapa bagian
(contohnya pada Post, Sidebar, Footer, Header, dll). Untuk melakukan ini lihat
kembali Tutorial 11: Bagaimana menggunakan gambar sebagai background.

Step 8 - (Tahap Akhir) Menyempurnakan Template:

Tahap ini hanya untuk memastikan apakah semua berjalan baik . Kita hanya
perlu melakukan double check. Lihat pada Blog secara teliti dan lakukan
beberapa minor tweaking yang membuat templatemu lebih baik.
TWEAKING CSS CODE

Ini adalah bagian penting untuk mendesain dan mengatur bagaimana tampilan
blog. Saat melakukan ini, lebar dari container di dalam CSS code sebaiknya
sudah diatur. Apa yang perlu diketahui tentang tweaking CSS code bahwa itu
adalah proses recursive. Ini adalah proses untuk menyempurnakan template,
mengubah kode kemudian melihat tampilan, bolak-balik seperti itu sampai kita
puas dengan hasil akhirnya.

Ada banyak hal yang harus ditweaking dan banyak container harus dicustomize.
Jadi bagaimana caranya melakukan semua ini dan dari mana kita memulai?
Pendekatan yang paling mudah adalah memulai dari atas. Assumsikan bahwa
kita memulai dari template yang sudah jadi, pada point ini kita tidak perlu
kawatir terlalu banyak tentang mengcustomize body, outer-wrapper, dan
content-wrapper, kecuali lebar. Kita bisa tweaking container ini nanti (atau
biarkan seperti kode aslinya, kecuali mau mengubahnya nanti). Jika ingin
menggunakan gambar sebagai gambar background dari keseluruhan template,
kita juga bisa melakukannya nanti.

Baca Tutorial 3: Struktur dari bagian CSS style dulu jika kamu tidak familiar
dengan dasar-dasar bagian kode CSS Styling. Ingat juga bahwa desain tidak
mungkin sempurna saat pertama kali. Prosesnya memerlukan waktu dan
banyak latihan.Untuk mengetahui dasar-dasar tweaking CSS code, baca Tutorial
4: Mengatur Property dari Container. Dan jika mau tahu container mana saja
yang akan dicostumize, baca Tutorial 5: Container dan elemen Umum dalam
Blogger Template.

Header:

Saya menyarankan Anda memulai dari bagian Header. Yang paling umum perlu
dilakukan adalah mengatur warna background, mengatur tampilan Blog Title
dan Blog Description, font, warna, font-size, dll. Jika ingin menggunakan
gambar background besar sebagai gambar header image, atur itu menggunakan
tombol Edit Header dalam halaman Page Elements. Daftar di bawah ini diambil
dari Tutorial 5

#header-wrapper - container yang membelit Blog Title dan Blog Description.
#header container di dalam header-wrapper.
#header h1 tag di dalam container ini mengatur tampilan dan layout dari
Blog Title.
#header h1 a mengatur property Blog Title sebagai link text.
#header .description property Blog Description.
#header a img mengatur property dari gambar di dalam header
Main dan Post:

Container selajutnya yang ditweaking adalah Main dan Post (termasuk Post-
Footer). Ini akan memakan waktu banyak karena banyak subcontainer di
dalamnya. Faktanya, Post adalah subcontainer dari Main. Selalu lebih mudah
jika kita melakukan tweaking subcontainers mengikuti urutan-urutan tertentu.
Saranku, gunakan urutan di bawah ini. Daftar di bawah ini dari Tutorial 5.

Main :
#main-wrapper container yang membelit Date Header, Blog Posts,
Comments, Feed Link, dan beberapa widget yang ditempatkan di atas atau di
bawah Blog Posts.
#main container di dalam main-wrapper.
#main .widget mengatur property dari semua widget di main container.
h2.date-header mengatur property dari Date Header (di atas Post Title).
.post mengatur Blog Posts container.
.post h3 mengatur property dari Post Title.
.post-body p mengatur property dari body atau content
.post ul mengatur property dari unordered list (daftar yang tidak bernomor).
.post ol mengatur property dari ordered list (daftar bernomor).
.post li mengatur property dari daftar sendiri di unordered list atau ordered
list.
a img mengatur property umum dari gambar (refer link dan gambar itu
sendiri dengan linknya).
blockquote - mengatur quoted text dalam postingan.
code mengatur text di dalam tag code dalam postingan.

Post Footer :
.post-footer mengatur property keseluruhan post-footer.
.post-footer-line mengatur property setiap baris baru dalam post-footer.
.post-footer a mengatur property link text dalam post-footer.
.post-footer .post-comment-link a mengatur "comment" link dalam post-
footer.
#blog-pager mengatur property "newer posts", "home", dan "older posts"
link.
#blog-pager-newer-link mengatur property dari "newer posts" link.
#blog-pager-older-link mengatur property dari "older posts" link.
.feed-links mengatur "Subscribe to: Posts (Atom)" link.

Sidebars:

Jika sudah selesai dengan bagian-bagian di atas, selanjutnya kita akan mengatur
sidebar. Jika kamu memiliki lebih dari 1 sidebar, kamu mungkin ingin
mengcustomize setiap sidebar dengan costumize yang berbeda. Kamu juga akan
mengcustomize Profile dan Blog Archive jika ingin mereka berbeda dari widget
lainnya. Daftar berikutnya adalah:

.sidebar-wrapper container yang membelit semua elemen dan content
sidebar.
.sidebar container di dalam sidebar-wrapper.
#sidebar1 mengatur property sidebar1.
#sidebar2 mengatur property dalam sidebar2. Jika ingin membuat property
sidebar1 dan sidebar2 sama, kita hanya perlu .sidebar dan tidak harus
menuliskan #sidebar1 dan #sidebar2 dalam CSS code.
.sidebar .widget mengatur property dari semua widget (add Page Element)
dalam sidebar.
#sidebar1 .widget hanya mengatur widget dalam sidebar1.
.sidebar .BlogArchive mengatur property Blog Archive. Tekniknya sih ini
sidebar juga, tapi aku tidak yakin mengapa pengaturan property untuk sidebar
widget tidak mengubah property Blog Archive. Itulah mngapa kita harus
menuliskan perintah untuk mengatur property BlogArchive.
.sidebar h2 mengatur property judul sidebar widget.
.sidebar #BlogArchive1 h2 mengatur judul Blog Archive.
#Profile1 mengatur property umum About Me.
#Profile1 h2 mengatur title/header dari the About Me.
.profile-img a img mengatur gambar dari About Me.
.profile-textblock mengatur descripsi author About Me.
.profile-data mengatur author data About Me.
.profile-datablock mengatur semua blok dalam About Me.

Comments:

Setelah selesai dengan sidebar, sekarang giliran bagian Comments. Posting
beberapa comment untuk melihat bagaiman tampilannya setelah tweaking.
Daftar berikutnya adalah:
#comments mengatur property keseluruhan comment container.
#comments a - mengatur property link text dalam comment container.
#comments h4 mengatur header comment container.
.deleted-comment mengatur property deleted comment.
.comment-author mengatur property comment author.
.comment-body p - mengatur property comment body.
#comments ul - mengatur unordered list di dalam comment container.
#comments li mengatur individual list di dalam comment container.

Footer:

daftar terakhir adalah bagian footer, yaitu:

#footer-wrapper bagian yang membelit keseluruhan elemen dan content di
dalam footer section.
#footer container dalam footer-wrapper.
#footer h2 mengatur property footer title/header.
#footer .widget - mengatur footer widget properties.
.footer a mengatur semua footer link text.

Penyempurnaan:

Sekarang kita sudah menyelesaikan semua container, apa yang perlu dilakukan
adalah lihat hasil tampilan lalu kembali lagi ke bagian kode untuk memperbaiki
beberapa hal kecil. Mungkin untuk mengubah beberapa font atau warna
background, font size, margin dan paddings, menambah border atau
mengubah warna border, dan sebagainya. Tapi hati-hatilah saat menambah
border, melakukan itu mungkin perlu mengubah lebar container yang kamu
tambahkan border. Jika terjadi masalah (misalnya Sidebar melorot di bawah
Blog Post), kamu perlu menambah lebar container induk dari container tersebut.

Jalan paling baik untuk mengubah background dan warna font adalah membuat
mereka sebagai variable sehingga kita bisa menggunakan tab Fonts and Colors
dalam halaman Layout. Jika tidak yakin melakukan ini, gunakan Generic
Blogger Template sebagai template awal. Template itu punya banyak variable
font dan warna untuk memulai.