Wednesday, January 28, 2009

Menghilangkan Icon Edit (Icon Palu Obeng)

Posted by dav On 8:32 PM
Artikel ini khusus untuk user Blog*Spot, pada saat mode login (mode manajemen), blogger secara default akan menampilkan iconedit (icon palu dan obeng), hal ini kadang membuat tampilan sangat tidak nyaman atau kurang bagus dilihat, pandangan kita terhalang oleh icon edit. Sebenarnya kita bisa menghilangkan iconedit (icon obeng palu) tersebut hanya dengan kode CSS yang sedikit dan sederhana.

Menghilangkan iconedit (icon palu obeng)

Langkah 1
Loginlah ke blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Jangan lupa checklist "Expand Template Widget"
Langkah 4
Carilah kode dibawah ini:
</head>
Langkah 5
Masukan kode CSS dibawah ini tepat diatas kode pada Langkah 4 :
<style type='text/css'>
<!--
.quickedit {display:none;}
-->
</style>
Langkah 6
Simpanlah Template dan coba Preview Blog anda
Mudah bukan...? Mudah-mudahan berhasil. Happy Blogging :)

Sunday, January 11, 2009

Mempercepat Loading Halaman Utama Blog

Posted by dav On 6:59 PM
Artikel ini lebih diarahkan bagi para pengguna blog gratisan dari Blog*Spot, tetapi tidak menutup kemungkinan bagi para pengguna berbasis non Blog*Spot. Banyak diantara teman blogger yang mengeluh ketika mengunjungi sebuah blog, pembukaan halaman utamanya sangat berat dan banyak juga para pemilik blog yang mengeluh karena blognya sangat berat untuk dibuka. Hal ini terjadi karena kurang pahamnya tentang website diantara keduanya, baik pemilik blog maupun pengunjung blog. Ada beberapa hal yang harus dipahami oleh para pemilik blog dan para pengunjung blog, supaya kegiatan blogging berjalan lancar.
Dibawah ini beberapa hal yang harus diperhatikan para pemilik blog agar loading halaman blognya cepat :

Web Hosting
Hal ini kadang bahkan paling banyak diabaikan oleh para pemilik blog, seakan web hosting dimanapun akan sama saja. Hal ini karena trend atau informasi yang keliru tentang web hosting, disini pengaruh blogger sangat kuat terhadap blogger lainnya. Trend web hosting diantara blogger plus bonus DNS (Domain Name Service) dengan alamat blog yang pendek dan keren menjadi daya tarik para pebisnis web hosting untuk mempengaruhi para blogger. Mereka kadang tidak memperhatikan pelayanan yang harus diberikan kepada klien mereka yaitu para blogger. Pemilik blog juga mesti paham hal ini, satu hal yang mempengaruhi kecepatan loading halaman blog adalah bandwidth yang disediakan oleh web hosting tersebut. Kita harus memperhitungkannya karena blog kita akan diakses dari berbagai belahan dunia dan apakah ada jaminan bahwa bandwidth yang disediakan itu akan tetap stabil. Alih-alih banyak para blogger yang tadinya dengan gagah memperkenal blog baru mereka dan ternyata setelah berjalan beberapa bulan hilang dari belantara dunia maya. Pastikan bahwa web hosting yang dipilih terkenal handal dan stabil serta bagus dalam pelayanan. Jika ragu dengan web hosting, custom domain adalah pilihan yang sangat bijak.

