Cara Buat Border / Garis Tepi pada Postingan Blog

Tags

membuat border di postingan blog


Sebetulnya bukan hal yang sulit untuk membuat sebuah border atau garis tepi dalam postingan blog kita. Nah kadang kita membutuhkannya untuk sekedar hiasan dalam postingan blog atau memang ada hal penting yang perlu dikasih garis terpi, contohnya kalau saya ketika ada kalimat kutipan motivasi.

Perlu kita sampaikan bahwa kode ini untuk bisa diterapkan pada artikel blog platform blogger baik itu yang sudah custom domain maupun yang belum, aku belum tahu kalu di wordpress sama atau tidak. Kalau kamu sedang memerlukan cara memberi border dalam sebuah artikel untuk menandai hal penting, kita akan berbagi disini.

Bentuk Border Blog

Ada berbagai macam type dan bentuk border yang bisa kalian pilih untuk diterapkan dalam postingan, ini sebagai tambahan wawasan saja:

- Border Dashed : type border ini bentuknya garis putus-putus. 
- Border Dotted : type border dotted untuk garis titik-titik. 
- Border Double : bentuk dari type border double ini berupa garis ganda yang sejajar. 
- Border Groove : bentuk dari type border groove ini berupa garis tiga dimensi berlekuk. 
- Border Inset : bentuk dari type border inset ini berupa garis tiga dimensi bagian dalam. 
- Border Outset : bentuk dari border ini berupa garis tiga dimensi bagian luar. 
- Border Ridge : type dari jenis border ini berbentuk garis bergerigi tiga dimensi. 
- Border Solid : untuk type border solid ini berupa garis penuh. Border solid merupakan garis tepi yang sering sekali dipakai oleh para blogger dalam postingan. 


Ada juga yang bilang kalau border adalah bagian dari pada gaya seni isi postingan agar tidak membosankan pembaca. Boleh juga, kalian dapat mengfungsikan ini sesuai keinginan dan kebutuhan masing-masing ya Guys.

Inilah Kode HTML untuk dijadikan Garis Tepi (Border)


Berikut yaitu style berbagai kode yang siap kalian pakai dan bisa disimpan untuk setiap kali posting di blog. Misalnya kamu menyelipkan sebuah pantun di postingan bisa dikasih garis tepi, contoh ini saya memakai warna biru kesukaanku dan kalian bisa ubah sendiri nantinya.

<div style="border :5px dashed #2b75b3; padding: 5px;">Isi Tulisan Kamu Disini</div>

Keterangan:
Type border : Dashed (menghasilkan garis tepi putus-putus)
Tebal garis : 5px (px=pixel)
Padding : 5px (jarak antara karakter dengan garis)
Warna Garis : Kode #2b75b3 (biru) 

Hasilnya seperti berikut ini:

 

Pergi ke pasar membeli bunga, bunga mawar harum mewangi.
Hati bergetar saat berjumpa, cinta tumbuh tak bisa terganti.

 

Coantoh Lainnya


Kalian bisa sesuaikan type/bentuk sesuai nama dan perintah yang diinginkan mulai dari dashed, dotted, double, groove, inset, outset, ridge, solid.

Dotted 

 

Isi Tulisan Kamu Disini

Double 

 

Isi Tulisan Kamu Disini

Groove 

 

Isi Tulisan Kamu Disini

Inset 

 

Isi Tulisan Kamu Disini

Outset 

 

Isi Tulisan Kamu Disini

Ridge 

 

Isi Tulisan Kamu Disini

Solid 

 

Isi Tulisan Kamu Disini



Tambahan: Membuat Garis Horizontal dalam Postingan

Sementara untuk bikin garis lurus horizontal bisa kalian terapkan menggunakan kode html berikut.

 

1. Kode sederhana yang menghasilkan garis lurus horizontal warna hitam

<hr color ="solid black" align="center"/> 



2. Kode garis lurus bintik (dotted) menggunakan kode di bawah ini

<div style="border-bottom:2px dotted blue;"></div> 

 

Cara Menerapkan di Postingan

Kami rasa sudah pada tahu cara menggunakan kode-kode tersebut pada postingan blog, tetapi jika mungkin masih ada yang masih kebingungan, berikut ini caranya. 

 

1. Pertama setelah masuk situs blogger, klik buat postingan di blog Anda seperti biasa ketika hendak bikin artikel.

 

2. Kemudian di logo pensin di bawah judul kalian klik hingga muncul pilihan Tampilan HTML, setelah itu copy kode border yang diinginkan dan letakkan di mode HTML, pratinjau hasilnya.



Penutup

 

Demikianlah cara membuat border atau garis tepi pada postingan blog kita, semoga bisa menambah variasi isi dari artikel menjadi lebih menarik pembaca. Sekian, jika ada rekomendasi gaya border yang lebih keren lagi bisa sampaikan melalui kolom komentar. 

Artikel Terkait

This Is The Newest Post
Buka komentar