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.
Contoh #1:
border: solid 5px #aaaaaa;
background: #6495ED;
font-size: 18px;
margin: 40px;
padding: 30px;
text-align: justify;
“>
Type Your Text Here
</div>
Contoh #2:
width: 300px;
height:70px;
border: double 6px #00385B;
“>
Type Your Text Here
</div>
<br/>
Contoh #3: Mengontrol lebar, tinggi dan kelurusan border / frame
<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>
- 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:
- Jenis Garis : double, solid, dashed, dotted, groove, ridge, inset & outset
- 5px : merupakan batas lebar
- #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.
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.
|
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> </li></ul></div></td></tr></tbody></table>
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 :
Demikian Bahasan singkat mengenai Pembuatan Garis Kotak atau frame teks / border
Semoga Bisa Membantu.
