Sabtu, 16 Januari 2010

Modifikasi Tampilan Judul Postingan


Tampilan blog yang menarik dan cantik tentu akan membuat pengunjung senang mengunjungi blog anda. Nah, salah satunya yang menentukan kemenarikan template blog anda adalah tampilan judul posting.

Supaya lebih menarik, kita bisa memodifikasinya. Caranya adalah sebagai berikut.

1. Login ke Blogger, lalu pilih menu Tata Letak > Font dan Warna.

2. Cari tulisan Warna Judul Posting.

3. Klik tulisan tersebut, dan pilih warna yang diinginkan.

4. Klik Simpan Perubahan.

Nah, cara diatas dapat digunakan bagi anda yang belum mahir kode-kode HTML dan CSS. Untuk anda yang sudah mahir, lakukan langkah-langkah berikut.

1. Seperti binasa, eh, seperti biasa maksudnya, login ke Blogger, lalu klik Tata Letak > Edit HTML.

2. Backup dulu ya templatenya...

3. Cari kode yang kira-kira seperti berikut.
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; /* Ukuran font */
font-weight:normal;
line-height:1.4em;
color:$titlecolor; /* Warna judul posting */
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover { /* Kondisi judul posting saat hover */
color:$textcolor; /* Warna judul posting saat hover */
}
Karena kode di setiap blog tidak sama, maka carilah kode yang mirip (atau setidaknya mendekati) dengan kode diatas.

Untuk mengganti warna judul posting, ubahlah kode color:$titlecolor; dengan warna yang diinginkan. misalnya color:blue;. Untuk mengganti warna saat judul posting hover juga demikian. Ubah kode color:$textcolor; dengan warna yang diinginkan.

Untuk membuat judul posting menjadi bergaris bawah, ubah kode font-weight:normal; dengan font-weight:underline;. Jika ingin judul posting menjadi underline pada saat hover, Tambahkan kode font-weight:underline; dibawah kode .post h3 strong, .post h3 a:hover {. Jadi seperti ini.
.post h3 strong, .post h3 a:hover { /* Kondisi judul posting saat hover */
font-weight:underline;
color:$textcolor; /* Warna judul posting saat hover */
}
Apabila anda ingin mengubah jenis font judul posting, tambahkan kode font-family:fontyangdiinginkan;. Ubah fontyangdiinginkan dengan font yang diinginkan. Misal: font-family:verdana;. Nah, lalu taruh kode tsb di bawah kode .post h3 {. Jadi seperti ini.
.post h3 {
font-family:verdana;
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%; /* Ukuran font */
font-weight:normal;
line-height:1.4em;
color:$titlecolor; /* Warna judul posting */
}
Anda bisa memberikan tambahan lain. Misalnya dengan menambahkan background atau membuat border di sekeliling judul posting.

4. Lalu simpan.

Silahkan lihat hasilnya. Semoga blog anda lebih menarik dan lebih indah dipandang mata.


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



9 komentar:

Chandra mengatakan...

nih saya yang pertama komen. jangan lupa backlink ok.

mas doyok mengatakan...

makasih informasinya rizky tentang modif ini :)

bang fai mengatakan...

ini yang aku cari dari dulu bos tp masih bingung gimana cara nya ganti fontnya buat itu judul aku pengen judulnya pakek huruf latin
makasih atas infonya...
jgn lupa backlinknya...

Heddy mengatakan...

Ckckckck..... Dahsyat infonya.... Sangat membantu. Thanks a lot.

Afi mengatakan...

Asw...

Terima kasih ats infonya. Bermanfaat.

Husenudin mengatakan...

than bos infonya!!!!!!!!!!!!

Sultan Sunardi Aini Mr. mengatakan...

wah makasih infonya tapi saya lihat ga ada cara untuk merubah ukuran font nya ...mohon pencerahan guru..

Free New Gadget Info mengatakan...

udah dicoba gan,,,ternyata berhasil...thx...
http://aplikasihp.blogspot.com

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.