TUTORIALLENGKAP

MEMBUATTEMPLATE
BLOGSPOT

Oleh:Gembong.Web.Id


DisusunUlangOleh:http://cekidotgan.blogspot.com/

1
http://cekidotgan.blogspot.com/


Pengantar

Dalam seri tutorial ini Gembong.web.id memberikan penjelasan tentang template di

Blogger/Blogspot, dimana tujuannya untuk belajar, bagaimana mengedit atau mengubah
template di Blogspot atau mendesain template sendiri template di Blogspot agar tidak terjadi
kesalahanpadasaatditerapkan.Walaupuntemplatetemplategratisansudahbanyaktersediadi
internet, kadang punya keinginan untuk mengubah atau membuat template sendiri agar sesuai
denganselera.

Tutorial nanti akan dibagi menjadi beberapa seri yang menjelaskan bagianbagian tertentu dari
desaintemplateBlogspotsecararinci.Caraterbaikuntukbelajaradalahdenganmengikutisatu
persatusecaraurutdaariserialini.

Seri tutorial nanti akan diawali dengan menjelaskan struktur dasar dari template dan kode
template di Blogspot agar mengerti lebih lanjut tentang template blogger pada umumnya.
Selanjutnyaakandijelaskan,setiapbagiandaritemplateBlogspotsecaralebihdetail.

Dalamtutorialnanti,beberapanamadanistilahkemungkinanberbedadengantemplateyanglain,
akantetapiakanberusahadijelaskansecaraumum,sehinggamendapatkangambaranyanglebih
jelas dan diharapkan dapat paham juga jika melihat kode dari templatetemplate yang telah
didesainolehoranglain.

2
http://cekidotgan.blogspot.com/

StrukturdariTemplateBlogspot

Sebelum merancang template, kita harus tahu tentang struktur atau bagianbagian dari
template.Setiaptemplatetidakharusmemilikistrukturyangsama.Namundenganmengetahui
strukturdasarnya,diharapkandapatdenganmudahmendapatkanideuntukmerancangtemplate
danmungkindapatmengubahdenganstrukturyangberbedasesuaiselerakita.

Beberapabagiandaristrukturtemplate,yangjelasadapadaumumnyaterdiridari:header,footer,
danbagianposting.

Untuk lebih jelasnya struktur dari template yang lebih kompleks dapat dilihat pada gambar
dibawah:

Strukturdaritemplate

Bagiandaristrukturtemplatetersebut,dapatdijelaskansebagaiberikut:

Body: blok paling luar adalah Body dari template (pada dasarnya merupakan seluruh layar dari
komputer).

Outerwrapper: bagian ini adalah yang melingkupi template (bagian dari batas luar template).
Secara umum, wrapper digunakan untuk menempatkan blokblok yang lebih kecil yang ada
didalamnya.BlokyangpalingumumdidalamOuterwrapperadalahHeader,Content,andFooter.

Header:blokiniadalahbagianpalingatasdariblok.DidalamHeaderdapatjugamemilikisubblok,
misalnya:HeaderJudulblok,Deskripsiblog,danlainlainsepertibannerAdsense,menubar,dll.
Diluar header atau untuk membungkus semua subblok di dalam header biasanya dinamakan
Headerwrapper.

3
http://cekidotgan.blogspot.com/

Content:dibawahHeaderadalahContentwrapperPadadasarnyamerupakanbagiandariblok
yangpalingpenting.Secaraumumbagianwrapperinididalamnyaterdiridariblok Sidebar(bisa
1,2ataulebihsidebar)danblokMain(yangberisihasilpostingartikel,komentar,ataubeberapa
ads).

Footer: adalah bagian bawah dari template. Seperti di Header, dibutuhkan juga Footerwrapper
yangberisibagianbagiandarifooter.

Main: Mainwrapper adalah bagian luar dari blok Main yang didalamnya terdapat Content
wrapper.DidalamMainwrapperterdapatblokPost,blokComment,DateHeader,danbagianlain
yangdapatdibuatdariopsiAddPageElement.

Sidebar:adalahbagianyangdapatberisisemuawidgetdanbiasanyaterletakdibagiansamping,
seperti: About Me, Labels, Archive, Text, HTML, Adsense, etc. Didalam standard template dari
Blogger,biasanyaditemukan1sidebar,jikaterdapat1sidebarmakatemplateterdiridari2kolom,
yaitu Main dan Sidebar. Tetapi jumlah sidebar dapat ditambahkan dengan mudah. Yang paling
umumadalahmemiliki2sidebaratauberartitemplatememiliki3kolom.Denganmengikutiseri
tutorial ini diharapkan, nantinya kita dapat mengerti struktur dari template dan dengan mudah
menambahataumemindahsidebarkekiriataukanan.

BlogPost:blokiniberisibagianyanpalingpenting,sepertiPostsTitles(judulartikel),Post(artikel),
PostAuthor(Penulisartikel),Labels(label),etc.

Strukturdaritemplateblogger,jikadilihatsecarahierarki,mulaidaribagianyangpalingbesarke
bagianyangpalingkecil,dapatditampilkansebagaiberikut:

Body
o Outerwrapper
Headerwrapper
BlogTitle
BlogDescription
Otherwidgets
Contentwrapper
Sidebarwrapper(1,2,3...)
Mainwrapper
DateHeader
Posts
PostTitle
PostContent(orcalledPostBody)
PostFooter(Author,Labels,etc)
Comments
FeedLink
Otherwidgets(mostlyadunits)
Footerwrapper
Footertext(disclaimer,copyrights,etc)
Otherwidgets

4
http://cekidotgan.blogspot.com/

Setelah memahami struktur diatas, akan lebih mudah untuk memahami struktur kode dari
templatenyaBlogger.BelajarstrukturkodedaritemplatesebenarnyatidakbelajartentangHTML
atau CSS, tetapi lebih terhadap bagaimana kode tersebut disusun dan terorganisir. Dengan
memahami struktur dari template, walaupun punya pengetahuan yang minim terhadap
pemrogramanweb,kitadapatmengubahtemplateataumendesainsesuaidenganselera.

5
http://cekidotgan.blogspot.com/

StrukturdariKodeTemplate

Setelah mempelajari bagianbagiannya dalam struktur dari template blogspot, sekarang kita
pelajari struktur dari kode template Blogspot. Untuk mempelajarinya Gembong.web.id akan
menggunakan template standard dari Blogger, tetapi jangan kawatir semua kode di template
Bloggerhampirmempunyaistrukturyangsama.

Secarasederhana,strukturdarikodetemplateBloggerterpisahmenjadi3bagian,barisdariatas
setiapbagiannyadapatdilihatpadagambarberikut:

StrukturdarikodetemplatediBlogger

