Blog Anda Lagging? Lambat Loading?

Dalam banyak-banyak tutorial, turorial ni lah paling menarik. Kenapa tidak, masalah ini adalah satu masalah yang banyak menimpa bloggers di mana ada blog yang loading sampai 15 saat pun tak habis lagi. Saya kalau jumpa blog macam ni, tentu saya skip, malas nak tunggu. Kalau dah pakai 1Mbps pun ambik lebih dari 15 saat, tak tahulah kalau yang guna 512kbps atau 384kbps. Baik anda jadikan blog anda sebagai penyimpan post sahaja, lepas tu untuk orang baca, anda letakkan post anda kat blog-blog lain, post kat buletin Friendster, Facebook etc. Semata-mata nak blog kelihatan menarik dan penuh dengan isi, janganlah sampai nak bukak blog tu macam tunggu buah durian jatuh.

Adakah blog anda terdiri daripada blog yang saya katakan di atas, lagging, lambat, dan sebagainya. Kalau anda guna internet connection power, sekali sekala cuba guna connection yg lambat untuk tengok samada ada blog anda ni dah over loading atau tidak. Kalau blog anda terletak dalam ketegori itu, saya ada satu-satunya tips untuk meringankan semula blog anda. Kalau anda ikuti tips ini betul-betul, masa loading tak sampai satu saat pun. Bila dah macam tu, barulah semangat sikit pelawat nak datang berziarah kat blog anda tu.

Sekarang, untuk tips nya, sebelum tu, tarik nafas panjang-panjang dulu untuk lebih konsentrasi dan pengamatan. Apa yang anda perlu buat senang je. Untuk membuat masa loading blog anda sekejap atau ringan, mula-mula pergilah ke bahagian Layout - Page elements. Dah? Kat situ anda boleh lihat banyak gadget-gadget yang dipamerkan di blog anda. Apa yang perlu anda buat - BUANG semua gadget-gadget di situ kerana gadget-gadget itulah yang membuat blog anda berat. Kalau dah buang, dan post-post anda cuma terdiri dari teks, pasti blog anda jadi ringan, seolah-olah blog itu baru dibuat. Tapi untuk lebih keberkesanan, padamkan semua post-post anda juga dan blog anda gerenti akan berada di tangga teratas untuk blog terpantas loading. Pendek kata, cara ni lebih kurang memformat blog anda dan memulakan blog anda dari baru. Anda boleh buat cara ni, jika anda TAK sayangkan blog tu. Namun, sebenarnya saya bergurau jer, takkanlah nak padam blog yang dah berbulan atau bertahun dipelihara, kan?

Memang ada cara nak buat blog loading laju, tetapi, cara ini hanya berkesan dengan 3 teknik:

1. Suruh pelawat anda gunakan connection yang lebih laju.

2. Suruh pelawat anda upgrade PC atau laptop, atau

3. Yg paling berkesan - kurangkan 'non-text content' dalam blog anda.

KURANGKAN 'NONTEXT CONTENT'
Apa yang saya maksudkan dengan 'nontext' ni adalah content-content yang berupa video, gambar, program atau widget-widget yang anda letakkan untuk membuat blog anda nampak penuh atau lebih menarik.

Untuk video, kalau boleh jangan letakkan lebih daripada 3 dalam satu page.

Gambar pula, jangan letakkan yang besar-besar, kalau pelawat nak lihat yang besar, biarlah gambar tu 'clickable' untuk melihatnya dengan saiz sebenar.

Untuk widget pula, pastikan anda tak letakkan terlalu banyak, kerana widget ni boleh ambik download time yang lebih banyak dari keseluruhan content anda. Contoh-contoh widget yang berat adalah seperti Feedjit, Shout @ Chat box, program-program yang menggunakan javascript seperti advertisement, music player, visitor counter, dan lain-lain widget seperti 'Mybloglog Recent Visitor', calendar atau jam. Dalam banyak-banyak widget yang pernah saya guna - Feedjit, chat box, dan Mybloglog merupakan widget terberat. Kalau anda nak lajukan loading blog anda, jangan gunakan widget-widget ini, namun kalau nak guna jugak, letakkan satu sahaja dan jangan digunakan secara berlebih-lebihan. Memanglah blog akan nampak crowded dan menarik, namun kalau menyakitkan hati pelawat untuk aper.

Satu lagi yang anda boleh buat adalah dengan mengurangkan post yang ditunjukkan pada main page. Kalau anda tak pernah ubah, biasanya main page akan mempamerkan 7 post, mungkin anda boleh kurangkan kepada 5 atau 3. Untuk mengurangkan bilangan post yang ditunjukkan di main page, anda boleh melakukannya di 'Settings' - 'Formatting'. Kalau anda jenis yang suka buat post panjang2, ini amat digalakkan supaya main page anda tak terlalu panjang.

Maka dengan ini, sekian sahaja tutorial kali ini, dan untuk kesimpulan, anda boleh mempercepatkan masa loading blog dengan:

1. Membuang semua widget atau post, atau

2. Mengurangkan 'nontext content' berupa gambar, video atau program, atau

