design blogger: Juli 2011

Jumat, 29 Juli 2011

Cara Meningkatkan Kecepatan Loading Blog

Setiap blogger dan webmaster pasti ingin mempunyai blog/website yang cepat ketika loading. Begitu juga dengan Andy yang selalu mencoba untuk memperbaiki kualitas blog termasuk dari sisi kecepatan loading. Tetapi hal ini dapat terhambat jika suatu blog memiliki total ukuran atau size yang besar yang didalamnya mengandung bermacam-macam komponen, baik dari segi template itu sendiri, gambar, banner, flash grafik ataupun widget yang dipasang dalam blog untuk mempercantik blog. Memang ukuran kecepatan loading suatu blog/website tidak hanya tergantung dari komponen-komponen diatas, tetapi juga dari kemampuan dan kecepatan akses internet yang kita gunakan.

Pengaruh di atas dapat membuat kecepatan blog menjadi berkurang atau menjadi lambat ketika orang lain mencoba untuk mengaksesnya. Dengan pengaruh negatif ini, tentunya blog kita akan ditinggalkan oleh blogger lain karena membutuhkan waktu yang lama untuk bisa masuk ke dalam blog, apalagi bagi pengguna internet yang memakai akses dial-up tentu sangat terasa pengaruhnya. Untuk itu Andy coba membuat beberapa cara untuk meringankan dan mempercepat loading blog. Sebagai berikut:

1. Test kecepatan loading blog
Hal pertama yang perlu dilakukan oleh teman-teman yaitu mengecek kecepatan loading blog dalam beberapa website penyedia tool tersebut. Kita bisa menggunakan jasa ini dengan mencarinya di search engine Google atau bisa dengan mengunjungi iwebtool speed test.

2. Menggunakan kompresor GZIP dan Ob_gzhandler
Setelah mengetahui kecepatan loading blog, langkah selanjutnya untuk menambah kecepatan blog yaitu dengan mengkompress HTML size dengan menggunakan kode GZIP dan ob_gzhandler. Cara ini bisa mengurangi ukuran blog hingga 80% dari ukuran sebenarnya ketika blog diakses, karena sistem kerjanya adalah dengan mengkompress data yang masuk ke server provider blog baru kemudian di arahkan ke browser. Teman-teman hanya perlu mengcopy kode dibawah ini ke dalam kode template:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Atau kode dibawah ini

<?php
ob_start("ob_gzhandler");
?>

Kemudian paste/letakkan kode tersebut di atas kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1

dipaling atas template blog dan di save.

3. Convert/kompress ukuran gambar
Gambar yang di upload dalam blog juga bisa mempengaruhi lama tidaknya loading suatu blog, karena gambar apalagi yang ukurannya besar akan memakan bandwith yang cukup besar, sehingga untuk menampilkannya dibutuhkan beberapa waktu. Untuk itu sebelum upload gambar ( atau jika sudah diupload juga tidak masalah) ke dalam blog, kita bisa mengkompress atau convert ukuran file tersebut ke ukuran yang lebih kecil. Teman-teman bisa menggunakan jasa image optimizer secara gratis untuk merubah ukuran file tanpa mengurangi kualitas gambar tersebut. Setelah mengupload gambar ke dalam situs ini, kita bisa memilih jenis kompresi dalam bentuk JPEG, GIF dan PNG. Setelah itu tool image optimizer ini akan menampilkan hasil gambar dari kualitas gambar 90% sampai kualitas gambar paling rendah yaitu 10%.

4. Gunakan CSS compressor
Untuk lebih memaksimalkannya kita juga bisa mengkompress kode CSS dalam template blog dengan cara manual atau dengan bantuan online tool. Cara ini bertujuan untuk merampingkan ukuran kode CSS dalam blog dengan menghilangkan kode yang tidak perlu dan memadatkannya (contohnya: menghilangkan jarak spasi yang tidak diperlukan dan menghapus komentar). Untuk melakukannya teman-teman dapat mengcopy kode CSS dalam template blog kemudian kunjungi situs CSS drive compressor. Ada 3 pilihan jenis kompresi yaitu:

light
normal
super compact.

Sebaiknya pilih yang normal saja untuk hasil yang relevan. Sedangkan untuk komentar juga ada 3 pilihan:

don’t strip any comment
strip all comment
strip comment at least (...) characters long (not counting line breaks within comment)

Teman-teman dapat memilih apakah komentar tidak perlu dihapus, dihapus semua atau dihapus sebagian (menghapus komentar yang memiliki panjang beberapa karakter sesuai keinginan masing-masing). Jika ingin menggunakan custom setting sobat juga bisa memilih sendiri jenis kompresi yang diinginkan dengan merubahnya ke “advanced mode”. Layanan ini dapat mengkompress ukuran CSS antara 10%-20%.

5. Javascript compressor
Jika blog masih terasa berat, maka langkah selanjutnya adalah dengan mengkompress kode widget (javascript) dalam blog. Caranya mirip dengan CSS compressor, yaitu dengan memadatkan kode javascript yang panjang sehingga lebih ramping tanpa mengurangi atau merubah fungsi widget tersebut. Untuk menggunakannya bisa mengunjungi situs JS minifier dan memilih 3 tingkatan kompresi yaitu, minimal, conservative dan aggressive. Andy sendiri bisa mengkompress 5%-10% untuk masing-masing widget yang ada dalam blog. Tapi kalau untuk kode iklan sebaiknya jangan dikompress karena nanti bisa-bisa menimbulkan masalah.

