Skip to main content

Cara Membuat Border Serbaguna Keren Dalam Postingan

Minggu, 28 Maret 2021

Cara Membuat Border Serbaguna Keren Dalam Postingan - Sebenarnya saya agak bingung mau kasih judul apa pada tutorial blog kali ini, sebab ini hanya sebuah trik membuat border yang kadang diperlukan kadang juga tidak! untuk itu saya namakan saja border serbaguna.

Sebelumnya kita sudah melihat Cara Membuat Border Pelangi, namun pada trik itu terpasangnya di luar halaman blog dan kali ini kita akan membuat variasi border serbaguna keren yang bisa sobat gunakan untuk mempercantik tampilan halaman postingan anda.

Cara Membuat Border Serbaguna Keren Dalam Postingan

Perhatikan gambar di atas, itulah border yang kita maksud pada border tersebut ada keterangan yang bisa anda sesuaikan dengan kebutuhan blog anda. Berikut ini langkah-langkahnya:

Masuk ke editor template anda dan cari kode.post-body setelah ketemu tambahkan kode css ini (sesuaikan dengan kode template sobat)

.post-body .subjudul span {background: linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);display: inline-block;padding: 5px;margin: 0;color: #fff;font-size: large;font-weight: bold;}.post-body {box-sizing: border-box;}.post-body .subjudul {border-top: 3px solid #f24a4a;text-align: center;}

Simpan template.

Selanjutnya kita tinggal masuk ke dalam postingan dengan mode HTML dan masukan kode ini (sesuaikan) kode yang saya marking kuning (ganti)

<br><br>
<div id="Isi" class="subjudul"><span>KODE CSS</span></div>
<br/>
<br><br>
<div id="Isi" class="subjudul"><span>JAVASCRIPT</span></div>
<br/>

Contoh penerapan dalam postingan 👇 klik untuk memperbesar

Cara Membuat Border Serbaguna Keren Dalam Postingan

Kalian hanya tinggal copy saja jika membutuhkan border lebih dari satu dalam postingan. Kode <br><br/> digunakan untuk memberi jarak agar tidak mepet dengan tulisan postingan blog anda.

Itulah Cara Membuat Border Keren Dalam Postingan Blog, semoga informasi bermanfaat.

Selamat Mencoba!

Bagikan:

Hallo sobat! blog.jejakunik.com membuka kesempatan untuk anda mempromosikan Produk atau Jasa secara GRATIS pada blog ini. Detailnya bisa kamu lihat di CLICK HERE
Buka Komentar
Tutup Komentar