Cara buat Border batas posting blog dan garis batas widget

Navigasi Info - terkadang kita sebagai blogger menginginkan tampilan blog kita menarik di padang sehingga dapat membuat pembaca blog kita senang berlama-lama membaca di blog kita salah satunya dengan memberi Border pembatas blog.

Akan tetapi terkadang tamplate blog yang kita miliki tidak mempunyai garis pembatas postingan blog sehingga terlihat terlalu sederhana di lihat secara pengalaman pribadi saya dengan menambahkan garis batas postingan maupun sidebar blog mampu meningkatkan kecepatan akses tampil blog itu sendiri untuk keuntungan lainnya dapat kalian lihat artikel dibawah ini :

Keuntungan menambahkan garis batasan postingan maupun garis batas widget

Untuk keuntungan menambahkan garis batas pada tamplate blog kalian adalah sebagai berikut :

Mempercepat akses tampilan blog

Jika blog yang ditambahkan garis batas postingan blog maupun Border pada widget nya secara automatis mengompres tulisan dan juga gambar pada blog sehingga kecepatan loading blog lebih sedikit meningkat.

Memperindah tampilan blog

Dengan adanya garis batas ataupun Border baik itu pada setiap sisi postingan blog dan juga memberikan Border pada setiap widget blog kalian hal itu mampu membuat blog kalian lebih enak dipandang sebagai mana blog saya ini yang telah saya berikan batasan postingan dan juga widget tampilannya jauh lebih menarik bukan.

Terlihat lebih rapih

Selain itu tampilan tamplate blog kalian terlihat lebih rapih dan juga profesional dipandang dari sebelumnya bisa kalian bandingkan sendirilah.

Cara membuat garis batasan post blog

Untuk membuat batasan blog sendiri tidak lah terlalu sulit kalian dapat ikuti langkah - langkah berikut ini :

.post{border-radius:10px;
border-bottom:2px solid silver;
border-top:2px solid silver;
border-right:2px solid silver;
border-left:2px solid silver;
Background:#fff;
width:100%;
padding-top:0.9em;
padding-bottom:0.9em;
padding-right:0.9em;
padding-left:0.9em;
}

Langkah awal copy kodingan CSS diatas.
Selanjutnya kalian menuju dasbor blog kalian
Lalu klik edit html dan cari ]]></b:skin>
Kemudian paste kodingan tersebut tepat diatas ]]></b:skin>
Dan simpan

Maka akan tampil seperti dibawah ini :

Cara membuat Border pada widget

Untuk membuat Border pada widget kurang lebih sama dengan diatas yang mana sebagai berikut :

.sidebar .widget {border-radius:10px;
border:1px solid silver;background:#FFF;}

.sidebar-sticky .widget {border-radius:10px;
border:1px solid silver;background:#FFF;}

Langkah awal copy kodingan CSS diatas.
Selanjutnya kalian menuju dasbor blog kalian
Lalu klik edit html dan cari ]]></b:skin>
Kemudian paste kodingan tersebut tepat diatas]]></b:skin>
Dan simpan

Maka hasilnya akan seperti ini :

Keterangan kodingan

.post adalah bermakna bahwa kodingan tersebut ditargetkan untuk halaman postingan blog
.sidebar .widget yang bermakna bahwa koding tersebut akan di targetkan pada widget di sidebar blog kalian.
.sidebar-sticky .widget yang bermakna bahwa koding tersebut akan di targetkan pada widget di sidebar-sticky blog kalian.
border:1px yang bermaksud agar membuat Border dengan ukuran yang sama secara automatis untuk ukuran ketebalan garisnya dapat kalian atur pada 1px kalian ubah dengan ukuran angka yang kalian mau
border-radius:10px; kodingan ini bermaksud untuk membuat sisi lengkungaan pada Border yang kalian buat 10px nya kelengkungan yang kalian inginkan kalian dapat memodifikasinya dengan angka yang kalian mau untuk blog saya ini menggunakan lengkungan Border 10 px
padding-left:0.9em; untuk mengatur batas tulisan didalam sisi kiri Border kalian dapat mengatur nya sesuka hati seperti 0.9em menjadi 0.1em dan sebagainya sesuai keinginan kalian
padding-right:0.9em; untuk mengatur batas tulisan didalam sisi kanan Border kalian dapat mengatur nya sesuka hati seperti 0.9em menjadi 0.1em dan sebagainya sesuai keinginan kalian
padding-top:0.9em; untuk mengatur batas tulisan didalam sisi atas Border kalian dapat mengatur nya sesuka hati seperti 0.9em menjadi 0.1em dan sebagainya sesuai keinginan kalian
padding-bottom:0.9em;untuk mengatur batas tulisan didalam sisi bawah Border kalian dapat mengatur nya sesuka hati seperti 0.9em menjadi 0.1em dan sebagainya sesuai keinginan kalian
width:100%; menentukan lebar sisi dalam Border saya buat 100% agar bermaksud secara automatis menyesuaikan pada perangkat untuk mengakses blog kita
Background:#fff; berfungsi untuk mengatur background warna didalam border untuk warna sendiri kodenya dapat kalian cek pada link disini
border-left:2px solid silver; berfungsi untuk menentukan garis sisi batas kiri
border-right:2px solid silver; berfungsi untuk menentukan garis sisi batas kanan
border-top:2px solid silver; berfungsi untuk menentukan garis sisi batas atas
border-bottom:2px solid silver; berfungsi untuk menentukan garis sisi batas bawah kalian dapat menggantinya dengan kalian inginkan seperti 2px menentukan ketebalan garis kalian dapat ubah dengan angakan kalian mau dan silver warna garis tersebut solid menentukan jenis garis tersebut tebal kalian dapat ubah menjadi beberapa model garis seperti : solid ,dashed ,dotted ,double,groove , outset dan ridge untuk lebih jelasnya lihat kolom gambar dibawah ini :

Itulah cara membuat garis batas ataupun Border pada tamplate blog kalian semoga bermanfaat jika ada pertanyaan kalian dapat berkomentar di bawah terima kasih telah mengunjungi blog kita.

navigasiin navigasiin adalah portal Situs Berita Berbahasa Indonesia yang menyajikan berita terkini terpercaya sebagai petunjuk inspirasi anda

navigasiin