Merubah Template Hasil Download

Share Article : Tweet This FB Share Email Share

oleh cerita anak kost on Wednesday, February 29, 2012


Sekarang kita akan belajar bagaimana merubah template hasil download, seperti di terangkan pada artikel sebelumnya yaitu memodifikasi template download kita telah menemukan dimana kede HTML yang menunjukan perubahan template dengan bantuan alat. Area tersebutlah tempat dimana kita bisa merubah-rubah template.

Namun sebenarnya template hasil download lebih mudah ditemukan kode tempat perubahan templatenya di banding dengan tempate bawaan blog, hal ini karena si penyedia template juga sadar akan kebutuhan penguna untuk memodifikasi templatenya. pertannyaanya di mana tempat atau area tersebut? mudah saja, untuk template download area perubahannya dimulai dengan tanda seperti dibawan ini.

/* Variable definitions
/*  -------------- * WRAPPER LAYOUT *  ------------------- */
/*  -------------- * HEADER *  ------------------- */
/*  -------------- * SIDEBAR & WIDGET *  ------------------- */
/*  -------------- * MENU & SEARCH*  ------------------- */

Apa yang bisa kita rubah? tentu variabel di dalamnya, yaitu angka angka baik yang menunjukan warna, ukuran ataupun gambar. yang perlu kita ketahui sedikit mengenai bahasa HTML untuk melakukan perubahan. Dalam bahasa HTML dikenal namanya struktur penyusunan seperti 'tag, elemen, atribut dan nilai'. Tag merupakan lambang lambag khusus seperti ">", "<","/" sedangkan elemen adalah teks yang di dalam tag, seperti <head>, berarti 'head' itu adalah elemennya. kalau ada kode untuk merubah warna background kodenya adalah <head bgcolor='0000ff'>, body merupakan element bgcolor adalah atribut sedangkan '0000ff' adalah nilainya. dan bagaimana mengidentifikasikan nilai itulah yang kita perlukan untuk dapat menganti atau momodifikasi template download an.

Untuk belajar HTML lengkap bisa di klik disini, namun saya kira kita tidak perlu belajar semuanya. yang kita perlu hanya dasarnya saja, kalau kita terpaku hanya pada belajar HTML nantinya blog kita malah rumah mewah baru, yaitu bagus di luarnya tetapi di dalamnya kosong. Tampilan blog kita bagus namun kontentnya justru tidak bertambah.

Menyambung pertanyaan Rizky Kazegami yang berada di kolom request, tentang bagaimana merubah background blog, maka pada bagian bawah ini lah jawabanya. kita harus menemukan dahulu kodenya, kode atau scrip seperti diatas, tempat dimana background dirubah. kalau perlu, gunakan colorsniffer yang telah saya bahas di memodifikasi template download. caranya, dengan mencari kodewarna background dahulu dengan colorsniffer, kemudian ketik kode warna (pada kolom edit HTML) tersebut untuk menemukan tempat dimana background di rubah. atau supaya lebih mudah, bisa mengunakan F2 (search) kemudian ketik Background Color, disitulah kode untuk merubah warna background.

Untuk memodifikasi template setelah kita tau areanya, akan kita temukan kode (pada kolom edit HTML tentunya) seperti ini misalnya.
/* Variable definitions
========================
<Variable type="font" name="pagefont" default="normal normal 100% trebuchet, arial, verdana, sans-serif" description="General Font Properties" value="normal normal 100% verdana">
<Variable type="color" name="pagefontcolor" default="#444444" description="Page Font Color" value="#444444">

/*  -------------- * WRAPPER LAYOUT *  ------------------- */
#outer-wrapper { margin:0 auto; width:980px; text-align:left; font:$pagefont; color:$pagefontcolor }
#header-wrapper { height:90px; width:980px; padding-top:20px }
#header-inner { float:left }
#header-left { float:left; width:640px; height:60px; padding-left:10px }
#header-right {float:right; width:320px; height:60px; text-align:right }