Desain tampilan
Berikut atribut blog yang menguras bandwidth :
  • Gambar yang beresolusi tinggi dan berukuran besar. Hindari pemasangan gambar dengan resolusi tinggi, berukuran besar dan berjumlah banyak karena hal ini akan memperlambat proses loading halaman blog kita. Pasanglah gambar yang dirasa cukup penting, banner dengan ukuran tidak lebih dari 125 x 125 pixel dengan jumlah tidak lebih dari 6 banner, dan hindari menggunakan background halaman berupa gambar. Jika banner yang akan ditampilkan mengharuskan berukuran lebar kita bisa menggunakan random ads banner atau banners rotator sebagai solusinya.
  • Animasi berformat flash. Hindari penggunaan animasi yang berformat flash (swf) pada halaman utama atau header blog, karena hal ini menguras bandwith pengunjung dan memperlambat proses loading main page. Selain berat browser harus terinstall plugin flash, ini membuat browser stress bahkan not responding.
  • Script code buatan kita atau dari pihak ketiga yang berlebihan. Hindari penggunaan script yang berlebihan baik itu buatan kita maupun pihak ketiga, terutama yang berformat javascript dan ajax. Penggunaan script yang berlebihan membuat browser harus membaca data berulang-ulang, mengecek alamat url tertentu bahkan sampai harus menampilkan jendela baru dengan halaman baru. Beberapa pengunjung pada dasarnya kesal terhadap blog-blog yang menggunakan script pancingan untuk menampilkan halaman lain (biasanya iklan popup).
  • Pemilihan warna utama yang tidak tepat. Warna dasar adalah warna yang mampu ditampilkan monitor dengan baik, yaitu Black - White - Red - Green - Blue yang kemudian di dunia elektronika dikenal dengan B/W RGB. Pemilihan warna utama blog sebaiknya menggunakan warna dasar yang dapat ditampilkan monitor dengan baik (Hitam - Putih - Merah - Hijau - Biru), hal ini sangat berpengaruh terhapad browser dalam hal loading dan monitor pengunjung yang rata-rata menggunakan monitor CRT. Warna yang terlalu bervariasi (misal hasil percampuran warna sekunder CMYK) selain membuat mata pengunjung lelah juga sangat menguras resource VGA Card, ini bukan hanya menurunkan kecepatan loading dari sisi jaringan tetapi juga menurunkan kecepatan komputer kita.
  • Urutan loading script yang tidak teratur. Hindari pembuatan script yang berulang dan tidak teratur. Dalam dunia reversing dikenal looping jumping, sama halnya dengan pembuatan software yang urutan script-nya tidak teratur akan membuat software menjadi sangat lambat untuk digunakan, karena karakter script yang looping jumping adalah karakter virus jika didalam komputer. Begitu pula dalam script website, harus berurutan dan hindari pengulangan script. (Sepertinya hal ini hanya para webmaster yang paham)
  • Penggunaan script yang belum diakui atau distandarisasi dan belum terintegrasi dengan browser. Hindari hal ini, bagi para blogger pemula jangan mencoba-coba script yang tidak umum dan belum dikenal. Ini juga sepertinya untuk konsumsi webmaster? Tetapi sampai hari ini bahasa ajax adalah bahasa yang lumayan memberatkan browser, entah kedepannya?
  • Jumlah posting yang ditampilkan banyak dan utuh (tidak terpenggal). Hindari menampilkan posting lebih dari 10, ideal 5 - 7 posting dihalaman utama, dan selalu gunakan pemenggalan artikel/posting (readmore) pada halaman utama.
Demikianlah 2 hal utama yang mempengaruhi loading halaman blog. Untuk para pengunjung blog juga mesti memahami bagaimana agar loading page halaman blog cepat jika kita menemukan blog yang berat. Nantikan di artikel berikutnya.... Happy blogging :)

Friday, January 9, 2009

Diantara teman blogger yang kebetulan membaca artikel ini mungkin dan bahkan dipastikan tahu apa itu banner. Banner itu mewakili gambaran umum terhadap sebuah website, banner biasanya dipasang pada blogger yang mengikuti sebuah program dari website lain, misal affiliasi. Bayangkan jika kita mengikuti program affiliasi sebanyak 20 program dan ke 20 website affiliasi tersebut mengharuskan kita memasang banner itu pada blog kita, maka blog kita akan terkesan sebagai blog "tempat sampah" lebih parahnya om Google akan memasukan blog kita dalam kategori spam blog, bisa-bisa blog kita di pecat dari index search engine tersebut.
Random Ads Banner atau Iklan Banner Acak adalah solusinya, pada prinsipnya Random Ads Banner akan menampilkan keseluruhan banner kita secara bergantian sesuai dengan pergantian halaman dan waktu (timer) yang kita set pada script-nya. Walaupun kurang maksimal untuk menampilkan secara keseluruhan banner tapi ini membuat blog kita tampil rapi tanpa harus membuang banner tersebut. Random Ads Banner ini belum menyertakan cokie didalamnya sehingga kemungkinan banner yang ditampilkan akan tetap dalam jangka waktu tertentu. Kedepan saya akan membuat Random Ads Banner yang menggunakan cokie sehingga dapat dipastikan banner akan tampil bergantian seiring pergantian halaman. (Mohon bersabar pada saat menulis artikel ini saya masih melakukan percobaan)

