Mengubah Layout / Tampilan Default Blogspot (bagian II)

Wah akhirnya layout yang saya inginkan sudah hampir selesai meskipun masih ada beberapa kekurangan dan masih ada juga yang berantakan.Artikel ini sengaja saya kasih judul “Mengubah Layout / Tampilan Default Blogspot (bagian II)” karena memang berkaitan dengan proses editing terhadap layout default yang disediakan oleh blogspot dan masih berhubungan dengan artikel yang sebelumnya yaitu “Mengubah Layout / Tampilan Default Blogspot“.Layout yang diinginkan??? Ya!, layout yang saya inginkan adalah layout simple tapi bisa juga menyuguhkan kelengkapan isi site / blog. Selain itu, layout-nya juga harus interaktif dan menarik sehingga pengunjung juga tidak bosan untuk datang lagi yang tentunya untuk membaca artikel yang ada. Dan satu hal utama yang perlu di perhatikan adalah performance dalam hal ini kecepatan akses terhadap site / blog sehingga calon pengunjung tidak merasa jenuh menunggu loading selesai. O ya satu hal lagi yang perlu digaris-bawahi yaitu SEO (Search Engine Optimization) dimana hal ini menyangkut trik penempatan script / kode per-bagian layout terutama bagian content dari suatu site / blog agar bisa bersaing dengan site lain untuk mendapatkan pagerank atau ranking terbaik dari suatu mesin pencari ( Search Engine ).Saya akan berusaha untuk menjelaskan bagaimana caranya untuk mendapatkan atau mengubah layout / template default dari blogspot menjadi layout seperti pada versi 2 ini?Sekarang kita coba bahas satu persatu dari tahapan-tahapan membuat layout seperti yang kita inginkan (misal seperti layout versi 2).

1. Yang pertama adalah menentukan template / layout yang akan kita gunakan. Pada tahapan ini, dalam pemilihan template / layout hal utama yang paling berperan adalah dari sekian banyak template / layout yang disediakan template / layout manakah yang paling mendekati dengan layout yang kita inginkan. Misalnya kita menginginkan layout dengan 2 jumlah kolom yang terdapat pada bagian content dimana pada bagian content tersebut bagian sidebar terdapat pada sebelah kiri dan bagian main-content terdapat pada sebelah kanan. Berkaitan dengan hal tersebut kita bisa menggunakan template Sand Dollar yang dibuat oleh Jason Sutter. Tetapi jika dalam pemilihan template ini kita mempertimbangkan unsur SEO kita bisa menggunakan template yang bagian main-contentnya terdapat pada sebelah kiri hal ini tentu bertentangan dengan layout yang kita inginkan tapi saya mohon jangan protes dulu karena hal tersebut akan dijelaskan pada tahapan selanjutnya. Pada versi ini digunakan template Thisaway yang dibuat oleh Dan Rubin.
2. Yang kedua adalah merubah penempatan main-content dan sidebar sesuai dengan yang kita inginkan. Hal ini dilakukan jika template yang dipilih bertentangan dengan layout yang dinginkan. Untuk merubah penempatan main-content dan sidebar kita hanya menukar nilai variabel float yang terdapat pada script / kode CSS pada bagian sidebar dan main-content. Jika kita menginginkan bagian sidebar ada di sebelah kiri maka ubah nilai variabel float menjadi left dan nilai variabel float pada main-content menjadi right.
   Contoh:

   #main-wrapper { … float:right; … }#sidebar-wrapper { … float:left; … }

3. Ketiga karena kita menginginkan layout yang simple dengan memperhitungkan performance ( kecepatan akses ), kita harus mengurangi atau menghilangkan gambar-gambar yang tidak dinginkan. Dalam hal ini, misalnya template yang dipilih banyak memiliki background berupa gambar dan/atau memiliki bingkai / border yang tersusun oleh gambar, hal tersebut sebaiknya diganti dengan menggunakan warna saja. Yang perlu diperhatikan dalam membuat layout adalah semakin banyak penggunaan gambar maka semakin besar tingkat penurunan dari kecepatan akses suatu site / blog tersebut.
4. Keempat karena kita menginginkan layout simple, interaktif, dan menarik ( garis-bawahi: menarik dalam artian keteraturan ) maka item-item ( link, pernak-pernik, dll) yang terdapat pada site / blog tersebut perlu di kelompokkan lagi menjadi bagian-bagian isi / submenu dari menu-menu item. Agar suatu site / blog lebih terlihat interaktif, buatlah list menu yang submenu-nya bisa dihidden / disembunyikan hal ini juga akan membuat site / blog tersebut terlihat lebih simple. Hal ini bisa dilakukan dengan menambahkan script / kode javascript untuk menanganinya. Contoh sederhana yang bisa kita gunakan sebagai berikut :
   

   var item = new Array(4); item[1] = ‘Profile1’; item[2] = ‘HTML4’; item[3] = ‘LinkList1’; item[4] = ‘HTML3’; var kond = new Array(4); kond[1] = ‘none’; kond[2] = ‘none’; kond[3] = ‘none’; kond[4] = ‘none’; var nilai = ‘0’; function hide(nilai){ document.getElementById(item[nilai]).style.display = kond[nilai]; if(kond[nilai]==’none’) { kond[nilai] = ”; }else { kond[nilai] = ‘none’; } }

5. Kelima SEO ( Search Engine Optimization ), karena telah disinggung mengenai SEO dan sudah dijelaskan sedikit pada tahapan sebelumnya maka saya akan menambahkan sedikit beberapa trik-trik dari SEO dalam hal penempatan script. Seperti yang telah diketahui bahwa Search Engine / mesin pencari akan mencari keyword yang dimasukkan pada bagian content, dan selain itu mesin pencari juga memperhitungkan kecepatan dalam pencariannya yang juga akan mempengaruhi posisi ranking suatu site / blog.
   Pada tahapan kedua telah diterapkan satu trik yaitu script / kode main-content ditempatkan sebelum script / kode sidebar meskipun sebenarnya sidebar terletak di sebelah kiri dan main-content terletak di sebelah kanan. Hal ini dilakukan agar Search Engine / mesin pencari membaca bagian main-content terlebih dahulu setelah membaca bagian header yang kemudian dilanjutkan membaca pada bagian sidebar dan footer.

O iya satu hal lagi dan sudah disinggung sekilas di atas yaitu yang sangat berperan dalam peningkatan trafik ke blog / site adalah isi dari artikel-artikel yang dimuat. Pada saat ini tepatnya saat layout versi 2 ini dirilis artikel yang terdapat pada blog ini mulai bulan Juni 2007 masih ada 8 artikel yang sudah dipublikasikan atau 9 artikel dengan artikel ini. Hal ini karena saya sebagai penulis tunggal blog ini ingin menyajikan artikel yang memang benar-benar bermanfaat untuk para pengunjung ataupun para blogger yang lain.

Mohon saran dan kritiknya jika terdapat kesalahan dan kekurangan dari tulisan dalam artikel ini. Semoga bermanfaat!!!