Kamis, 31 Maret 2011

mencari sebab blog lambat dibuka

slow loading
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.

status bar
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.

Selasa, 29 Maret 2011

Cara elak duplicate title tags

duplicate content
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://teknikbuatblog.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
Log in ke blogger
Pada dashboard Pilih template-edit HTML-


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.

archives

update 9/5/2013

Jumat, 25 Maret 2011

Cara Membuat Efek Redirect (pengalihan) di Blog

refresh CODE SCRIPT - Maksud dari fungsi redirect adalah pengalihan alamat url yang dituju pengunjung ke url alamat blog kita yang baru atau blog yang ingin kita jadikan pengalihannya. sebenarnya ini adalah lanjutan dari tutorial Cara Membuat Efek Refresh di Blog tetapi mempunyai fungsi yang berbeda.
Fungsi Redirect ini dimaksudkan untuk seseorang yang mengganti blognya lalu blog yang lama tidak ingin diaktifkan kembali atau bisa juga menuliskan pesan (dengan waktu beberapa detik) lalu otomatis ter-alihkan kepada url yang baru.
Cara pembuatannya sangatlah mudah seperti Cara Membuat Efek Refresh di Blog.
Berikut ini cara membuat pengalihan alamat url di blog untuk pengguna Blogger (pada blog yang ingin di alihkan).
  1. Login ke Blogger
  2. Kemudian klik Tata Letak dan Edit Html.
  3. lalu copy kode di bawah ini :
    <meta http-equiv="refresh" content="0;URL=http://kandangan-tv.com"/>
  4. lalu kode tersebut di atas di taruh (paste) sebelum kode dibawah ini :
    </head>
  5. Kemudian Simpan Template
Ket :
Tulisan yang berwarna merah adalah alamat blog atau website yang jadi alihannya (yang baru).
Tulisan angka "0" berarti secara otomatis menuju blog yang baru tanpa rentan waktu (hanya 0 detik).
Jika ingin meninggalkan pesan rubahlah "0" dengan angka "5" misalnya maka kita bisa meninggalkan pesan di blog atau website yang lama, jadi ketika pengunjung menuju blog atau website kita dia akan membaca pesan kita lalu dalam hitungan 5 detik akan dialihkan ke URL yang baru.

Kamis, 24 Maret 2011

cara buat popular posts bergerak

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

Caranya :

1.Masuk ke dashboard-Layout---add a gadget



edit template





2.Ambil popular post

popular





Sesudah widget tersebut dipasang

3.Seterus pada dashboard pilih template--edit HTML




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

update 9/5/2013

Sabtu, 19 Maret 2011

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 semasa anda memasukkan widget tersebut seperti dibawah.


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




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

Kamis, 17 Maret 2011

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.
 
follow





Cara memasangnya:

1.Masuk kedashboard-Layout---Pilih add a gadget




2.Kemudian pilih  follow by email

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.


follow by email


5.Kemudian save widget anda.

update 9/5/2013

Rabu, 16 Maret 2011

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.
kotak komen

Untuk mengubahnya:

1.masuk kedashboard--template--edit HTML




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.

update 9/5/2013

Minggu, 13 Maret 2011

membuat backup dan menukar template

templateBackup 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 kedashboard--Pilih template--pilih Backup/Restore
2. klik pada download full template--klik save file untuk menyimpan backup template.
backup template


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

tukar template

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 Mozilla,Chrome dan Internet Explorer--Pengunjung
   menggunakan  berbagai browser :)
4.Pilih template sidebar berada disebelah kanan-Baik untuk SEO kerana kandungan artikel lebih dulu  
  di indeks  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.

extract

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
widget

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

update 10/5/2013

Jumat, 11 Maret 2011

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 Dashboard-Layout---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/teknikbuatblog/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

update 10/5/2013

Selasa, 08 Maret 2011

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 dashboard--Layout---Add a gadget
masuk gadget

Pilih HTML/Javascript

kod html

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.

update 10/5/2013

Senin, 07 Maret 2011

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:

Log in ke blogger-- design
Template--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.
update 10/5/2013

Kamis, 03 Maret 2011

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 :
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:

1.masuk keblogger
2.Pada dashboard pilih posts
  kemudian akan terpapar senarai posting yang ada

senarai label




dari senarai yang ada pastikan tajuk artikel yang hendak digabungkan

3.kemudian tandakan pada bahagian kotak dihujung tajuk  artikel yang hendak digabungkan menjadi satu kategori




4.   kemudian setelah ditandakan klik ikon seperti pada rajah..kemudian pilih new label
      

label



dan masukkan nama kategori kata tetingkap yang muncul dan klik ok

label name









kemudian masuk semula kedashboard
Pilioh layout..pergi ke paparan add new gadget, pilih widget label yg telah kita masukkan pada bahagian ini dan klik edit

gadget




pada title ubahkan menjadi kategories
kemudian pada show pilih selected labels

edit label











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





















kemudian klik done

update 10/5/2013