Kumpulan Kode kotak scripr untuk Blogger

Berbagi
المؤلفPosted at
Hallo.... Kawan pada kesempatan kali ini saya akan membagikan kumpulan kode untuk membuat Kotak pada postingan blogger.


Oke...biar tidak terlalu panjang, berikun script beserta contohnya

Script ~1 | Kotak Text center Bayang-bayang
Copy kode HTML di bawah ini
<div style="background-color: deepskyblue; border-radius: 7px; box-shadow: 10px 10px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">TULISAN DISINI</div>

 Script ~2 | Kotak Text Center Bayangan Rendah
Copy kode HTML di bawah ini
<div style="background-color: deepskyblue; border-radius: 5px; box-shadow: 5px 5px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 5px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">
TULISAN DISINI</div>
Note :
~Merah  : Efek bayangan
~Hijau    : Background

 Script ~3 | Kotak Bergaris di samping kiri
Copy kode HTML di bawah ini

# kode 1
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>

# Kode 2
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>

# Kode 3
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>

# Kode 4
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color:#f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">TULISAN DI SINI</div>

 Script ~4 | Kotak Text efek edge
Copy kode HTML di bawah ini
<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
TULISAN DISINI</div>

 Script ~5 | Kotak Text Bergaris bagian atas
Copy kode HTML di bawah ini
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
TULISAN DISINI</div>

 Script ~6 | Kotak Text edge bergaris strip2
Copy kode HTML di bawah ini
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightsteelblue; border-radius: 10px; border: 4px dashed coral; padding: 6px; t-align: left;">
TULIS DISINI</div>

 Script ~7 | Kotak Text edge bergaris
Copy kode HTML di bawah ini
<div style="background-color: #ffebcd; border: 3px #5f200e double; padding: 10px; text-align: left;">
TULISAN DISINI</div>

 Script ~8 | Kotak Scrol Vertical
Copy kode HTML di bawah ini
<div style="background-color: white; border: 2px solid gray; height: 100px; overflow: auto; padding: 5px; width: auto;">
 TULSAN DISINI
Tes....
Tes....
Tes....
</div>

 Script ~9 | Kotak Scrol Vertical & Horizontal
Copy kode HTML di bawah ini
<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
TULISAN DISINI</div>
</div>

 Script ~10 | Kotak Radius 10 px Webkit-border
Copy kode HTML di bawah ini
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
TULISAN DISINI</div>



Sekian script yang bisa saya bagikan semoga bermanfaat, jangan lupa share postingan ini ke semua sosial media kalian.


Labels, ,