DeddyCamp.com |
| Membuat Animasi Status Loading Blog Posted: 15 Jul 2010 10:10 PM PDT Tutorial kita kali akan membahas cara membuat status loading, maksudnya adalah pada waktu anda membuka halaman blog milik anda, nantinya akan muncul sebuah image / gambar animasi loading yang atraktif sebelum blog tampil keseluruhan. Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template anda sebelum mengubah kode HTML-nya. Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini. Baiklah, lanjut ya. Untuk melihat contohnya Klik disini Untuk pilihan animasi status loading-nya bisa anda lihat di Ajax Load. Silahkan upload kode Javascript berikut ini ke tempat penyimpanan online. Pastikan file yang di upload berakhiran .js var ld=(document.all);var ns4=document.layers; Cara upload file javascript-nya, copy paste semua kode diatas kedalam notepad, kemudian simpan file tersebut dengan extension atau akhiran .js dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites. Kemudian ikuti langkah berikut ini : 1. Silahkan login dulu ke Blogger. 2. Kemudian tuju halaman Edit HTML. 3. Klik Expand Template Widgets. 4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini : <body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/> 5. Simpan Template. Keterangan : Kode yang berwarna merah adalah url dimana anda menyimpan gambar animasi status loading-nya. Kode yang berwarna Biru adalah url tempat anda mengupload kode javascript animasi status loading-nya. Jika anda malas untuk menyimpan gambar animasi status loading, saya punya beberapa gambar yang bisa anda gunakan dibawah ini :               Okey Itu beberapa Gambarnya, cara untuk mengcopy kode URL gambanya, arahkan korsor pada salah satu gambar, kemudian klik Kanan Pilih Copy Image Location. Selamat Berkreasi  |
| Kompress CSS Percepat Loading Blog Posted: 15 Jul 2010 09:24 PM PDT 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 anda 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 anda 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 { kode css diatas adalah kode standard yang biasa anda jumpai di HTML template, jika saya kompress secara manual maka hasilnya akan seperti dibawah ini : a:link,a:visited,#main .post-body a:hover { Apa yang membedakan kedua bagian diatas ? jika anda 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} Untuk mengkompress kode css pada template, anda 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 anda kedalam kotak kosong yang tersedia lalu klik compress.  3. Maka akan terlihat hasil kompress dibawahnya, seperti pada gambar berikut.  Kemudian klik Select All dan copy semua kode yang sudah di kompress tadi. Ada banyak tools lainnya yang bisa anda coba, anda bisa cari di search engine..oke sob, selamat mengkompress ria, semoga dengan di kompress-nya kode css blog anda akan menjadi lebih enteng.  Semoga Bermanfaat  |
| You are subscribed to email updates from Tutorial Blog | Business | All in One To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 komentar:
Posting Komentar
Terima kasih atas komentar anda