3. Membuang beberapa widget di blog anda yang terbukti melambatkan, atau

4. Mengurangkan bilangan post yang dipamerkan di Muka Utama.

Cara Meletakkan Gambar Latar

Meletakkan gambar latar adalah suatu kemestian bagi blogger persendirian atau 'personal blog'. Banyak blogger suka meletakkan gambar latar untuk membuat blog kelihatan menarik, menambahkan warna pada blog di samping satu kaedah untuk menunjukkan diri seseorang kepada pembaca. Untuk blogger yang suka penampilan, mereka selalunya meletakkan gambar diri mereka sendiri atau gambar-gambar yang berkaitan dengan hidup mereka. Terdapat juga blogger yang suka meletakkan gambar yang berkaitan dengan blog mereka dan ada juga yang meletakkan gambar latar sekadar untuk membuat blog mereka kelihatan lebih menarik.

Terdapat dua jenis gambar atau imej yang anda boleh letakkan di blog anda; satu adalah gambar statik, dan satu lagi adalah gambar yang dinamik atau yang boleh bergerak-gerak iaitu dalam bentuk 'gif'. Seperti yang anda boleh lihat sekarang ini, saya menggunakan gambar 'gif' di dalam blog ini dimana gambar latar BlogGimana adalah bergerak-gerak. Kod yang akan digunakan untuk kedua jenis gambar ini adalah sama sahaja, yang membezakannya cumalah jenis gambar yang digunakan. Untuk mendapatkan gambar statik(jpeg, jpg, bmp etc) adalah senang kerana boleh diperolehi terus dari kamera, tetapi untuk gambar 'gif' anda perlu membuatnya terlebih dahulu atau mencari gambar sedia ada di internet.

Kod yang diperlukan untuk meletakkan gambar latar adalah seperti berikut:

background-image: url(http://urlgambaranda);

Contoh(untuk gambar latar blog ini) :

background-image: url(http://img239.imageshack.us/img239/8372/
matrixbloggimanaqs0.gif);

Klik di sini untuk melihat imej tersebut.

Anda boleh memilih untuk meletakkan gambar di beberapa lokasi blog anda(sama seperti tutorial meletakkan warna latar). Lokasi-lokasi tersebut adalah keseluruhan blog, 'header', 'posting', 'sidebar' dan 'footer' setiap lokasi ini boleh diletakkan gambar yang berlainan. Cara-caranya adalah dengan menambah kod di atas beserta url imej di bahagian-bahagian blog anda dalam 'edit html'. Contohnya adalah seperti berikut:

Keseluruhan blog

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  background-image: url(http://urlgambar);
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

Header

/* Header
------------------------------------------------
 */

#header-wrapper {
  background-image: url(http://urlgambar);
  width:900px;
  margin:0 auto 10px;
  background-repeat:no-repeat;
  background-position:center center;
  background-attachment:fixed;
  }

Gambar untuk header juga boleh di ubah pada bahagian 'Layout' - 'Page Elements'.

Posting/ Main

#main-wrapper {
  background-image: url(http://urlgambar);
  width: 410px;
  float: $startSide;
  word-wrap: break-word; 
  overflow: hidden;    
  }

Sidebar

#sidebar-wrapper {
  background-image: url(http://urlgambar);
  width: 220px;
  float: $endSide;
  word-wrap: break-word; 
  overflow: hidden;      
}

Footer

/* Footer
----------------------------------------------- */
#footer {
  background-image: url(http://urlgambar);
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Sekiranya anda cuma mahu satu imej dipamerkan(tiada pengulangan) dan berada ditengah-tengah kawasan yang dipilih, tambahkan kod tersebut di bawah kod tadi:

  background-repeat:no-repeat;
  background-position:center center;

Contoh untuk 'Posting/ Main':

#main-wrapper {
  background-image: url(http://urlgambar);   
  background-repeat:no-repeat;
  background-position:center center;
  width: 410px;
  float: $startSide;
  word-wrap: break-word;
  overflow: hidden;    
  }

Tukarkan background-position:center center; kepada


top center; - untuk letak imej di atas dan di tengah2 atau

bottom center; - untuk letak imej di bawah dan di tengah2.

Semoga berhasil, kalau ada pertanyaan, sila tinggalkan dalam petak komen dibawah.

Menukar Warna Latar Blog

Tutorial ini agak menarik kerana ia akan membuat blog anda nampak lebih dinamik atau warna-warni. Blog yang terdiri dari hanya satu warna latar akan membuat ia nampak kusam dan pelawat mudah boring untuk melihat nya. Namun, memasang warna latar adalah lebih diminati oleh pereka blog yang mahu lebih penampilan dan tidak berapa disukai oleh mereka yang mementingkan isi-isi atau mereka yang 'simple'.

Anda boleh menentukan warna pada beberapa bahagian blog, iaitu bahagian keseluruhan blog, 'Header', 'Posting', 'side bar' dan 'footer'. Anda boleh melilih warna yang berlainan untuk setiap bahagian ini.

Kod yang anda perlukan untuk meletakkan warna adalah seperti berikut:

background-color:#123456;

Untuk menukar keseluruhan warna blog, anda boleh membuatnya dari bahagian 'Layout' - 'Font & Colors' - 'Page Background Color' atau anda juga boleh mengubahnya pada bahagian 'Edit Html'. Untuk berbuat demikian, cari kod seperti berikut di bahagian 'Edit Html':

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

dan tukarkan kod background:$bgcolor; dengan kod warna yang di kehendaki seperti berikut:

/* Outer-Wrapper
------------------------------------------------ */
#outer-wrapper {
  background-color:#123456;
  width: 930px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }

Untuk bahagian lain, anda hanya perlu meletakkan kod tadi pada bahagian-bahagiannya iaitu:

Header

#header-wrapper {

  background:#123456;
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Posting @ Main

#main-wrapper {

  background:#123456;
  width: 410px;
  float: $startSide;
  word-wrap: break-word; 
  overflow: hidden;    
  }

Side Bar

#sidebar-wrapper {
  background:#123456;
  width: 220px;
  float: $endSide;
  word-wrap: break-word; 
  overflow: hidden;     
}

