Mengatur Tampilan Judul Postingan

Tentang Border

Agar tampilan border melengkung, sanggup anda tambahkan aba-aba menyerupai 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 sanggup anda atur dengan abjad yang ingin anda tampilkan. Sebagai pedoman, coba anda buka MS Word untuk melihat jenis abjad (harus diingat, tidak seluruh abjad pada MS Word sanggup ditampilkan pada blog). Kaprikornus anda harus memilih/mencoba jenis abjad yang sanggup ditampilkan. Kodenya menyerupai ini :

font-family:castellar

Ganti kata castellar dengan abjad yang ingin ditampilkan.

Ubah aba-aba padding pada referensi diatas dengan aba-aba ini padding: 4px 4px 4px 4px; untuk mengatur supaya judul postingan tidak berbenturan dengan bab pinggir dari judul postingan. Kode diatas membuktikan bahwa jarak judul postingan dari bab atas, bawah, kanan dan kiri memilik jarak yang sama 4px. Anda ubah ukurannya sesuai keperluan.

Tambahkan juga ukuran tinggi/height dari judul postingan kalau memang diharapkan (terutama untuk postingan dengan kalimat yang tidak mencukupi pada daerah judul postingan). Kodenya menyerupai ini :

height:35px;

Kode-kode lainnya yang sanggup anda tambahkan diataranya :

text-align:center; untuk mengatur letak huruf, sanggup anda ganti dengan left, right atau justify.

text-transform:uppercase; aba-aba supaya tampilan judul postingan tampil dengan abjad kapital.

font-size:100%; (ukuran normal) untuk mengatur ukuran huruf, kalau ingin lebih besar ganti angkanya dengan angka yang lebih besar atau kebalikannya.

font-weight:bold; untuk mengatur supaya abjad lebih tebal.

Deretan kode-kode ditas kalau disatukan akan menjadi menyerupai 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.

Sumber http://epg-studio.blogspot.com/

Bagikan Artikel ini