Sekarang
anda tidak perlu merepotkan diri untuk menyusun template website atau blog,
karena sudah banyak template yang bisa anda dapat dengan gratis alias free.
Kecuali anda memang ingin template web yang fresh, original, dan sesuai dengan
web atau blog yang anda buat.
Template web
gratis tersedia dalam banyak versi platform seperti wordpress, joomla,
blogspot, mambo, bahkan yang murni html dan css. Bahkan jika anda mau, banyak
juga yang menyediakan file psd (photoshop) sehingga bisa diedit lagi.
Gratis memang
tidak akan berbayar, tapi anda tetap harus mengikuti aturan mainya yaitu
mencantumkan nama atau link si pembuat aslinya. Kebetulan blog saya
ini memang orisinil dibuat sendiri jadi gak perlu mengikuti aturan itu.
Jika anda
berminat download silahkan kunjungi alamat situs-situs berikut :
- http://www.csstemplatesfree.org
- http://www.freecsstemplates.org
- http://www.free-css.com
- http://andreasviklund.com
- http://www.ramblingsoul.com
- http://www.metamorphozis.com
- http://speckyboy.com/2012/04/04/free-clean-business-htmlcss-template
- http://www.smashingapps.com/2011/02/22/45-free-and-high-quality-xhtmlcss-website-templates.html
- http://dzineblog.com/2010/05/45-best-free-web-templates-to-download-part-ii.html
- http://coding.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/
- http://www.allxnet.com/2012/04/17-free-perfect-html-and-css-templates/
- http://stylishwebdesigner.com/10-best-free-html-and-css-templates-from-early-2012/
- http://naldzgraphics.net/freebies/40-free-beautiful-htmlcss-templates/
- http://www.noupe.com/css/50-free-css-x-html-templates.html
- http://smashinghub.com/20-free-and-premium-business-htmlcss-templates.htm
Selamat
dowload dan semoga bermanfaat.
Saran, selagi bisa buat sendiri mengapa harus cari yang gratis.
Berkreasi
tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Tidak
panjang cerita ini cara membuat latar ganda untuk sebuah halaman
atau bagian web anda.
Tambahkan
kode css berikut pada bagian <head>..</head> atau modifikasi file
css yang sudah.
#multipleBGs {
background:
url(photo1.png),
url(photo2.png),
url(photo3.png)
;
background-repeat:
no-repeat,
no-repeat,
repeat-y;
background-position:
0 0,
30px 120px,
right top;
width:
400px;
height:
400px;
border:
1px solid #ccc;
}
Kemudian
tambahkan area/blok dalam bagian body yang akan diberi latar ganda dengan kode
berikut :
<div id="multipleBGs">Isi
bagian/bloknya</div>
Dengan
kode-kode diatas otomatis bagian yang sudah diberi ID multipleBGs pada saat
ditampilkan memiliki latar dengan 3 gambar berbeda.
Kita bisa
berkreasi membuat menu sendiri yang unik sesuai selera kita baik warna, bentuk,
maupun gambar. CSS menurut saya sebuah teknologi yang powerfull dalam
menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus
dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih
dalam tahap belajar.
Kali ini saya
akan berbagi tips sedikit tentang bagaimana membuat menu sederhana dengan
html+css.
Pertama kita
membuat dulu serangkaian hyperlink dalam area <body>..</body> yang
disusun dalam sebuah HTML list dengan kode :
<div id="menuku">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
Jika kita
simpan, kode diatas akan menghasilkan tampilan seperti berikut :
Kemudian
kita membuat susunan kode css yang nantinya mengubah tampilan dari menu yang
sudah dibuat. Untuk css kita letakkan di bagian <head>..</head>,
kodenya bisa dilihat berikut :
<style type="text/css">
DIV#menuku {
/* ini
digunakan untuk mengatur bingkai menu */
width:
400px; /* digunakan untuk mengatur lebar bingkai menu */
margin: 0
auto; /* digunakan untuk mengatur posisi menu ditengah halaman */
padding:
10px; /* digunakan untuk mengatur jarak bingkai dengan menu */
background-color:
#404040;
}
DIV#menuku ul {
/* ini
digunakan untuk merubah tampilan list */
list-style:
none; /* digunakan untuk menghilangkan simbol list */
margin:
0; /* digunakan untuk menghilangkan jarak list dengan bingkai menu */
padding:
0; /* sda */
}
DIV#menuku ul li {
display:
inline; /* mengubah list menjadi horizontal */
padding-right:
5px; /* mengatur jarak list item */
}
DIV#menuku ul li a {
/*
digunakan untuk mengatur hyperlink yang sudah dibuat */
background-color:
#aaaaaa; /* warna background tulisan
*/
padding:
3px 10px 3px 10px; /* memberi efek kotak pada tulisan
*/
color:
white; /* memberi warna tulisan
*/
border:1px
dotted #fff; /* memberi garis luar kotak hyperlink */
text-shadow:
1px 1px #000; /* efek bayangan pada tulisan
*/
text-decoration:none; /* menghilangkan garis bawah */
/* dengan
konfigurasi diatas hyperlink akan terlihat berbentuk kotak */
}
DIV#menuku ul li a:hover {
/*
digunakan untuk mengatur tampilan hyperlink pada saat mouse diatasnya */
background-color:
silver;
}
</style>
Setelah
selesai menulis cssnya dan kita simpan maka hasil akhir akan berubah seperti
berikut :
Kita juga
bisa menggunakan background gambar atau model-model lainya yang dipasang
melalui css, insyaallah lain kali dibahas.
Posted in: 
