mencari sebab blog lambat dibuka

Tentunya setiap orang inginkan blog yang loading nya lebih cepat.Loading yang lambat akan menyebabkan pengunjung meningggalkan blog anda ,kerana sifat manusia memang tidak suka menunggu.Untuk artikel kali ini saya ingin berkongsi cara mengenal pasti dimana penyebab loading blog kita menjadi lambat.Blog yang laju juga adalah salah satu faktor yang akan menentukan kedudukan pada ranking google.

Bila kita membuka blog (semasa proses loading) ia akan mengambil data dalaman dan data luaran.Data dalaman adalah seperti yang dimasukkan pada template dan data luaran adalah fail fail seperti imej ,javascript yang dihostkan pada lokasi lain.Untuk data luaran ini akan menyebabkan blog jadi lambat dan kadang kala gagal dibuka sama sekali.

Bagaimana kita nak mempastikan bahagian mana yang lambat jika banyak data luaran yang diambil ?.

Pada masa mula membuka blog anda perhatikan pada status bar sepeti dibawah ini.

Secara logiknya bahagian mana yang lama untuk loading bermakna bahagian tersebut berat dan perlu hapuskan jika ingin loading yang laju.

Untuk melihat lebih terperinci bahagian mana yang lambat boleh gunakan tool yang terdapat pada tools.pingdom.com

 dari geraf yang terdapat seperti pada imej diatas kita boleh melihat bahagian mana yang lambat.

Cara elak duplicate title tags

Duplicate title tags atau pun Duplicate meta descriptions adalah perlu dihalang dari search engine kerana hasil carian yang mempunyai tajuk yang sama membuatkan search engine menjadi keliru.Hal sebegini menyebabkan blog anda menjadi tidak mesra SEO.Adalah menjadi kebiasaan bagi blogger untuk merujuk  link pada komen yang ada pada posting contohnya seperti: http://jendela-id.blogspot.com/2011/01/letak-background-dan-border-pada.html?showComment=1295226996033.Google akan mengesan link ini sebagai halaman yang berasingan pada hal ia adalah anchor link kepada pada posting kita.

Cara untuk mengelakkan hal diatas berlaku.

1.Edit template

Masuk kedesign-edit HTML-expand widget template
Cari kod berikut:

<a expr:href='data:comment.url' title='comment permalink'>
  <data:comment.timestamp/>
</a>

Gantikan dengan kod berikut:

<b:if cond='data:post.commentPagingRequired'>
  <a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
  <a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>

2.Ubah tampilan pada archives

Archive pada blog kebiasaan akan memaparkan senarai link yang panjang tetapi google agak sukar untuk memahaminya dan ia juga menjadi punca duplicate content. Ubahkan widget Archives supaya senarainya menjadi flat list.

cara buat popular posts bergerak

Untuk membuat  popular posts bergerak seperti mana terdapat diblog ini ,kita mestilah memasang widget popular post terlebih dahulu.Jika sudah dipasang terus sahaja ke langkah 4.

Caranya :

1.Masuk ke Design-Page Elements







2.Kemudian pilih add a gadget





3.Ambil popular post







Sesudah widget tersebut dipasang

4.Seterus masuk ke design semula--edit HTML
tandakan pada expand template widget

cari kod seperti dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
   </marquee> </ul>
    <b:include name='quickedit'/></div>
  </div>
</b:includable>
</b:widget>

kod berwarna merah perlu ditambah seperti diatas
kemudian simpan template anda
Kelajuan boleh diubah pada scrollamount='3'.>ubah nilai 1 paling perlahan

Tukar perkataan pada linkwithin

Memasang widget linkwithin blog merupakan suatu perkara yang baik kerana boleh meningkatkan page view kita.Kebiasaannya perkataan seperti pada widget ini adalah you might also like atau anda mungkin juga meminati.Jika ingin menukar kepada perkataan lain berikut adalah caranya:

 Letakkan kod berikut bersama kod linkwithin

<script>linkwithin_text='teks yang anda ingin tampilkan'</script>

