Cara Membuat Border Sekaligus background pada ruangan Posting blog

Semalam Iyagus berbagi bagaimana membuat border pada judul postingan blog
Pada kesempatan kali ini Iyagus ingin menjelaskan bagaimana membuat border sekaligus background  pada ruangan postong blog.

Jadi membuat border dan background pada ruangan posting ( tempat menulis artikel ) dapat memperindah tampilan ruangan posting blog bagi yang suka, namun sebagian juga diantara teman kita yang merasa tidak penting hehe....
Bagi sobat yang minat silahkan di cobah!

Caranya:
1. Silahkan menuju ke pengeditan HTML ( Edit HTML ) Template blog
2. Cari kode berikut :
.post-body {

Setelah ketemu
3. Kopi kode berikut
4. Paste atau letakkan kode berikut tepat diatas kode warna hijau
.post-outer {
-moz-border-radius: 25px;
border-radius: 25px;
border: 3px dotted #00CACA;
background: #FFD0FF;
padding: 15px 20px;
margin: 0-20px 20px;
}

Hasilnya seperti ini:
.post-outer {
-moz-border-radius: 25px;
border-radius: 25px;
border: 3px dotted #00CACA;
background: #FFD0FF;
padding: 15px 20px;
margin: 0-20px 20px;
}
.post-body {

Warna Orange adalah warna Background dan border
Angka 25 adalah ( lenngkungan sudut border )

Oke itu aja sobat semoga berhasil.
Jika ada masalah silahkan comment.

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 )