Bagian1:
Iniadalah'header'darikodetemplate.Bagianiniberisiinformasipentingtentangkodetemplate
dan judul dari blog. Bagian ini tidak perlu dipikirkan secara serius, karena tidak mempengaruhi
tampilan dari sebuah template, selain itu bagian ini merupakan standard dari semua template.
Kadangkadangkitaperlueditbagianini,hanyauntukmenambahkankodemetatags.

Bagian2:
Ini adalah bagian untuk kode CSS (Cascading Style Sheets). Kode CSS adalah bahasa web yang
digunakan untuk mengatur format dari dokumen HTML. Bagian ini adalah bagian yang harus
diketahui dan dimengerti, jika ingin memodifikasi atau membuat template baru. Meskipun ini
merupakankodepemrogramanweb,denganmemahamistrukturbagiandankodedaritemplate,
kita berharap dapat memodifikasi dan membuat template baru tanpa harus banyak mengerti
tentangkodeHTMLdanCSS.
6
http://cekidotgan.blogspot.com/

Bagian3:
Ini adalah bagian 'body' atau kode untuk data. Bagian yang paling penting untuk mengambil
semua data dari database Blogger dan meletakkannya ditempat yang tepat di Blog. Ini juga
merupakanbagianyangmengaturbagianmanayangditampilkanlebihdulupadasaatblogdilihat,
apakah bagian header,sidebar, post atau footer. Tetapi bagian ini, tidak mengatur tampilan di
internet,karenauntukmengaturtampilan,sudahdikendalikanolehkodeCSS.

Sebenarnya bagianbagian diatas tidak menuntut untuk memahami secara detail tentang kode
pemrogramanHTMLdanCSS,tetapikitaharustahusedikittentangkodekodetersebutjikaingin
menambahkanwidgetyangtidakdisediakandalamelemen'tambahwidget'yangadadiBlogger,
ataukitainginmenambahkankodeadsensedidalambagianpostingartikel.Tetapijangankawatir,
banyak petunjuk yang tersedia di internet untuk menambahkan kodekode tersebut dalam
templateblog.

7
http://cekidotgan.blogspot.com/

StrukturdariKodeCSS

Pada tutorial ini Gembong.web.id akan menjelaskan struktur dari kode CSS yang merupakan
bagian dari struktur kode template Blogspot. Walaupun semua template tidak mempunyai
strukturyangsama,namunpemahamandaritutorialsebelumnyadiharapakandapatmembantu
untuk lebih mengenal template dari Blogspot, sehingga dapat lebih mudah ketika melakukan
coding,debuggingataumemodifikasitemplate.Denganmemahamitutorialinidiharapkandapat
lebihmudahuntukmengubahmodeldanstrukturdaritemplate.

Untuk lebih memahami kode CSS, Gembong.web.id telah membagi bagianbagian dari CSS
menjadi9bagianyanglebihkecil.Untuktutorialini,Gembong.web.idakanmenjelaskanbagian
bagian yang umum, tutorial berikutnya akan menjelaskan lebih detail tentang kode yang ada
dalamsetiapbagiannya.

Bagian1Variable:
Bagian ini berisi deklarasi variabel huruf dan warna yang akan muncul dihalaman website.
Deklarasivariabelhurufdanwarnainidapatdiubahubahsesuaidenganselera.

Bagian2Global:
Bagian ini untuk mengontrol penampilan umum dan tata letak. Kode CSS dari bagian ini adalah
"body {.....}",iniberartibahwasetiapkodeyangmasukdalam{.....}akanmengendalikanmodel
umum dari website, seperti ukuran, tata letak dan tampilan dari template yan terlihat dilayar
komputer. Misalnya mengontrol lebar dari template dan warna latar belakang atau
gambar. Namun bagian ini tidak mengendalikan model dari seluruh template, jika bagian yang
lebih kecil mendeklarasikan sendiri maka secara otomatis deklarasi yang ada di "body {.....}" ini
akandigantiataudibatalkan.

Bagian3Header:
BagianiniadalahuntukmengaturpropertiyangadadidalambagianHeaderwrapper.Yangpaling
umumadalahjuduldandeskripsiblog.DibagianHeader,biasanyakitatidakdapatmenambahkan
elemenmelaluimenutabAddPageElemen,Namundenganmengubahkodesedikitdibagianini,
kitadapatmenambahelemenapapunnantinya.Iniakandipelajaripadatutorialberikutnya.
8
http://cekidotgan.blogspot.com/


Bagian4Main:
Bagian ini mengatur properti (ukuran, tata letak dan tampilan) dari segala sesuatu yang ada
didalamMainwrapper,sepertiDateHeader,Post,Comment,FeedLink,dansetiapwidgetyang
dapatditambahkandalamMaindenganmenggunakanAddPageElemen.

Bagian5Sidebar:
Bagian ini mengatur properti dari segala sesuatu yang ada didalam Sidebarwrapper, seperti
Labels, Blog Archive, unit Adsense, Link Lists, etc.Tetapi ini tidak mengatur semua sidebar yang
adadalamtemplateblog,pengaturannyatergantungdarilokasidimanasidebartersebutberada.

Bagian6Miscellaneous:
Bagian ini mengatur properti dari unsurunsur tambahan didalam blog yang tidak diatur oleh
semuabagianbagiandiatas.UnsurunsuritumisalnyaProfile(ataubagianAboutMe),Blockquote,
dankode.Ituberarti,jikainginmengubahmengubahwarnateksyangadadiblockquote,maka
harusmengubahpropertiyangadadibagiantersebut.

Bagian7PostFooter:
Di template yang standard, bagian ini biasanya terdapat 3 sub bagian yang dapat diatur
propertinya:

9
http://cekidotgan.blogspot.com/

PostFooter :ini adalah tulisan dibawah posting artikel yang biasanya berisi informasi tentang
artikeltersebut,sepertinamapenulis,label,banyaknyakomentar,danlainlain.
BlogPager: merupakan link dibawah posting artikel, seperti "Newer Posts, Home, atau Older
Posts".
FeedLink:linkyangbertuliskan"Subscribeto:Posts(Atom)".

Bagian8Comment:
BagianinimengaturpropertidaribagianCommentsdalamblog.

Bagian9Footer:
BagianinimengatursemuapropertidibagianFooter.Umumnya,dibagianFooterberisibeberapa
tulisan,yangmenjelaskankepemilikanatausebiahhakciptadariblog.Padabeberapatemplate
lain, bagian Footer bisa juga ditempatkan widget tambahan yang terdiri dari beberapa
kolom. Pada dasarnya bagian ini terdiri atas 1 kolom, namun jika kita ingin mengubah menjadi
beberapakolom,makakitaharusmeodifikasisedikitkodenya.

Tutorial selanjutnya, tentang penjelasan dasar untuk mengatur properti CSS dari bagianbagian
yangadadalamtemplate.

10
http://cekidotgan.blogspot.com/

MengaturPropertidiCSS

DalamtutorialiniGembong.web.idakanmenjelaskandasardasarkodeuntukmengaturproperti
disetiapbagianpadaCSS.

