Cara Membuat Garis Kotak – Garis Putus Solid pada post Blogger Blogspot

Cara Menambahkan Frame Teks ke Blogspot Blogger Post sangat sederhana, Kita hanya perlu menambahkan kode script yang disesuaikan dengan berbagai jenis tipe garis yang kita inginkan, garis solid, garis putus-putus, garis double/ganda dll.

Berikut Contoh script dan jenis Kotak & Garis Yang bisa Kita Gunakan

Contoh #1:


<div style=”
border: solid 5px #aaaaaa;
background: #6495ED;
font-size: 18px;
margin: 40px;
padding: 30px;
text-align: justify;
“>
Type Your Text Here
</div>

Hasilnya:
Type Your Text Here 

Contoh #2:

<div style=”
width: 300px;
height:70px;
border: double 6px #00385B;
“>
Type Your Text Here
</div>
<br/>
Hasilnya:

Type Your Text Here

      Contoh #3: Mengontrol lebar, tinggi dan kelurusan border / frame

      Perbatasan / bingkai yang saya cari adalah yang satu ini
      Seperti garis penyejajaran garis horizontal saat ditambahkan melalui tag <div> (dijelaskan di posting sebelumnya), kode pada Contoh # 1 atau Contoh # 2 harus “dibungkus” dengan tag <div> lain (teks berwarna merah Dari kode) sebagai berikut:
      <div align=”center”>
      <div style=”
      border: double 5px #aaaaaa;
      font-size: 24px;
      margin: 40px;
      padding: 30px;
      width: 50%;
      height: 150px;
      “>
      DIBUATKAN BORDER DOUBLE YANG BAGUS DI SEKITAR TEKS
      </div>
      </div>
      Hasilnya:

      DIBUATKAN BORDER DOUBLE YANG BAGUS DI SEKITAR TEKS
      Penjelasan atribut sebagai berikut:
      • Atribut width (lebar) harus ditambahkan (dengan nilai dalam pixel atau persen, misalnya 500px atau 67%) jika lebar keseluruhan border / frame kurang dari lebar teks. 
      • Atribut height (tinggi) harus ditambahkan (dengan nilai dalam piksel misalnya 500px) Jika Anda menginginkan border / frame dengan ketinggian yang tepat. Perlu diingat bahwa menambahkan atribut ini dapat menyebabkan over teks (bisa keluar dari frame). sebaiknya atribut ini dilewatkan.
      • Pada atribut border ada tiga jenis nilai: 
      1. Jenis Garis : double, solid, dashed, dotted, groove, ridge, inset & outset
      2. 5px : merupakan batas lebar
      3. #aaaaaa : merupakan kode hex untuk warna border
      • Atribut background (latar belakang) harus ditambahkan jika Anda menginginkan latar belakang berwarna di dalam teks
      • Atribut  font-size mengacu pada ukuran teks. Karena ini, Anda dapat mengedit teks di editor posting Blogger dibagian compose.
      • Nilai setelah atribut margin adalah jarak dari setiap perbatasan (atas, bawah, kanan dan kiri) ke elemen pos di sekitarnya. (Biasanya di atas dan di bawah border / frame). 
      • Nilai setelah atribut padding adalah jarak dari setiap border (atas, bawah, kanan dan kiri) ke teks di dalam border / frame. 
      • Atribut text-align untuk mengontrol alignment teks (left, center, right, justify) didalam batas garis. Karena keselarasan teks dapat dikontrol melalui editor posting Blogger visual, Kita juga bisa skip atribut ini.
      Berbeda dengan gaya top, right, bottom dan left border, margin dan padding,

      Dengan kata lain, batas atas, kanan, bawah dan kiri, margin dan padding dapat ditata dengan cara yang berbeda, misalnya Anda bisa menambahkan kode editor HTML.

      • Teks disini.
      • Teks disini.
      • Teks disini.
      • Teks disini   

      Kode HTML-nya sebagai berikut :

      <table border=”2″ cellpadding=”0″ cellspacing=”0″ style=”text-align: left; width: 100%;”><tbody><tr><td style=”vertical-align: top;”><div style=”border-bottom: solid 6px orange; border-left: solid 3px purple; border-right: solid 6px brown; border-top: solid 6px blue; margin-bottom: 10px; margin-left: 50px; margin-right: 20px; margin-top: 65px; padding-bottom: 10px; padding-left: 65px; padding-right: 15px; padding-top: 65px;”><br /><ul><li><span style=”font-family: ‘Courier New’, Courier, monospace;”><b>Teks disini.</b></span></li><li><span style=”color: #741b47;”><b>Teks disini.</b></span></li><li><span style=”font-family: Georgia, ‘Times New Roman’, serif;”><i>Teks disini.</i></span></li><li><span style=”font-size: x-small;”><b>Teks disini</b></span> &nbsp;&nbsp;</li></ul></div></td></tr></tbody></table>

      Batas Bulat / Rounded Borders

      Contoh : 

      <div style=”
      -khtml-border-radius: 5px;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border-radius: 15px;
      border: solid 5px #7FFF00;
      margin: 0;
      padding: 10px;
      text-align: justify;”>
      Text Disini
      </div>

      Hasil Visualnya :

      Text Disini

      Demikian Bahasan singkat mengenai Pembuatan Garis Kotak atau frame teks / border
      Semoga Bisa Membantu.

      Artikel Terkait:  4 Tips untuk Membuat Video Screen-cast yang Efektif

      You May Also Like

      0 Comments

      Leave a Reply

      Your email address will not be published. Required fields are marked *