20 Design Web Sebagai Inspirasi Buat Anda

Berbeda dengan postingan saya sebelumnya yang selalu menampilkan tutorial blog ataupun tips dan trik ngeblog. Kali ini saya ingin berbagi design template dari beberapa website yang saya ambil secara acak dan mungkin bisa menjadikan inspirasi buat sobat yang hobi mendesign ataupun membuat template. Ada 20 design web cantik yang bisa sobat jadikan referensi dalam membuat atau mempercantik blog/website sobat. Berikut design webnya, semoga bermanfaat.

 

 

Mint

Lionite Portfolio

Z-Index

Unlab

Reichweite

Webdesigner Depot 

Friml

Mein Eigner Baum

Wakeup Somebody Up

Creative United

Campaign Monitor

Mocapoke

2Creative

Go Glamping

Icebrrg

 

Terrededouceur

Champion Sound

Barrack Obama

Gareth Dickey

The Pixel

Fitur Baru Blogger in Draft

Lama tidak login ke blogger in draft, ternyata ada tambahan fitur baru dari blogger. Fitur tersebut adalah template yang sudah lama blogger tidak lakukan penambahan. Sekarang sobat bisa melihat tambahan template baru ini setelah masuk ke draft blogger. Apa saja fitur tambahan yang bisa sobat gunakan?

 

Jumlah tambahan template baru ini ada 15, saya rasa semuanya bagus dan bisa sobat jadikan template untuk blog sobat. Disini sobat bisa melihat preview langsung sebelum menggunakan template tersebut.

 

 

Tersedia juga pengaturan untuk warna background blog, sehingga sobat bisa menentukan warna background sesuai selera.

 

 

Ada juga fasilitas untuk mengatur sidebar, sobat dapat mengatur model sidebar. Hendak diletakkan di sebelah kanan, kiri atau membagi menjadi 3 bahkan sampai 4 kolom juga bisa.

 

 

Pengaturan standart font yang bisa sobat atur sesuai selera sobat, mulai dari ukuran sampai model tulisan.

 

 

 

Silahkan masuk ke draft.blogger.com, kemudian klik Tata Letak, lalu pilih Perancang Template.

 

CSS Style Generator

Salah satu bagian penting dalam template adalah kode css (cascading style sheet), seperti kita ketahui css adalah bahasa stylesheet yang mengatur tampilan sebuah dokumen. Umumnya css digunakan untuk memformat halaman sebuah blog/web dengan bahasa HTML. Dengan css, kita bisa mengatur warna dan tampilan blog, bahkan memformat ulang template dengan merubahnya secara tepat.

 

Untuk mengedit beberapa bagian atau keseluruhan kode css pada template, kita bisa membuatnya secara manual. Itu buat yang mengerti bahasa css, buat yang belum begitu mengerti, css style generator dari metatitan cssbuilder bisa sobat coba. Disini sobat bisa dengan mudah membuat kode css untuk template sobat, mulai dari body, header, post, sidebar, dll.

 

Tentukan dahulu bagian yang ingin di buat, setelah itu atur bagian font, box properties, background, posisi dan list properties. 

 

 

 

Hanya dalam sekejab, kode css berhasil sobat ciptakan dan tinggal memasukkannya kedalam template. Hasilnya bisa sobat lihat dibawah ini :

 

 

Itu hanya satu contoh saja, silahkan sobat kreasikan template sehingga menjadi lebih indah. Jangan takut template jadi rusak, silahkan backup template sobat sebelum melakukan edit css.

 

Selamat mencoba !

Memperbaiki Header Pada �Soft Template�

Lagi � lagi masalah terjadi pada soft template milik saya, kemarin ada yang menanyakan pada kolom komentar yang menanyakan tentang gambar pada header soft template yang hilang. Kebetulan waktu itu saya menggunakan imageshack untuk hosting menyimpan gambar header soft template. Ternyata imageshack sering down sehingga gambar tidak tampil. Untuk mengatasinya saya memindahkan gambar langsung ke blogger saja.

 

Untuk merubahnya, silahkan sobat login ke blogger dulu.