Untuk belajar awal, kita akan pelari 2 bagian sederhana dari CSS, yaitu bagian Main dan
Post. Setelah belajar 2 bagian ini, diharapkan bisa mengerti bagian lain, karena strukturnya
hampirsama.

BerikutinicontohkodeCSS,untukbagianMaindanPost:

#main{
margin:0px0px0px0px;
padding:0px0px0px0px;
minwidth:400px;
maxwidth:400px;
background:$mainbgColor;
color:#111111;
font:$textFont;
}

.post{
margin:0px20px10px0px;
padding:10px20px10px2px;
lineheight:1.5em;
textalign:left;
background:$postbgColor;
}

#Main dan .post adalah judul dari setiap bagian yang ada di CSS. Kode properti dari setiap
bagiannya harus ada dalam tanda {.......} . Untuk sementara kita focus untuk kode yang ada di
bagian.post,terutamakodeyangditulisdenganwarnamerah,yaitumargindanpadding.
11
http://cekidotgan.blogspot.com/

Margin : mengatur jarak dibagian tersebut dengan bagian yang lebih besar yang ada
diluarnya. Ada 4 angka untuk mengatur properti dari margin, yaitu angka 1: mengatur margin
atas, angka 2: margin kanan, angka 3: margin bawah dan angka 4: margin kiri. Pada dasarnya
mengaturpropertimarginadalahsearahjarumjam,yangdimulaidenganmarginatas.Padakasus
diatas,bagianindukuntukpostadalahbagianMain.Lihatgarisputusputusyangadadiluarbatas
warnabiru(bagianpost),ditempatkandidalamwarnahijau(bagianMain)adalahberdasarpada
kodeperintah,tulisanyangberwarnamerahyangadadibagian.post.Jikasemuapropertimargin
di .post di set 0, maka ukuran dari bagian .post akan sama persis dengan bagian Main. Margin
boleh bernilai negatif, artinya jika bernilai negatif maka bagian perbatasan akan mengarah ke
batasbagianinduknya,danmungkinakantumpangtindih.

Padding: mengatur jarak pada bagian tersebut dengan bagian yang lebih kecil yang ada
didalamnya.Dalambagian.postdikasusdiatas,bagianyanglebihkeciladalahPostbody.Ada4
angkajugauntukmengaturpropertidaripadding,yangdidefinisikansamadenganbagianmargin,
yaitusearahdenganjarumjamyangdimulaidariatas.Lihatbahwaartikelyangadadibagianpost
bodyadadidalambagianpost.Paddingtidakbolehbernilainegatif.

Minwidth dan Maxwidth: mengatur lebar dari setiap bagiannya. biasanya cukup dituliskan
width = 400 px (untuk contoh), akan tetapi menjadi lebih bagus jika mengatur lebar sedetail
mungkin, karena jika tidak ditulis secara detail terkadang lebar dari suatu bagian yang sudah
didefinisikan akan berubah semakin kecil/lebar dalam beberapa situasi dan dilihat dengan
browseryangberbeda.Denganmengaturlebarsedetailmungkindiharapkanlebarakanterlihat
sesuai dengan yang diinginkan walau dilihat dengan browser yang berbedabeda. Dengan
mengatur lebar sedetail mungkin dapat juga untuk menghindari kesalahan pada saat penulisan
kode.

Background:mengatur warna latar belakang dari suatu bagian. Pengaturan ini menggunakan
kode heksadesimal untuk warna. Untuk nilai dari kode heksadesimal dari warna, dapat dilihat
disini. Selain warna, gambar juga dapat ditetapkan sebagai latar belakang. Secara lebih detail
penulisankodepenggunaangambarsebagailatarbelakangdapatdilihatdiW3Schools.

Color:mengaturwarnatulisandenganmenggunakankodeheksadesimaluntukwarna.

Font:mengaturhurufdaritulisan.UntukpengaturanlebihdetaildapatdilihatdiW3Schools.

Textalign:mengaturalignmenttulisan.Ada3opsipilihan,yaitu,left,centerdanright.

Lineheight:mengaturjarak,atautinggi,diantara2baristulisan.

Tutorial ini hanya dasar saja beberapa kode yang penting dalam tamplate blogger. Yang paling
pentingadalahmengertitentangkodeperintahMargindanPadding.Jikainginbelajaryanglebih
detailtentangkodediCSS,Gembong.web.idmerekomendasikanuntukbelajardiw3SchoolsCSS
Tutorial.

12
http://cekidotgan.blogspot.com/

BagiandanElemenUmumTemplateBlogger

DalamtutorialiniGembong.web.idakanmenjelaskanbagiandanelemenumumyangadadalam
templatebloggerbesertafungsidaribagiandanelementersebut.Elemenpadadasarnyaadalah
setiap objek yang membuat fungsi di blog, sedangkan bagian/cointainers adalah suatu bagian
yangbesaryangberisielemenelemenyanglebihkecil.

Elemenelemen yang dibahas disini nantinya belum tentu elemen yang harus ada disetiap
template Blogger, tapi hanya beberapa elemen umum yang sering dipakai didalam template
Blogger.

Untuk memahami bagian ini, kita akan merujuk pada gambar yang ada di tutorial Struktur dari
kodeCSS.

Simbol # dan . menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen). Jika
belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara
serius.Tetapijikaingintahulebihdetailtentangsimbolini,pelajaridiW3Schools.

Global:

body{.....}:mengatursifatumumdaritemplate,jikaelemenyangdibawahnyatidakdidefinisikan,
makapropertiyangadadibagianiniyangberlaku.

#outerwrapper{.....}:Bagianawaldanterbesardaritemplate.Didalambagianiniberisiheader
wrapper,contentwrapper,danfooterwrapper.

#contentwrapper{.....}:suatubagianyangberisisidebarsdanmain.

a{.....}:mengaturpropertidaritulisanyangmempunyailink.

a:visited{.....}:mengaturpropertidaritulisanyangmempunyailinksetelahdikunjungi.

13
http://cekidotgan.blogspot.com/
a:hover {.....} : mengatur properti dari tulisan yang mempunyai link disaat mouse ada diatas
tulisantersebut.

Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan
berikutnyahanyaditulisjudulelemennyasaja.

Header:

#headerwrapper : Bagian yang membungkus judul dan deskripsi blog/website (Blog Title dan
BlogDescription).

#header:Bagianyangadadidalamheaderwrapper.
#header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul blog
(BlogTitle).

#headerh1a:Mengaturpropertilinkdijudulblog.

#header.description:Mengaturpropertidarideskripsiblog.

#headeraimg:Mengaturpropertidarigambaryangadadidalamheader.

Main:

#mainwrapper:bagianyangdidalamnyaterdiriatasDateHeader,BlogPosts,Comments,Feed
Link,dansetiapwidgetyangditempatkandiatasataubawahartikel(BlogPosts).

#main:bagianyangadadidalammainwrapper.