Nah yang berwarna merah tersebut adalah nilainya, berarti kita ganti nilainya dengan apa yang kita inginkan. hal ini memang terlihat mudah, namun bagi seorang pemula yang belom memahami, akan terlihat sulit. rajin rajinlah trying and error, mencoba coba sendiri dan membuktikannya. jadi kita tau apa yang berubah dan kode mana yang melakukan perubahan tersebut. Hal yang paling penting anda harus membuat backup sebelumnya takut takut terjadi kesalan. atau anda bisa membuat satu blog lagi khusus untuk percobaan. Kalo dirasa sudah pas, baru kita ganti kodenya. selamat merubah template hasil download.

Fariza Indrianto Cerita Anak Kost Updated at: Wednesday, February 29, 2012

{ 31 komentar... read them below or add one }

Asalasah said... Reply Comment

Wuiddiiihhh mantaapp gan.. ane selama ini suka bgt modif2 template, tapi banyak yang gak tau istilahnya apa. maklum lah otodidak.. haha disini setidaknya ane bisa tau beberapa hal lagi mengenai istilah dalam bahasa html itu.. keren keren.. oyaa headernya juga udah keren sob.. Cerita Anak Kost. :-bd . lanjutkan dan teruslah berkarya :D

Drieant said... Reply Comment

@Asalasah: ok gan ;win

arie5758 said... Reply Comment

Saya menggunakan template donlotan mulai awal sampai skr, template dari wordpress yg di modif ke blogspot. Kodenya nya lain sehingga kadang kalau mau modif selalu meraba² yang mana tepatnya.. hehehe...

Trims ya atas pengertian dasar ini. Blognya bagus dan simple gan :)

Arriyadh Prayugo said... Reply Comment

waw keren masbro, ane masih dalam tahap belajar nih

Drieant said... Reply Comment

@Arriyadh Prayugo:sama gan, ane juga masih belajr. masih bayi di sini.
@arie5758: iya bang, sama sama ane juga masih belajar. masih meraba raba. makasih bang, ane emang suka yang sederhana. ;luph karena dengan kesedernahaan bisa visitor friendly, yang kata abang bilang.

Asis Sugianto said... Reply Comment

wah makasih sobat lumayan bisa buat referensi oprek html template walapun sering bingung dgn kodenya sobat...

Dadi heryana said... Reply Comment

kelihatannya perlu belajar banyak dulu tentang html, saya masih belum berani untuk mengubah kode html. tapi makasih info nya.

Uswah said... Reply Comment

mangsetap gan... Oia template bawaan donlotanku kan warnanya biru, kalo dirubah jd warna item pake kode mana yak? :D tararengkyuuu :D

system of blog said... Reply Comment

Hemmm selamat berjuang bagi yang otak atik templateX :D,

Benny Dwi said... Reply Comment

wah keren juga ini, klo saya belajar sendiri jadi nyoba-nyoba aja dulu :D

Rubiyanto Sutrisno said... Reply Comment

Masih takut mainan template, hihi

Drieant said... Reply Comment

@Benny Dwi:sama gan, ane juga nyoba nyoba. :D
@system of blog:iya gan, perjuangan berat. tapi cukup sepadan hasilnya.
@Uswah:ane ke TKP dulu ya gan.
@Dadi heryana:iya gan, sama sama belajar kita.
@Asis Sugianto: wah kan ente masternya gan. :D

kade_KM said... Reply Comment

mantaf gan... ane pegen tau gan gimana bikin sidebar kyk punya agan ini... yang download are jadi 2 gitu.. trus membuat daftar isi, artikel asik dan award sekalian gima caranya bikin garis2 dibawahnya ya gan ... :-D newbe gan.

Fahri Samudra said... Reply Comment

Wah, ini nih yg mantap, bagus banget tipsnya, memudahkan ane buat edit template, kalo menurut ane sih, yaaa... Pinter-pinter bahasa Inggris sob, seperti istilah-istilah head, wrapper, Sidebar, dll. jadi ngerti kode apa yg kita akan rubah, nice share sob

Drieant said... Reply Comment

