Tutorial Memasang Button Like Facebook

αssαlαмuαlαikuм
kali ini paan nak ajar 
tutorial memasang button like facebook
pada setiap post korang
macam gambar kat bawah ni


Tutorial bermula

▢ Login ke dalam Blogspot anda ▢

▢ Pergi ke Layout > Edit HTML > Tick Expand Widget Template ▢

▢ Cari kod ini , data:post.body ( Tekan CTRL + F untuk memudahkan pencarian ) ▢

▢Copy code dibawah ini dan paste pada bawah code data:post.body


<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>


▢ Save template 

!! ATTENTION !!

Jika selepas save template, kalau korang tengok dekat butang LIKE tu tiada di bawah post, mungkin template korang ada lebih daripada satu data:post.body. Apa yang perlu dilakukan ialah try and error setiap satu data:post.body tu sampai butang Facebook LIKE korang tu muncul kat bawah post korang.

THANK YOU 
 

Tutorial Letak Button Dashboard

Assalamualaikum
hey blogger & hey rakan internet
oke today paan akan ajar pula
cara nak letak button dashboard and follow
macam paan ni


Tutorial Bermula

Log in > Dashboard > Design > Add Gadget > Html/JavaScript

Copy kod kat bawah ni

<div style="display:scroll; position:fixed; top:5px; right:90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=2771557803671873921" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_follow_alpha.png?6" /></a><br /><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://assets.tumblr.com/images/iframe_dashboard_alpha.png?6" /></a></div></div>

Pastekan dekat ruang HTML code tadi

Tukar tulisan warna biru dengan blog ID korang.
korang boleh amik dekat blog ID macam nie.
tengok gambar kat bawah nie


Dah siap copy?
korang Save

Tutorial Tamat
Selamat Mencuba

Tutorial Centerkan Header

Assalamualaikum
hey blogger & hey rakan internet
Hari ni aku akan ajarkan cara nak centerkan header
bagi nampak kemas sikit..

Tutorial Bermula

Dashboard > Design > Edit Html

Cari kod kat bawah ni ( Tekan CTRL + F untuk memudahkan pencarian )

