Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Buat Frame Iklan

Sobat fajar widodo rupanya tertarik untuk mengetahui bagaimana
cara membuat frame seperti frame iklan yang ada di blog ini. Apakah sobat juga
sama tertarik untuk membuat frame tersebut? baca saja sampai akhir,
saya akan memberitahu caranya.

Untuk membuat frame seperti itu banyak cara yang bisa di tempuh, diantaranya bisa
menggunakan kode HTML <div>
atau bisa juga dengan menggunakan kode HTML <span>.
Langkah yang harus di persiapkan adalah tentukan dahulu lebar, warna latar belakang,
warna huruf, jenis huruf, besarnya huruf, serta hal lain yang sekiranya berhubungan. Agar lebih
mudah untuk di mengerti, saya buatkan sebuah contoh frame sebagai berikut:

Belajar membuat website »
Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!
http://www.resepbisnis.com/?id=rohman

Kode asli dari frame di atas adalah sebagai berikut :



<div style="border: 3px dashed red; background: #005af5; padding:10px; width:330px; text-align:left; color:white;">
<a style="font-size: 17px;COLOR: yellow; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html&quot; title="klik di sini"><b>Belajar membuat website </b></a> &raquo;<br/>
Membuat website itu sangatlah mudah, dapatkan panduannya di sini ! ditunjang berbagai software & full support. daftar segera !!<br/>
<a style="color:yellow; font-size:12px; text-decoration:none;" href="http://kolom-tutorial.blogspot.com/2007/07/perkenalkan-situs-wwwresepbisniscom.html&quot; title="klik di sini"><b>http://www.resepbisnis.com/?id=rohman</b></a>
</div>

Jika saya membuat spesifikasi pada frame iklan di atas, maka akan seperti ini :

warna pembatas : merah
style dari pembatas : garis putus-putus dengan lebar 3 pixel
jarak hurup dengan batas terluar : 10 pixel
lebar frame: 330 pixel
posisi hurup : rata kiri
warna hurup : putih
warna latar belakang : biru
warna link : kuning

Bagaimana sudah agak faham? kemungkinan besar masih bingung deh.
Agar lebih mudah cobalah sobat otak-atik sendiri kode di atas, saya
sedikit malas untuk menerangkan secara terperinci dari kode yang
saya buat.

ooo… iya lupa… sobat fajar widodo lebih spesifik menanyakan kode untuk
membuat garis putus-putus. Untuk garis putus-putus perintahnya seperti ini :

border : 3px dashed red;

3px menandakan lebar dari garis, dashed berarti garis putus-putus, red adalah kode warna merah.

Ada juga style yang lain yaitu berupa garis berbentuk garis yang solid ada juga yang berupa titik-titik.

border : 3px dashed red; –> untuk garis solid
border : 3px dotted red; –> untuk garis berupa titik-titik

Sepertinya cukup dulu deh, silahkan untuk bereksperimen menciptakan variasi-variasi baru
dari bentuk frame. Salam !

27 September 2007 - Posted by | blog tutorial

9 Komentar »

  1. first comment….hehehehe

    Komentar oleh ihsan | 2 Desember 2007 | Balas

  2. bisa dibuat untuk bingkainya sidebar nggak mas

    Komentar oleh MasakaN JowO | 3 Desember 2007 | Balas

  3. Bisa dibuat agar lebih interaktif gak bos, saya nunggu jadinya aja yaa buat di add ke blogku

    Komentar oleh Kilas.Artikel | 5 April 2008 | Balas

  4. terima kasih ya atas kodenya !

    Komentar oleh Pengembara dunia maya | 3 Juni 2008 | Balas

  5. Nah loh…

    Komentar oleh MARCO LAU SANTOSA | 28 Juni 2008 | Balas

  6. Assalamu’alaykum kang. Ajarin dong buat kotak komentar kayak punya akang😀

    Komentar oleh Ghur4ba Comunity Blog | 5 Agustus 2008 | Balas

  7. second comment…. he999 :):)

    Komentar oleh Temmy | 27 Agustus 2008 | Balas

  8. kang…minta kode-kode buat ganti warna tuh apa aja kang, misalnya jingga kodenya gimana…?

    Komentar oleh KPA-P BANJARMASIN | 3 September 2008 | Balas

  9. rttr

    Komentar oleh yudi andriyanto | 6 September 2008 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: