Cara menambahkan Text-Box pada postingan Artikel Blogger

Online Income - Tex-Box adalah sebuah kotak dalam postingan suatu artikel yang berisi berupa text atau tulisan kode script untuk keperluan website (blog).

Karena bila kode script dicantumkan langsung tanpa menggunakan sebuah kotak maka akan tampak tidak rapi, apalagi bila scriptnya banyak. Tentu akan membuat tampilan artikel menjadi berantakan.

Disinilah perlunya sebuah kotak yang bernama Text-Box. Saya akan bagikan beberapa Variasi dari Tampilan Text-Box beserta cara penggunaannya.

Contoh Penulisan kode script tanpa menggunakan Text-Box:

<style>

/* Related Posts Santos Blog*/ #related-post {display:block; margin:20px 0px; line-height:1.5em;}

#related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: ''; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; }

#related-summary .news-text {display:none;}

ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;}

ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;}

ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; } 

ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; }

ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;}

ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);}

ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px}

ul#related-summary li a.relinkjdulx:hover{color:#066;}

@media only screen and (max-width:480px){

ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; }

ul#related-summary li a img{ height:85px;} 

ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }} 

</style>

<script type='text/javascript'>

//<![CDATA[

Contoh Penulisan kode script dengan menggunakan Text-Box:

<style>

/* Related Posts Santos Blog*/ #related-post {display:block; margin:20px 0px; line-height:1.5em;}

#related-post h4{ font-size:17px; font-weight:600; text-align:center; text-transform:uppercase; line-height:initial; } #related-post h4 span{ background-color:#fff; padding:0px 15px; position:relative; z-index:1; } #related-post h4:before{ content: ''; display: block; position: relative; top:15px; width: 100%; border-top: 2px solid #068488; }

#related-summary .news-text {display:none;}

ul#related-summary{margin:20px 0px 0px; padding:0px; display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap;}

ul#related-summary li{list-style:none; width:calc((100% / 3) - 15px); text-align:left; margin-right:20px; margin-bottom:20px; padding:0px; -webkit-margin-start:0px !important;}

ul#related-summary li img{ overflow:hidden; line-height:0px; border-radius:4px; } 

ul#related-summary li:nth-of-type(3n){ margin-right:0px; } ul#related-summary li a{ display:block; }

ul#related-summary li img{width:100%; height:117px; transition:all .3s ease; border:0px; margin:0px;}

ul#related-summary li:hover img {transform:scale(1.1); filter: brightness(75%); -webkit-filter: brightness(75%);}

ul#related-summary li a.relinkjdulx{background-image:none;color:#000;display:block;font-size:13px;font-weight:600;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none;margin-top:7px}

ul#related-summary li a.relinkjdulx:hover{color:#066;}

@media only screen and (max-width:480px){

ul#related-summary li{ width: calc((100% / 2) - 7.5px); margin-right:15px; margin-bottom:15px; }

ul#related-summary li a img{ height:85px;} 

ul#related-summary li:nth-of-type(3n){ margin-right:15px; } ul#related-summary li:nth-of-type(2n){ margin-right:0px; }} 

</style>

<script type='text/javascript'>

//<![CDATA[

Bisa anda lihat sendiri hasil perbandingan antara menggunakan Text-Box dan tidak.

Dibawah ada beberapa versi tampilan Text-Box yang bisa anda gunakan.

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

 Kode:

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left; height: 100px; width: 520px; overflow: auto;"></div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
</div>

 Kode:

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left; height: 100px; width: 520px; overflow: auto;">
</div>

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

 Kode:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left; height: 100px; width: 520px; overflow: auto; "></div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;"></div>

 Kode:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 100px; width: 500px; overflow: auto;"></div>

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

 Kode:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left; height: 100px; width: 500px; overflow: auto;”></div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;"></div>

 Kode:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;height: 100px; width: 500px; overflow: auto;"></div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> </div>

 Kode:

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;left;height: 100px; width: 500px; overflow: auto;"> </div>

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

 Kode:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;left;height: 100px; width: 500px; overflow: auto;"></div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> </div>

 Kode:

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;height: 100px; width: 500px; overflow: auto;"> </div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> </div>

 Kode:

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;height: 100px; width: 500px; overflow: auto;”> </div>

Sengaja saya tidak meletakan teks kode didalam kotak, karena jumlah barisan kode hanya sedikit, jadi penggunaan kotak tidak diperlukan.

Cara penggunaan:

1. Copy kode lalu paste pada menu HTML saat anda membuat artikel.
2. Ubah ke mode Menulis jika anda ingin memasukan teks code script kedalam kotak.

Anda bisa mengubah nilai height dan width sesuai ukuran yang anda inginkan.