artiste er

8/16/2019 Artiste Er

1/29

Ada 10 elemenan bagian yang penting dalam, mambuat template dan di artisteersemuanya lengkap, plus satu dari artisteer yaitu Tool Suggest.

1. Awal sekali pergunakan Ideas --- Sugest Design. Untuk memilihkira-kita template seperti apa yang ingi kamu buat seara subyekti!.

". #olor $ %onts, adalah untuk pemilihan warna dasar dari template kamu.Tersedia banyak sekali pilihan warna, &ika bingung kembali gunakan Suggest #olors.

'. (ayout terdiri dari dua tool yaitu)

Page Layout, bisa di pilih.

• *eader, +enu tampilan *eader dengan +enu.

• +enu, *eader kebalikannya +enu dahulu baru *eader.


2/29

• *eader hanya header sa&a yang di tampilkan tanpa menu.

• +enu hanya menu sa&a yang di tampilkan tanpa header.

Columns, Tinggal di sesuaikan sa&a 1,", atau ' kolom template.

'. akground, latar belakang pilih sesuai kebutuhan dan tanbahkan e!ek &ika ingin, e!ek-e!eknya terdiri dari

• /lare, memberi e!ek glare atau silau dalam siluet.

• Image or Teksture, memberi e!ek tektur.

• /radien, memberi e!ek /radien pada latar belakang.

• %ill olor, untuk memasukkan warna sesuai dengan keinginan kamu.

• %rom %ile adalah memasukkan gambar lain dari !ile yang kamu punya.

. Sheet lembar potongan atau bentuk dari template, terdiri dari

• uilt-In.

• idth, (ebar Sheet Template.


3/29

• Top 2!!set, batas bagian atas dengan Template.

• 3adding, atas pinggiran dalam template.

• 4adiaus, atas u&ung template.

• order, 3embatas sisi-sisi template.

• Shadow, memberi e!ek bayangan pada sisi-sisi template.

• Transparany, adalah tingkan tembus pandang dari sheet template antara 50 sampai

1006.

• %ill #ollor, untuk memasukkan warna baru ke sheet template.

5. *eader, kepala template

Contoh Header

3engaturan terletak pada )width, lebar *eader.*eight, tinggi header dan.Teks lok, bloking untuk teks header.

Background *eader, latar belakang header.

• Posisition, tata letak dari bakground header.

• From File, isa di pilih atau bisa di tambahkan gambar dari !ile kamu.

• Efek , beri &uga sedikit sentuhan 7isual dengan e!ek.

Foreground Photo, latar depan header

3ilih sebuah gambar yang tersedia atau masukkan dari !ile gambar milik kamu sendiridi From File.Posisiton, sama untuk mengatur tata letak.

Efek , terdiri dari dua yaitu Recolor

danGlow

.


4/29