#main.widget:mengaturpropertidarisemuawidgetyangadadidalambagianmain.

h2.dateheadermengaturpropertidariDateHeader(yangadadiatasPostTitle).

.postmengaturpropertipadabagianBlogPosts.
14
http://cekidotgan.blogspot.com/

.posth3mengaturpropertidarijudulartikel(PostTitle).

.postbodypmengaturpropertidaribodyatauisiartikel(post).

.postulmengaturpropertidariunorderedlist(daftaryangtidakbernomor).

.postolmengaturpropertidariorderedlist(daftarbernomor).

.postlicmengaturpropertidaridaftarindividudidalamunorderedlistatauorderedlist.

a img mengatur properti secara umum dari sebuah gambar (memacu pada link; dan gambar
padalinkitusendiri).

Sidebar:

sidebarwrapper:bagianyangmembungkussemuaelementdanisiyangadadidalamsidebar.

.sidebar:bagianyangadadidalamsidebarwrapper.

#sidebar1:mengaturpropertididalamsidebar1.

#sidebar2 : mengatur properti didalam sidebar2. Jika ingin properti yang ada didalam sidebar1
dan sidebar2 sama, maka properti cukup diatur di .sidebar dan tidak perlu ditulis didalam
#sidebar1dan#sidebar2lagidikodeCSS.

.sidebar .widget : mengatur properti semua widget (yang ditambahkan melalui Added Page
Element)disidebar.

#sidebar1.widget:hanyamengatuwidgetdisidebar1.

.sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget
disidebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget
untukBlogArchive.Olehsebabitupropertidi.BlogArchivepengaturannyaditulissendiri.

.sidebarh2:mengaturpropertijudul(title/header)padasidebarwidget.

.sidebar#BlogArchive1h2:mengaturpropertijudulpadaBlogArchive.

Miscellaneous:

Pada dasarnya, bagian Profile (About Me) terletak didalam sidebar, tetapi dalam penjelasan ini
diletakkandibagianMiscellaneous.

#Profile1:mengaturpropertidariAboutMe.

#Profile1h2:mengaturjudul(title/header)padaAboutMe.
15
http://cekidotgan.blogspot.com/

.profileimgaimg:mengaturgambardidalamAboutMe.

.profiletextblock:mengaturdeskripsipenulispadaAboutMe.

.profiledata:mengaturdatapenulispadaAboutMe.

.profiledatablock:mengaturkeseluruhandatadalamAboutMe.

blockquote:mengaturteksdalamtandakutip(quotedtext)padaartikel.

code:mengaturtulisandalamtagscodediartikel.

PostFooter:

.postfooter:mengatursemuapropertididalampostfooter.

.postfooterline:mengaturpropertisetiapbarisbarudipostfooter.

.postfootera:mengaturpropertilinktextdidalampostfooter.

.postfooter.postcommentlinka:mengaturlinkdi"comment"dalampostfooter.

#blogpager:mengaturpropertilinkpadatulisan"newerposts","home",dan"olderposts".

#blogpagernewerlink:mengaturpropertipadalink"newerposts".

#blogpagerolderlink:mengaturpropertipadalink"olderposts"link.

.feedlinks:mengaturpropertipadalink"Subscribeto:Posts(Atom)".

16
http://cekidotgan.blogspot.com/

Comment:

#comments:mengatursemuapropertipadabagiancomment.

#commentsa:mengaturpropertilinkdidalambagiancomment.

#commentsh4:mengaturheaderdibagiancomment.

.deletedcomment:mengaturpropertiuntukdeletedcomment.

.commentauthor:mengaturpropertiuntukcommentauthor.

.commentbodyp:mengaturproperticommentbody.

#commentsul:mengaturunorderedlistdidalambagiancomment.

#commentsli:mengaturdaftarindividudidalamcomment.

Footer:

#footerwrapper:bagianyangmembungkussemuaelemendanisididalamfootersection.

#footer:bagianyangadadidalamfooterwrapper.

#footerh2:mengaturpropertidarijudul(title/header)difooter.

#footer.widget:mengaturpropertiwidgetyangadadifooter.

.footera:mengaturpropertilinkdifooter.

Denganmengertidanmemahamibagianbagiandiatas,kitaakandapatdengancepatmenemukan
kode dan mengubahnya untuk mengganti bagianbagian dari template tertentu sesuai dengan
selera, misalnya ingin mengganti huruf, warna tulisan, background, padding, dsb. Untuk
mengubahbagianbagiantersebut,yangdilakukanhanyalahmemodifikasikodeyangadadidalam
{.......}padabagianyanginginkitaubahsaja.

17
http://cekidotgan.blogspot.com/

MenentukanUkuranTemplate

Menentukanukurantemplatemungkinmerupakansalahsatuhalyangharusdipikirkanpertama
kalisaatinginmendesaintemplatebaru.Ada2carauntukmengaturukuran(biasanyalebarnya)
template.

Pengaturanukuranyangtetapdenganlebaryangsudahditentukan,misalnya800pixel.

Pengaturan ukuran yang fleksibel, artinya ukuran akan berubah tergantung dari browser atau
ukuranlayardarikomputer.

MengaturUkuranTemplateYangTetap

Untuk mengatur lebar template, harus benarbenar mengatur lebar bagian yang besarbesar,
bagianyangpalingumumuntukdiaturadalah:

Body
Outerwrapper
Headerwrapper
Contentwrapper
Footerwrapper
Mainwrapper
Sidebarwrapper*
Footerwrapper

* Catatan: Kita juga dapat hanya mengatur lebar sidebar1 dan sidebar2 tanpa mengatur lebar
sidebarwrapper. Mengatur lebar sidebarwrapper adalah mudah jika kedua sidebars memiliki
lebaryangsama.

Untuk menghindari kesalahan/bug, ada baiknya kita bisa mengatur bagianbagian pembungkus,
walaupunituterjadipengulanganpengaturannya.

18
http://cekidotgan.blogspot.com/

Berikut ini adalah kode dari template Blogger, yang menunjukkan pengaturan terhadap lebar
template (hanya bagian yang menyangkut pengaturan lebar template yang ditampilkan). Pada
contohkodeini,lebartemplateditetapkan800pixel.

body{
minwidth:800px;}

#outerwrapper{
margin:0auto;/*untukmembuattemplateadaditengahlayar*/
minwidth:800px;
maxwidth:800px;}

#contentwrapper{
minwidth:800px;
maxwidth:800px;}

#headerwrapper{
minwidth:800px;
maxwidth:800px;}

#mainwrapper{
minwidth:400px;
maxwidth:400px;}

.sidebar{
padding:10px10px10px10px;
minwidth:180px;
maxwidth:180px;}

#sidebar1{.....}
#sidebar2{.....}
#footerwrapper{
minwidth:800px;
maxwidth:800px;}

19
http://cekidotgan.blogspot.com/