Membuat Random Ads Banner atau Tampilkan Banner secara acak

Langkah 1
Buatlah/copy paste code JavaScript seperti dibawah ini dengan Notepad :
// Source by http://modification-blog.blogspot.com/
// Created by Hendriono
var jumlah_banner = 3;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % jumlah_banner;
ad +=1;
if (ad==1) {
txt="Upload-Share-Earn";
url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";
alt="ziddu.com";
banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";
width="468";
height="60";
}
if (ad==2) {
txt="where sharing is rewarded!";
url="http://www.shareapic.net/ref.php?owner=arethoze";
alt="shareapic.net";
banner="http://www.shareapic.net/refads/aff3.gif";
width="468";
height="60";
}
if (ad==3) {
txt="Find it at GoTo.com";
url="http://www.goto.com";
alt="goto.com";
banner="http://imageserv.imgis.com/images/Ad13700St1Sz1Sq1_Ban1.gif";
width="468";
height="60";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target=\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
simpanlah kode JavaScript tersebut, misal; banner.js. (pastikan ekstensi file .js dan Save As Type : All Files pada Notepad)
Langkah 2
Upload-lah file banner.js tersebut pada web hosting anda (misal;googlepages), maka akan diperoleh alamat url seperti dibawah ini :
http://dedehendriono.googlepages.com/banner.js
Langkah 3
Login ke Blogger
Langkah 4
"Tambah Gadget - HTML/JavaScript" baru melalui tab "Tata Letak-elemen Halaman" atau baca disini
Langkah 5
Masukan kode dibawah ini untuk memanggil kode pada web hosting kita :
<script src="http://hendriono.googlepages.com/banner.js" type="text/javascript"/></script>
Langkah 6
Simpanlah Gadget baru tersebut

Perhatian !
  1. Tentukan jumlah banner yang akan ditampilkan melalui tag var jumlah_banner = 3; dengan mengubah nilai 3
  2. Tag if (ad==1) adalah urutan banner, ubahlah nilai 1 sesuai dengan urutan banner
  3. Tag txt (misal diatas : txt="Upload-Share-Earn";) adalah keterangan teks yang akan muncul dibawah banner, ubahlah kalimat "Upload-Share-Earn" sebagai gambaran website tujuan banner
  4. Tag url (misal diatas : url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";) adalah alamat website yang akan di tuju ketika user meng-klik banner, ubahlah alamat url didalam tanda kutip sesuai url yang kita maksud
  5. Tag alt (misal diatas : alt="ziddu.com";) adalah keterangan yang tampil mewakili banner saat banner belum secara keseluruhan di load atau gagal diload oleh browser sekaligus keterangan kecil disaat user menggeser panah mouse pada banner tanpa meng-klik. Ubahlah kalimat didalam tanda kutip sesuai keinginan kita atau nama website yang dituju
  6. Tag banner (misal diatas : banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";) adalah alamat tempat penyimpanan gambar, ubahlah alamat url gambar didalam tanda kutip sesuai dengan alamat web hosting penyimpanan banner kita. Jika banner tersebut berasal dari website lain kita cukup menempatkan alamat url gambar dari website tersebut.
  7. Tag width dan height adalah nilai yang menentukan lebar dan panjang banner, ubahlah nilai didalam tanda kutip sesuai ukuran banner.
  8. Masukan code dibawah ini secara berurutan jika kita ingin menambahkan banner lagi dikemudian hari :
    if (ad==1) {
    txt="Upload-Share-Earn";
    url="http://www.ziddu.com/register.php?referralid=(yI-X~O*)";
    alt="ziddu.com";
    banner="http://www.ziddu.com/banners/images/1185859864@ban_468x60.gif";
    width="468";
    height="60";
    }
  9. Ingat ubah nilai 3 pada kode var jumlah_banner = 3; sesuai jumlah banner yang disiapkan
  10. Ingat ubah nilai 1 pada kode if (ad==1) sesuai urutan banner yang baru kita tambahkan
  11. Disarankan memasang banner dengan ukuran sama agar tampilan banner rapi
  12. Jika ingin lihat hasilnya silahkan klik disini
Selamat mencoba semoga berhasil... Happy blogging :)
Animasi dapat membuat postingan kita menjadi hidup dan bervariasi, dan dapat menjelaskan terhadap suatu maksud artikel/posting tanpa kita harus menulis artikel yang panjang dengan diwakili tampilan animasi sederhana. Ada beberapa format animasi yang dapat ditampilkan di browser internet, yaitu GIF dan SWF (ShockWave Flash). Perbedaan dari keduanya adalah pada hasil animasi dan besarnya file. GIF sangat terbatas dalam hal animasi karena format ini cocok digunakan sebagai banner dan besarnya file relatif lebih besar pada ukuran yang lebih besar dari 125 pixel.
Sedangkan animasi SWF sangat bervariasi bahkan kita bisa membuat animasi kompleks yang menyampaikan sebuah ide cerita serta ukuran file yang relatif kecil, kelemahan animasi SWF membutuhkan Flash Plugin yang terintegrasi pada browser untuk bisa menampilkan animasi pada halaman tersebut dan total tidak dapat ditampilkan jika browser tersebut belum terinstall Flash Plugin, sedangkan animasi GIF tidak memerlukan plugin khusus, hampir semua browser tanpa plugin pun dapat menampilkan animasi GIF. Sekarang kita tidak akan membahas bagaimana membuat animasi flash (SWF), untuk belajar hal tersebut silahkan kunjungi disini. Kita belajar menambahkan animasi flash (SWF) kedalam artikel blogger kita supaya terlihat lebih menarik.

Berikut langkah-langkah menambahkan animasi flash (SWF) pada artikel di blogger :
Langkah 1
Upload file animasi flash (swf) pada web hosting anda, misal dihasilkan alamat seperti dibawah ini :
http://dedehendriono.googlepages.com/sepatubush-2.swf
Langkah 2
Login ke Blogger
Langkah 3
Buatlah posting/artikel baru di blog anda
Langkah 4
Masukan kode dibawah ini pada posting/artikel blog anda :
<center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="sepatubush" align="middle" height="300" width="430">
<param name="allowScriptAccess" value="sameDomain">
<param name="movie" value="sepatubush.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
<embed src="http://dedehendriono.googlepages.com/sepatubush.swf" quality="high" bgcolor="#ffffff" name="edittag" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="300" width="430">
</embed>
</object>
</center>
Langkah 5
Terbitkan posting/artikel anda dan lihat hasilnya (contoh klik disini...)

Perhatian !
  1. Tag <center></center> digunakan untuk menempatkan animasi tepat ditengah-tengah artikel, tag ini berlaku untuk objek apa saja.
  2. Jangan pernah hanya memasukan alamat file animasi flash (swf)-nya saja karena browser tidak akan mampu membaca sebelum dilakukan pemanggilan terhadap plugin flash, pemanggilan plugin dilakukan oleh tag type="application/x-shockwave-flash"
  3. Secara sederhana kita bisa hanya menggunakan kode dibawah ini untuk menempatkan animasi flash (swf) pada posting/artikel :
    <embed src="http://dedehendriono.googlepages.com/sepatubush.swf" quality="high" bgcolor="#ffffff" name="edittag" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="300" width="405">
    </embed>
    tetapi hindari hal tersebut, disarankan anda menggunakan tag <object></object>seperti pada langkah 4. Karena jika kita hanya memasukan tag <embed></embed> maka pada beberapa browser yang belum terinstall plugin flash, file animasi flash tidak akan dibaca tanpa pemberitahuan bahwa browser harus sudah terinstall plugin flash. Jika kita menggunakan tag penuh seperti langkah 4 maka jika browser yang belum terinstall membuka halaman animasi tersebut, maka browser memberitahukan kepada user untuk meng-install plugin flash. Ketika user meng-klik permberitahuan tersebut secara otomatis browser akan mengarahkannya kealamat download flash plugin.
  4. Ubahlah height="300" width="430" sesuai dengan ukuran animasi flash atau ubahlah dengan persen, menjadi height="100%" width="100%" hal ini akan lebih mudah, fleksibel dan browser pun akan menyesuaikan ukuran animasi flash tersebut seukuran dengan besarnya halaman browser yang ditampilkan.
  5. Ubahlah alamat url tempat anda menyimpan file animasi flash (contoh diatas : http://dedehendriono.googlepages.com/sepatubush-2.swf)
Selamat mencoba mudah-mudahan berhasil... Happy blogging... :)