Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Saturday, March 6, 2010

CSS Style Generator

By Unknown   Posted at  10:27 AM   Template No comments

image 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. 

 

image

 

 

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

 

image

 

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 !

Friday, February 5, 2010

Analisa Kecepatan Loading Blog

By Unknown   Posted at  11:18 AM   Loading Blog No comments

speed blog Seperti kita ketahui, performa sebuah blog sangat di tentukan oleh beberapa hal, seperti template yang menarik, isi postingan, dan kecepatan loading blog. Template yang cantik dan isi artikel yang menarik akan menjadi sia-sia jika loading blog sangat lambat. Karena saya sendiri pernah mendapat kritik dari sobat blogger di kotak chat box, yang mengatakan bahwa loading blog saya terlalu berat, “coba anda kurangi java script di blog anda”. Sebuah kritik berharga dan sampai sekarang masih saya ingat.

 

Ada beberapa cara untuk mengurangi loading blog kita, seperti yang pernah saya jelaskan sebelumnya, yaitu dengan kompres css dan menyimpan css di hosting. Dengan meminimalisasi css dan javascript, blog yang tadinya lambat akan berubah menjadi lebih cepat. Dan usahakan untuk menghindari pemakaian javascript di bagian header, karena jika situs dari javascript yang sobat gunakan sedang down, maka loading blog sobat akan menjadi sangat lambat. Karena saya sendiri mengalaminya beberapa hari yang lalu, ketika situs dari script kode iklan yang saya gunakan sedang lambat, sehingga loading blog saya ikut-ikutan jadi lambat.

 

Dibawah ini ada beberapa tools yang bisa sobat gunakan untuk mengukur kecepatan blog sobat. Pembacaannya berupa angka dari bagian-bagian blog sobat, mulai dari html, html image, css image, javascript, css, multimedia, dll. Semuanya terbaca dalam satuan kb. Bandingkan semua tools dibawah ini, karena setiap tools mempunyai tingkat akurasi yang berbeda-beda.

 

  1. Website Optimization

     

    image

     

  2. Free Speed Test

     

    image

     

  3. Aptimize

     

    image

     

  4. Tools Pingdom

     

    image

 

Empat situs diatas akan memberikan hasil yang berbeda-beda. Jangan jadikan satu patokan saja, karena itu coba satu-persatu sebagai pembanding. Semoga tips ini berguna dan menjadi bahan pertimbangan buat sobat dalam penggunaan css dan javascript di template sobat.

Friday, January 29, 2010

Membuat Efek Tulisan Dengan CSS Text Shadow

By Unknown   Posted at  10:51 AM   Tutorial Blogspot No comments

gambar 4 Kali ini saya akan coba membahas bagaimana cara membuat text shadow menggunakan CSS3. Dari namanya saja sudah bisa ditebak bahwa text yang dimaksud memiliki bayangan.

 

Sobat bisa membuat tulisan tampak timbul, tenggelam, 3D atau bersinar dengan mengatur besar kecilnya ukuran bayangannya. Semua browser support dengan text shadow ini, kecuali IE. Jadi sebaiknya cek dulu list browser yang support dibawah ini.

 

Safari 3.1 (Mac/Win) yes, but no multiple shadows
Safari 4 (Mac/Win) yes, full support
Opera 9.5 (Mac/Win/Lin) yes, full support
Firefox 2/3 (Mac/Win/Lin) no
Firefox 3.1/3.5 (Mac/Win/Lin) yes, full support
Google Chrome 1 (Win) no
Google Chrome 2 (Win) yes, full support
IE 7/8 (Win) no
Shiira (Mac) yes, but no multiple shadows
Safari on iPhone yes, but no multiple shadows
Opera Mini 4.1 yes, no blur radius

 

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

  • color : #000 adalah warna dasar tulisan
  • background: #fff adalah warna latar
  • 1px 1px 1px #424242 untuk warna bayangannya (shadow)

 

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

 

gambar 1

color: #000;
background: #fff;
text-shadow: 2px 2px 3px #000;

gambar 2

color: #000;
background: #fff;
text-shadow: 2px 2px #000;

gambar 3

color: #000;
background: #fff;
text-shadow: 2px -2px 3px #000;

gambar 4

color: #000;
background: #666;
text-shadow: 0px 1px 1px #fff;

image

color: #666;
background: #000;
text-shadow: 0px 1px 0px #ccc;

image

color: #fff;
background: #666;
text-shadow: 0px 1px 1px #000;

image

color: #fff;
background: #000;
text-shadow: 1px 1px 6px #fff;

image color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
image color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
image

color: #fff;
background: #fff;
text-shadow: 1px 1px 4px #000;

image

color: #000;
background: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

 

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup. Thumbs-up

Thursday, December 17, 2009

Mempercantik Menu Dengan MyCSSMenu

By Unknown   Posted at  7:02 AM   widget No comments

logo Buat sobat yang ingin membuat menu dropdown horizontal atau menu vertikal, mycssmenu.com bisa menjadi alternatif utama. Selain mudah dalam penerapannya, mycssmenu juga mempunyai ragam pilihan yang cantik. Dari pilihan warna, model menu dari kotak persegi sampai model melengkung, serta animasi menarik yang menyertai menu ketika di klik.

 

Hanya dalam waktu kurang lebih 10 menit menu pun sudah siap di tempatkan  di blog. Jika sobat tidak menguasai bahasa pemrograman seperti kode HTML atau CSS yang ribet, jangan kecil hati karena menu yang tersedia di sini sangat mudah, hanya dengan klik “Customize Menu” sobat bisa mengaturnya sesuka hati.  

 

Jika sudah jadi, maka sobat tinggal meletakkan kode script-nya ke dalam template sobat, untuk meletakkan kode-kodenya, sobat bisa baca di postingan saya tentang menu dropdown.

 

Berikut ini contoh gambar dari menu dropdown yang saya buat di mycssmenu.com :

 

purple

 

yellow

 

black

 

Mungkin sobat sudah sering menemukan situs online tools yang seperti ini, namun saya yakin tidak ada yang lebih bagus dari mycssmenu, pastikan sobat mencobanya.

 

Oke deh, selamat mencoba ! Thumbs-up

Back to top ↑
Connect with Us

What they says

© 2013 BLOG SI PALUI. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.