6. Software HTML Compressor
Untuk alternatif lain, sobat bisa menggunakan software freeware “absolute html compressor” untuk mengkompress kode HTML baik secara default setting atau custom setting tanpa memerlukan koneksi internet. Software ini memiliki kemampuan yang sama dengan online tool CSS compressor dan javascript compressor. HTML compressor dapat didownload secara gratis di alentum.com

Setelah menggunakan cara-cara diatas, Andy's Blog memiliki ukuran yang lebih kecil dibandingkan dengan sebelumnya, seperti statistik gambar berikut ini:

Dan ketika Andy mencoba mengetesnya sendiri memang ada perubahan yang cukup terasa ketika loading blog, terutama untuk posisi munculnya psotingan blog yang cukup cepat, sehingga teman-teman bisa segera membaca informasi yang disajikan dalam artikel.

Jadi, dengan cara ini mudah-mudahan kecepatan loading blog teman-teman bisa lebih dimaksimalkan lagi khususnya bagi Andy pribadi. Sehingga blog menjadi ringan dan pengunjung/blogger lain bisa betah mengunjungi blog dan berpengaruh pada tingkat pageviews artikel dan juga meningkatnya trafik. Terima kasih

Membuat teks melayang mengikuti kursor

Silahkan teman-teman membaca cara membuat teks yang mengikuti kursor pada blog, semoga bermanfaat bagi teman-teman. Terima kasih

Untuk kesempatan kali ini saya mau berbagi sama teman-teman mengenai cara membuat teks melayang yang mengikuti kursor. Hal ini saya dapat ketika lagi jalan-jalan ke blog teman-teman sambil nambah ilmu. Dan ini merupakan permintaan dari salah satu teman blog saya, jadi saya harus menghargai dan berbagi ke yang lain untuk ilmu yang sudah didapat.
Dibawah ini adalah tahap untuk membuatnya:

Untuk yang pertama kita bisa masuk ke account blog
Lalu ke menu (tata letak)
Pilih (tambah gadget)
Kemudian tambah (html/javascript)
Dan teman-teman bisa copy kode dibawah ini:

<script>//mouse

//Circling text trail- Tim Tilton

//Website: http://www.tempermedia.com/

//Visit http://www.dynamicdrive.com for this script and more

function cursor_text_circle(){

// your message here

var msg='selamat datang'.split('').reverse().join('');

var font='Verdana,Arial';

var size=3; // up to seven

var color='##0000FF';

// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 for just plain rotation w/out drag

var speed=.3;

// This is the rotation speed, set it negative if you want

// it to spin clockwise

var rotation=-.2;

// Alter no variables past here!, unless you are good

//---------------------------------------------------

var ns=(document.layers);

var ie=(document.all);

var dom=document.getElementById;

msg=msg.split('');

var n=msg.length;

var a=size*13;

var currStep=0;

var ymouse=0;

var xmouse=0;

var props="<font face="+font+" color="+color+" size="+size+">";

if (ie)

window.pageYOffset=0

// writes the message

if (ns){

for (i=0; i < n; i++)

document.write('<layer  left="0" top="0" width="+a+" name="nsmsg'+i+'"  height="+a+"><center>'+props+msg[i]+'</font></center></layer>');

}

else if (ie||dom){

document.write('<div  id="outer"  style="position:absolute;top:0px;left:0px;z-index:30000;"><div  style="position:relative">');

for (i=0; i < n; i++)

document.write('<div  id="iemsg'+(dom&&!ie? i:'')+'"  style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');

document.write('</div></div>');

}

(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){

ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position

xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position

}

if (ns||ie||dom)

(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;

var y=new Array();

var x=new Array();

var Y=new Array();

var X=new Array();

for (i=0; i < n; i++){

y[i]=0;

x[i]=0;

Y[i]=0;

X[i]=0;

}

var iecompattest=function(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;

}

var makecircle=function(){ // rotation properties

if (ie) outer.style.top=iecompattest().scrollTop+'px';

currStep-=rotation;

for (i=0; i < n; i++){ // makes the circle

var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;

d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');

d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval

}

}

var drag=function(){ // makes the resistance

y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);

x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);

for (var i=1; i < n; i++){

y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);

x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}

makecircle();

// not rotation speed, leave at zero

setTimeout(function(){drag();},10);

}

if (ns||ie||dom)

if ( typeof window.addEventListener != "undefined" )

window.addEventListener( "load", drag, false );

else if ( typeof window.attachEvent != "undefined" )

window.attachEvent( "onload", drag );

else {

if ( window.onload != null ) {

var oldOnload = window.onload;

window.onload = function ( e ) {

oldOnload( e );

drag();

};

}

else

window.onload = drag;

}

}

cursor_text_circle(); </script>

Untuk teks yang berwarna biru (selamat datang) bisa diganti sesuai yang diinginkan teman-teman dan kode (#0000FF) adalah warna pada teks juga bisa diganti menjadi warna yang berbeda sesuai yang diinginkan juga. Untuk warna yang lain bisa mengunjungi blog teman saya disini

Selamat mencoba ya, terus tambah ilmunya dan jangan lupa dibagikan ke teman-teman yang lain.

Kamis, 28 Juli 2011

photoshop design

Bagaimana membuat photo dengan effect seperti film matrix.

Coba langkah mudah ini:
1. Siapkan foto yang akan dibuat efek matrix atau kalau anda ingin mengambil koleksi dari foto saya bisa diambil disini.
2.
Buat photo menjadi hijau dengan memilih Menu Layer > Adjusment Layer > Hue Saturation > New Layer > OK.