MY TUTORIAL BLOG

Wednesday, April 4, 2012

Tutorial Buat Fan Page Facebook

tutorial ni Cik Pip yang tanya..rajin sungguh Cik Pip belajar yer..hehe..ok,tanpa membuang masa mari kita sama2 belajar macam mana nak buat fan page dekat facebook

mula-mula klik sini

CREATE FACEBOOK PAGE

pilih Brand or Product (tengok gambar)

lepas tu isikan tempat kosong tu seperti ini

dah isi,korang klik Get Started tu ok..

akan keluar page macam ni

korang isilah apa2 yang patut k..ok,dah siap part buat fanpage facebook ni..lepas tu korang tambahlah info-info dekat fanpage korang tu..jangan lupa promote dengan kawan2 supaya LIKE fanpage..hehe

ok,dah siap..next tuto..TUTORIAL LETAK FAN PAGE DALAM BLOG

Sunday, March 25, 2012

Tutorial Buang Garisan Bawah Link

lama dah bui tak buat tutorial..bukan apa,kalau nak buat tuto kena buat dengan hati yang gigih..lagipun tutorial sekarang berlambak2 dah orang buat..cuma kena rajin google dan rajin mencuba

bui buat blog ni pun sekadar nak berkongsi ilmu selain nak jadikan sebagai koleksi sendiri..kot2 manalah tau nak ubah itu ini,cuma refer dengan blog tutorial bui jer..takyah susah2 bukak blog orang

amboii..panjang pulak mukadimahnya..orite,meh belajar

tutorial ni sebenarnya Deqla yang tanya..maaflah dik sebab dah terlalu lama pertanyaan tu terbiar tanpa jawapan (ampunkan hamba penunggu gua..hahaha)

alamak..merapu again..ok,stop

mula2
DASHBOARD > DESIGN > EDIT HTML > CLICK EXPAND WIDGET TEMPLATES

tekan F3..taip perkataan
underline

dah jumpa tak..?kalau dah jumpa korang gantikan semua perkataan tu dengan
none

sekarang,SAVE..dah siap..senangkan..*_*

bila korang halakan cursor pada link,garisan tu tidak akan muncul lagi..

Saturday, March 3, 2012

Tutorial Centerkan Imej Header

mula2 pergi ke
DASHBOARD > DESIGN > TEMPLATE DESIGNER > ADVANCED > ADD CSS

copy kod dibawah

#header-inner img {
margin-left: auto;
margin-right: auto;
}

pastekan di ruangan css tadi seperti ini

klik untuk tumbesaran

preview dulu..kalau ok dan puas hati barulah klik Apply to Blog

p/s : jangan lupa baca entry di INI BLOG BUI

Saturday, January 7, 2012

Tutorial Cursor (Sparkle)

apa itu sparkle cursor?
lihat cursor bui ada benda2 jatuh kan..
itulah sparkle cursor..jom belajar..

mula2 pergi ke
DASHBOARD > DESIGN > ADD GADGET > HTML/JAVA SCRIPT

copy kod dibawah dan paste dekat ruang kosong html tadi

<script type="text/javascript">
</script>
<script type="text/javascript">
// <![CDATA[
var colour="#0000ff";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {

tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

#0000ff tu adalah warna benda2 jatuh tu..macam bui punya adalah warna biru
anda boleh ubah warna tu ikut selera masing2

save dan lihatlah hasilnya..*_*

Wednesday, December 14, 2011

TUTORIAL LETAK BACKGROUND PADA BLOG ARCHIVE

DASHBOARD > DESIGN > EDIT HTML > TICK EXPAND WIDGET TEMPLATES

cari kod seperti ini (ctrl F untuk memudahkan pencarian)

<div id='ArchiveList'>

copy kod dibawah

<div style='overflow:auto; height:300px; background:url(URL IMEJ BACKGROUND); background-repeat:repeat;'>

dan paste diatas kod yang berwarna merah tadi seperti ini :-

<div class='widget-content'>
<div style='overflow:auto; height:300px; background:url(URL IMEJ BACKGROUND); background-repeat:repeat;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if><b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>

kod yang berwarna biru adalah kod yang perlu anda tambah

300px adalah ketinggian kotak scroll
anda boleh mengurangkan atau menambah jumlah tersebut mengikut kesesuaian..

URL IMEJ BACKGROUND anda gantikan dengan url imej yang anda mahu letak sebagai background blog archive

url imej boleh cari kat SINI
cara copy url imej pulak boleh klik SINI

preview dulu,kalau puas hati baru save

Tuesday, December 6, 2011

TUTORIAL MENUKAR FONT PADA BLOG

PART 1
mula2 pergi ke laman web ni
(untuk pilih font yang anda suka)
GOOGLE WEB FONTS

k,kat situ ada banyak pilihan kan..?
pilih jer satu yang anda berkenan
contohnya anda berkenan dengan font ni

klik gambar untuk lebih jelas

yang bui bulatkan adalah nama tulisan yang akan digunakan
ok,setel part ni

PART 2
lepas tu pergi ke
DASHBOARD > DESIGN > EDIT HTML

cari kod

<head>

copy kod ini dan paste dibawah head tadi

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

seperti ini

<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

tukar Font+Name tadi kepada nama tulisan yang anda pilih
contoh :-

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Spinnaker"/>

PART 3
selepas tu,cari font blog anda yang asal
contohnya jika blog anda guna font Arial kan
tukar semua perkataan Arial tu kepada nama font yang baru tadi
(dalam edit html kod yer)

untuk memudahkan pencarian tekan Ctrl F serentak

preview dulu..tengok jadi atau tak..*_*
kalau jadi boleh save

Friday, December 2, 2011

TUTORIAL SALJI TURUN DALAM BLOG

mula2 pergi ke
DASHBOARD > DESIGN > ADD A GADGET > HTML/JAVA SCRIPT

copy kod ini (untuk salji warna putih/background gelap)

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

copy kod ini (untuk salji hitam/background cerah)

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

pilih mengikut kesesuaian blog anda dan save pada ruang kosong html tadi

preview,kalau puas hati boleh save

**********

catitan Bui
sebaiknya letak gadget ini dibawah sekali

Monday, November 21, 2011

TUTORIAL MENUKAR FONT SIDEBAR

mula2 pergi ke
DASHBOARD > DESIGN > EDIT HTML

cari kod

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);