8ote ) 3engaturan dan tool di atas tidak ada &ika di (ayout --- 3age (ayout kamumemilih +enu Atau Simple.

Headline, adalah 9udul dari log kamu

Slogan, adalah deskripsi dari blog kamu:eduanya sama warnanya bisa di ubah-ubah, kemudian Position letak headline dan slogan.Size, merubah ukuran ke duanya dan terakhir Align, alinea letak dari keduanya.

;. +enu

+enu Style, bentuk dari menu. Terdiri dari <

• Styling

• Shape, bentuk dari menu.

• Margin, untuk memberi batas lebar pada menu bar.

• lign, alinea +enu

• !istence, memberi &arak masing-masing item menu.

• Seperator, pembatas pada masing-masing menu.

Coloring, terdiri dari beberapa #ostumi=able pilihan warna.

• Menu Bar, di sertai e!ek Teksture dan /radien.

• Fill, untuk memasukkan warna baru pada +enu bar

• Border, memberi baras pada +enu ar.


5/29

"tem, bagian dari menu

• Dengan pilihan Si=e ukuran, 4adius, tekstur dan /radien.

• %ill, memasukkan warna baru pada 3assi7e menu, akti7e menu dan *a7ored saat

tersentuh pointer ursor.

• order, batas dengan 3assi7e menu, akti7e menu dan *a7ored saat tersentuh pointer

ursor.

• dan Teks, 3assi7e menu, akti7e menu dan *a7ored saat tersentuh pointer ursor dan

%ont pengaturan dari teks tersebut.

Su# "tem, bagian dari menu dropdown, pengaturannya hampir sama dengan yang di atas.


6/29

Cara Bikin $emplate Blog Sendiri

Cara Bikin $emplate Blog Sendiri - $emplate #log #uatan sendiri adalah kebanggan bagisetiap blogger, :ali ini saya akan kasih tips membuat template blog sendiri yang saya

pela&ari selama mengutak - atiktemplate. Template yang akan kita gunakan adalah templateminima.

+engapa saya menggunakan template minima>> seperti kita ketahui bersama bahwa templateminima adalah template tata letak yang paling banyak di gunakan para blogger dalam bereksperimen. erbeda dengan templae tata letak lain, seperti rounder, template minimamempunyai kode ss yang tidak rumit dan tentu sa&a mudah di edit. :arna itu, tanpa basa -

basi silahkan sobat ikuti tutorial membuat template blog sendiri berikut.

3ertama - tama kita membahas dulu bagian paling mendasar dari pembuatan template blog,yaitu pengenalan akan #agian % #agian template #logger.

?>@ml 7ersionB1.0B enodingBUT%-CB >?ED2#TF3G html 3U(I# B-HH'#HHDTD *T+( 1.0 StritHHG8BBhttp)HHwww.w'.orgHT4H@[email protected]+erupakan deklarasi !ile *T+( pada template logger dengan &enis Strit. *T+( &enisStrit digunakan untuk membuat halaman yang layout dan !ormatnya dikontrol penuh oleh#SS. 3ada deklarasi ini tidak menggunakan tag !ont dan table

?head ?b)inlude dataJblogJ nameJall-head-ontentJH

?title?data)blog.pageTitleH?Htitle

http://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.htmlhttp://christiantatelu.blogspot.com/2012/03/cara-bikin-template-blog-sendiri.html


7/29

?meta e@pr)ontentJdata)blog.metaDesriptionJ nameJdesriptionJH ?b)skin?EK#DATAKHLagian kepala atau head template blog yang berisi &udul blog dan awal dari kode #SS. Disinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag lainnya.

body M bakground)Nbgolor< margin)0< olor)Nte@tolor< !ont)@-small /eorgia Seri!< !ont-si=eHL LH)HLLHsmall< !ont-si=e) HLLHsmall< te@t-align) enter< Oody adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog

biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a)link M olor)Nlinkolor< te@t-deoration)none< O:ode ini untuk mengubah tampilan link pada template blog Anda.

a)7isited M olor)N7isitedlinkolor< te@t-deoration)none<

OIni menubah tampilan link yang pernah di kun&ungi

a)ho7er M olor)Ntitleolor< te@t-deoration)underline<O +erubah tampilan link ketika pointer di atas link

a img M border-width)0< O+engubah tampilan link bergambar

&' Header

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

'&


8/29

Pheader-wrapper M width)550p@< margin)0 auto 10p@< border)1p@ solid Nborderolor< O

Terdapat pada bagian atas template yang berisi &udul dan deskripsi blog dan merupakan bagian pertama yang di baa serah engine.

Pheader-inner M bakground-position) enter< margin-le!t) auto< margin-right) auto<Omengubah tampilan header bagian dalam.

Pheader Mmargin) p@<

border) 1p@ solid Nborderolor< te@t-align) enter< olor)Npagetitleolor<O+engubah tampilan &udul blog dan deskripsi blog seara keseluruhan

Pheader h1 M

