Cara mengganti jenis huruf di blog atau website

Dengan kemajuan teknologi web yang sangat pesat, sekarang jenis tulisan atau font untuk web atau blog sudah bisa diganti sesuai keinginan. Kalau sebelumnya jenis tulisan yang ada di blog atau web kita hanya sebatas font atau jenis tulisan standar yang ada diinternet saja, kini sudah bisa lebih variasi sesuai selera pemilik blog atau webnya.

Sebenarnya ada 3 cara untuk merubah tampilan bentuk tulisan yang ada di blog atau web :

1. Cara pertama adalah mengganti semua tulisan dengan objek gambar.
   Hal ini memang cukup gampang dilakukan, tapi dampaknya web atau blog akan tampil lambat karena harus menampilkan gambar yang banyak. Dan juga jika ada perubahan text tulisan berarti anda harus mengubah juga gambarnya.
2. Cara kedua menggunakan font online yang disediakan pihak kedua. Ini memang lumayan efektif, anda tinggal cari font yang sesuai trus mendapatkan script atau kode program, kemudian anda tempel di template blog atau web anda.
3. Cara ketiga menggunakan font yang sudah ubah menjadi script dan diletakkan diserver web/blog sendiri, atau istilah teknisnya menggunakan Cufon Font. Dengan cara ini kita bisa berkreasi mengggunakan jenis font yang didownload di internet atau dari komputer kita sendiri.

Kali ini saya akan bahas dan coba pandu anda menggunakan cara ketiga yaitu menggunakanCufon Font.

Caranya, silahkan ikuti langkah-langkah berikut ini.

1. Mempersiapkan jenis font baru yang akan dipasang. Anda bisa download diinternet atau coba cari font yang ada dikomputer anda.
2. Kemudian kita buka alamat http://cufon.shoqolate.com/generate/
3. Kik kanan pada menu Download, lalu pilih save as link. Simpan ke komputer anda.
   
4. Kemudian masukkan font dari komputer anda yang sudah disiapkan (seperti point 1)
   
5. Lanjutkan mengisi, seperti tanda lingkaran merah (yang lain opsional boleh diabaikan)
   
6. Kemudian contreng seperti gambar dan tekan lets do this, tunggu sampai muncul windows untuk menyimpan hasil font yang dibuat.
   
7. Berarti sekarang kita sudah punya dua buah file, 1 file cufon-yui.js sama file yang barusan kita download.
   
8. Setelah itu kirim dua file tersebut ke server web atau blog anda. Jika anda pengguna blogger (tidak punya server sendiri) terpaksa nebeng ke server teman.
9. Kemudian kita modifikasi template dengan menambahkan beberapa baris berikut dalam bagian <head>..</head>
   Kodenya :
   

   <script type="text/javascript" src="cufon-yui.js"></script>  
   <script type="text/javascript"  src="nama-file-anda.font.js"></script>
   
   <script type="text/javascript">        
       Cufon.replace('h1, h2, h3, p');
   </script>

   Jika alamat file berada dalam sebuah folder, tambahkan nama folder dibagian depan nama file masing-masing misal : js/cufon-yui.js, jika berada diserver lain, ketikkan alamatnya misal : http://www.teman.com/js/cufon-yui.js
   Pada perintah Cufon.replace, tentukan tag html mana saya yang akan dirubah contoh diatas font yang berubah adalah heading 1, heading 2, heading 3 dan paragraf dengan dipisah menggunakan tanda koma.
10. Simpan kembali template anda, dan coba ditampilkan.

Jika ada pertanyaan jangan sungkan untuk kirim komen. Jika ini membantu anda silahkan share ke teman anda.

Lebih detail bisa liat artikel aslinya : http://fearlessflyer.com/2009/10/cufonize-your-pages-how-to-add-cufon-to-your-web-design/

Kalo mau liat contohnya bisa diliat web saya ini (bagian judul kolom kategori dan judul artikel), atau lihat http://spyrestudios.com/cufon-font-replacement/

Semoga bermanfaat.

Read more »

Posted in: Dreamweaver

Tampilan web terbaik

Jika saya ditanya apa tampilan web terbaik? saya pasti akan menjawab panjang lebar tentang tampilan web terbaik karena banyak faktor yang harus kita lihat, dan tentunya pasti ada tampilan web terbaik dan tampilan web terburuk.

Banyak faktor untuk menilai tampilan web yang terbaik :

Membuat tampilan web harus memandang dari sisi desain, baik warna, kombinasi gambar,tulisan sehingga pengunjung betah berlama-lama dan kembali lagi mengunjungi situs anda.

Anda bisa bayangkan jika tampilanya sudah bagus, enak dipandang tapi ternyata untuk menampilkanya perlu beberapa menit menungu, ini otomatis akan mempengaruhi nilai keseluruhan web kita. Hal ini bisa dilakukan dengan optimalisasi tampilan melalui perampingan ukuran gambar, penggunaan kode html dan css yang tepat, penempatan hosting handal, dan bebeberapa cara lainya. Jika mau tau melakukan test kecepatan web anda bisa baca artikelCara mudah melakukan testing kecepatan website atau blog yang sudah saya posting sebelumnya.

Yang saya maksud jelas disini bukan hanya jelas gambarnya, tapi jelas fungsi menunya, dan jelas susunan tampilanya. Misal Kita menaruh gambar mobil sebagai menu dalam website kita, jangan sampai setelah diklik isinya tidak sesuai.