Lebarbodydiaturdenganperintahminwidth=800px,berartibahwalebarterkecilyangdimiliki
adalah 800px. Jika hanya diatur dengan perintah width = 800px, maka lebar template
kemungkinanmenyusutatauberubahdalambeberapakondisi.Mengaturlebardenganminwidth
akanmenjaminukuranterkecilsesuaidengannilainya.

Bagian selanjutnya yang ada didalam body adalah outerwrapper. Ini biasanya hanya diatur
dengan perintah width = 800px. Akan tetapi lebih bagus jika kita mengatur secara detail untuk
menghindari kesalahan/bug atau perubahan ukuran dengan menggunakan perintah minwidth
dan maxwidth dengan memberikan nilai yang sama. Pengaturan lain tentang outerwrapper
adalahperintahuntukmengaturposisitemplate,apakahditengahlayar,ataukekiri.Pengaturan
denganperintahmargin:0autoakanmenempatkantemplateberadapadaposisiditengahlayar.
Sedangkan dengan perintah margin: 0 akan menempatkan template ada di posisi kiri sebagai
default.

Tigabagianbesarberikutnyaadalahheaderwrapper,contentwrapper,danfooterwrapperyang
biasanyadiaturdenganukuranyangsama.Dalamkasusiniadalah800px.Dalambeberapakasus,
bagianbagianinidapatdiaturlebihkecildarilebarouterwrappertetapitidakbolehlebihbesar
karenabagianiniadadidalamouterwrapper.Hallain,jikaditambahkanbataskiridankanan,ini
akan menambah lebar, dan outerwrapper akan memotong bagian yang lebih besar dari
ukurannyadisisikanan.Jadi,jikainginmenambahkanbatas,misalnya2pxdikiridan2pxdikanan
untuk headerwrapper, maka harus mengatur ukuran headerwrapper dengan lebar 796px
sehinggatotallebarnyaakan796+2+2=800px.Kasusyangsamauntukpengaturanbagianyang
lain.

Untuk3bagianberikutnya,2sidebarsdanmainwrapper.Karenaberadadisisisisisamping,harus
dipastikan bahwa total lebar adalah 800px atau lebih kecil, tidak boleh lebih. Dalam kasus ini,
mainwrapper diatur dengan lebar 400px dan 2 sidebars lebarnya 200px. Tetapi karena
ditambahkan padding sebesar 10px dikiri dan kanan disetiap sidebar, maka harus mengurangi
lebar sidebar menjadi 180px sehingga kalau jumlahnya ditotal akan 200px. Harus diingat bahwa
bagian terbesar dari sidebar container adalah sidebarwrapper (tidak hanya sidebar). Kita dapat
mengaturukuransidebaryangberbeda.

MengaturUkuranTemplateyangFleksibel

Mengatur template dengan lebar yang fleksibel agar sesuai dengan perubahan ukuran browser
ataulayarkomputer,untuklebihdetailnyadapatdipelajariditutorialW3Schools.

20
http://cekidotgan.blogspot.com/

KodeTemplateBagianBody

DalamtutorialiniGembong.web.id,akanmenjelaskanstrukturdasardarikodetemplatedibagian
Body sehingga nantinya dapat memahami bagaimana bekerjanya seluruh kode tersebut. Kode
dilokasikan dalam 3 bagian, seperti dijelaskan dalam Struktur Kode Template di Blogger. Body
adalah bagian utama dari kode template di Blogger, kode template dibagian inilah yang akan
ditampilkan dalam blog. Kode yang berfungsi untuk mengatur bagaimana sesuatu ditampilkan
dalamblogadalahkodeCSS.

BagianBodyditunjukkanpadabagian3darigambardibawah:

KodepadatemplateBlogspotdibagianBodyditunjukkanpadakodedibawah.Kodedisinimemang
tidak ditunjukkan secara lengkap karena memang tidak diperlukan untuk membuat template
(hanya bikin pusing saja untuk memahami semuanya). Kode yang ditunjukkan adalah yang
sederhanayangpentinguntukpembuatantemplateagarkitalebihmudahuntukmemahami.

<body>
<divid='outerwrapper'><divid='wrap2'>

<!untuktextbrowser>
<spanid='skiplinks'style='display:none;'>
<ahref='#main'>skiptomain</a>|
<ahref='#sidebar'>skiptosidebar</a>
</span>

<divid='headerwrapper'>
<b:sectionclass='header'id='header'maxwidgets='1'showaddelement='no'>
<b:widgetid='Header1'locked='true'title='TestpageTwo(Header)'type='Header'/>
</b:section>
</div>
21
http://cekidotgan.blogspot.com/

<divid='contentwrapper'>

<divid='mainwrapper'>
<b:sectionclass='main'id='main'showaddelement='no'>
<b:widgetid='Blog1'locked='true'title='BlogPosts'type='Blog'/>
</b:section>
</div>

<divid='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar'preferred='yes'>
<b:widgetid='Profile1'locked='false'title='AboutMe'type='Profile'/>
<b:widgetid='BlogArchive1'locked='false'title='BlogArchive'type='BlogArchive'/>
<b:widgetid='Label1'locked='false'title='Labels'type='Label'/>
</b:section>
</div>

<!spasiuntuktampilanagarsidebardanmainpunyaketinggianyangsama>
<divclass='clear'>&#160;</div>

</div><!akhircontentwrapper>

<divid='footerwrapper'>
<b:sectionclass='footer'id='footer'>
<b:widgetid='Text1'locked='false'title='BloggerTemplate|Bordr'type='Text'/>
</b:section>
</div>

</div></div><!akhirouterwrapper>
</body>

Abaikankodeyangberwarnaabuabu.Secaragarisbesarkodedidalambody,bisadibagidalam4
bagian:

Header(merah)
Main(hijau)
Sidebar(merah)
Footer(coklat)

Lihatlahkodediatas,bahwasemuakodediantaratagbody.Kemudiandiikutitagouterwrapper
dan selanjutnya adalah tag wrap2. Menggunakan wrapper atau pembungkus akan lebih mudah
untukmengeditkodedanmenambahelemendalamsuatubagian.Dalampenjelasanditutorial
ini,kitahanyaakanmerujukpadapembungkusyangpalingbesaryaituouterwrapperdantidak
membahassemuawrapper,diharapkandenganmemahamisalahsatu,yanglainpundapatpaham.

22
http://cekidotgan.blogspot.com/

Bagian yang besar terdapat 3 wrapper, yaitu headerwrapper, contentwrapper, dan footer
wrapper. Posisi dari 3 bagian tersebut secara vertikal adalah headerwrapper ada diatas dan
footerwrapper ada dibawah. Untuk memahaminya sangat sederhana, karena kode header
wrapper ditulis pertama, kemudian diikuti oleh contentwrapper, dan terakhir adalah footer
wrapper.Padatahapiniuntukmengaturtataletaknya,kitatidakperlutahuapayangadadidalam
contentwrapperbagianininantinyaakanberlawananjikamengaturtataletakdibagiandalam
daricontentwrapperdimanadidalamnyaterdapatmainwrapperdansidebarwrapper.Dibagian
tersebutagaklebihpusinguntukmemahami.

