Mengawinkan tema Cacaban dengan Blue Campus

Opsi Baca: Tampilan Penuh Tampilan Web

Salam cmsF, kali ini kita akan belajar bagaimana mendesain tampilan cmsF agar lebih terlihat enak dilihat dan terkesan elegan. Tema yang anakn kita padukan pada saat ini adalah senandung cacaban karya pak alip dan blue campus. Untuk mendapatkan tema tersebut, silakan kunjungi ke tema.!"rmulasi."r.id

Pada prinsipnya dalam mendesain tema cmsF, yang dapat anda lalkukan adalah editing pada css#style, h"me.php, menu.php $jika diperlukan%, dan #img. &dapun bagian yang lain dapat kita m"di! dalam bentuk bl"k. Untuk kerangka tema yang kita pake saat ini adalah menggunakan senandung cacaban, silakan buka !"lder tema senandung cacaban dan akan terlihat seperti ini,

Sekarang mari kita belajar menadukan tema tersebut menjadi satu tema yang saling melengkapi keindahan dan !iture keduanya. Sebagai contoh: 'di( class)*clear*+'#di(+ 'di( id)*martabaktabs*+ 'ul+ 'li+'a target)*,blank* hre!)*-*+&rtikel'#a+'#li+ 'li+'a target)*,blank* hre!)*-*+Bl"gging'#a+'#li+ 'li+'a target)*,blank* hre!)*-*+.nternet'#a+'#li+ 'li+'a target)*,blank* hre!)*-*+T""ls'#a+'#li+ 'li+'a target)*,blank* hre!)*-*+/ink Satu'#a+'#li+ 'li+'a target)*,blank* hre!)*-*+/ink 0ua'#a+'#li+

'#ul+ '#di(+ .ni menunjukkan, jika anda mau edit bagian ini, misal 1arna huru!, 1arna menu maka anda akan diarahkan ke style.css pada Buka style.css dan cari baris ini martabaktabs2 backgr"und:-3 3 4d5backgr"und:6m"76linear6gradient$48deg, -3 3 4d 89,-338ea :339% nah -3 3 4d ++ adalah 1arna menu.
silakan pada bagian ini andapun bisa mengedit 1arna dan jenis !"nt pada bagian martabaktabs

2. Mengganti kolom sambutan kepala sekolah Pada h"me.php anda akan menemukan baris ini 'di( class);k"l"m6ba1ah6header:;+ 'di( class);jujulan;+Sambutan <epala Sek"lah'#di(+ 'di( class);isik"l"m6ba1ah6header:;+ =aka jika mau edit bagian ini anda buka style.css dan temukan ;k"l"m6ba1ah6 header:; kolom-bawahheader1{padding:0px;height:320px;width:690px;float:left;margin:0}.kolom-bawahheader2{padding:0px;width:269px;float:left} silahkan anda atur tinggi sambutan jika dirasa bagian ini terlalu tinggi, sebagai c"nt"h saya ganti menjadi spt ini : kolom-bawahheader1{padding:0px;height:250px;width:690px;float:left;margin:0}.kolom-bawahheader2{padding:0px;width:269px;float:left} Selanjutnya i ikolom-bawah-header1{height:2!0px;lineheight:1.";align:left;margin:0px;ba#kgro$nd:$rl%img&li whd.png' kita ganti menjadi : i ikolom-bawah-header1{height:200px;lineheight:1;align:left;margin:0px;ba#kgro$nd:$rl%img&li whd.png' .si header untuk pengumuman

i ikolom-bawah-header2{height:2!0px;lineheight:1.";align:left;margin:0px;padding:0px(15px} kita ganti menjadi i ikolom-bawah-header2{height:200px;lineheight:1;align:left;margin:0px;padding:0px(15px} 0an hasil yang &nda edit akan menjadi tampilan di ba1ah ini:

Cukup mudah bukan ?? Oke sekarang kita akan belajar bagaimana mendesain id kateg"ri dengan bacgr"und 1arna s"!t 1. Konten Buka style.css pada senandung caacaban dan temukan baris ini klep"n2backgr"und:-! ! ! 5padding:3p>51idth:?@ p>5!l"at:le!t5margin:3 4p> :3p> Ap>56m"76b"rder6radius:3 3 Bp> Bp>561ebkit6b"rder6radius:3 3 Bp> Bp>5b"rder6 radius:3 3 Bp> Bp>C diganti klep"n2backgr"und:-dde?ec5padding:p>51idth:?@ p>5!l"at:le!t5margin:3 4p> :3p> Ap>56m"76b"rder6radius:3 3 Bp> Bp>561ebkit6b"rder6radius:3 3 Bp> Bp>5b"rder6 radius:3 3 Bp> Bp>C Temukan juga ba is ini kupat,bleng"ng2line6height::.45align:le!t5margin:3p>5padding:8p> :3p>C.kupat,bleng"ng ul2list6style:n"ne5padding:35margin6t"p:3C.kupat,bleng"ng ul li2list6style:n"ne5padding6t"p:8p>5padding6b"tt"m::3p>5backgr"und:url$img#lislbr.png% diganti kupat,bleng"ng2line6height::.:5align:le!t5margin:3p>5padding:8p> Ap>C.kupat,bleng"ng ul2list6style:n"ne5padding:35margin6t"p:3C.kupat,bleng"ng ul li2list6style:n"ne5padding6t"p:8p>5padding6b"tt"m: p>5backgr"und:url$img#lislbr.png%

!ika anda be hasil maka tampilan akan menjadi sepe ti ini

". #diting label Pada bagian h"me.php temukan baris ini 'di( id);tahu,kuping:;+ 'di( class);jujulan;+&genda Sek"lah'#di(+ 'di( class);kupat,bleng"ng;+ 'ul+ 'Dphp Eagenda)mysFl,Fuery$*SG/GHT I FJO= *.E0B,<O0G.*,agenda OJ0GJ BK id,agenda 0GSH limit 4*%5 Ehitungagenda)mysFl,num,r"1s$Eagenda%5 gl"bal Ens5 i!$Ehitungagenda + 3% ........ '#di(+ '#di(+ <ita edit menjadi id kateg"ri berita 'di( id);tahu,kuping ;+ 'di( class);jujulan;+Jubrik Hi(itas =ahasis1a'#di(+ 'di( class);kupat,bleng"ng;+ 'ul+ 'Dphp Eberita)mysFl,Fuery$*SG/GHT I FJO= *.E0B,<O0G.*,berita, *. E0B,<O0G.*,kateg"ri WLGJG *.E0B,<O0G.*,berita.id,kateg"ri)*. E0B,<O0G.*,kateg"ri.id,kateg"ri &M0 t(N7ay,berita.id,kateg"ri);: ; &M0 status,terbit);:; OJ0GJ BK id,berita 0GSH /.=.T *%5 Ehitungberita)mysFl,num,r"1s$Eberita%5 i!$Ehitungberita + 3%2