Ini sangat penting untuk membangun identitas website kita, kecuali memang sebuah situs dirancang untuk keperluan umum seperti blog saya ini,  informasinya campuran tampilanya juga campuran. Beda jika kita membangun website kantor/perusahaan yang tentunya harus elegan mengambarkan kegiatan organisasinya.

Ini penting jika situs/web ingin populer di jaringan internet karena harus memudahkan mesin pencari menemukan informasi yang ditampilkan. Caranya agar seo friendly banyak bisa dengan memilih layout, pembuatan hyperlink yang benar, penulisan/memasukkan tag gambar yang benar, mengganti tabel dengan css, dan lainya.

Ini poin terakhir yang harus dinilai untuk mengambil kesimpulan bahwa "tampilan web terbaik" adalah siapa? Percuma saja enak dipandang, cepat, sesuai tema, seo, tapi informasi yang ada kurang bermutu atau kata lain tidak dapat membantu pengunjung yang datang ke situs anda.

Tentunya jika anda ingin memiliki tampilan web terbaik harus memiliki point-poin yang sayajelaskan diatas.

Mungkin situs berikut ini membantu anda mencari jawaban "Tampilan web terbaik" :

100 Websites With Outstanding Artistic Design

Top 10 Best Designed Websites in the World

Read more »

Posted in: Dreamweaver

Mengatur format dalam dreamweaver

tulisan dengan dreamweaver" />

Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisanyang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.

Langkah pertama buatlah tulisan pada area kerja dreamweaver.

Kemudian tulisannya dipilih semua

kemudian lihat pada bagian property bar yang ada pada bagian bawah.

Property bar seperti gambar diatas, digunakan untuk mengatur semua objek yang kita sudah pilih di area kerja.

Di Property bar tersedia banyak pilihan yaitu :

1. Format
   
   Bagian ini digunakan untuk mengatur format tulisan dengan pilihan paragraf (<p>), heading 1 (<h1>..</h1>) s/d heading 6 (<h6>..<h6>) dan preformatted (untuk menampilkan jeniskode)
2. Font dan Size
   
   Font digunakan untuk mengatur jenis tulisan, sedangkan size untuk ukuran tulisannya.
3. Style
   
   Ini digunakan untuk mengatur objek tulisan sesuai dengan css yang sudah dibuat. Pada bagian ini kita juga bisa menyisipkan style eksternal yang ada di file css lain.
4. Warna, posisi tulisan
   
   Bagian ini digunakan untuk mengatur warna tulisan, tebal dan miring tulisan, pengaturan rata kiri, rata tengah, kanan dan rata kiri kanan (justify). Pada bagian kanan bawahnya jga ada fasilitas untuk membuat list item dengan simbol atau angka. Kemudian mengaturtulisan masuk ke kanan dan ke kiri. Dan terakhir dibagian gambar terlihat page propertiesyang digunakan untuk mengatur tampilan halaman secara keseluruhan.

 Sekarang pilih salah satunya, misal kita pilih heading 1 untuk megatur tulisan menjadi heading yang biasanya dibuat untuk judul halaman, kemudian pilih warnanya. Hasilnya :

Anda bisa coba fasilitas yang lain seperti paragraf, heading, pilihan font/bentuk tulisan serta tombol lainya.

Semoga bermanfaat

Read more »

Posted in: Dreamweaver

Template website gratis

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.

Read more »

Posted in: Dreamweaver

Mengatur format tulisan dalam dreamweaver

tulisan dengan dreamweaver" />

Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisanyang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.

Langkah pertama buatlah tulisan pada area kerja dreamweaver.

Kemudian tulisannya dipilih semua

kemudian lihat pada bagian property bar yang ada pada bagian bawah.

Property bar seperti gambar diatas, digunakan untuk mengatur semua objek yang kita sudah pilih di area kerja.

Di Property bar tersedia banyak pilihan yaitu :

1. Format 
   
   Bagian ini digunakan untuk mengatur format tulisan dengan pilihan paragraf (<p>), heading 1 (<h1>..</h1>) s/d heading 6 (<h6>..<h6>) dan preformatted (untuk menampilkan jeniskode)
2. Font dan Size
   
   Font digunakan untuk mengatur jenis tulisan, sedangkan size untuk ukuran tulisannya.
3. Style
   
   Ini digunakan untuk mengatur objek tulisan sesuai dengan css yang sudah dibuat. Pada bagian ini kita juga bisa menyisipkan style eksternal yang ada di file css lain.
4. Warna, posisi tulisan
   
   Bagian ini digunakan untuk mengatur warna tulisan, tebal dan miring tulisan, pengaturan rata kiri, rata tengah, kanan dan rata kiri kanan (justify). Pada bagian kanan bawahnya jga ada fasilitas untuk membuat list item dengan simbol atau angka. Kemudian mengaturtulisan masuk ke kanan dan ke kiri. Dan terakhir dibagian gambar terlihat page propertiesyang digunakan untuk mengatur tampilan halaman secara keseluruhan.

 Sekarang pilih salah satunya, misal kita pilih heading 1 untuk megatur tulisan menjadi heading yang biasanya dibuat untuk judul halaman, kemudian pilih warnanya. Hasilnya :

Anda bisa coba fasilitas yang lain seperti paragraf, heading, pilihan font/bentuk tulisan serta tombol lainya.

Semoga bermanfaat

Read more »

Posted in: Dreamweaver