Karena outerwrapper adalah wrapper yang paling besar, maka kita harus memastikan bahwa
lebardariwrapperyangadadidalamnyatidakbolehlebihdarilebaryangadadiouterwrapper.

Menambahkan wrapper atau bagian baru diantara salah satu wrapper (pembungkus) itu sangat
mudah. Hanya tinggal paste contoh kode dibawah dan ganti dengan nama yang baru, dalam
contohkodedibawahnamanyaadalahbannerwrapper.Perintahpreferred='yes'akanmembuat
sebuah tombol 'Add Page Element' sehingga nantinya memungkinkan untuk membuat widget
baru.

<divid='bannerwrapper'>
<b:sectionclass='banner'id='banner'preferred='yes'>
</b:section>
</div>
Menambahkan wrapper hanya menciptakan bagian atau blok baru dalam blog kita. Untuk
menyesuaikan tampilannya dan di mana bagian tersebut terletak di blog, kita PERLU sedikit
memodifikasikodeCSS.

Didalam contentwrapper, terdapat mainwrapper dan sidebarwrapper. Untuk membuat 2

wrapper yang letaknya bersampingan seperti yang pada umumnya terlihat di blog, kita harus
mengatur lebar sidebarwrapper tersebut sama dengan atau kurang dari contentwrapper.
Ditambah, kita harus menambah kode tertentu di CSS agar kedua wrapper tersebut posisinya
bersebelahan. Jika tidak diatur kedua wrapper tersebut akan mempunyai posisi vertikal diatas
dan bawahnya. Biasanya, dengan menggunakan perintah: 'float:left'. Lihat beberapa contoh
templateuntukmemeriksalebihlanjuttentangini.Jikainginmenambahkansidebar(jadisidebar
lebihdari1),berartitemplate3kolom,hanyaperlumenambahkankodesidebarwrapper(warna
biru). Lebih lanjut nanti akan dibahas pada tutorial berikutnya untuk mengetahui cara
menambahkanataumengubahsidebar.

23
http://cekidotgan.blogspot.com/


Setelah memahami kode yang ada didalam body, saya kira mudah untuk mengatur ulang atau
menambah wrapper baru dengan memodifikasi kode yang ada didalam Body. Tapi kemudian,
untukmengaturletaknyakitaharusmemodifikasikodeCSS.

24
http://cekidotgan.blogspot.com/

LebihLanjutKodeTemplateBagianBody

Dalam tutorial ini Gembong.web.id akan menjelaskan lebih lanjut tentang beberapa perintah
khususyangbiasanyaadadibagianbody.Lihatcontohkodeberikutini:

<body>
<divid='outerwrapper'><divid='wrap2'>

<!skiplinksfortextbrowsers>
<spanid='skiplinks'style='display:none;'>
<ahref='#main'>skiptomain</a>|
<ahref='#sidebar'>skiptosidebar</a>
</span>

<divid='headerwrapper'>
<b:sectionclass='header'id='header'maxwidgets='1'showaddelement='no'>
<b:widgetid='Header1'locked='true'title='BlogTitle'type='Header'/>
</b:section>
</div>

<divid='contentwrapper'>

<divid='mainwrapper'>
<b:sectionclass='main'id='main'showaddelement='no'>
<b:widgetid='Blog1'locked='true'title='BlogPosts'type='Blog'/>
</b:section>
</div>

<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar2'preferred='yes'>
</b:section>
</div>

<!spacerforskinsthatwantsidebarandmaintobethesameheight>
<divclass='clear'></div>

</div><!endcontentwrapper>

<divid='footerwrapper'>
<b:sectionclass='footer'id='footer'>
<b:widgetid='Text1'locked='false'title='BloggerTemplate|JournalBlue'type='Text'/>
</b:section>
</div>

</div></div><!endouterwrapper>

</body>

25
http://cekidotgan.blogspot.com/

Secaradefault,setiapblokharusdibungkusdengantagdivdantagb:section.Setiaptagdivdan
b:section dinamai (identifikasi) dengan menggunakan perintah id. Perintah tersebut juga dapat
diklasifikasikanlebihlanjutkedalam'class'menggunakanperintahclass.Identifikasidanklasifikasi
ini sangat berguna ketika mengatur model/propertinya dengan kode CSS. Didalam kode CSS,
perintah id ditunjukkan dengan menggunakan simbol # symbol dan perintah class ditunjukkan
dengan menggunakan simbol . Sebagai contoh, dikode CSS terdapat #mainwrapper {...}
atau .sidebar {...} yang mana kode ini digunakan untuk mengatur model di mainwrapper dan
sidebar.Kitadapatpelajarilebihlanjuttentangidentifikasidanklasifikasidiw3schools.com

Semua blok yang dibungkus menggunakan tag b:section adalah widgets (juga bisa dinamakan
Page Element). Untuk contoh, didalam Header ada widget dengan nama Header1. Perhatikan,
bahwawidgetiniberisikodemaxwidgets='1'showaddelement='no'.Kodemaxwidgets='1'berarti
bahwajumlahwidgetmaksimumdiheaderwrapperadalah1.Berartikitatidakdapatmenambah
widget dengan Page Element dan menempatkan widget tersebut dibawah atau diatas Header.
Kodeshowaddelement='no'berartibahwatombolAddaPageElementtidakditampilkandibagian
Header.

Didalam mainwrapper,kita hanyabisa memberi kode showaddelement='no' yang mana berarti

bahwatombolAddaPageElementtidakbolehditambahkandisini,tetapikitadapatmeletakkan
widgetdiatasataudibawahBlogPostsdidalammainwrapper.

Disidebarwrapper,terdapatkodepreferred='yes'.PerintahiniakanmembuattombolAddaPage
Element agar kita dapat menambahkan widgets. Jumlah widgets yang dapat ditambahkan tidak
ada batasnya. Selain itu kita juga dapat menarik atau menggeser widgets untuk diletakkan
kedalamwrapper/pembungkuslaindalamjumlahyangtidakterbatasjuga.

Di footerwrapper, tidak ada kode perintah id. Ini berarti bahwa tidak ada tombol Add a Page
ElementakantetapikitadapatmenarikdanmeletakkanwidgetkedalambagianFooter.

26
http://cekidotgan.blogspot.com/

MembuatTemplate3Kolom

Salahsatukeinginanyangpalingbesarketikakitamenjadiseorangbloggerdanmengelolawebsite
ataublog/websitekitasebelumnyatelahmenggunakantemplateyangstandard(2kolom),pasti
kita mempunyai keinginan untuk menggunakan template 3 kolom didalam website
kita. Gembong.web.id, dalam tutorial ini akan menjelaskan bagaimana membuat template 3
kolomsecarasederhanadantidakperluuntukmahirdalammemprogrammenggunakanbahasa
HTMLatauCSS.