@Uswah: search aja sist di HTML kode 'backgrund' nah di sna ada kodenya. cocokin dengan warnanya. klo tadi sempet ta cek warna di sista tu untuk postingannya #1A2A41, sedangkan di backgrud itu warnanya #030F22. tapi ga tau manya yang mau di rubah, soalnya sista bacgrudnya juga ada gambarnya si. trus klo postngan di rubah warnanya ke hitam, dirubah ke kode #000000. download dulu aja sist, takut terjadi kesalahn. sering coba coba aja sist. ok

Drieant said... Reply Comment

@kade_KM: wah peratanyaan ente beruntun ni gan. klo yang di dowload area ada dua. itu karena pake prinsip 'tabel' gan. klo yang daftar isi dan lain lain, itu pake menu tab tanpa kode HTML. agan cari aja postingan ane yang di 'ngeblog amatir' judulnya merubah tampilan blog. atau klo mau cepet, agan bisa cari di search engine yang judulnya membuat tab tanpa edit THML. semoga sedikit membantu. klo mau sabar, ane ntar bikinin tritnya. ok. ikutin aj terus ya. :D

Blog Keperawatan said... Reply Comment

Terima kasih sahabat atas berbagi pengetahuannya ini.
kemarin sempat bergonta ganti template.Sekarang nyaman dengan template yang digunakan sahabat

Blog Keperawatan said... Reply Comment

Oh ya sahabat, hampir lupa...Yang dijanjiin untuk dibuat script daftar isi ya sahabat.
Pengin ngubah daftar isinya nih.Thanks
Request nih

Black Angel Syndicate said... Reply Comment

wah makasih infonya sob jadi bisa merubah template nih :)
Maaf baru mampir soalnya sibuk sob

Drieant said... Reply Comment

@Black Angel Syndicate:monggo gan, silahkan di rubah rubah sendri.
@Coretan Pemula:wah langsung ane ambil gan. ok :D
@Blog Keperawatan: ok gan, sudah di buat si. tinggal penjadwalan tampilnya saja. ok gan. sabar ya.

Yusup Laskar said... Reply Comment

template hasil download emang lumayan gampang untuk diedit,, gak seperti template bawaan,, saya selalu pusing ketika mengedit template bawaan

Abe said... Reply Comment

saya suka utak atik template agar sesuai dengan keinginan saya, tapi saya gak tahu, apa sih fungsi kode 'variabel' itu ?

Alprablog™ said... Reply Comment

lumayan nih buat yang masih newbie ;hepi

Rizky Kazegami said... Reply Comment

OK gan thanks banget request ane udah di posting entar ane coba gan :D

Ario Antoko said... Reply Comment

aku sekarang lebih suka pakai template bawaan blogspot, soalnya enak kalau ada fitur2 baru blogger sering langsung dapat :)

Bintang Antik Sejahtera said... Reply Comment

Sedang cari-cari template...Eh..nemu juga yang mantab cara modifnya,,tolong bantuin kalau tetep gagal,,kapan Online,nich No ku HP Bang..bantuin saya,,,bener saya nggak bisa...085853445999

Drieant said... Reply Comment

@Bintang Antik Sejahtera:ok gan, siap ;luph
@Ario Antoko:iy memang lebih enak pake bawaan,mudah di rubah. tapi ke kuranggannya kadang suka lemot, berat apalagi yang advance.
@Rizky Kazegami:siep. klo yang satu lagi pertannyaan ente, ane posting 4 hari lagi ya gan. ok
@Alprablog™: ya yang jelas bukan buat ente gan. :)) ente kan master ;win

IDEINI.COM said... Reply Comment

Wah bermanfaat ni buat pemula seperti saya ini :)

Blogspot Pemula said... Reply Comment

Nice share sobat, Makasih tutorialnya, sangat bermanfaat. Salam

Jejak Puisi said... Reply Comment

sippp.. mantap nih tutornya... moga bermanfaat

salam blogger... ;)

Blogger Blegedes said... Reply Comment

ane bookmark dlu Kang... ntar mlem mau di praktekin.. biar bisa bikin template baru... :D

Post a Comment