Cara Menciptakan Text Area Untuk Link Postingan
Sebelumnya pada blog ini dijelaskan mengenai HTML dasar hingga tingkat lanjutan sekarang saatnya aku akan mencoba memaparkan kepada teman netter wacana aplikasi jadwal HTML untuk blog atau website, kali ini aku akan mencoba posting mengenai pembuatan link text postingan untuk blog, terkadang di dalam postingan kita ingin buat kotak teks (text area), di dalam kotak teks sanggup diisi dengan teks, link, banner, dll. Ada banyak cara / script yang sanggup anda gunakan untuk menciptakan kotak teks (text box) tersebut. Kotak teks ini biasanya dipakai untuk menciptakan form untuk tukaran link dengan blog lain, menciptakan teks klarifikasi wacana isi dari link postingan.
Sebagai referensi di bawah ini ialah beberapa macam cara menciptakan kotak teks (text box) dengan script yang berbeda.
Contoh 1:
- Teks rata tengah = text-align: center; center sanggup diganti dengan left, right,justify
- Background warna ungu = background-color: rgb((200, 30, 200); angka 200,30dan 200 sanggup anda ubah sesuai harapan (untuk mengubah warnanya)
Script: (dimasukkan di dalam postingan atau widget blogger) <FONT COLOR = "white">, Sebenarnya sudah dijelaskan diblog ini wacana berguru dasar 1-3 HTML yaitu wacana warna untuk font ,<FONT COLOR = "white">,untuk menciptakan teks warna putih, sanggup diubah dengan warna lain green, blue, gray dll.
Kode script HTML untuk memasang link ditengah dalam area text dengan laterbelakang warna :
<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: rgb(200, 30, 200); text-align: center;"><a href=http://bisnisonlinetop1.blogspot.com><FONT COLOR = "white">Tips dan Trik Sukses Bisnis Online</a></p></font>
Tampilannya sehabis dipublish :
Contoh 2:
- Teks otomatis rata kiri
- Background warna abu-abu = background-color: gray ; gray sanggup diganti dengan warna lain menyerupai white, red, blue, green, dsb, warna lainnya sanggup dilihat disini daftar warna
- Link diisi hingga baris pertama penuh kemudian akan berpindah ke baris 2
- Tinggi kotak teks 100 px (pixel) = height: 100px; angka 100 sanggup diubah sesuai kebutuhan
- Script (dimasukkan di dalam postingan) .
Contoh scriptnya :
<div style="border: 0px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 100px; background-color: gray; "><br>
<a href=http://bisnisonlinetop1.blogspot.com/>strategi bisnis online</a> <a href="http://bisnisonlinetop1.blogspot.com/2011/04/langkah-awal-bisnis-online.html/">tips sukses bisnis online</a><br>
</div>
Tampilannya sehabis dipublish :
Contoh 3:
- Teks otomatis rata kiri
- Background transparan
- Link diisi per baris 1 link
- Tinggi kotak teks 200 px (pixel) = height: 100px; angka 100 sanggup diubah sesuai kebutuhan
- Script: (dimasukkan di dalam postingan)
Contoh Script HTML nya :
<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 200px; "> <br> <a href="http://bisnisonlinetop1.blogspot.com">strategi bisnis online</a> <br> <a href="http://bisnisonlinetop1.blogspot.com/2011/04/langkah-awal-bisnis-online.html/" target="_blank">tips sukses bisnis online</a><br> </div>
Tampilannya sehabis dipublish :
kode di atas dimasukkan ketika menciptakan entri gres / edit entri dalam mode "Edit HTML"
Contoh 4 :
Menampilkan isi link postingan dalam textarea, dengan cara ini sanggup menghemat daerah kalau postingan kita sudah terlalu banyak dan sanggup juga untuk menciptakan teks klarifikasi wacana isi dari link postingan. :
Contoh scriptnya :
<div style="border-right: rgb(153,153,153) 0px solid; border-top: rgb(153,153,153) 0px solid; overflow: auto; border-left: rgb(153,153,153) 0px solid; width: 380px; border-bottom: rgb(153,153,153) 0px solid; height: 200px; text-align: left"> <ul type="square"> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/3-situs-web-penghasil-dollar-cepat.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Situs-situs PTC yang membayar membersnya & cepat process cashoutnya. </span></a>
</li> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/cara-mendaftar-ptc-neobux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara mendaftar PTC NEOBUX </span></a>
</li> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-menghasilkan-100-500-perhari.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara menghasilkan $100-$200 perhari dengan PTC NEOBUX </span></a>
</li> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/cara-daftar-ptc-onbux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara mendaftar PTC ONBUX </span></a>
</li> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-menghasilkan-ratusan-dollar.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Strategy ampuh menghasilkan $200-$500 perhari dengan mengikuti PTC ONBUX </span></a>
</li> <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-sukses-ptc-incrasebux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Tips sukses dengan PTC Incrasebux</span></a>
</li></ul>
</div>
Tampilan pada ketika di publishing :
Kode di atas dimasukkan ketika menciptakan entri gres / edit entri dalam mode "Edit HTML" blok atau website, dan sanggup juga dimasukan pada sajian seting pemasangan widget di blog.
Semoga bermanfaat bagi Anda…!!!
Komentar
Posting Komentar