1hile$Eb)mysFl,!etch,array$Eberita%%2 Ejudul ) strt"l"1er$preg,replace$*#s#*,*NaN7N*,EbO;judul,berita;P%%5 Ejudul ) preg,replace$;-W-;, ;;, Ejudul%5 Ejudul ) str,replace$*NaN7N*,*6*,Ejudul%5 Eurl,link ) *in!"6*.EbO;id,berita;P.*6*.Ejudul.*.html*5 Eurl,tgl ) *in!"6tanggal6*.EbO;tanggal,p"sting;P.*.html*5 Eurl,kat ) *in!"6kateg"ri6*.EbO;id,kateg"ri;P.*.html*5 Eurl,penulis ) *in!"6penulis6*.EbO;s,username;P.*.html*5 D+ 'li+'a hre!)*'Dphp ech" Eurl,link5D+* title)*'Dphp ech" EbO;judul,berita;P5D+*+'Dphp ech" *'b+EbOjudul,beritaP'#b+*5D+'#a+ 'br+'small+ 'Dphp Eisi,berita ) strip,tags$EbO;isi,berita;P%5 Eisi ) substr$Eisi,berita,3,:83%5 i! $EbO;gambar,kecil;PQ) ;n",image.jpg;%2 ech" *'p+'a hre!);Eurl,link; title); EbOjudul,beritaP;+'img src);images# EbOgambar,kecilP; 1idth);@3p>; style);!l"at:le!t5 margin: 8p> :3p> 3 35 padding: Bp>5 backgr"und: -!!!5 b"rder: :p> s"lid -dcdcdc;+'#a+Eisi...'a hre!);Eurl,link; title);EbOjudul,beritaP;+Jead ="re...'#a+'#p+'br+*5C else 2 ech" *'p+Eisi...'a hre!);Eurl,link; title);EbOjudul,beritaP;+Baca Selengkapnya...'#a+'#p+*5 C D+ '#li+ 'Dphp CC else 2D+ 'li+'a hre!)**+'b+0ata berita belum ada'#b+'#a+'#li+ 'Dphp C D+ 'di( align)*right*+'a hre!);http:##stembatema.sch.id#in!"6kateg"ri6:4.html; +'img src)*!ile#tema#'Dphp ech" E,SGSS.OMO;tema1eb;P5D +#css#img#m"re.png*+'#br+'#br+ '#ul+ '#di(+ '#di(+ /ihat t$%&a'(be ita.id(katego i)*12*, ini menjukkan pre(ect dbase yang saya gunakan adalah t$%&a' dan katego i)*12* . Silakan disesuaikan dengan punya anda, Selanjutnya lakukan hal yang sama pada beberapa id kateg"ri yang ingin anda tampilkan. Selanjutn'a anda buka st'le.css +ada tahu kuping 2

)tah$*k$ping2{ba#kgro$nd:)f2f2f2;padding:0px;width:332px;float:left;-mo+-borderradi$ :0(0(3px(3px;-webkit-border-radi$ :0(0(3px(3px;border-radi$ :0(0(3px(3px} Kita ubah menjadi )tah$*k$ping2{ba#kgro$nd:)e!f3f,;padding:0px;width:330px;float:left;-mo+-borderradi$ :0(0(5px(3px;-webkit-border-radi$ :0(0(3px(3px;border-radi$ :0(0(3px(3px} 0an hasilnya akan menjadi seperti ini

,angkah te akhi : <ita akan membuat Raleri memanjang h"ri7intal dengan 4 tampilan dan agenda sek"lah. Pada bagian h"me.php setelah baris 'di( id);amprut ;+ 'di( class);jujulan;+<ateg"ri Berita'#di(+ 'di( class);isi6amprut ;+ 'ul+ ..... '#di(+ '#di(+ Selanjutn'a kita masukkan sc ipt ini -diambil da i tema blue campus. 'di( id);klep"n;+ 'di( class);jujulan;+/ihat Raleri <ampus'#di(+ 'di( class);isi6amprut:;+ 'Dphp Ep"t")mysFl,Fuery$*SG/GHT I FJO= *.E0B,<O0G.*,galeri OJ0GJ BK id,galeri

0GSH /.=.T 4*%5 Ehitung!"t")mysFl,num,r"1s$Ep"t"%5 i!$Ehitung!"t" + 3%2 1hile$Eph)mysFl,!etch,array$Ep"t"%%2 D+ 'p class)*thumb*+'a id)*thumb:* hre!)*images#!"t"#galeri#'Dphp ech" *EphOnama,galeriP*5D+* class)*highslide* "nclick)*return hs.e>pand$this%*+ 'img src)*images#!"t"#galeri#'Dphp ech" *EphOnama,galeriP*5D+* alt)*Lighslide SS* title)*<lik untuk memperbesar !"t" 'Dphp ech" *EphOjudulP*5D+ T 'Dphp ech" *EphOdeskripsiP*5D+*#+'#a+ '#p+ 'Dphp CC else 2D+ 'b+F"t" belum ada'#b+ 'Dphp C D+ '#di(+ '#di(+ 'di( id);amprut:;+ 'di( class);jujulan;+&genda <ampus &< Temanggung'#di(+ 'di( class);isi6amprut:;+ 'Dphp Eagenda)mysFl,Fuery$*SG/GHT I FJO= *.E0B,<O0G.*,agenda OJ0GJ BK id,agenda 0GSH limit *%5 Ehitungagenda)mysFl,num,r"1s$Eagenda%5 gl"bal Ens5 i!$Ehitungagenda + 3%2 1hile$Eag)mysFl,!etch,array$Eagenda%%2 Ejudul)EnsO;isi,pengaturan;P5 Ejudul ) strt"l"1er$preg,replace$*#s#*,*6*,Ejudul%%5 D+ 'L4+'b+'Dphp ech" *'a hre!);agenda6Ejudul.html;+EagOjudul,agendaP'#a+*5D +'#b+'#h4+ 'p style)*!"nt6si7e: : p>5c"l"r: -3335te>t6align: justi!y*+ 'b+Tempat : '#b+'Dphp ech" *EagOtempat,agendaP*5D+'br+ 'b+'a style)*c"l"r: -:::5!"nt6si7e: :Bp>5*+.n!"rmasi : '#b+'Dphp ech" *EagOketerangan,agendaP*5D+ '#p+ 'Dphp CC else 2D+ 'p+'b+'a hre!)**+0ata agenda belum ada'#a+'#b+'#p+ 'Dphp C D+ '#table+

'#di(+ '#di(+ 'di( class)*clear*+'#di(+ Script yang kita masukkan diatas, akan menghasilkan tampilan seperti ini

,angkah Te akhi /angkah terakhir adalah mengganti bacgr"und: Silakan upl"ad !ile jpg ini ke dalam !"lder style#img
/012,03/ B3CK45062/ B,6#

<arena !ile bacgr"und adalah blue.jpg =aka atur style.css b"dy2margin:35padding:35backgr"und:url$img#backy.jpg% repeat6> !i>ed center t"p Menjadi b"dy2margin:35padding:35backgr"und:url$img#blue.jpg% repeat6> !i>ed center t"p Silakan anda re!resh br"1sing anda dan selesailah tema anda menjadi seperti ini. <lik ic"n 0G=O diba1ah ini

Mah selesai dah kita sudah bisa menciptakan tema cmsF yang bernuasa s"!t dan elegan jika anda berhasil. Tema ini kita kasih nama cacaban maga&ine

Selamat be k easi7 dan salam cms8