• Kemudian klik Edit HTML
• Cari kode seperti dibawah ini :

  body{
  width:980px; background:#fff url(http://img692.imageshack.us/img692/3014/31317347.jpg) repeat-x; margin:0 auto;   padding:0;   font:11px verdana, arial, trebuchet ms; text-align:left;   color:#333}

• kemudian ganti tulisan yang berwarna ungu dengan kode url berikut :

  http://lh3.ggpht.com/_7Y9pl24WpQY/S1p3AoU68lI/AAAAAAAACwE/uHCqxDl84l8/header_thumb%5B2%5D.jpg?imgmax=800

• Sehingga hasilnya menjadi seperti dibawah ini :

  body{
  width:980px; background:#fff url(http://lh3.ggpht.com/_7Y9pl24WpQY/S1p3AoU68lI/AAAAAAAACwE/uHCqxDl84l8/header_thumb%5B2%5D.jpg?imgmax=800) repeat-x; margin:0 auto;   padding:0;   font:11px verdana, arial, trebuchet ms; text-align:left;   color:#333}

• Jangan lupa Simpan Template.

Sekali lagi saya minta maaf buat sobat yang sudah menggunakan soft template. Have a nice day !

Mengganti Background Dengan Gradient Image

Salah satu cara agar pengunjung betah berlama-lama di blog kita adalah dengan menggunakan template yang menarik. Selain kecepatan loading blog juga tentunya sangat berpengaruh pada pengunjung blog, template yang menarik tentu akan sedikit menambah bumbu dalam blog kita.


Untuk membuat template yang menarik, salah satunya dengan konsep pewarnaan judul postingan, background postingan atau judul sidebar dengan background template yang pas.

Untuk membuat background blog, kita bisa menggunakan fasilitas dari http://tools.dynamicdrive.com/gradient. Dengan tools tersebut, kita bisa membuat gambar gradasi, contoh gambar gradasi bisa sobat lihat dibawah ini :



Baiklah, daripada pusing kita langsung praktek aja ya !

• Langsung saja tuju web layanan gradient image maker, masuk ke gradient dari dynamicdrive.
• Pada halaman depan sobat, pilih model gradasi yang akan sobat gunakan
  
• Pilih saja model yang pertama, kemudian isi gradient width dengan 10, dan gradient height dengan 800 ( angka ini tidak mutlak harus 10 dan 800, sesuaikan dengan keinginan sobat saja ).
  
  Pilih warna untuk top color dan bottom color, ingat warna yang bottom color karena akan kita letakkan di template kita nantinya.
• Jika sudah, sekarang klik Get full size image, dan sobat simpan gambar yang sudah jadi di komputer.
• Upload gambar tersebut ke hosting yang akan sobat gunakan, bisa menggunakan photobucket, google sites atau jika ingin yang lebih mudahnya sobat bisa membuat blog baru dengan blogspot, khusus untuk menyimpan gambar, seperti yang selama ini saya lakukan.
• Coba klik Kanan pada gambar diatas, lalu pilih properties. Perhatikan Image Properties, pada location ada url yang kemudian akan kita gunakan pada background blog nantinya.
  

Langkah selanjutnya adalah proses mengganti background template-nya :

• Login ke blogger dengan ID sobat
• Klik tab Edit HTML
• Cari kode seperti berikut (biasanya terletak di bagian atas) :
• body { width:980px; background:#FFFFFF; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
• Kemudian ganti sehingga menjadi seperti berikut :
• body { width:980px; background:#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x; font:12px verdana,arial,sans-serif; text-align:left; color:#000; margin:0 auto; padding:0 }
• Kemudian Simpan Template.

Eleman apa yang harus di tambahkan ?

#000000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/S0C5snca_2I/AAAAAAAACoo/9eZ3Rd5PIOE/gradasi%203_thumb%5B4%5D.jpg?imgmax=800) repeat-x;

Kode yang berwarna merah sobat ganti dengan url tempat sobat mengupload gambar gradasi-nya.

Mengapa saya mengganti warna putih (#FFFFFF) dengan warna hitam (#000000)? karena pada saat membuat gambar gradasi, saya menggunakan bottom color dengan warna hitam (#000000).

Baiklah, itu saja kira-kira tutorial blog kali ini, semoga berhasil mengganti background template dengan gambar gradasi-nya.  

Free Blogger Template Generator

Buat sobat blogger yang tidak mengerti bahasa pemrograman seperti HTML, XML dan CSS, jangan berkecil hati dan malu karena tidak bisa membuat template sendiri. Sekarang sudah banyak tersedia template generator untuk blogger, dan penggunaanya pun tidak sulit. Sobat hanya butuh sedikit imaginasi dan kreatifitas yang tinggi. Jika sobat tertarik, saya punya beberapa list situs penyedia layanan blogger template generator dibawah ini.

 

1. Page Column Layout 
   Tersedia dari 1 sampai 5 kolom, tampilan menarik dan mudah dalam penggunaannya. Pengaturan dari lebar template sampai bagian warna pun cukup simple, namun tidak banyak variasi yang terdapat dari tools ini.

    

   

    

2. Pimp My Profile
   Blogger template generator yang satu ini sangat bagus dalam tampilan layout-nya sehingga memudahkan kita dalam membuat template. Dengan tab view sederhana, sobat bisa dengan mudah mengatur mulai dari backgroud sampai graphics. Sebelum menggunakan layanan ini, pastikan sobat menggunakan browser IE 6 atau diatasnya, Firefox dan Opera.

    

   

    

3. PsycHo � psychogenesis
   Layanan ini cukup lengkap, sobat bisa merancang template secara keseluruhan. Tersedia sampai 3 kolom dan penggunaanya juga sangat mudah.

    

   

    

4. Trix Blogspot Template Generator
   Tampilan dari trix blogspot template generator ini kurang bagus, namun fungsional dari tools ini sangat lengkap dan bagus. Tinggal kreatifitas yang tinggi, sobat bisa menghasilkan template yang menarik.

    

   

    

Selamat berkreatifitas !

Kompress CSS Percepat Loading Blog

Ada beberapa hal yang mempengaruhi loading suatu blog, selain pemakaian kode HTML dan Javascript yang berlebihan yang tentunya akan membuat loading blog jadi lambat, pengaturan atau pemakaian kode css yang salah juga berpengaruh terhadap loading blog.

 

Jika sobat banyak menggunakan kode HTML atau javascript dan diletakkan di sidebar sebelah kiri, itu akan membuat loading blog terasa sangat berat, kenapa ?

karena browser selalu membaca blog berurutan dari kiri atas sampai kiri bawah, kemudian akan berlanjut ke bagian kanan atas sampai kanan bawah, dan bagian footer atau bawah blog tentunya yang akan kebagian terbaca paling akhir.

 

Jadi saya sarankan gunakanlah template dengan kolom postingan yang terletak di sebelah kiri, atau jika sobat menggunakan sidebar di sebelah kiri, usahakan jangan terlalu banyak memakai kode HTML atau Javascript di sebelah kiri karena akan membuat loading blog jadi sangat berat.

 

Berlanjut pada topik utama kita, kompress kode css ini bisa kita lakukan secara manual maupun dengan menggunakan tools kompress css yang sekarang sudah banyak tersedia di internet. Saya akan berikan contoh kasusnya, perhatikan kode css berikut ini :

 

a:link {
color:#006699;  text-decoration:none;
}

a:visited {
color:#006699;  text-decoration:none;
}

a:hover {
color:#006699;  text-decoration:underline;
}

#main .post-body a:link {
color:#006699;  text-decoration:underline;
}

#main .post-body a:visited {
color:#006699;  text-decoration:underline;
}

#main .post-body a:hover {
color:#006699;  text-decoration:none;
}

kode css diatas adalah kode standard yang biasa sobat jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini :

 

a:link,a:visited,#main .post-body a:hover {
color:#006699;
text-decoration:none
}

a:hover,#main .post-body a:link,#main .post-body a:visited {
color:#006699;
text-decoration:underline
}