Sumber: http://www.linkwithin.com/faq

pasang widget follow by email

Follow  by email adalah satu widget yang baru saja keluarkan oleh blogger.Widget ini adalah bagi membolehkan pengunjung menerima artikel terbaru melalui e-mel .Widget baru ini adalah lebih memudahkan kita untuk memasangnya.

 

Cara memasangnya:

1.Masuk kedesign-page elements

2.Pilih add a gadget

3.Kemudian akan muncul paparan follow by email

4.Pada paparan seterusnya masukkan feed burner url jika telah ada url nya sebelum ini.Jika tiada blogger akan memasukkannya secara automatik. Akaun dengan feedburner juga akan tercipta secara automatik bila anda telah masukkan widget follow by email ini.

5.Kemudian save widget anda.

Letak kotak komen diatas komen

Kebiasaannya kotak komen berada dibawah komen,jadi kita perlu scroll kebawah untuk membuat komen.Artikel kali ini adalah cara untuk mengubah kedudukannya dan letak diatas ruangan komen.Jadi tentu lebih mudah kerana tak perlu scroll lagi dan terus boleh letak komen.

Untuk mengubahnya:

1.masuk kedesign-edit HTML
2.Klik pada expand widgets templates
dan cari kodibawah ini::

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

3.Kemudian delete kod diatas
4.Seterusnya cari kod ini pula:

<a name='comments'/>

sesudah jumpa letakkan kod dibawah ini dibawahnya:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5.kemudian klik save.dan lihat hasilnya.

membuat backup dan menukar template

Backup adalah penting jika kita membuat sesuatu ubahsuai pada template,jika berlaku sesuatu yang tidak diingini kita boleh memasukkan  kembali  template asal.

Cara membuat backup template
1.masuk kedesign--Edit HTML
2. klik pada download full template--klik save untuk menyimpan backup template.

untuk memasukkan semula backup template kita,klik pada browse-pilih lokasi backup disimpan .Kemudian klik upload.

Menukar template
Sebelum menukar template ada beberapa perkara yang perlu diperhatikan semasa memilih template
Antaranya ialah:

1.Loading yang cepat--kalau ada demo cuba dahulu
2.Seo Friendly-boleh juga dimasukkan kemudian kod supaya SEO friendly.kalau yg dah tersedia bagus juga.
3.Sesuai (compatible) dengan browser seperti Mozila,Chrome dan Internet Explorer--Pengunjung
   menggunakan  berbagai browser :)
4.Pilih template sidebar berada disebelah kanan-Baik untuk SEO kerana kandungan artikel lebih dulu
   dindeks  oleh search engine.

Ada banyak laman web yang memyediakan template untuk kita download.Template yang kita download adalah dalam bentuk zip.kita perlukan perisian winzip atau winrar untuk membukanya.fail tersebut perlu diextract/unzip dan fail template adalah dalam format xml.

Cara menukar template:
Sama juga caranya seperti kita masukkan backup tadi.
1.klik pada browse..pilih fail template yang dah extract tadi
2.kemudian klik upload.kemudian paparan seperti dibawah muncul

3.pilih keep widgets --template telah pun ditukar
4.klik pada view blog untuk melihat template baru blog anda

membuat paparan iklan melayang

Widget ini boleh kita gunakan untuk meletak iklan atau apa apa notis pada blog.Ia mempunyai butang untuk tutup dan akan ikut bergerak jika halaman di scroll atas atau kebawah.

Untuk membuatnya:
Masuk ke design-page elements
Add a gadget--HTML/Javascript dan masukkan kod dibawah:

<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #DB9D9A;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 3px ridge #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: #58FA58 0 2px 15px;
-moz-box-shadow: #58FA58 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .butang {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .butang button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #DB9D9A;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#DB9D9A));
background: -moz-linear-gradient(top, red, #DB9D9A);
}
#topbar .isi_iklan {
background-color:#81F7BE;
margin:0;
padding:4px;
width: 468px;
border: 2px groove #FF8000;
}
</style>
<script src="https://sites.google.com/site/jendela-id/tbb/iklanpopup.js?attredirects=0&d=1" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="butang"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><text><b>[X]</b></text></a></div>
<div class="isi_iklan">

