Cara Mudah Membuat Kotak Script / Quote Keren

Dalam sebuah postingan, suatu artikel pasti akan dibuat sebaik dan seindah mungkin, diantaranya mungkin untuk meletakkan kode script yang akan dimunculkan di dalam isi postingan, ini biasanya digunakan untuk blog dengan tema tutorial dan juga mungkin untuk membuat sebuah catatan atau Quote tertentu untuk menekankan salah satu pernyataan yang penting dalam atrikel tersebut.


Dalam kesempatan ini, saya akan membagi ulang apa yang sudah saya dapat dan terapkan dalam blog saya khususnya dalam membuat kotak Script atau Quote.

Di dalam membuat suatu Kotak Script atau Qoute kita tidak bisa secara langsung membuatnya dari menu "Compose"  melainkan kita memainkan atau membuatnya dari menu "HTML" didalam sebuah Kanvas Postingan.

Berikut saya akan sajikan beberapa Kumpulan kotak Script / Quote beserta kode Scriptnya, yang menurut saya luamayna keren.

Kotak 1
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffffc7; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 2
<div style="background-color: #9aff99; border: 3px #1780dd double; padding: 10px; text-align: left;">Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 3
<div style="background-color: #96fffb; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 40px; text-align: left; width: 400px;">
Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 4
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #fffc9e; border-radius: 10px; border: 8px outset #D4771A; padding: 10px; t-align: left;">Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 5
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffce93; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;"> Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 6
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffccc9; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;"> Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 7
<div 0.12="" 0.16="" 0="" 10px="" 2px="" 5px="" border-radius:="" box-shadow:="#" rgba="" style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #67fd9a; border-left: 5px solid #0000cc; border-radius: 10px; border-right: 5px solid #0000cc; padding: 10px;">Tulis Kode script atau Quote Kamu di Sini</div>

Kotak 8
<div style="background-color: #148f77; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: white; font-size: 14px; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; transition: 0.25s;"> Tulis Kode script atau Quote Kamu di Sini</div>

Lalu bagaimana cara membuat Kotak Script atau Kotak Quote tersebut?

Caranya cukup mudah, mari kita ikuti langkah-langkahnya berikut ini:

Langkah Pertama>>Silahkan masuk ke bagian Kanvas Postingan tepatnya di "HTML", lalu Copas (Copy dan Paste) salah satu script jenis kotak yang sudah tersedia di atas kedalam canvas "HTML" tersebut.


Langkah Kedua>>Setelah kode Script tersebut sudah ditempatkan di bagian yang diinginkan di bagian HTML, silahkan masuk kebagian canvas "Compose". dan akan terlihat hasil dari bentuk tampilan kode script kotak tersebut. Lalu Ganti Tulisan "Tulis Kode script atau Quote Kamu di Sini" sesuai dengan apa yang akan kamu tulis.


Catatan:
Tampilan di atas bisa kamu modifiasi sesuai keinginanmu

1. Untuk merubah warna latar atau Background, silahkan cari kode "background-color: #kodewarna ". Lalu ganti "#kodewarna"  dengan kode warna sesaui kesukaanmu.

2. Untuk mengganti jenis garis tepi/border, Cari kode dengan nama " dashed" atau "dotted" atau "Groove" atau "Inset" atau "outset" atau "Ridge" atau "solid", bisa ganti atau ditukar sesuai dengan jenis garis yang kamu sukai.
contoh jenis garis tersebut

Solid

Ridge

Outset

inset

Groove

Dotted

Dashed

3. Untuk menentukan letak kotak atau tulisan menjadi rata Kanan, kiri, atau tengah, cari kode "text-align: left;", ganti kode "Left" dengan kode left= kiri, Center=tengah atau Right=Kanan.

Dengan demikian kamu sudah bisa membuat kotak yang bisa mempercantik blog kamu. semoga ilmu yang saya dapat ini tidak hilang,dan akan berguna bagi kita semua. terimaksaih

Berlangganan update artikel terbaru via email:

0 Response to "Cara Mudah Membuat Kotak Script / Quote Keren"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close