Kotak Banner Dengan CSS Inline

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