margin)p@ p@ 0< padding)1p@ "0p@ ."em< line-height)1."em< te@t-trans!orm)upperase< letter-spaing)."em< !ont) Npagetitle!ont<O+engubah tampilan &udul dan deskripsi blog tingkat 1

Pheader a M

olor)Npagetitleolor< te@t-deoration)none< O+engubah tampilan link yang terdapat pada header

Pheader a)ho7er M olor)Npagetitleolor< O+engubah tampilan link pada header &ika pointer mouse berada di atas link.


9/29

Pheader .desription M margin)0 p@ p@< padding)0 "0p@ 1p@< ma@-width);00p@< te@t-trans!orm)upperase<

letter-spaing)."em< line-height) 1.Qem< !ont) Ndesription!ont< olor) Ndesriptionolor< O+engubah tampilan deskripsi blog yang terdapat pada header. iasanya pada tingkat " yaituh"

Pheader img M margin-NstartSide) auto<

margin-NendSide) auto<O+engubah tampilan gambar header.

&' (uter%)rapper

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% '&

Pouter-wrapper M width) 550p@< margin)0 auto<

padding)10p@< te@t-align)NstartSide< !ont) Nbody!ont< O

berisi seluruh wrapper seperti header-wrapper, main-wrapper, sidebar-wrapper, !ooter-wrapper dan ontent-wrapper.

Pmain-wrapper M width) Q10p@< !loat) NstartSide<

word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LH O adalah area postingan bagian yang dalamnya adalah artikel

Psidebar-wrapper M width) ""0p@< !loat) NendSide< word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LHO


10/29

er!ungsi sebagai tempat widgetHgadget yang sobat pasang baik widget dari pihak bloggeratau melibatkan pihak ketiga dengan !asilitas *T+(H9a7asript.

&' Headings

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% '&

h" M margin)1.em 0 .;em< !ont)Nheader!ont< line-height) 1.Qem< te@t-trans!orm)upperase< letter-spaing)."em< olor)Nsidebarolor<O

:ode #SS ini mengubah tampilan &udul pada blog dengan kelas h" seperti &udul artikel, &udulwidget pada sidebar,&udul widget-!ooter, dll.

sekarang kita masuk ke bagian post nya.

&' Posts

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

'&

h".date-header M margin)1.em 0 .em< O+engubah tampilan tanggal artikel.

.post M margin).em 0 1.em< border-bottom)1p@ dotted Nborderolor< padding-bottom)1.em<

O+engubah tampilan artikel blog.

.post h' M margin)."em 0 0< padding)0 0 Qp@< !ont-si=e)1Q06< !ont-weight)normal< line-height)1.Qem< olor)Ntitleolor<O


11/29

+engubah tampilan &udul artikel blog.

.post h' a, .post h' a)7isited, .post h' strong M

display)blok< te@t-deoration)none< olor)Ntitleolor< !ont-weight)normal<O+engubah tampilan link &udul artikel.

.post h' strong, .post h' a)ho7er M olor)Nte@tolor<O

mengubah tampilan link &udul artikel ketika di lewati pointer.

.post-body M margin)0 0 .;em< line-height)1.5em<O+engubah tampilan bagian posting.

.post-body blokRuote M

line-height)1.'em<O +engubah H memodi!ikasi blokRuote pada postingan blog.

.post-!ooter M margin) .;em 0< olor)Nsidebarolor< te@t-trans!orm)upperase< letter-spaing).1em< !ont) Npost!ooter!ont<

line-height) 1.Qem<O+engubah atatan kaki atau bagin !ooter pada postingan blog.

.omment-link M margin-NstartSide).5em<O+engubah tampilan link komentar &umlah komentar .

.post img, table.tr-aption-ontainer M padding)Qp@


12/29

border)1p@ solid Nborderolor<O+engubah tampilan image H gambar pada areal postingan.

&' Comments%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% '&