letak kod iklan anda disini

</div>
</div>

kemudian klik butang save

cara disable text highlight

Dalam artikel sebelum ini saya telah masukkan cara disable right click,yang kita digunakan bagi mengelak imej disalin.tetapi itu sahaja tidak cukup kerana teks pada artikel kita perlu juga dilindungi.Jadi kali ini pula saya akan tunjukan  cara bagi menghalang teks artikel kita dihighlight dan disalin.

caranya membuatnya:

Masuk ke design--Page elements
Add a gadget dan pilih HTML/Javascript

dan masukkan kod dibawah ini:

  <script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

ataupun boleh juga cara ini:
Masuk kedesign-Edit Html
dan cari kod dibawah:

.post {
padding:10px;
font-size:70%;
margin: 0 0 25px 0;

-moz-user-select: -moz-none;

-khtml-user-select: none;

-webkit-user-select: none;

-o-user-select: none;

user-select: none;

}

tambahkan kod yang berwarna oren seperti diatas.
selamat mencuba.

meletak border disekeliling template

Ubahsuai pada template ada bermacam macam bentuk.Ada yang suka letak hiasan berbagai bagai ditepi kiri dan kanan template supaya kelihatan cantik.Ada yg tukar background,tulisan,warna pada template.Sementara itu ada yg suka letak border disekeliling post,widget dan sidebar.Yang akhir  sekali sekeliling template juga ingin diletak border.Cara meletak border pada sekeliling template sama seperti di bahagian lain,kita perlu ubahsuai kod pada template.

Cara membuatnya:

Pada design--pilih edit html
dan cari kod dibawah ini:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

kemudian tambahkan kod menjadi seperti dibawah ini:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px; border: 15px solid #DF7401;
}

Untuk ubah saiz border tukarkan saiz pada teks warna biru dan warna border pada teks berwarna hijau
Bentuk border selain dari solid ialah ridge,groove,inset,outset,dashed dan dotted

kemudian save template anda.

Membuat kategori pada labels

Meletak label pada setiap kali posting adalah merupakan satu perkara yang selalu kita laksanakan.Tetapi lama kelamaan label tersebut menjadi banyak dan sudah tentu memakan ruangan pada sidebar.Walaupun ada pilihan untuk kita pasang scroll bagi menjimatkan ruangan.Tetapi label label tadi perlu kita digabungkan dengan membuat satu kategori.Tujuan berbuat demikian adalah bagi memudahkan pengunjung mencari artikel tertentu dengan mudah.

contohnya dalam artikel saya berkenaan shoubox ada bermacam tajuk seperti :

• membuat kotak shoutbox
• Pasang shoutbox tersembunyi
• cara pasang shoutbox melayang
• Cara tukar smiley pada cbox dan shoutmix

Jadi keempat tajuk ini tentunya saya letak label berlainan dan disini kita boleh gabungkan menjadi satu kategori yang sesuai iaitu shoutbox.Oleh itu bila pengunjung klik pada kategories shoutbox ,akan keluar keempat empat tajuk diatas.

Cara membuat kategories:

masuk kedesign:
posting..edit posts

kemudian akan terpapar senarai posting yang ada

dari senarai yang ada pastikan tajuk artikel yang hendak digabungkan
kemudian tandakan pada bahagian kotak edit artikel yang hendak digabungkan menjadi satu kategories

kemudian setelah ditandakan klik pada kotak label action
 




kemudian pilih new label

dan masukkan nama kategori kata tetingkap yang muncul dan klik ok

kemudian masuk semula kedesign
Page elements..pergi kewidget label yg telah kita masukkan pada bahagian ini dan klik edit

pada title ubahkan menjadi kategories
kemudian pada show pilih selected labels

kemudian klik pada edit
kekalkan tick pada bahagian label yang hendak dipaparkan

kemudian klik done