Cara Menciptakan Kotak Script Di Postingan Blog

MQR. Menambahkan kotak script dalam goresan pena blog fungsinya biar terlihat postingan terlihat menarik. Sudah Banyak blogger memanfaatkan fungsi kotak script dalam postingan, biasanya Kotak script dipakai untuk menempatkan instruksi script dan instruksi kode yang lainnya biar terlihat lebih rapi. Jika anda browsing di google mengenai pemasangan kotak script dalam postingan blog, maka akan banyak ditemui contoh-contoh yang dapat digunakan, nah untuk itulah kami mengulasnya kembali dan mengumpulkan beberapa referensi dijadikan dalam satu artikel ini. Tentunya semakin banyak pilihan nya akan semakin baik.

Perlu diketahui juga cara menerapkannya sangatlah mudah, pada ketika anda menciptakan Artikel dalam postingan blog, copy kotak script  tersebut kemudian pastekan pada HTML sebelahya COMPOSE.

Berminat mencobanya !

<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>

<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>

<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>

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;">Tulis script di sini! </div>

<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;"> TULISAN DISINI<br /></div> </div>

<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">TULISAN DISINI</div>

<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;">TULISAN DISINI</div>

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">TULISAN DISINI</div>

<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">TULISAN DISINI</div>

<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>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: darkturquoise; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">TULISAN DISINI&nbsp;</div>

<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>

<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>

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> TULISAN DISINI</div>

<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>

<div br="" gt="" style="background-color: chocolate; border-radius: 10px; border-radius: 40px; border-radius: 60px; border: 4px double #fff9j99; padding: 10px; t-align: center; t-color: #CCFFFF;">TULISAN DISINI</div>

<div style="background-color: antiquewhite; border: 2px solid brown ; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 5000%;">TULISAN DISINI</div>

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; 

overflow-y: scroll; width: auto;"> 

<div style="width: 2500%;">TULISAN DISINI</div> </div>

<div style="background-color: powderblue; border-radius: 5px; box-shadow: 0 2px 5px 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;"> <i>"TULISAN DISINI"</i></div><br>

<div style="background-color:#2F4F4F;color:#fff;border-radius:5px;padding: 10px; text-align: left;"> TULISAN DISINI</div>

Demikian cara menciptakan kotak script yang beberapa kami sertakan degan kotak scroll, semoga bermanfaat dan akan kami update terus artikel ini.

Sumber http://www.miqer.web.id/

Bagikan Artikel ini