Pomments hQ M margin)1em 0< !ont-weight) bold< line-height) 1.Qem< te@t-trans!orm)upperase< letter-spaing)."em< olor) Nsidebarolor<

O+engubah tampilan &udul bagian komentar.

Pomments-blok M margin)1em 0 1.em< line-height)1.5em< O+engubah tampilan bagian keseluruhan komentar.

Pomments-blok .omment-author M margin).em 0< O+engubah tampilan link author atau link komentator

Pomments-blok .omment-body M margin)."em 0 0< O +engubah tampilan isi komentar.

Pomments-blok .omment-!ooter M margin)-."em 0 "em< line-height) 1.Qem< te@t-trans!orm)upperase< letter-spaing).1em< O+engubah tampilan !ooter komentar. #omment-!ooter biasanya berisi tanggal komentar.

.deleted-omment M

!ont-style)itali


13/29

olor)gray< O+engubah tampilan komentar yang telah di hapus.

.!eed-links M lear) both< line-height) ".em<Omengubah tampilan link !eed

&' Side#ar Content

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% '&

.sidebar Molor) Nsidebarte@tolor<

line-height) 1.em< O +engubah tampilan sidebar seara keseluruhan.

.sidebar ul M list-style)none< margin)0 0 0< padding)0 0 0<

O+engubah tampilan da!tar pada sidebar.

.sidebar li M margin)0< padding-top)0< padding-NendSide)0< padding-bottom)."em< padding-NstartSide)1p@< te@t-indent)-1p@<

line-height)1.em< O+engubah tampilan de!inisi da!tar dari tag ?ul

.sidebar .widget, .main .widget M border-bottom)1p@ dotted Nborderolor< margin)0 0 1.em< padding)0 0 1.em< O+engubah tampilan widget seara keseluruhan termasuk area postingan dan !ooter.


14/29

&' Footer

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% '&

P!ooter M

width)550p@< lear)both< margin)0 auto< padding-top)1p@< line-height) 1.5em< te@t-trans!orm)upperase< letter-spaing).1em< te@t-align) enter<O3ada dasarnya sam seperti sidebar namu lataknya yang berbeda. !ooter berada di bagian

paling bawah atau di atas dari redits template blog hanya ada pada template yang di

download .

?Hb)skin+erupakan akhir dari kode ss pada template blogger. Di bawah kode ini,sobat bisamenyisipkan sript. seperti readmore, related post, dll

?Hhead+erupakan pasang atau tag penutup dari tag ?head pada dokumen *T+(.

*#ody+

agian ini di mulai dari kode berikut. ?di7 idJouter-wrapperJ?di7 idJwrap"J +erupakan kode html dari outer-wrapper.

?di7 idJheader-wrapperJ ?b)setion lassJheaderJ idJheaderJ ma@widgetsJ1J showaddelementJnoJ

?b)widget idJ*eader1J lokedJtrueJ titleJtes tatelu *eaderJ typeJ*eaderJH?Hb)setion ?Hdi7+erupakan kode html dari header-wrapper.

?di7 idJontent-wrapperJagian main-wrapper dan sidebar-wrapper berada dalam tag ini

?di7 idJrossol-wrapperJ styleJte@t-align)enterJ

?b)setion lassJrossolJ idJrossolJH ?Hdi7


15/29

agian antara header-wrapper dan ontent-wrapper.

?di7 idJmain-wrapperJ?b)setion lassJmainJ idJmainJ showaddelementJnoJ

?b)widget idJlog1J lokedJtrueJ titleJ3osting logJ typeJlogJH?Hb)setion ?Hdi7:ode html dari area postingan atau main-wrapper

?di7 idJsidebar-wrapperJ ?b)setion lassJsidebarJ idJsidebarJ pre!erredJyesJ?b)widget idJ3opular3osts1J lokedJ!alseJ titleJ3opular 3ostsJ typeJ3opular3ostsJH?Hb)setion ?Hdi7

:ode html untuk sidebar-wrapper

