Tutorial Letak Icon Sebelah Bloglist


Langkah-langkah letak icon sebelah bloglist :

1. Sign blog anda
2. Klik layout.
3. Klik pada Bloglist.
4. Buang tanda pada icon..masukkan link blog(jika masih belum ada)

5. Tekan rename..masukkan kod dibawah sebelum rename..
<img src="URL image">

6. Save.


Icon :

http://i1231.photobucket.com/albums/ee512/syamrul88/th_245910c5vhn8ec6y.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_41612xtj8ld0fa9.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_71189gsj9zvs4ge.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic012demoji_15496649decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic011demoji_15889022decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic019demoji_17714269decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic013demoji_416577decoojp.gif

http://i1231.photobucket.com/albums/ee512/syamrul88/th_pic012demoji_416972decoojp.gif


Selamat Berbloging  ^_^..

Tutorial Membuat Header Hover Swinging



Langkah membuat header hover swinging :

1. Sign blog anda.
2. Klik template .
3. Klik Edit HTML >> proceed.
4. Cari kod ini .Header h1 { , h1.title {  atau /* Header.
5. Copy kod dibawah dan paste sebelum kod .Header h1 { , h1.title {  atau /* Header.

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
}

Nota : Warna merah adalah masa perjalanan header. Lagi besar number, lagi lama masa bergerak. -4 tu jika nak berputar sikit. jika nak putar banyak, tukar jadi -360...:p

Tutorial Mengubah Scroll Pada Blog



Langkah-langkah mengubah scroll :

1. Sign blog anda.
2. Klik template .
3. Klik Edit HTML >> proceed.
4. Klik tanda pada kotak “Expand widget template”.
5. Cari kod ini ]]></b:skin>.
6. Copy kod dibawah dan paste sebelum kod ]]></b:skin>.

::-webkit-scrollbar {height:3px;width: 10px;background:#BA55D3;}

::-webkit-scrollbar-thumb {background-color:#FFFFFF;-moz-border-radius: 10px;border-radius: 10px;}


7. Save.

Nota : Teks warna merah adalah kod warna scroll..Untuk dapatkan kod warna klik sini..

Tutorial Memasang Widget Ip Address


Untuk mengetahui Ip Address yang sekarang kita gunakan, kita boleh memasang widget Ip Address di blog. 
Langkah-langkah memasang widget ip address :


1. Sign blog anda
2. Klik layout.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

IP

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" border="0" width="125" height="125" alt="IP" /></a>

IP

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" border="0" width="468" height="60" alt="IP" /></a>

6.Save.

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


Langkah-langkah mendefault tag kepada costum title meta tag :

1. Sign blog anda.
2. Klik template .
3. Klik Edit HTML >> proceed.
4. Klik tanda pada kotak “Expand widget template”.
5. Cari kod ini <title><data:blog.pagetitle/></title>
6. Gantikan kod <title><data:blog.pagetitle/></title> dengan kod dibawah ini.

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

 7. Save.

Tutorial Membuat Efek Berputar Pada Komen Avatar

Langkah-langkah  membuat efek berputar pada komen :

1. Sign blog anda
2. Klik layout.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak 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>

6. Save

Tutorial Membuat Efek Zoom Pada Image Di Post

Langkah-langkah membuat efek zoom :

1. Sign blog anda.
2. Klik template .
3. Klik Edit HTML >> proceed.
4. Cari kod ini ]]></b:skin>.
5. Copy kod dibawah dan paste sebelum kod ]]></b:skin>.

.post img {
filter:alpha(opacity=60);  /* Internet Explorer */
opacity:0.6;  /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

6. Save.

Nota : Anda boleh mengubah saiz efek dengan menukar teks warna merah.

Tutorial Efek Gelembung


Langkah-langkah membuat efek gelembung :

1. Sign blog anda.
2. Klik Design.
3. Klik Edit HTML.
4. Cari kod ini <body>.
5. Copy kod dibawah dan paste selepas kod <body>.

<script src=" http://hisyam-tips.googlecode.com/files/bubble.js "></script>

6. Save..


Warna pink :
<script src=" http://hisyam-tips.googlecode.com/files/pink_bubble.js"></script>

Warna merah :
<script src="  http://hisyam-tips.googlecode.com/files/red_bubble.js"></script>

Warna kuning :
<script src=" http://hisyam-tips.googlecode.com/files/kuning_bubble.js"></script>

Warna hijau :
<script src="http://hisyam-tips.googlecode.com/files/hijau_bubble.js"></script>

Warna ungu :
<script src="http://hisyam-tips.googlecode.com/files/ungu_bubble.js"></script>

Warna biru :
<script src="http://hisyam-tips.googlecode.com/files/biru_bubble.js"></script>

Warna oren :
<script src="http://hisyam-tips.googlecode.com/files/oren_bubble.js"></script>

Tutorial Hide Widget Follow





Langkah-langkah hide widget follow :

1. Sign blog anda
2. Klik Design.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

<style type="text/css">
#fl{
position:fixed;
left:0px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Close]
</a></div>
<font size="2"><a href=" http://mrul-tips.blogspot.com"target=_blank"><div style="color: #444444;">
<span >By En Hisyam</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

<a href="javascript:showHideFL()"/><img border="0" src="http://i1231.photobucket.com/albums/ee512/syamrul88/th_under1.png" alt="Fivers" title=" Follow" style="display:scroll;position: fixed; top:50px;left:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>

6. Untuk dapatkan kod follow anda.. klik cini.



Nota : Teks warana merah. kod widget follow dan teks warna kuning Url image.

Tutorial Perkataan Ikut Cursor

Langkah-langkah membuat perkataan ikut cursor

1. Sign blog anda
2. Klik Design.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'JOKERMAN';
color: #A020F0;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "Perkataan anda di sini";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

6. Save

Nota : teks warna biru, kod warna perkataan.klik disini untuk rujuk kod..teks warna merah perkataan yang anda inginkan.

Tutorial Pasang Burung Twitter Terbang



Langkah-langkah memasang burung twitter terbang :-

1. Sign blog anda
2. Klik Design.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

<script src=" http://tips-mrul.googlecode.com/files/twitter.js?attredirects=0&amp;d=1" type="text/javascript">
</script>
<script type="text/javascript">
var twitterAccount = "username twitter anda";
var tweetThisText = " <data:blog.pageTitle/> ~ <data:blog.Url/> ";
tripleflapInit();
</script>

6. Save

Nota : Tukar teks warna merah dengan username twitter anda.

TinGaLkan Jejak