Pages

Subscribe:

Senin, 28 Januari 2013

Beberapa Alamat Templet Web


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 :
  1. http://www.csstemplatesfree.org
  2. http://www.freecsstemplates.org
  3. http://www.free-css.com
  4. http://andreasviklund.com
  5. http://www.ramblingsoul.com
  6. http://www.metamorphozis.com
  7. http://speckyboy.com/2012/04/04/free-clean-business-htmlcss-template
  8. http://www.smashingapps.com/2011/02/22/45-free-and-high-quality-xhtmlcss-website-templates.html
  9. http://dzineblog.com/2010/05/45-best-free-web-templates-to-download-part-ii.html
  10. http://coding.smashingmagazine.com/2008/12/01/100-free-high-quality-xhtmlcss-templates/
  11. http://www.allxnet.com/2012/04/17-free-perfect-html-and-css-templates/
  12. http://stylishwebdesigner.com/10-best-free-html-and-css-templates-from-early-2012/
  13. http://naldzgraphics.net/freebies/40-free-beautiful-htmlcss-templates/
  14. http://www.noupe.com/css/50-free-css-x-html-templates.html
  15. 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.