Sebelumnya pada blog ini dijelaskan mengenai HTML dasar sampai tingkat lanjutan kini saatnya saya akan mencoba memaparkan kepada sobat netter tentang aplikasi program HTML untuk blog atau website, kali ini saya 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 bisa diisi dengan teks, link, banner, dll. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks (text box) tersebut. Kotak teks ini biasanya digunakan untuk membuat form untuk tukaran link dengan blog lain, membuat teks penjelasan tentang isi dari link postingan.
Sebagai contoh di bawah ini adalah beberapa macam cara membuat kotak teks (text box) dengan script yang berbeda.
Contoh 1:
- Teks rata tengah = text-align: center; center bisa diganti dengan left, right,justify
- Background warna ungu = background-color: rgb((200, 30, 200); angka 200,30dan 200 bisa anda ubah sesuai keinginan (untuk mengubah warnanya)
Script: (dimasukkan di dalam postingan atau widget blogger) <FONT COLOR = "white">, Sebenarnya sudah dijelaskan diblog ini tentang belajar dasar 1-3 HTML yaitu tentang warna untuk font ,<FONT COLOR = "white">,untuk membuat teks warna putih, bisa 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 setelah dipublish :
Tips dan Trik Sukses Bisnis Online
Contoh 2:
- Teks otomatis rata kiri
- Background warna abu-abu = background-color: gray ; gray bisa diganti dengan warna lain seperti white, red, blue, green, dsb, warna lainnya bisa 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 bisa 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 setelah 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 bisa 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 setelah dipublish :
kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML"
Contoh 4 :
Menampilkan isi link postingan dalam textarea, dengan cara ini dapat menghemat tempat jika postingan kita sudah terlalu banyak dan dapat juga untuk membuat teks penjelasan tentang 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 saat di publishing :
Kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML" blok atau website, dan dapat juga dimasukan pada menu seting pemasangan widget di blog.
Semoga bermanfaat bagi Anda…!!!