Footer

/* Footer
----------------------------------------------- */
#footer {
  background:#123456;
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Ada yang akan fikir pengubahsuaian kod-kod ini susah atau akan merumitkan otak. Namun, tiada orang yang akan pandai jika tidak belajar. Kalau anda masih baru, mungkin anda akan pening kepala, tapi lama-kelamaan anda akan rasa semua ni senang sahaja. Kepada yang masih baru, saya nasihatkan untuk cuba ubah kod-kod ni pada satu blog eksperimen dan bukan blog sebenar anda.

Untuk kod-kod warna, anda boleh rujuk bahagian 'Layout' - 'Font & Colors'.

Semoga berhasil..

Menukar Warna Scroll Bar

Tutorial kali ini akan mengajar anda cara-cara untuk menukar warna 'scroll bar'.
Scroll bar ni, kalau anda tak tahu, adalah benda yang memanjang yang terdapat kat tepi atau bawah browser anda.



Kalau biasa, warna scroll bar explorer adalah biru dan putih seperti gambar di atas. Namun, anda boleh menukarnya jika anda mahu seperti warna scroll bar blog ini(Hanya berkesan untuk pengguna Internet Explorer).

Untuk menukar warna scroll bar anda, pergi ke bahagian edit html dan letakkan kod:

<!--[if IE]>
<style type="text/css">
html { 
scrollbar-arrow-color:#11593C; 
scrollbar-track-color:#E7FFC7; 
scrollbar-face-color:#2D8930; 
scrollbar-highlight-color:#CAF99B; 
scrollbar-3dlight-color:#333333; 
scrollbar-darkshadow-color:#473624; 
scrollbar-shadow-color:#BFB186; 
} 
</style>
<![endif]-->

di bawah seksyen:

<head>

Untuk menukar warna-warna pada scroll bar seperti kemahuan anda, ubahkan kod-kod warna dalam kod di atas(#123456), dan untuk mendapatkan kod-kod warna ini, anda boleh merujuk kod warna yang boleh didapati pada bahagian 'Layout : Font & Colors', atau pada software-sofware yang ada menunjukkan kod warna seperti MS Frontpage, Flash MX dan sebagainya.

Membuat Warna Latar Untuk Teks

Dalam tutorial kali ini, saya ingin berkongsi cara-cara untuk membuat warna latar untuk teks. Dalam English, ia lebih dikenali dengan text background color. Kotak yang saya maksudkan ini serupa juga dengan membuat 'textbox' seperti yang saya tunjukkan dalam tutorial Cara Meletakkan Text Area. Cuma bezanya 'text area' itu mempunyai 'scroll bar' dan lebarnya ditetapkan dalam kod html yang digunakan. Kod yang akan tunjukkan ini pula akan menggunakan keseluruhan lebar kawasan teks(text area).

Contoh untuk warna latar ini terdapat dalam tutorial saya sebelum ini iaitu Membuang Navigation Bar yang kelihatan seperti berikut:



Apa kegunaan warna latar ini??
--> Untuk meng'highlight' sesuatu teks
--> Untuk mempelbagaikan warna dan sebagainya.

Kod yang diperlukan untuk membuat warna latar ini adalah seperti berikut:

<pre style="background:#666666; border: 1px solid #000; 
padding: 10px; margin-right:40px">

Teks anda di sini.

</pre> 

Anda boleh meletakkan kod ini di dalam post, widget side bar atau footer.
Untuk mengubah warna - ubahkan kod warna #666666 dan saiz sempadan - ubahkan 1px. Padding dan margin juga dapat diubah dengan mengubah nombornya.

Selain cara di atas, anda juga boleh menggunakan teknik 'Highlight' yang boleh didapati dalam post saya yang lalu di Kod-kod Html Asas Untuk Blog Anda.

Bantulah BlogGimana dengan memasang link ke BlogGimana dengan kod seperti di "Link Ke Sini". Selain itu, jadilah sahabat BlogGimana dan ikuti blog ini.