Cara Membuat Kotak dan background pada Judul Posting

Halo bos, semoga sehat ya? Oiya kali ini kita akan belajar bagaimana membuat kotak atau biasa disebut border ataupun garis pinggir pada judul posting. Membuat border pada judul posting tujuannya adalah agar menambah tampilan blog jadi indah. Jika minat silahkan dicobah!.

Caranya:

Masuk ke Edit HTML
Kemudian cari kode berikut ( cara mencari kodenya masukkan kursor kedalam kotak ruang Edit HTML kemudian klik 1x dengan cari telunjuk anda sampai benar- benar tanda  I berada dalam kotak Edit HTML ,lalu tekan Ctrl + F bersamaan sampai kotak pencari muncul, lalu masukkan kode berikut lalu tekan Enter
h3.post-title { 

Kalau tidak dapat kode diatas cari kode yang ini
comments h4 {

Jadi bentuknya kurang lebih seperti ini 
h3.post-title, .comments h4 { 

Jika Anda menemukan kode setelah kode diatas bentuknya kurang lebih sperti berikut:
font: $(post.title.font);margin: .75em 0 0;

Silahkan hapus terlebih dahulu kode diatas ( warna hijau ) kemudian ganti dengan kode berikut:
font-family: liberator;
color: #909090;
font-size: 18px;
text-align: center;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px 0px 0px #A9F5F2;
border: 5px solid #303030;background: #181818;padding: 5px; margin: 1px;

Hasilnya seperti ini berikut:
h3.post-title, .comments h4 {
 font-family: liberator;
 color: #909090;
 font-size: 18px;
 text-align: center;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px 0px 0px #A9F5F2;
border: 5px solid #303030;
background: #181818;padding: 5px; margin: 1px; }

Untuk Melihat hasilnya klik PREVIEW jika oke klik SAVE , Save terlebih dahulu baru di edit jika mau

Adapun jenis border, warna ,font dan background kode diatas persis sama di web ini.
Oke itu aja sobat silahkan di cobah.

Kode yang berwarna diatas silahkan diedit sendiri sesuai selera Anda oke....tanks moga aja berhasil.

Keterangan:
Liberator ( jenis Font/ Letter ) Silahkan cari Font yang cocok dengan blog anda silahkan cari font di korel.
#909090 ( warna font/ letter )
18 ( besar/ kecil font )
Warna Hijau ( banyangan Font jika anda menginginkan banyangan font berikan angka 2 atau 3 pada angka nol Contoh 3px 3px 3px
#303030 ( warna garis pinggir/ kotak/ border )
Warna merah ( warna background )


6 komentar:

  1. makasi infonya mas bro sangat bermamfaat...
    izin cobain yach,,,?

    BalasHapus
  2. manteb gan.. langsung ane praktekin.

    BalasHapus
  3. terimakasih bnyak om udah berbagi.. langusng di praktekin (y) smoga brmanfaat

    BalasHapus

Jika ada sembarang pertanyaan silahkan komentar disini.