Jumat, 12 Februari 2010

Memasukkan Variabel Font dan Warna pada Template HTML Blogger

Pada template baru Blogger, disediakan menu yang praktis untuk mengubah "wajah" dari template blogger anda. Salah satunya adalah menu Font dan Warna. Pengguna yang awam maupun master bisa mengedit warna template dan font huruf pada template lebih mudah pada menu ini tanpa perlu memasuki menu Edit HTML.

Nah, supaya bisa diedit di menu Font dan Warna, anda perlu memasukkan variabel font dan warna. Caranya adalah:

1. Login ke Blogger, lalu seperti biasa, klik menu Tata Letak > Edit HTML.

2. Silakan backup template dulu.

3. Cari tulisan:
/* Variable definitions
====================
4. Lalu dibawahnya, ketikkan:

a. Untuk variabel warna:
<Variable name="contohvariabelwarna" description="Contoh Variabel Warna"
type="color" default="#81F781" value="#81F781">
b. Untuk variabel font:
<Variable name="contohvariabelfont" description="Contoh Variabel Font"
type="font"
default="12px bold 'Trebuchet MS', Verdana" value="12px bold 'Trebuchet MS', Verdana">
Ket: name="..." adalah nama variabel. description="..." adalah deskripsi variabel (tulisan yang akan muncul pada menu Font dan Warna). type="..." adalah jenis variabel. Isi dengan color bila variabel tersebut berupa variabel warna, atau font bila variabel tersebut adalah variabel font. default="..." adalah nilai default variabel, sedangkan value="..." adalah nilai variabel. Isi default dan value dengan nilai yang sama. Contohnya bisa anda lihat seperti diatas.

5. Lalu cari kode CSS yang akan diberi variabel tersebut. Misalnya anda ingin supaya background dan jenis huruf pada kode CSS body diberi variabel tersebut, maka yang harus dicari adalah kode CSS untuk body. Misalnya:
body {
background:#000000;
font:12px Arial;
}
maka gantilah nilai #000000 dengan kode: $(nama variabel). Dalam contoh ini nama variabel adalah contohvariabelwarna, maka gantilah dengan kode: $contohvariabelwarna. Begitu juga dengan font. pada contoh ini gantilah 12px Arial dengan $contohvariabelfont, sehingga menjadi:
body{
background:$contohvariabelwarna;
font:$contohvariabelfont;
}
6. Kalau sudah simpan.

Memang sih, trik ini tidak akan mengubah warna dan jenis font template. Tetapi bisa memudahkan anda mengolah warna dan jenis font template cukup dengan melalui menu Font dan Warna. Trik ini sangat berguna apabila anda ingin membuat free template, dimana pemakai template anda bisa dengan mudah mengutak-atik warna dan font template anda. Semoga bermanfaat.


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



4 komentar:

secangkir teh dan sekerat roti mengatakan...

maksute giman nih kang..? ada contohnya gak biar lebih jelas kita melihatnya.. :)

baja ringan mengatakan...

Woow, keren informasinya. Langsung dicoba. Salam kenal

hamin mifha mengatakan...

ditunggu tutor selanjutnya

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.