?E-- spaer !or skins that want sidebar and main to be the same height-- ?di7 lassJlearJ$P150


16/29

3ostingan kali ini adalah kelan&utan dari postingan sebelumnya yaitu ara bikin template blogsendiri. :ali ini kita akan membahas kode #ss dan rapper. +embuat template bloggersebenarnya sangatlah mudah dan mengasyikan &ika kita sudah menguasai ss dan htmlnya,terutama arti - arti kode ss #asading Styles Sheet seperti margin, padding, border, dll.erikut pen&elasan singkatnya.

+argin ) &arakHbatas elemen dengan elemen lain3adding ) &arak elemen dengan isi elemen elemen anakorder ) borderHgari tepi elemen pengguaan solid, dotted, double dll%loat ) posisi konten penggunaan le!t, right,enter, dll #olor ) warnaakground ) latar belakang%ont ) huru! %ont-!amily ) &enis huru! %ont-si=e ) ukuran huru! %ont-weigth ) atribut huru! penggunaan bold, underline, strike dll

Te@t-align ) posisi te@t pengguaan le!t, right, enter, bottom, top, Nendside, dan Nstarside Te@t-deoration ) hampir sama dengan !ont-weightImg ) image atau gambar idth ) lebar *eight ) tinggi(e!t ) kiri4ight ) kanan#enter ) tengah<9usti!y ) sama rata kiri kananottom ) bawahTop ) atasTe@t-trans!orm ) penggunaan apitali=e, upperase, lowerase dan none (etter-spaing ) &arak antar horisontal antara huru!

Sekarang kita mulai membuat template.

(angkah awal yang harus sobat lakukan untuk membuat template adalah menentukan warnalatar belakang dari template tersebut. warna bakground bisa sobat atur pada ss berikut.

body M bakground)Nbgolor< -arna #ackground .

margin)0


17/29

atau bisa &uga dengan gambar,dengan penggunaan seperti berikut. bakground ) P000000< url url gambar no repeat-@<

:emudian saatnya sobat menentukan dan meyamakan ukuran lebar header%-rapper,outer%-rapper dan footer%-rapper.

Pheader-wrapper M -idth/001p2


18/29

-idth/001p24 lear)both< margin)0 auto< padding%top/36p24

line-height) 1.5em<

te@t-trans!orm)upperase< letter-spaing).1em< te@t-align) enter<O

setelah itu sekarang kita mengedit wrapper lain dalam outer-wrapper, yaitu main dan sidebarwrapper.

Pmain-wrapper M -idth/ 831p24

float/ 5startSide4

word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LH O

Psidebar-wrapper M -idth/ 991p24

float/ 5endSide4

word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LHO

Atur lebarnya keduanya dengan memperhitungkan lebar header dan margin serta paddingnya.misalnya lebar header 711p2 maka lebar main-wrapper bisa sobat oba dengan 0p@ dansidebar-wrappernya '[email protected] '0 00p@. namun saya sangat an&urkan untuk sobat menggunakan padding danmargin ontoh 10p@ .

erikut kodenya.

Pmain-wrapper M -idth/ 6:1p24

float/ 5startSide4 main%-rapper akan #erada di sisi kiri .padding/31p24

margin%right/31p24 mem#eri ;arak antara main dan side#ar .

border)1p@ solid P000000< HL border tambahan LH word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LH O

Psidebar-wrapper M -idth/ :36p24

float/ 5endSide4 side#ar akan #erada di sisi kanan .

padding/31p24 border)1p@ solid P000000< HL border tambahan LH


19/29

word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LHO

9adi singkatnya, keseluruhan wrappernya kira - kira seperti ini.

Pheader-wrapper M -idth/711p2


20/29

erikut kode an&uran dari saya.

Pheader-wrapperMwidth)00p@<margin-bottom)10p@<

border)1p@ solid P000000


21/29

word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LH O

Psidebar-wrapper M

