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 )


Membuat border keliling/ keseluruhan blog

Sebelum sobat mencobah membuat border ini silahkan baca terlebih dahulu Membuat border/ kotak keliling blog dari tab menu kebawah.

Selanjutnya Iyagus akan menjelaskan bagaimana membuat border keliling/ keseluruhan blog, kalau penjelasan sebelumnya membuat border/ kotak dari tab menu kebawah maka saat ini membuat border keseluruhan blog tanpa terkecuali.
Oke gak pake lama

Caranya:
Masuk ke Edit HTML
Silahkan cari kode berikut
.content-inner {

Jika sudah ketemu kopi kode berikut kemudian paste atau lletakkan setelah kode diatas
border: 2px solid #FFFFFF;

Hasilnya seperti ini
.content-inner {
border: 2px solid #FFFFFF;

Untuk melihat hasilnya klik Preview jika oke langsung Save

Jika ingin merubah/ mengedit kode diatas silahkan:
Keterangan: 
Angka 2 ( tebal border )
Solid ( jenis border )
Kode #FFFFFF ( warna border )

Oke, semoga bermamfaat

Membuat border/ kotak keliling blog dari tab menu kebawah

Semalam Iyagus menjelaskan bagaimana membuat border/ kotak otomatis untuk kode HTML/ CSS dan kali ini Iyagus jelaskan bagaimana membuat border/ kotak keliling blog dari tab menu kebawah. Jadi maksudnya tab menu kebawah yaitu Menu bawaan blogger atau biasa disebut Menu HOME/ BERANDA dll. Jika ingin memasang border ini silahkan dicobah oke.

Border ini tanpa efek hanya border biasa, jika berminat jum kita mulai.

Caranya:
Silahkan masuk ke Edit HTML kemudian cari kode berikut!

.main-outer {

Jika sudah ketemu silahkan kopi kode berikut kemudian paste atau letakkan setelah kode diatas
border: 2px solid #FFFFFF;

Jadi hasilnya seperti ini:
.main-outer {
border: 2px solid #FFFFFF;

Untuk melihat hasilnya klik Preview jika oke langsung save

Jika sobat ingin mengedit kode tersebut silahkan kembali ke kode semulah tapi pastikan tamplate sudah disave
Keterangan:
Angka 2 tebal border
Tulisan solid adalah jenis border jika anda ingin menggantinya silahkan ( contoh: dashed * dotted * solid )
Kode #FFFFFF; adalah warna border

Semoga bermamfaat.