/* Content

Then korang copy kod dekat bawah nie

.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Pastekan code yang korang copy tadi dekat atas /* Content

Preview dulu baru korang Save

Tutorial Tamat
Selamat Mencuba

Tutorial Disable Highlight

Assalamualaikum
hey blogger & hey rakan internet
kali ni paan akan ajarkan 
cara korang nak disable highlight
mesti ada antara korang yang ta suke bab highlight nie

Tutorial Bermula

Log in > Design > Add a Gadget > Html/Jacascript

Copy kod kat bawah nie:

<script type="text/javascript">
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
<script type="text/javascript">
disableSelection(document.body) //disable text selection on entire body of page
</script> 

Paste dekat ruang HTML code tadi

Save

Tutorial Tamat 
Selamat Mencuba

Tutorial Letak Gambar Dekat Footer

Assalamualaikum
hey blogger & hey rakan internet
Tutorial seterusnya plak
paan nk ajar korang cara nk 
letak gambar dekat footer blog
macam paan nie haa


Tutorial Bermula

Log in > Dashboard > Design > Edit Html > Tick Expand Widget Templates

Then cari kod kat bawah nie ( Tekan CTRL + F untuk memudahkan pencarian )

<div class='post-footer-line post-footer-line-3

Bile dah jumpe..copy kod kat bawah nie

<center><img src='URL GAMBAR DI SINI'/></center>

Pastekan dekat bawah kod yang telah korang cari tadi

then korang boleh gantikan link purple tu dengan 
gambar korang yang setai-setai.

Preview dlu baru Save

Tutorial Tamat
Selamat Mencuba

Tutorial Membuat Tab Menu (versi paan)

Assalamualaikum
hey blogger & hey rakan internet
okey tutorial seterusnya 
paan nk ajar tentang cara membuat tab menu cara paan
yang macam gambar kat bawah nie


Tutorial Bermula

Log in > Dashboard > Design > Page Element > Add a Gadget > HTML code

korang copy kod dekat bawah nie

<center><a class='linkopacity'href='URL LINK''title="Home"><img src="URL GAMBAR"/>
<a class='linkopacity'href='URL LINK''title="Profile"><img src="URL GAMBAR"/>
<a class='linkopacity'href="URL LINK"'title="Tutorial"><img src="URL GAMBAR"/>
<a class='URL LINK"target='_blank' title="Follow"><img src="URL GAMBAR"/></center>

Lepas tu pastekan dekat HTML code

Save

Then korang boleh letakkan HTML code yang telah save tadi
macam kat gambar nie


tu macam tab menu paan
atau korang boley jugak letak dkat
mcam gmbar kat bawah nie

Tutorial Tamat
Selamat Mencuba

Tutorial Memasang Effect Salji


αssαlαмuαlαikuм
tutorial seterunya ialah
memasang effect salji 
pada blog korang
bagi semua orang beku
sebab blog korang sejuk
HaHa
senang jew tutorial ini

< Tutorial Bermula >


▢ Login ke dalam Blogspot anda ▢

Page Elements > Add a Gadget > HTML / Javascript
 
Copy code di bawah mengikut pilihan korang▢
untuk effect salji warna putih





untuk effect salji warna hitam




▢ Save ▢

 THANK YOU

Tutorial Gambar Membesar Bila Cursor Menyentuh

Assalamualaikum
hey blogger & hey rakan internet
okey hari ni paan nak ajar korang
macam mane nk besarkan gambar
bile cursor korang menyentuh gmbar tersebut

contoh macam ni
cube letak cursor korang dekat gambar di bawah nie


Tutorial Bermula

Log in > Dashboard > Design > Edit Html

Tekan Ctrl + F serentak , dan cari kod ini :
<head>
bile dah jumpe..korang copy pulak code kat bawah nie.
<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
</style>
Pastekan dekat di bawah kod <head>

Save

Tutorial Tamat
Senang jew kan? kan?
So Selamat Mencuba

Tutorial Ajax Float (lebih cepat nak load)


αssαlαмuαlαikuм
tutorial kali ini
korang akan paan ajar 
cara membuat Ajax Float 
pada shoutbox korang
!! apa itu Ajax Float !!
Ajax Float boleh membuatkan shoutbox korang
muncul ditengah-tengah blog korang
 seperti gmbr di bawah ini


sebelum tutorial bermula
korang kene pastikan saiz pada code shoutbox korang
seperti berikut:

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="216" height="280" src="http://www2.cbox.ws/box/?boxid=1932907&boxtag=4108&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe></div>
<div><iframe frameborder="0" width="216" height="80" src="http://www2.cbox.ws/box/?boxid=1932907&boxtag=4108&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe></div>
</div>
<!-- END CBOX --></u><br>

< Tutorial Bermula >

▢ Login ke dalam Blogspot anda ▢

Page Elements > Add a Gadget > HTML / Javascript

Copy code dibawah dan masukkan ke dalam ▢
HTML/Javascript 

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:0px; right:-0px;'>
<br>

<!-- Start Ajax Popup Shoutbox by -->

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>

$(document).ready(function() {

//select all the a tag with name equal to modal

$('a[name=modal]').click(function(e) {

//Cancel the link behavior

e.preventDefault();

//Get the A tag

var id = $(this).attr('href');

//Get the screen height and width

var maskHeight = $(document).height();

var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen

$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();

//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);

//transition effect

$(id).fadeIn(2000);

});

//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();

$('#mask').hide();

$('.window').hide();

});

//if mask is clicked

$('#mask').click(function () {

$(this).hide();

$('.window').hide();

});

});

</script>

<style>

img { border: none; }

#mask {

position:absolute;

left:0;

top:0;

z-index:9000;

background-color:#000;

display:none;

}

#boxes .window {

position:fixed;

left:0;

top:0;

width:440px;

height:200px;

display:none;

z-index:9999;

padding:20px;

}

#boxes #wanhazelshoutbox {

width:425px;

height:460px;

padding:56px 0 0px 0px;

}

#closesb {

padding:26px 0 0 0;

}

#author {

padding:8px 0 0 168px;

}

</style>

<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src=" http://pic0.picsorlinks.com/ph_bi_70788_26f75e4.png " border="0" /></a> </center> </ul>

<div id="boxes">

<!-- Start Shoutbox -->

<div id="wanhazelshoutbox" class="window">

<!-- Begin ShoutMix - http://www.shoutmix.com --><center>



KOD SHOUTMIX/CBOX KORANG



</center>
<!-- End ShoutMix -->

<div id="author"></a>

</div><div id="closesb"><input type="button" value="Close" class="close" />

</div></div><!-- End of Ajax Shoutbox -->

<!-- Mask to cover the whole screen -->

<div id="mask"></div></div>

<!-- End of Ajax Popup Shoutbox-->

</div>

▢ Save ▢

!! ATTENTION !!

korang haruslah tukar perkataan warna ungu dengan
'CODE SHOUTBOX KORANG'
dan warna merah url gmbr untuk korang punye
image klik untuk shoutbox korang

THANK YOU

Tutorial Menukar Favicon Icon

αssαlαмuαlαikuм
tutorial kali ini
paan akan ajar korang cara nk 
tukar favicon icon
!! ape itu favicon icon !!
favicon icon adalah seperti berikut


icon yang berada di sebelah tajuk tab korang
dan di dalam kotak ungu tersebut

< Tutorial Bermula >

▢ Klik imej di bawah dan pilih favicon icon ▢
yang korang suka

▢ setelah pilih favicon icon kesukaan korang ▢
copy code favicon icon korang
seperti di bawah

▢ Login ke dalam Blogspot anda ▢

▢klik kat Layout and cari Edit HTML

sebelum tu korang mesti tandakan pada kotak kecil sebelah kanan atas yg tertulis 
Expand Widget Template

Cari code </head>

▢ letak kod tersebut pada ▢
bahagian bawah atau selepas  
</head>



!! ATTENTION !!
 
Tulisan besar yang bertulis 'CODE FAVICON ICON ANDA'
itu adalah mengikut URL gambar anda sendiri 
 
THANK YOU
  

Tutorial Marquee


αssαlαмuαlαikuм
 tutorial seterusnya lagi 
paan nak ajar korang 
cara-cara menggerakkan perkataan korang
atau senang di panggil 
MARQUEE

< Tutorial Bermula >

▢ Login ke dalam Blogspot anda ▢

▢ Pilih tempat untuk meletakkan perkataan korang ▢

▢ Pilih jenis-jenis Marquee dibawah dan copy ▢



PERKATAAN
<marquee>PERKATAAN</marquee>
PERKATAAN
<marquee direction="right">PERKATAAN</marquee>
PERKATAAN
<marquee behavior="alternate">PERKATAAN</marquee>
PERKATAAN
<marquee direction="up">PERKATAAN</marquee>



PERKATAAN
<marquee direction="down">PERKATAAN</marquee>
PERKATAAN
<marquee direction="up" behavior="alternate">PERKATAAN</marquee>


PERKATAAN
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">PERKATAAN</marquee></marquee>


PERKATAAN
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">PERKATAAN</marquee></marquee>



>>PERKATAAN<<
<marquee behavior="alternate" width="10%">>></marquee>PERKATAAN<marquee behavior="alternate" width="10%"><<</marquee>


>>PERKATAAN<<
<marquee behavior="alternate" width="10%">>></marquee>PERKATAAN<marquee behavior="alternate" width="10%"><<</marquee>


3| | |PERKATAAN| | |4
<MARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"><font face=Webdings>3</font></MARQUEE><MARQUEE scrollAmount=1 direction=left width="2%">| | |</MARQUEE>PERKATAAN<MARQUEE scrollAmount=1 direction=right width="2%">| | |</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"><font face=Webdings>4</font></MARQUEE>/



4| | |PERKATAAN| | |3
<MARQUEE behavior=alternate direction=left scrollAmount=3 width="4%"><font face=Webdings>4</font></MARQUEE><MARQUEE scrollAmount=1 direction=left width="2%">| | |</MARQUEE>PERKATAAN<MARQUEE scrollAmount=1 direction=right width="2%">| | |</MARQUEE><MARQUEE behavior=alternate direction=right scrollAmount=3 width="4%"><font face=Webdings>3</font></MARQUEE>



PERKATAAN
<marquee behavior="alternate"><marquee width="150">PERKATAAN</marquee></marquee>


PERKATAAN

PERKATAAN
<marquee behavior=alternate direction=up scrollamount=2 scrolldelay=65 height=80 style="Text-align;filter:wave(add=0,phase=1, freq=1,strength=15,color=.FFFFFF)"><center>PERKATAAN<br>PERKATAAN</center></marquee>

!! ATTENTION !!

Gantikan " PERKATAAN " dengan ayat korang .

THANK YOU

Tutorial Background Music


αssαlαмuαlαikuм
!! blog korang sunyi !!
!! bosan !!
!! perlukan music player !!
paan akan ajar korang 
nak masukkan lagu 
untuk blog korang
senang + cepat + best
sebelum tutorial bermula
korang klik gmbr dibawah ini
untuk mencari lagu kesukaan korang
Click Here
lepas itu korang
korang copy antara code yang mane korang suke
sama ade player baru ataupon player lama


< Tutorial Bermula >

▢ Login ke dalam Blogspot anda ▢

Page Elements > Add a Gadget > HTML / Javascript
 
Copy code yang telah korang copy tadi ke dalam▢
HTML / Javascript
 
▢ Save ▢

 THANK YOU
 

Tutorial Memasukkan Video Youtube

αssαlαмuαlαikuм
HEY! HAI! HOI!
uke hari ini paan akan 
ajarkan tutorial pertama paan
cara memasukkan video youtube pada blog 
harap lepas ini korang boleh ikut tutorial 
paan yang akan datang

Layari laman web youtube.com dan cari video yang hendak dimasukkan.

cara

kemudian setelah video tersebut muncul tekan butang embedded dan code akan muncul dibawahnya.
copy kod tersebut


Log in ke blog.Kemudian klik pada new post
Kemudian pilih edit html,pastekan embedded code tadi

Kemudian klik publish post untuk melihat hasilnya.
saiz video tersebut boleh diubah dengan membuat
ubah suai pada code tadi.

THANK YOU

Tutorial Tajuk Tab Bergerak

αssαlαмuαlαikuм
HaHa
tutorial seterusnya paan 
akan ajar korang cara membuat tajuk tab 
korang bergerak seperti menaip
seperti 
tajuk tab paan yang berada diatas


< Tutorial Bermula >

▢ Login ke dalam Blogspot anda ▢

Page Elements > Add a Gadget > HTML / Javascript


Copy paste code dibawah dan tukarkan perkataan huruf besar itu
▢kepada ayat yang korang nak tunjuk▢


<script type="text/javascript">

//Created by Title bar Maker (http://www.bosiljak.hr/titlemaker)

function tb8_makeArray(n){

this.length = n;

return this.length;

}



tb8_messages = new tb8_makeArray(3);


tb8_messages[0] = "AYAT ANDA";

tb8_messages[1] = "AYAT ANDA";

tb8_messages[2] = "AYAT ANDA"

tb8_rptType = 'infinite';

tb8_rptNbr = 5;

tb8_speed = 100;


tb8_delay = 2000;

var tb8_counter=1;

var tb8_currMsg=0;

var tb8_tekst ="";

var tb8_i=0;

var tb8_TID = null;

function tb8_pisi(){

tb8_tekst = tb8_tekst + tb8_messages[tb8_currMsg].substring(tb8_i, tb8_i+1);

document.title = tb8_tekst;


tb8_sp=tb8_speed;

tb8_i++;

if (tb8_i==tb8_messages[tb8_currMsg].length){

tb8_currMsg++; tb8_i=0; tb8_tekst="";tb8_sp=tb8_delay;

}

if (tb8_currMsg == tb8_messages.length){

if ((tb8_rptType == 'finite') && (tb8_counter==tb8_rptNbr)){

clearTimeout(tb8_TID);


return;

}

tb8_counter++;

tb8_currMsg = 0;

}

tb8_TID = setTimeout("tb8_pisi()", tb8_sp);

}

tb8_pisi()

</script>

▢ Save ▢

THANK YOU

Tutorial Link Menjadi Pelangi


αssαlαмuαlαikuм
tutorial seterusnya paan nak ajar korang
cara-cara menjadikan link korang 
warna-warni seperti 
pelangi
tutorial ini sangat senang dan memudah korang
untuk contoh 
korang gerakkan mouse korang 
dekat link di bawah ini


▢ Login ke dalam Blogspot anda ▢
▢klik kat Layout and cari  Edit HTML

sebelum tu korang mesti tandakan pada kotak kecil sebelah kanan atas yg tertulis 
Expand Widget Template

▢Seterusnya, korang cari kod </head>
(untuk memudahkan pencarian korang , tekan Ctrl + F )

▢Lepas korang dah jumpa kod tuh▢
letakkan kod dibawah ini diatas </head> 




▢ Save Template ▢

THANK YOU