Membuat Kotak Script dengan Sudut Melengkung di Postingan Blog/Website

Ngopi sadayana! 😎

Sesuai judul thread, kali ini saya akan membahas cara membuat kotak script dengan sudut melengkung di postingan blog/website.

Yaps! Dengan membuat kotak script sudut melengkung di postingan blog, maka kotak script atau text box akan terlihat lebih menarik. Jadi bentuknya nggak kotak-kotak aje kyak papan catur ^ _ ^.

Cara membuat kotak script dengan sudut melengkung di postingan blog, tidak jauh beda dengan “Cara membuat kotak script sederhana” Hanya saja ada penambahan kode script CSS (Cascading Style Sheet) pada tag <div> di HTML-nya, yaitu “border-radius”.

Apa itu border-radius?

Border radius (border-radius) adalah salah satu property bahasa program CSS3, dan border-radius fungsinya untuk membuat lengkungan pada sudut kotak tag html.

Jadi gini! Biasanya jika kita memberi nilai height dan width pada tag html, maka unjungnya otomatis akan membentuk sudut 90° atau persegi. Nah, dengan border-radius ini kita bisa membuat lengkungan di sudut tadi.

Contoh kotak script dengan sudut melengkung di postingan blog/website - Rico Sihaloho

Awalnya saya sempet bingung melihat tutorial cara membuat kotak script dengan sudut melengkung di beberapa artikelnya para mastah. Saya menemukan dua versi, ada yang menggunakan markup “-moz-border-radius”. Dan ada juga yang menggunakan “border-radius”.

Well, pengalaman adalah guru yang terbaik. Jadi saya akan berbagi pengalaman yang mungkin tidak bernilai ini. Alih-alih dengan alesan penisirin, saya pun sudah mencoba kedua markup tersebut. Ternyata hasilnya sama saja.

FYI, setelah ngulik sana sini, informasi yang saya dapat bahwa sebelum markup “border-radius” punya CSS3 belum support di beberapa browser. Firefox sudah terlebih dahulu membuat versi mereka sendiri yaitu “-moz-border-radius”.

Kesimpulan, markup “-moz-border-radius dan border-radius” fungsinya sama yaitu untuk membuat kotak dengan sudut melengkung. Bisa dikatakan “border-radius” itu markup yang sudah di-update dan sudah support di beberapa browser. Seperti : Chrome, Safari, Firefox dan Opera, IE (Internet Explorer).

Ah, lupakan mengenai browser, back to topick!

Shorthand untuk border-radius ini adalah

“border-radius : [value] ;” atau  “border-radius : [topleft topright bottomright bottomleft] ;”  

Contoh : border-radius : 0px 50px 50px 0px ;

Sebagai catatan : cara penulisan value sesuai dengan arah jarum jam, dan jika semua nilai border radius-nya sama, kita cukup mengetikkan satu value saja.

Contoh : border-radius : 10px ; (artinya semua sudut akan sama melengkung sebesar 10 pixel).

Namun sebelum kita masuk ke cara membuat kotak script dengan sudut melengkung di postingan blog, terlebih dahulu kita mempelajari kode script yang akan kita gunakan, dan lihat preview gambar kotak script-nya.

Mau coba?? 😎

Di bawah ini ada beberapa listing code untuk membuat kotak script dengan sudut melengkung di postingan blog, yang bisa sobat pilih. Check it out :

Kotak Script minimalis tanpa lis border

<div style="background-color: #ffad08; border-radius: 20px; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px

<div style="background-color: #6fa8dc; border-radius: 20px; border: 2px solid rgb(178, 34, 34); padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px

<div style="background-color: #f3f3f3; border-radius: 20px; border: 4px solid rgb(153, 153, 153); padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border

<div style="background-color: #ff5c5c; border-radius: 20px; border: 3px double rgb(255, 255, 255); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border
 

<div style="background-color: white; border-radius: 30px; border-top: 10px solid red; color: green; overflow: auto; padding: 10px; text-align:center;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border

<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-right border

<div style="background-color: ghostwhite; border-left: 10px solid gray; border-radius: 30px; border-right: 10px solid gray; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)

 

<div style="background-color: chartreuse; border-radius: 20px; border: 4px dotted rgb(34, 136, 221); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak Script dengan dashed-border (garis terputus-putus)

 

<div style="background-color: #fff952; border-radius: 20px; border: 4px dashed rgb(220, 20, 60); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan inset-border (seperti tertaman pada halaman postingan)

<div style="background-color: lightskyblue; border-radius: 20px; border: 4px inset white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan outset-border (seperti keluar dari halaman postingan)

<div style="background-color: darkturquoise; border-radius: 20px; border: 4px outset red; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak script dengan ridge-border (seperti timbul)

 

<div style="background-color: red; border-radius: 20px; border: 4px ridge rgb(0, 191, 255); color: white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan groove-border (seperti masuk kedalam halaman)

 

<div style="background-color: #ffe599; border-radius: 20px; border: 4px groove rgb(170, 170, 170); padding: 10px;"> Tulis script anda di sini..! </div>

Keterangan :

• border-radius : semakin besar value-nya maka sudut kotak script semakin melengkung.
• background-color : warna kotak script, silahkan diganti dengan warna kesukaan sobat (boleh pakai nama warna, kode warna/ hexadesimal, atau RGB / red-green-blue)
• text-align atau t-align : posisi tulisan (left-center-right)

Silahkan berkreasi sendiri, misalnya coba bagaimana cara membuat gambar dengan sudut melengkung (border-radius) , seperti punya miminho di bawah ini. Keren yekan?? 😄

Next..

Bagaimana cara membuat kotak script dengan sudut melengkung di postingan blog/website?

Berikut cara membuat kotak script dengan sudut melengkung di postingan blog. Silahkan ikuti step by step-nya :

• Masuk ke Dashboard
• Buat Posting/New Entry
• Tulis konten seperti biasa sampai selesai.
• Ganti mode penulisan dari “Compose” menjadi “HTML”
• Copy script yang kalian suka, dan Paste -kan Script tersebut pada posisi yang kalian mau.
• Kembali ganti mode penulisan dari “HTML” menjadi "Compose", lalu edit “Tulis script anda di sini..!” ganti dengan tulisan sobat yang mau dimasukan dalam kotak script.
• Silahkan klik "Pratinjau" untuk memastikan script sudah berjalan.
• Terakhir, kalau sudah berjalan dan posisinya sudah pas. Jangan lupa di simpan dulu dan silahkan dipublish.
• DONE.

Demikian pembahasan cara membuat kotak script dengan sudut melengkung di postingan blog/website. Semoga membantu dan bermanfaat bagi sobat yang membutuhkan. Selamat mencoba!

Baca juga :

● Cara Membuat Kotak Script Efek Bayangan

---

● Cara Membuat Kotak Scroll di Blog

---

● Cara Membuat Tulisan berjalan (Marquee)

---

Jika tutorial ini dirasa agak membingungkan, silahkan bertanya di kolom komentar atau by direct message email juga boleh kok. Terima kasih!

See you on top..

Nite & GBU more. Bye!!