MENGATUR TAMPILAN JUDUL POSTINGAN

Tampilan judul postingan artikel merupakan bagian dari blog yang selalu dilirik oleh para pengunjung ketika mereka mencari artikel yang mereka butuhkan. Tentu saja sebagai pemilik blog selalu ingin menampilkan kesan "wah" pada tampilan blog secara keseluruhan termasuk tampilan judul postingan artikel.
Berikut ini beberapa tips untuk mengatur penampilan judul postingan artikel. Silahkan anda simak.

Secara default kode css untuk judul postingan seperti dibawah ini :

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

Dari kode post h3 diatas, dapat ditambahkan beberapa kode lainnya, seperti :

• Background (latar belakang) yang diikuti dengan dengan kode warna atau jika mau bisa ditambahkan asesoris berupa gambar. Kodenya seperti ini :
  
  background:#31363F; (background tanpa gambar)
  
  Jika ingin ditambahkan gambar, kodenya sperti ini :
  
  background:#31363F url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif)no-repeat center left;
  
  • Ganti kode warna #31363F dengan warna pilihan anda.
  • Ganti alamat gambar https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif dengan gambar dari koleksi anda (disarankan ukuran gambar disesuaikan dengan ukuran judul postingan/ukuran kecil).
  • Kode norepeat center left berarti gambar tersebut tampilannya hanya satu/tidak diulang, dengan letak dibagian kiri tengah.
• Border/garis disekeliling judul postingan dengan kode seperti ini :
  
  border:3px solid #2F323D;
  
  Border diatas memiliki ukuran 3px dengan style solid dan diakhiri kode warna dari border. Silahkan anda gati sesuai keinginan. Kode solid dapat anda ganti dengan : double, grove, dotted, outset dan ridge. Agar paham tentang istilah style border, silahkan anda kunjungi Tentang Border
• Agar tampilan border melengkung, dapat anda tambahkan kode seperti dibawah ini :
  
  border:3px solid #2F323D;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
• Huruf pada judul postingan dapat anda atur dengan huruf yang ingin anda tampilkan. Sebagai pedoman, coba anda buka MS Word untuk melihat jenis huruf (harus diingat, tidak seluruh huruf pada MS Word dapat ditampilkan pada blog). Jadi anda harus memilih/mencoba jenis huruf yang bisa ditampilkan. Kodenya seperti ini :
  
  font-family:castellar
  
  Ganti kata castellar dengan huruf yang ingin ditampilkan.
• Ubah kode padding pada contoh diatas dengan kode ini padding: 4px 4px 4px 4px; untuk mengatur agar judul postingan tidak berbenturan dengan bagian pinggir dari judul postingan. Kode diatas menunjukan bahwa jarak judul postingan dari bagian atas, bawah, kanan dan kiri memilik jarak yang sama 4px. Anda ubah ukurannya sesuai keperluan.
• Tambahkan juga ukuran tinggi/height dari judul postingan jika memang diperlukan (terutama untuk postingan dengan kalimat yang tidak mencukupi pada tempat judul postingan). Kodenya seperti ini :
  
  height:35px;
• Kode-kode lainnya yang dapat anda tambahkan diataranya :
  
  text-align:center; untuk mengatur letak huruf, dapat anda ganti dengan left, right atau justify.
  
  text-transform:uppercase; kode agar tampilan judul postingan tampil dengan huruf kapital.
  
  font-size:100%; (ukuran normal) untuk mengatur ukuran huruf, jika ingin lebih besar ganti angkanya dengan angka yang lebih besar atau kebalikannya.
  
  font-weight:bold; untuk mengatur agar huruf lebih tebal.
• Deretan kode-kode ditas jika disatukan akan menjadi seperti ini :
  
  .post h3 {
text-align:center;
margin:.25em 0 0;
padding:4px 4px 4px 4px;/*atas kanan bawah kiri */
font-size:100%;
font-family:castellar;
text-transform:uppercase;
font-weight:bold;
line-height:1.4em;
height:35px;
color:$titlecolor;
background:#31363F url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TXd4bGFwdQI/AAAAAAAAB38/Y4wr7ccecso/s128/thbluestar2.gif)no-repeat center left;
border:3px solid #2F323D;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

Selamat mencoba, semoga bermanfaat.

Posted in: Tutorial