Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Kamis, 13 Mei 2010

Kotak Banner Dengan CSS Inline

Kategori : ,
Pada kesempatan kali ini saya akan menjelaskan tentang "Cara Membuat Kotak Banner Dengan CSS Inline". memang trik ini sudah pernah saya bahas sebelumnya yaitu tentang Membuat Kotak Banner Iklan namun yang ini sedikit berbeda kalau yang sebelumnya menggunakan image atau gambar kalau yang hanya menggunakan css inline. Css Inline itu apa y? css inline itu adalah kode css (style) berada di dalam kode HTML langsung tanpa harus membuatnya terpisah-pisah. pada dasarnya css dengan HTML memang terpisah tata letak-nya yang satu di kepala yang satu lagi di bagian badan, memang begitulah cinta, penderitaan yang tiada akhir wkwkwkwkwk .

Memang akhir-akhir ini saya lagi fokus membahas tentang CSS karena css dapat mengurangi penggunaan Javascript dan jquery kemungkinan. Semoga sobat semua tidak bosan y klo saya membahas tentang CSS terus . oke sekarang kita langsung ke langkahnya saja yups :
  1. Seperti biasa kita login ke blogger
  2. Lalu Masuk deh ke Tata Letak => Elemen laman
  3. Lalu tambahkan sebuah gadget dan pilih yang HTML/Javascript
  4. masukan kode di bawah ini ke dalamnya

    <a target="_blank" href="http://www.contactify.com/b6978"><div style="float:left; margin-left:2px;height:125px; width:124px; border:1px solid #f2f2f2; background:#f3f3f3;">
    <p style="text-align:center;font-size:20px;color:#0000ff;padding:25px 10px 5px 10px;">Pasang Iklan 125 X 125</p>
    </div></a>

    <a target="_blank" href="http://www.contactify.com/b6978"><div style="float:right; margin-right:2px;height:125px; width:124px; border:1px solid #f2f2f2; background:#f3f3f3;">
    <p style="text-align:center;font-size:20px;color:#0000ff;padding:25px 10px 5px 10px;">Pasang Iklan 125 X 125</p>
    </div></a>

    <a target="_blank" href="http://www.contactify.com/b6978"><div style="float:left; margin-left:2px;height:125px; width:124px; border:1px solid #f2f2f2; background:#f3f3f3;">
    <p style="text-align:center;font-size:20px;color:#0000ff;padding:25px 10px 5px 10px;">Pasang Iklan 125 X 125</p>
    </div></a>

    <a target="_blank" href="http://www.contactify.com/b6978"><div style="float:right; margin-right:2px;height:125px; width:124px; border:1px solid #f2f2f2; background:#f3f3f3;">
    <p style="text-align:center;font-size:20px;color:#0000ff;padding:25px 10px 5px 10px;">Pasang Iklan 125 X 125</p>
    </div></a>


  5. Untuk memodifikasinya hampir sama dengan trik membuat kotak banner iklan pada postingan sebelumnya
  6. Setelah itu Simpan deh dan sobat bisa melihat hasilnya .
  7. Selesai deh

Nah bagaimana mudah bukan cara memasangnya? sekarang say mau jelaskan sedikit itu juga kalau sobat mau menyimak, baik kita ambil dahulu y kode banner Iklan di atas, baik lihat ke bawah saya akan menjelaskannya sedikit

<a target="_blank" href="http://www.contactify.com/b6978"><div style="float:right; margin-right:2px;height:125px; width:124px; border:1px solid #f2f2f2; background:#f3f3f3;">
<p style="text-align:center;font-size:20px;color:#0000ff;padding:25px 10px 5px 10px;">Pasang Iklan 125 X 125</p>
</div></a>

Penjelasan =>
  • Kode yang berwarna merah itu hanya kode html biasa yang digunakan untuk menaruh alamat URL.
  • Nah sedangkan kode yang berwarna hijau itu yang dinamakan CSS Inline karena dalam HTML di memasukan juga CSS maka itu lah yang di sebut dengan css Inline property yang digunakan tidak jauh berbeda sama property css yang sering kita temui jadi hanya tata letaknya saja yang berbeda gituloh.
Nah itu lah keindahan CSS, selain css inline style masih banyak loh yang lebih indah dan ringan loadingnya gytu. oiya kalau sobat semua mengetahui tentang css juga mari kita berdikusi dan saling berbagi y, sekarang saya mau pamit dulu. Termia kasih dan Happy Blogging .
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

18 Komentar untuk Kotak Banner Dengan CSS Inline

Eh, ada demonya gak???

hmm, jadi klo pake ini bisa lebih ringan ya loadnya ??

ukuran2nya bisa dirubah itu kan sob ?? atau cuman segitu...

keknya mantap nih...
ada contoh yg sdah dicoba gak??

Keren Sob..!!! :9:

mampir ya di blog aku,,

oh jadi kita bisa menampilkan banner iklan kita dengan lebih atraktif lagi yah

Wah bagus triknya sob... btw, tampilan baru neh.... Mantap!!

nice tutor mas.
salam

nice share mas, aku simpan dulu triknya untuk blogku yang lain. suwun matur nuhun

artikelnya bagus, apalagi pake emoticon gitu, jadi makin hidup.
contoh banner nya mana ya? saya pengen liat.

@all => untuk melihat contoh-nya bisa dilihat di sidebar kanan blog saya, yang ada tulisan PASANG IKLAN 125 X 125. Terima kasih ^_^.

coba di kasih preview.
pasti postingannya tambah bagus mas :D

wah ada yang salah tuch klo masuk di tata letak => edit html, gak akan ada tambah gadgetnya, mgkn yg bnr tata letak => elemen laman. maap klo sy salah......

@musthofa_idris => wah benar ada kesalahan, makasih y mas atas koreksinya, memang di elemen laman bukan edit HTML, maklum nulisnya malam2 gytu deh ^_^

mantap bro info nya.Kunjg blk dan follow

TIPSYOURNET: oke sob.. mantap....

Css luas ya jangkauannya...