Saturday, March 26, 2011

7 simple blogger tutorial !

Hello . Happy Saturday . Pada entri saya yang lepas - lepas , saya ada cakap nak buat blog tutorial kan ? Hehe . Saya tak bercakap kosong betul tak ? So , untuk hari  ni  saya nak ajarkan beberapa tutorial yang simple - mimple kat korang . Lepas dah biasa main dengan kod - kod bagai , baru saya akan ajarkan korang tutorial yang advance sikit .

Sebelum memulakan tutorial , korang mesti kena ingat.....sebelum nak ubah - ubah template blog korang , pastikan korang backup dulu template . Cara nak backup senang je . Kat edit html tu , korang tekan download full template , ok ? Lagi satu , sebelum nak cari apa - apa kod , pastikan korang tandakan kotak expand widgets terlebih dahulu .



1) Letak facebook like button

1.Dashboard
2.Design
3.Edit HTML
4.Expand widgets
5.Tekan CTRL dan F , nanti ada keluar kotak find . Search kod ni....

<data:post.body/>

Lepas tu , di bawah kod tadi , letakkan kod ni pulak .

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=
100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></b:if>


2) Letak salji di blog

1.Ikut step 1 & 2 kat atas tadi .
2.Add a gadget
3.Pilih HTML/Javascript
4.Pastekan kod ni .

Salji warna putih :
<script type="text/javascript" src="http://www.yourjavascript.com/14104214083/snow-white.js"></script>

Salji warna hitam :
<script type="text/javascript" src="http://www.yourjavascript.com/03441140321/snow-black.js"></script>


3) Hilangkan navbar


1.Ikut step 1 - 5 tadi dan search body {
2.Letak kod ni di atas kod body {

#navbar {
height: 0px;
visibility: hidden;
display: none;
}



4) Sembunyikan navbar

Seperti yang korang lihat di blog ni , korang takkan nampak navbar kat atas sekali blog ni . Tapi bila korang scroll kat atas tu , nanti navbar akan keluar sendiri .

1.Ikut step tutorial nombor 2 tadi .
2.Pastekan kod ni .

<!-- DROPDOWN NAVBAR -->
<!-- stylesheet for FF2, Op9, IE7 (strict mode) -->
<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>
<!-- stylesheet for IE6 and lower -->
<!-- (not supporting element:hover) -->
<!-- first, unhide the navbar through css -->
<!-- second, hide the navbar and mimic -->
<!-- the effect with javascript, if available -->
<!--[if lt IE 7]>
<style type="text/css">
#navbar {
height:30px;
top:0px;
}
</style>
<script type="text/javascript">
var navbar = document.getElementById('navbar');
if(navbar){
navbar.onmouseover = function(){
navbar.style.top = '0px';
navbar.style.height = '30px';
}
navbar.onmouseout = function(){
navbar.style.top = '-30px';
navbar.style.height = '60px';
}
if (navbar.captureEvents){
navbar.captureEvents(Event.MOUSEOVER);
navbar.captureEvents(Event.MOUSEOUT);
}
navbar.onmouseout();
}
</script>
<![endif]-->
<!-- end dropdown navbar -->


5) Letak effect pada gambar


1.Ikut step tutorial nombor 1 dan cari kod </head>
2.Pastekan kod ni di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>




6) Buat rainbow link



Bila korang scroll kat atas apa - apa link di blog korang , link korang akan bertukar jadi warna - warni .

1.Ikut step nombor 2 dan letak kod ni .

<script src="https://sites.google.com/site/unwanted86/javascript/rainbowlink.js" type="text/javascript"> </script>


7) Tukar cursor mouse di blog


(Tutorial ni senang sebab korang tak payah download cursor kat web lain .)

1.Ikut step tutorial nombor 6 tadi dan pastekan kod ni di atas </head>

<style type='text/css'>body, a, a:hover {cursor: url(http://aidealfitri.webs.com/cur116.cur), progress;}</style>


Kalau korang tak suka cursor tu , korang boleh tukarkan kod yang warna merah tu dengan url gambar korang .

Contoh :

<style type='text/css'>body, a, a:hover {cursor: url(http://i538.photobucket.com/albums/ff350/Al-hud_2008/cursora.png), progress;}</style>


Dah . Itu saja . Biasa - biasakan lah diri korang bermain dengan kod . Next time , saya akan ajarkan tutorial yang lagi best dan lagi susah . Hehe . Sebelum tu , kalau ada kod yang rosak (bila korang letak kod nanti ada keluar error) , tolong bagitau saya . Saya akan tukar secepat yang mungkin .

p/s : Chaiyok !

Reactions:

0 comments:

Post a Comment

 
biz.