Cara Memberikan Garis Pembatas Antara postingan Dan Sidebar | KNOWPLUS +

Nah pada kesempatan kali ini saya akan memberikan tips cara memberikan garis pembatas antara area postingan blog dan sidebar. Tujuan memberikan garis pembatas ini yaitu untuk memperjelas sekaligus merapikan area antara postingan dan sidebar agar tidak terlihat kaku.

Disini saya memiliki dua cara yaitu menambahkan kode di HTML blog atau dengan menggunakan bantuan CSS.

Menambahkan kode di HTML blog

Pilih Tema => Edit HTML
Tekan Ctrl+F dan masukkan kode berikut ini tepat di atas kode  ]]></b:skin> 

.post {-moz-border-radius: 0px ; -webkit-border-radius: 0px ; border-radius: 0px ; padding:10px; border: 1px solid #ebebeb; } 

Atau anda bisa menggunakan yang ini.

.post {-moz-border-radius: 10px ; -webkit-border-radius: 10px ; border-radius: 10px ; padding:10px; border: 1px solid #1E90FF; }

Setealah itu klik simpan tema dan lihat hasilnya. Untuk lebih jelasnya lihat gambar dibawah. 

 

Nah untuk yang kedua yaitu menambahkan kode pada CSS.

Plih Tema => Sesuaikan Setelah itu Klik lanjutkan dan pilih Tambahkan CSS.

Jika bilah sisi anda atau sidebar anda ada di sebelah kanan, salin dan tempelkan kode berikut ke dalam kotak teks CSS  Anda:

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid #CCCCCC !important;
} 

Jika bilah sisi anda atau sidebar anda ada di sebelah kiri, salin dan tempelkan kode berikut ke dalam kotak teks CSS  Anda:

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid #000000 !important;
} 

Untuk lebih jelasnya perhatikan gambar di bawah ini.


Sekarang, saatnya menyesuaikan kode itu agar sesuai dengan desain blog Anda:

Tingkatkan 1px berdasarkan pada seberapa tebal garis yang Anda inginkan (misalnya 4px untuk garis yang lebih tebal)

Ubah solid menjadi putus-putus // ganda // putus-putus untuk gaya garis yang berbeda, ubah sesui kebutuhan anda.

Ubah # 000000 (hitam dasar) menjadi warna apa pun yang Anda inginkan. Jika Anda tidak yakin dengan nilai hex warna Anda (6 angka itu) periksa situs web ini untuk daftar nilai warna.

Untuk lebih mudah merubahnya gunakan Inspect element lalu terapkan perubahan kalian sesuai Inpect elemen pada kode HTML blog anda selesai.

JIka anda merasa artikel ini bermanfaat, jangan lupa di share ya Thanks.

Share It