apa yang membedakan kedua bagian diatas ? jika sobat cermat melihat seluruh kode css yang paling atas (sebelum saya kompress) bahwa semua bagian dalam kurung {....} yang membedakan hanya dua bagian yaitu pada penulisan text-decoration:none dan text-decoration:underline. Pemakaian spasi juga sangat berpengaruh dalam penulisan css, jika saya rapatkan maka hasilnya menjadi seperti berikut ini :

 

a:link,a:visited,#main .post-body a:hover{color:#006699;text-decoration:none}
a:hover,#main .post-body a:link,#main .post-body a:visited{color:#006699;text-decoration:underline}

 

Untuk mengkompress kode css pada template, sobat tidak perlu susah payah mengkompress-nya secara manual, karena sekarang sudah banyak tools gratisan yang menyediakan fasilitas kompress css, salah satu yang biasa saya gunakan adalah  situs http://www.csscompressor.com

 

1. Untuk mengkompress css-nya silahkan kunjungi situs tersebut.

    

2. Kemudian pada halaman depan, ada pilihan jenis kompress dari yang low, standard, high sampai highest, kemudian masukkan kode css milik sobat kedalam kotak kosong yang tersedia lalu klik compress.

    

   

    

3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut

    

   

    

4. Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi.

Ada banyak tools lainnya yang bisa sobat coba, sobat bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog sobat akan menjadi lebih enteng..

Blue Template

Setelah mengotak - atik template beberapa hari ini, akhirnya rampung juga template sederhana ala blog go blog. Template yang saya beri nama blue ini terlihat sangat simple namun memiliki warna yang cukup menarik, tidak terlalu terang dan juga tidak gelap. Template berukuran 980 px ini, mempunyai 3 kolom termasuk kolom postingan, 2 kolom di sebelah kanan, 3 kolom di bawah, wah jadi 5 dong..terserah deh tergantung sudut pandangnya. Buat sobat yang berminat memakai template ini, saya berikan buat sobat gratis.




~~ Spesifikasi template :

1. Type : Blogger baru (XML).
   
   
2. Type kolom : 3 kolom
   
   
3. Default warna : Biru, Putih
   
   
4. Lebar template : 980 px
   
   
5. Sudah terdapat Read More, bagi yang belum mengetahui apa itu Read More, silahkan di baca dulu postingan saya tentang cara membuat read more.

~~ Syarat untuk menggunakan template ini :

1. Dilarang menjual template ini untuk keperluan apapun.
   
   
2. Tidak boleh merubah sebagian atau keseluruhan template.
   
   
3. Tidak boleh menghapus kredit yang menuju ke blog saya yang terdapat di halaman footer .

Mudah - mudahan sobat bisa mengerti. Jika tertarik untuk menggunakan template ini, silahkan download template-nya di bawah ini :


Good luck..!!