Masih tentang Kombinasi CSS dan HTML

Seperti yang telah ditulis oleh Mas Abdul Munir tentang Kombinasi CSS dan HTML, sekarang saya hanya memberikan sedikit contoh, tapi sebelumnya jangan lupa baca Kombinasi CSS dan HTML yah....

OK....start.....!! Yuuk langsung ke contohnya aja, misalnya untuk membuat text-area seperti dibawah ini :

Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui

--> Cara Pertama :
Kita bisa masuk ke Dashboard --> Lay out --> Edit HTML, kemudian letakkan kode dibawah ini diatas kode ]]></b:skin>:
.nove {
margin : 10px 30px 10px 10px;
padding : 10px;
background : #b6cdff url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) no-repeat right bottom;
color :#cc0000;
border-top : 1px solid #b6cdff;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #b6cdff;
}

Untuk memanggil kode-kode tersebut, setiap posting kita hanya menuliskan <div class="nove"> sebelum TEXT dan </div>
setelah TEXT......

Seperti dibawah ini :
<div class="nove">Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui </div>

--> Cara Kedua :

Langsung menyelipkan kode CSS di tengah kode HTML pada posting, caranya :

<div style="
margin : 10px 30px 10px 10px;
padding : 10px;
background : #b6cdff url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) no-repeat right bottom;
border-top : 1px solid #b6cdff;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #b6cdff;">

Cinta sejati bukan pada apa yang dilakukan dan diheboh-hebohkan tetapi pengorbanan tanpa diketahui
</div>

Hasilnya akan sama aja............Sekarang mana yang temen-temen pilih??

PS * :

  • Cara pertama diatas memang tidak ribet, tapi sayang....apabila kita mengganti template, text area yang kita pake pada postingan akan hilang.....*kecuali kalo kode2 diatas skin tersebut dipasang lagi*.....
  • Untuk url(http://i283.photobucket.com/albums/kk285/joviedhy/blow.gif) bisa diganti dengan signature atau dihilangkan aja.....
  • Bisa juga Background dibelakangnya adalah gambar, yaitu dengan menghapus no-repeat right bottom;
  • Untuk kode warna bisa dilihat di Mengocok-ngocok kode warna Blog
 
© Copyright Blognya Noval Mbojo - Imnoval.com 2011 - Some rights reserved | Powered by Blogger.com.
Template Design by Catatan Mahasiswa Drop Out | Published by Premium Wordpress Themes
Masih tentang Kombinasi CSS dan HTML - Blognya Noval Mbojo - Imnoval.com