Ticker

6/recent/ticker-posts

Header Ads Widget

Tutorial Text Box Didalam Postingan

 

Cara Menyisipkan Text Box di dalam postingan - Ada yang menyebut text box, script box, text area atau lainnya. Pada dasarnya text box sering digunakan untuk menempatkan kode script, baca juga atau teks yang ingin ditampilkan secara berbeda dengan tulisan utamanya.

Bagi pemula penempatan script box terasa menyulitkan, karena harus berhubungan dengan kode HTML yang sangat menjemukan.

  • Agar mudah dalam menyisipkan text dengan tepat, pada Tampilan menulis  beri tanda garis putus (atau lainnya) pada tempat dimana text box akan disisipkan.

 

  • Lalu beralih ke Tampilan HTML.
  • Cari dimana garis putus tersebut berada.

 

Lalu tempelkan/paste kode berikut :

<div style="background-color: #f6f6f6; border-top: 10px solid #009ee0; padding: 17px; text-align: left;">TEMPELKAN/PASTE DISINI</div>

Kembali ke Tampilan menulis,

Tempelkan/Paste ke empat baris contoh berikut, untuk menggantikan teks TEMPELKAN/PASTE DISINI.

Baca juga:

  • Autoplay Youtube pada Blog
  • Video Melayang Saat Halaman Digulir
  • Iklan Adsense Melayang Responsif dibawah Blog

Contoh diatas diterapkan untuk membuat kolom Baca juga didalam postingan, hasilnya seperti dibawah ini.

Anda dapat menentukan pilihan sendiri dari beberapa kode text box, seperti berikut:

Model 1

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

Model 2

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">TEMPELKAN/PASTE DISINI</div>


Model 3

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus (); this.form.txt.select ();" type="button" value="Copy All" </div><div align="center"></div><p align="center"><textarea style="widht: 150px; height: 50px" name="txt" rows="35" wrap="virtual" cols="25">TEMPELKAN/PASTE DISINI</textarea></p></div></form>

Sebagai keterangan untuk Box Script di atas, silakan perhatikan script berwarna merah yang bisa anda ganti kodenya sesuai dengan keinginan anda.

  • border: 2px  adalah ketebalan garis 
  • Padding:10px  adalah ukuran box
  • Background-color #ffffff adalah warna latar belakang pada contoh di atas warna latar adalah putih.
  • text-align: left adalah posisi tulisan dalam box
  • Ganti teks TEMPELKAN/PASTE DISINi dengan kode script atau teks yang diinginkan. 
  • solid  adalah pilihan jenis garis: Dashed, outset, ridge, solid, dotted, double, Groove. 
Selamat mencoba.



Posting Komentar

0 Komentar