copy kod dibawah

font-family:"leelawadee",Georgia,Serif;

paste seperti ini :-

h2 {
font: $(widget.title.font);
font-family:"leelawadee",Georgia,Serif;
color: $(widget.title.text.color);

tulisan leelawadee tu anda tukar dengan tulisan yang anda inginkan

preview,kalau puas hati boleh save

Tuesday, October 11, 2011

TUTORIAL POPULAR POSTS BERSAMA JUMLAH KOMEN

mula2 pergi ke
DASHBOARD > DESIGN > ADD A GADGET > HTML/JAVA SCRIPT

copy kod ini dan paste pada ruangan kosong html tadi

<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "URL BLOG";
</script>
<script src='https://sites.google.com/site/unwanted86/javascript/unwanted86-popularpost.js' type='text/javascript'></script>
</ul><br/>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>

URL BLOG - letak url blog anda sendiri
cth :- http://tutorialblogbersamabui.blogspot.com/

kod ini boleh didelete sekiranya ada tidak mahu perkataan 'Get this widget here' turut dipaparkan

<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-widget-popular-post-dalam-blog.html" target="_blank"/>Get this widget here </a></small>

preview,kalau puas hati boleh save

**********

catitan Bui
widget ini diletak bertujuan untuk melihat entri yang paling banyak pengunjung komen
kredit kepada Unwanted86 untuk tutorial ni

Saturday, October 1, 2011

TUTORIAL SCROLLING TEXT(MARQUEE)

mula2 pergi ke
DASHBOARD > DESIGN > ADD A GADGET > HTML/JAVA SCRIPT

CONTOH 1

<marquee bgcolor="transparent">TEKS BERGERAK DARI KANAN KE KIRI</marquee>

akan jadi seperti ini :-
TEKS BERGERAK DARI KANAN KE KIRI

CONTOH 2

<marquee behavior="alternate" width="80%" bgcolor="transparent">TEKS MELANTUN KE KANAN DAN KIRI</marquee>

akan jadi seperti ini :-
TEKS MELANTUN KE KANAN DAN KIRI

CONTOH 3

<span style="color:#FFFFFF; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#000000">TEKS BERGERAK DARI KIRI KE KANAN</marquee></span>

akan jadi seperti ini :-
TEKS BERGERAK DARI KIRI KE KANAN

CONTOH 4

<span style="color:#6AFB92; font-size:xx-large; font-family:fantasy; font-weight:bold;"><marquee direction="right" scrollamount="3" bgcolor="#333333">TEKS BERGERAK DARI KIRI KE KANAN</marquee></span>

akan jadi seperti ini :-a

TEKS BERGERAK DARI KIRI KE KANAN

#6afb92 - warna tulisan (boleh tukar dengan warna yang anda mahu)
#333333 - warna latar belakang (boleh tukar ikut citarasa masing2)

CONTOH 5
*untuk teks yang bergerak akan berhenti apabila mouse dihalakan dan bergerak semula apabila mouse di alihkan*

<marquee bgcolor="transparent" onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK DARI KANAN KE KIRI</marquee>

akan jadi seperti ini :-
TEKS BERGERAK DARI KANAN KE KIRI

preview,kalau puas hati boleh save

**********

catitan Bui
teks melantun tu akan jadi,kalau guna browser Mozilla Firefox