Untuk memahami tutorial ini, diharapkan sebelumnya untuk mengerti tutorial 8 dan tutorial 9,
yangmanatelahmenjelaskandasardasardarikodedibagianBody.

Untukmengubahataumenambahsidebar,yangdilakukanhanyalahmengutakatikkodeXMLdi
Blogger langsung dari halaman EDIT HTML dan tidak perlu mengaktifkan Expand Template
Widget.

MenambahkanSidebarMembuatTemplate3Kolom

Kita akan pelajari kodekode template, yang akan dituliskan dibawah. Kode disetiap template,
mungkinakantidaksama,tetapivariasitidakakanbegitujauh.

ContohKodeTemplate2Kolom

divid='contentwrapper'>

<divid='mainwrapper'>
<b:sectionclass='main'id='main'showaddelement='no'>
<b:widgetid='Blog1'locked='true'title='BlogPosts'type='Blog'/>
</b:section>
</div>

<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar1'preferred='yes'>
</b:section>
</div>

<!spacerforskinsthatwantsidebarandmaintobethesameheight>
<divclass='clear'></div>

</div><!endcontentwrapper>

Kode diatas merupakan kode template 2 kolom didalam wrapper/pembungkus yang namanya
contentwrapper dimana didalamnya terdiri dari mainwrapper (yang berisi Blog Posts) dan
sidebarwrapper.

27
http://cekidotgan.blogspot.com/

Untukmembuatsidebarbaru,yangperludilakukanadalahmasukkehalamanEDITHTMLtanpa
mengaktifkan EXPAND TEMPLATE WIDGET, kemudian paste kode blok yang ada di sidebar
wrapper (kode yang tampil diatas dan berwarna merah) sebelum atau sesudah blok main
wrapper.Sebagaicontoh,untukmembuatkolomSidebarMainSidebar/SMS(ada2kolomyang
beradadisampingkirikanansebagaisidebardankolommainadaditengah),makaletakkankode
sidebarwrappertersebutsebelummainwrapper.Perhatikanpadacontohdibawah,bahwaiddari
sidebarwrapperadalahsidebar1dansidebar2.

Catatan:KetikamembuatsidebarkitaharusmemastikanbahwalebarkeduakolomSidebarsdan
Mainakan cocok berada di contentwrapper dan kode CSS nya juga harus dipastikan bahwa
sidebarsakanterletakdisampingkiridankanan.BeberapakesalahanumumadalahletakSidebars
akanberadadibawahblokMain.

ContohKodeTamplate3KolomSMS

<divid='contentwrapper'>

<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar1'preferred='yes'>
</b:section>
</div>

<divid='mainwrapper'>
<b:sectionclass='main'id='main'showaddelement='no'>
<b:widgetid='Blog1'locked='true'title='BlogPosts'type='Blog'/>
</b:section>
</div>
<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar2'preferred='yes'>
</b:section>
</div>

<!spacerforskinsthatwantsidebarandmaintobethesameheight>
<divclass='clear'></div>

</div><!endcontentwrapper>

MengubahLokasiSidebar

JikainginmengubahlokasisidebardengankonfigurasiMainSidebarSidebar(MSS),yangperlu
dilakukanadalahmenempatkankodesidebarwrapperdimanainginditampilkan.Caranya,yaitu
denganmasukkehalamanEDITHTMLtanpamengaktifkanEXPANDWIDGETTEMPLATESdan
potong(cut)kode1darisidebarwrapperdanletakkandiantaramainwrapperdansidebar2.Dan
hasilnyaterlihatsepertikodedibawah.

ContohKodeTamplate3KolomMSS

28
http://cekidotgan.blogspot.com/

<divid='contentwrapper'>

<divid='mainwrapper'>
<b:sectionclass='main'id='main'showaddelement='no'>
<b:widgetid='Blog1'locked='true'title='BlogPosts'type='Blog'/>
</b:section>
</div>
<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar1'preferred='yes'>
</b:section>
</div>
<divclass='sidebarwrapper'>
<b:sectionclass='sidebar'id='sidebar2'preferred='yes'>
</b:section>
</div>

<!spacerforskinsthatwantsidebarandmaintobethesameheight>
<divclass='clear'></div>

</div><!endcontentwrapper>


Sekarangkitasudahtahu,bagaimanacaranyamembuatdanmengubahlokasidarisidebardengan
carayangsangatsederhana,walaupuntidakmengertimaksuddarikodekodeHTMLnya.

29
http://cekidotgan.blogspot.com/

MemulaiMembuatTemplateBlogspot

Setelah memahami dan mengerti tutorialtutorial sebelumnya, saatnya untuk membuat dan
merancang template sendiri di Blogspot. Dalam tutorial ini, Gembong.web.id akan memberikan
langkahlangkahuntukmembuattemplatesendirisecaracepatdandenganmudah.

Sebenarnya tentang teknik merancang template, setiap orang yang sudah terbiasa membuat
templateakanmempunyaicarayangberbedabeda.AkantetapiGembong.web.iddalamtutorial
iniakanmemberikanlangkahlangkahuntukmempercepatprosespembuatantemplatebagikita
yang baru memulainya, agar tidak terlalu banyak buangbuang waktu dalam membuat dan
merancantemplate.

Langkah1:Pilihtemplateyangsudahjadisebagaiacuan

Sebagaipemula,carayangtermudahdantercepatuntukmerancangtemplateadalahmemulainya
dengantemplateyangsudahada.Tetapijanganmelakukannyadenganmaksuduntukmenjiplak
itu.

Pilihlah template sebagai acuan yang dekat dengan tujuan dari template yang akan dirancang.
Pemilihan template sebagai acuan ini dimaksudkan agar kita tidak menuliskan kodekode
templatedariawaldanmenghindariterlibatdenganurusanprogramming.

