Cara Membuat Border/Kotak Tulisan Pada Blog

Untuk membuat kotak pada blog, ternyata bukan hal yang sulit untuk pengguna blogger. Hanya menambahkan kode html tertentu, anda sudah bisa membuat kotak pada artikel anda. Kotak itu biasanya dibuat untuk informasi penting yang ada di blog itu agar para pengunjung gampang melihatnya.

Dalam pembuatan artikel blog, tentunya para pengguna blogger ingin menampilkan artikelnya tampak menarik. Namun, semua itu tidak bisa didapatkan secara otomatis dari blogspot. Oleh karena itu, anda bisa menyalin kode-kode yang sudah saya sediakan di bawah. Dan hasil dari kode itu sudah saya tampilkan juga sebagai contoh.

Menambahkan kotak script pada postingan kadang perlu dibutuhkan, kebanyakan kotak itu digunakan untuk membagikan kode tertentu terhadap pengunjung blognya. Selain untuk memudahkan pengunjung, kotak itu juga akan membuat tampilan artikel terlihat rapi.

Banyak sekali pengguna blog yang menyediakan tips, trik dan tutorial yang pasti diantaranya memiliki kotak untuk kode yang disediakan. Di bawah ini, saya menyediakan beberapa kode untuk membuat kotak pada artikel blog.

Ada banyak cara yang bisa dilakukan untuk menghasilkan sebuah blog dengan tampilan postingannya tampak cantik dan menarik, seperti contoh membuat border tulisan pada sebagian artikelnya.

Berikut adalah Cara Membuat Border/Kotak Tulisan Pada Blog, dan silahkan salin kode-kode di bawah ini :

1.Round Border/Kotak Bulat

Kode :

<div style="-moz-border-radius: 80px; -webkit-border-radius: 80px; background: #fff; border-radius: 80px; border: 5px solid blue; height: 120px; padding: 20px; text-align: center; width: 120px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

2.Dotted Border/Kotak Titik Putus-Putus

Kode :

<div style="background: white; border: 5px dotted #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

3.Dashed Border/Kotak Garis Putus-Putus

Kode :

<div style="background: white; border: 5px dashed #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">
Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

4.Solid Border

Kode :

<div style="background: white; border: 5px solid #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

5.Double Border

Kode :

<div style="background: white; border: 5px double #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

 Hasilnya :

Lazio Alfaro

6.Groove Border

Kode :

<div style="background: white; border: 5px groove #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">
Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

7.Ridge Border

Kode :

<div style="background: white; border: 5px ridge #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

8.Inset Border

Kode :

<div style="background: white; border: 5px inset #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

9.Outset Border

Kode :

<div style="background: white; border: 5px outset #0000FF; color: purple; font-size: 15px; padding: 10px; text-align: center; width: 300px;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

10.Join Border

Kode :

<div style="background: white; border-bottom: 5px dashed blue; border-left: 5px groove red; border-right: 5px dotted magenta; border-top: 5px outset green; color: purple; font-size: 15px; padding: 10px; width: 300px; text-align: center;">Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

11.Background Tanpa Border

Kode :

<div style="background: #6A5ACD; color: white; font-size: 15px; padding: 10px; text-align: left; width: 300px;">
Lazio Alfaro</div>

Hasilnya :

Lazio Alfaro

Keterangan :
>> Tulisan "Lazio Alfaro" ganti dengan tulisan anda.
>> Anda bebas mengganti warnanya.

Baca Juga : List Dan Kode Warna Paling Lengkap

Demikianlah Cara Membuat Border/Kotak Tulisan Pada Blog, dan silahkan untuk mencobanya.