Cara buat Border batas posting blog dan garis batas widget - Navigasi info a -->
Lompat ke konten Lompat ke sidebar Lompat ke footer

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.

Cara buat Border batas posting blog dan garis batas widget


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;}

  1. Langkah awal copy kodingan CSS diatas.
  2. Selanjutnya kalian menuju dasbor blog kalian
  3. Lalu klik edit html dan cari ]]></b:skin>
  4. Kemudian paste kodingan tersebut tepat diatas]]></b:skin>
  5. Dan simpan
Maka hasilnya akan seperti ini :

Border widget


Keterangan kodingan


  1. .post adalah bermakna bahwa kodingan tersebut ditargetkan untuk halaman postingan blog
  2. .sidebar .widget yang bermakna bahwa koding tersebut akan di targetkan pada widget di sidebar blog kalian.
  3. .sidebar-sticky .widget yang bermakna bahwa koding tersebut akan di targetkan pada widget di sidebar-sticky blog kalian.
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. width:100%; menentukan lebar sisi dalam Border saya buat 100% agar bermaksud secara automatis menyesuaikan pada perangkat untuk mengakses blog kita
  11. Background:#fff; berfungsi untuk mengatur background warna didalam border untuk warna sendiri kodenya dapat kalian cek pada link disini
  12. border-left:2px solid silver; berfungsi untuk menentukan garis sisi batas kiri
  13. border-right:2px solid silver; berfungsi untuk menentukan garis sisi batas kanan
  14. border-top:2px solid silver; berfungsi untuk menentukan garis sisi batas atas
  15. 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 :

Jenis garis border

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.