Tetapiketikamelakukanini,tidakbermaksuduntukmelakukanpengkodeansedikitdankemudian
mengklaimbahwaversiterakhiradalahdesainsendiri,ituSALAHdanTIDAKETIS.Templateawal
hanyalah titik awal untuk membantu proses pengkodean. Template awal yang berguna untuk
acuanadalahbagianBody(yangmenetapkantataletakkeseluruhan/layoutdanjumlahkolom),
kodeCSS(misalnya#mainwrapper,.Sidebar,#sidebar2,blogpager,dll)danbeberapa'default'
kodeyangtidakbolehdimodifikasiataudihilangkan.

Langkah2:MenetapkanJumlahdanLetakKolomdiSidebar

Jika seorang pemula, pastikan memulai dengan template yang mirip dengan desain yang akan
dirancang,misalnyajikainginmerancangtemplate3kolom,janganberacuandengantemplate2
kolom.Jikainginmenambahataumengubahsidebar,bacatutorialtentangmembuattemplate3
kolom.

Langkah3:MenetapkanLebarKolom

Hal pertama yang perlu dilakukan setelah mendapatkan template awal sebagai acuan adalah
mengaturlebardaritemplate.Untukmengaturlebaryangperludilakukanadalahmemodifikasi
kode di CSS, bacatutorial 7, mengatur ukuran template. Bagian yangbiasanya untuk mengatur
lebaradalah

30
http://cekidotgan.blogspot.com/

body
outerwrapper
contentwrapper
headerwrapper
mainwrapper
sidebarwrapper(atausidebar1,sidebar2,danselanjutnya)
footerwrapper

Pengaturan lebar yang sedikit rumit adalah yang ada di containerwrapper karena didalamnya
terdapatbagianMaindanSidebar,jikalebartidakdiaturdenganbaik,makaSidebardapatberada
dibawahMain.

Langkah4:Menguji

Jika merancang template yang baru, maka kita harus tahu bahwa perubahan yang kita lakukan
telah mengubah rancangan sesuai dengan yang diinginkan. Bagaimana mengujinya? yaitu
dengan mengirimkan artikel yang memiliki kutipan (blockquote), daftar bernomor, daftar tidak
bernomordanmembuatbeberapawidgetuntukmelihatbahwatampilansidebarsesuaidengan
yangdiinginkan.

Langkah5:MemodifikasikodeCSSuntukmengubahtampilan

DisinilahkitamemulaimengutakatikkodeCSS,untukmenyesuaikantataletakblogdantampilan
sesuaidenganyangdiinginkan.Prosesinibiasanyamemakanwaktuyangpalinglama,kitaakan
bolakbalik memodifikasi kode karena hal yang sangat jarang untuk langsung mendapatkan
sesuatu yang sempurna untuk pertama kali. Baca tutorial: struktur dari kode CSS, tutorial 5:
mengaturpropertidarisetiapbagiandiCSSdantutorial6:bagiandanelemenditemplateBlogger.

Langkah6:Mengujidibrowserlain

Carainisebenarnyasangatmenjengkelandanmenjenuhkan,tetapiharuskitalakukan,kenapa?

Dikarenakanyanglihatwebyangtelahkitarancangnantinyasangatlahbervariasi,adapengguna
opera, firefox, internet explorer dan lainlain, dan kadang kala tampilan yang kita rancang akan
bagus di browser yang satu tetapi belum tentu untuk browser yang lain, untuk itulah uji coba
perludilakukanagarwebkitaterlihatbagusuntukdilihatolehsemuaorang.

Adatoolyangbagusuntukmengujitampilanwebsiteagarkompatibeldisemuabrowser,cobalah
ujidiBrowsershots.org.

Langkah7:Menggunakangambarsebagailatarbelakang

Jika bosan dengan menggunakan warna yang polos ditemplate kita, kita bisa menggantinya
dengan gambar. Gambar ini dapat digunakan sebagai latar belakang dari keseluruhan template
atau untuk bagianbagian tertentu saja, misalnya Post, Sidebar, Footer, Header, dll. Bagian ini
akandibahasditutorial:Memodifikasikodedalampenggunaangambarsebagailatarbelakang.

31
http://cekidotgan.blogspot.com/

Langkah8:MenyelesaikanTemplate

Langkah ini adalah langkah yang terakhir, yaitu menguji template, melihat dengan hatihati
tampilanblogdanmemeriksanyaapakahsemuakodeyangdituliskandapatbekerjadenganbaik
atautidak.

32
http://cekidotgan.blogspot.com/

BagaimanaMenggunakanGambarSebagaiLatarBelakang?

Ini adalah tutorial terakhir dari Seri Tutorial Template Blogger. Pada tutorial terakhir ini,
Gembong.web.idakanmenjelaskanbagaimanamenggunakangambarsebagailatarbelakangdari
templatediBlogger.

Kita tentunya sering melihat templatetemplate dari suatu website/blog yang latar belakangnya
tidak menggunakan warna yang polos, akan tetapi terbuat dari pola yang berulang dari suatu
gambar. Gambar ini disebut sebagai gambar latar belakang. Gambar yang digunakan sebagai
latar belakang dapat berupa satu gambar besar yang mengisi layar atau atau gambar kecil
(misalnya50x50piksel)yangberulangsecarahorizontaldan/atauvertikal.

Gambar yang digunakan sebagai latar belakang, dapat diletakkan di bagian manapun, baik
dibagianBody(yangmengisilayarsecarapenuh),bagianPost,Sidebar,Comment,ataudibagian
header(CommentHeader).

Sebagai contoh kasus jika kita ingin membuat frame yang ada bayangannya untuk digunakan
didalamtemplate(sekarangbanyakdigunakandiblogblog),bagaimanamelakukannya??Secara
garis besar yang pertama dilakuka adalah membuat gambar kecil, yang mempunyai panjang
memenuhilebartemplate.Kemudianselanjutnyayangkeduaadalah,membuatgambaryangada
bayangannyayangditempatkandisampingkiridankanandandiulangsecaravertikal.Gambarini
nantinyadiletakkandibagianouterwrapper.

Lalubagaimanakodecarameletakkangambarsebagailatarbelakangyangdapatberulangsecara
vertikalmaupunhorisontal?

KodePeletakkanGambarSebagaiLatarBelakang

Misalkan kita ingin menggunakan gambar 100 x 100 piksel sebagai latar belakang di bagian
Sidebar1. Apa yang perlu kita lakukan adalah menemukan kode sidebar1 {...} di bagian CSS dan
kemudian menambahkan kode yang berwarna merah (kode ada dibawah) tersebut kedalam
bagianSidebar1.Kodeyangberwarnabirudibagianbawah,hanyalahcontohkodetambahansaja.

#sidebar1{
margin:0px10px15px10px;
padding:0000;
width:150px;
background:URL(http://alamaturldarigambar)repeatlefttop;
textalign:left;
}

Kodedigunakan"background:..."untukmeletakkangambarsebagailatarbelakangdanberulang
baiksecaravertikalmaupunhorisontal.Posisiawalgambarakanberadadiposisipalingkiri(left
most)danatassendiri(topmost).

Formatperintahbackgroundsecaraumumadalah

33
http://cekidotgan.blogspot.com/

background:URL(http://...)repeatcommandxpositionyposition;

PerintahPerulangan
norepeat(gambartidakdiulang)
repeat(berulangsecarahorisntaldanvertikal)
repeatx(berulangsecarahorisontal)
repeaty(berulangsecaravertikal)

PerintahPosisiHorisontal(x)
left(peletakkangambardimulaipadasisipalingkiri)
center(peletakkangambarmulaidaritengah)
right(peletakkangambarmulaidarisisipalingkanan)

PerintahPosisiVertikal(y)
top(peletakkangambardimulaidarisisipalingatas)
center(peletakkangambardimulaidaritengah)
bottom(peletakkangambardimulaidarisisipalingbawah)

34
http://cekidotgan.blogspot.com/