width) '1p@< !loat) NendSide<

padding)10p@< border)1p@ solid P000000< HL border tambahan LH word-wrap) break-word< HL !i@ !or long te@t breaking sidebar !loat in IG LH o7er!low) hidden< HL !i@ !or long non-te@t ontent breaking IG sidebar !loat LHO

P!ooter M width)00p@< lear)both<

margin)0 auto< padding-top)1p@< line-height) 1.5em< te@t-trans!orm)upperase< letter-spaing).1em< te@t-align) enter<O

Tampilan untuk kode an&uran di atas seperti berikut.


22/29

(an&ut ke cara #ikin template #log sendiri #agian :.

3ostingan kali ini adalah kelan&utan dari postingan sebelumnya tentang ara bikin template blog sendiri bagian ". :ali ini kita akan mem!okuskan pembahasan pada komponen lain diheader. Silahkan simak tutorial berikut.


23/29

hasil template pada tutorial sebelumnya.

:ira kira seperti ini kode header seara keseluruhan.


24/29

• kode berwarna #iru adalah kode yang biasa di edit untuk membagi " kolom header

serta memodi!ikasi konten di dalam header seara keseluruhan.

•

kode berwarna ungu adalah kode untuk &udul blog.

• kode berwarna merah adalah kode untuk deskripsi blog

• kode berwarna hi;au adalah kode untuk e!ek ho7er pada &udul blog

• kode beretak te#al digunakan untuk mengatur tampilan image atau gambar dalam

header.

ganti kode di atas dengan kode berikut.


25/29

Pheader-wrapperMwidth)00p@<margin-bottom)10p@<

border)1p@ solid P000000


26/29

margin-NendSide) auto<O

hasilnya akan seperti ini

Setelah membahas tentang header, sekarang kita masuk di *eading.

Seperti yang saya &elaskan pada ara bikin template blog bagian 1, bahwa heading adalahuntuk mengubah tampilan &udul pada blog dengan kelas h" seperti &udul artikel, &udul widget

pada sidebar,&udul widget-!ooter, dll. berikut kodenya

h" M margin)1.em 0 .;em< !ont)Nheader!ont< line-height) 1.Qem<

te@t-trans!orm)upperase


27/29

font%size/3Ap24

letter-spaing)."em<olor)P000O kode beretak te#al adalah kode yang di tambahkan.

berikut tempilannya...

3ada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar beradadalam satu kotak, kita akan menoba membuat area postingan seara terpisah - pisah denganmengedit kode berikut.

.post M margin).em 0 1.em< border-bottom)1p@ dotted Nborderolor< padding-bottom)1.em< O.post h' M margin)."em 0 0< padding)0 0 Qp@< !ont-si=e)1Q06< !ont-weight)normal< line-height)1.Qem< olor)Ntitleolor<O

ganti dengan kode berikut

.post Mmargin-right)p@


28/29

margin-bottom)10p@<olor)P000<

bakground)P!!!!!!<line-height)"0p@<

border)1p@ solid P"""<

padding)p@<O.post h1Mmargin)p@<

padding-right)10p@< !ont-si=e)"0p@<

border-bottom)1p@ solid P000000<!ont-weight)normal<line-height)1.Qem<olor)NtitleolorO

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut..sidebar .widget, .main .widget M border-bottom)1p@ dotted Nborderolor< margin)0 0 1.em< padding)0 0 1.em< O

ganti dengan kode berikut.main .widgetM

border)0p@ solid Nborderolor< bakground)P%%%< padding)0 0 0emO

.sidebar .widget Mmargin-bottom)10p@<olor)P000<

bakground)P!!!!!!< border)1p@ solid P"""< padding)'p@ 10p@ 10p@ 10p@<

O

dengan kode di atas, tampilan template nya akan &adi seperti ini..


29/29

tunggu kelan&utannya di cara #ikin template #agian 8..

artiste er

Documents