Tingkatkan traffic search engine dengan costum title meta tag

Default setting yang di buat blogger.com pada title meta tag yang terdapat pada script template anda sebenarnya kurang mesra kepada google search engine. Ini kerana, title meta tag tersebut akan memaparkan nama blog terlebih dahulu dan kemudian di ikuti dengan tajuk entri atau artikel. Di bawah ini adalah contoh title meta tag yang terdapat pada blog anda.

<title><data:blog.pagetitle/></title>

Untuk menjadikan blog anda mesra dengan google search engine, title meta tag yang terbaik adalah title meta tag yang akan memaparkan tajuk entri atau artikel terlebih dahulu dan di ikuti dengan nama blog. Apa yang perlu anda lakukan adalah menggantikan default title tag kepada title meta tag yang lebih mesra dengan google search engine. Anda boleh lihat costum title meta tag tersebut di bawah.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>


Untuk menggantikan default title tag kepada costum title meta tag, hanya perlu ikut beberapa langkah yang mudah di bawah.

Langkah 1

Log in blog => Dashboard => Design => Edit HTML. Seterusnya klik pada Expand Widget Templates.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya taip atau paste kod <title><data:blog.pagetitle/></title> pada ruang Find dan kemudian, tekan kekunci Enter.

Langkah 3

Salin kod berwarna merah di bawah dan paste (gantikan) pada kod <title><data:blog.pagetitle/></title>

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Read More

Cara pasang efek spinning pada comment avatar

Untuk memasang spinning effect pada picture Avatar dibahagian komen seperti yang boleh anda lihat pada komen blog ini, Hanya ikut beberapa langkah yang mudah di bawah.

p/s: Effect akan befungsi apabila kursor mouse di letak pada image avatar tersebut.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.

<style type="text/css">
.avatar-image-container img, comments .avatar-image-container img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
</style>

<script src="http://mootools-code.googlecode.com/files/mootools-1.3.2.js"></script>

<script>
window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 0, availableHeight = 0;
var cssPrefix = false;
switch(Browser.name) {
case "safari":cssPrefix = "webkit";break;
case "chrome":cssPrefix = "webkit";break;
case "firefox":cssPrefix = "moz";break;
case "opera":cssPrefix = "o";break;
}

// The Icons
var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");
// Apply opacity
var zIndex = 1000;
// Randomize each link
icons.each(function(element,index) {
var startDeg =(360);
var resetPlace = function() {
element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
}
element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
resetPlace();
element.addEvents({
mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},
mouseleave: resetPlace});
});
});
</script>

Akihr sekali, klik Save

p/s: View terbaik effect ini dengan menggunakan Google Chrome

Read More

cara pasang animated label cloud di blogspot

Untuk memasang label cloud animasi pada sidebar seperti yang boleh anda lihat pada gambar yang di tunjukkan di atas, anda hanya perlu ikut beberapa langkah yang di tunjukkan di bawah.

Save script template anda terlebih dahulu.

Langkah 1

Log in blog => Dashboard => Design => Edit HTML.

Langkah 2

Dengan menggunakan keyboard, taip atau paste kod <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>(untuk Template Designer)pada ruang Find. Seterusnya, tekan kekunci Enter.

Langkah 3

Salin kod di bawah dan paste selepas atau di bawah kod <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>(untuk Template Designer)(rujuk langkah 2)

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<center>
&lt;object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='11'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
</center>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

p/s:

1. Untuk menukar warna background, edit kod #ffffff yang di bold dengan warna pilihan anda.

Contoh: #000000 (warna hitam)

2. Untuk menukar warna font,edit kod 000000 yang di bold dengan warna pilihan anda.

Contoh: ffffff (warna putih)

Untuk mendapatkan kod warna sila klik di sini

Read More