Showing posts with label TOTURIAL BLOG. Show all posts
Showing posts with label TOTURIAL BLOG. Show all posts

Sunday, May 29, 2011

TUTORIAL : TYPE OF BORDER ( Post Title/Sidebar)





Hello Bloggers. Assalammualaiukum.

Harini, nak buat tutor pasal border. Border dekat sidebar, dekat post title. Tahu tak? Alaa, yag wane pink pink dekat belog i ni laaaaa. Comel macam i kan? Kuang kuang kuang. Tak teringin ke nak buat belog comel comel macam i? Lalalala. Jom ikot step di bawah.

Kalau korang nak tukar border untuk post title, sila ikuti step ini ye. Mula mula, pergi Design >> Edit HTML >> CTRL F then seacrh >> h3.post-title {

Kalau nak tukar sidebar pulak, step ini eh. Pergi Design >> Edit HTML >> CTRL F then seacrh >> h2 {

Lepas tu, pilih la pattern border yang macam mana korang nak, then copy la code di bawahnya. Paste code yang korang search tadi yang warna merah atas tu dengan code di bawah ini.


-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}


-moz-border-radius: 35px;
border-radius: 35px;
}

Kemudian, preview. Kalau takde silap, boleh lah save dan lihatlah hasilnya. Mesti korang puas hati punyalah bila belog dah cantik macam i ni. HAHAHHA. Byeeeeeee.

Credit to : This Girl


Thursday, November 18, 2010

TUTORIAL BLOG : Button back to top





Hey bloggers


Tutorial hari ini adalah seperti title di atas . Eh , ape tu button back to top ye ? Button back to top tu function dea memudahkan korang sebab tak payah susah susah nak scroll banyak kali . Just click je button tu kat kanan ==> bawah page korang terus akan ke top , cewahh ! Senang je caranya . Checkedout !

1. Dashboard ==> design ==> add a gadget ==> html/javascript .

2. Paste code di bawah ke dalam ruangan html/javascript . Tekan CTRL+C untuk Copy .

< a title="Back to Top" href=" # " style="position : fixed ; bottom: 5px; right: 5px ;"><img src=" Url gambar ">< / a >


3. Change perkataan yang dihighlight warna purple tu kepada url gambar yang korang nak okey .

4. Dah siap , then boleh lahhhh save !

Saturday, November 13, 2010

TUTORIAL BLOG : Effect Salji Pada Cursor




Assalamualaikum , selamat malam :)




tutorial today direquest oleh adek muja . bukan ekor ekor tauu , effect salji , okey ? haha :P jom cantikkan lagi cursor anda !

1. Dashboard ==> Design ==> Page Element ==> Add a Gadget ==> Html/Java script

2. Copy code di bawah ini dan paste pada Html/Java script . sila tekan CTRL+C untuk copy code di bawah .
<script type='text/javascript'>
// <![CDATA[
var colour="purple";
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>


3. Pekataan yang di bold kale merah tu korang boleh change dengan any colour atau code colour yang korang suka okey . get it ? hee . kalau merah , red lah kan ? haha :P

4. okeyy , Save ! Siap !

Ohhh my , codenye terlalu panjang kan ? haha :) Jangan lupa tinggalkan komen anda !

Thursday, November 11, 2010

TOTURIAL BLOG : Print Screen



Hello bloggers . Tutorial hari neyh direquest olehCik Strawberry . I tatau sape dea punya tuan . Sebab dea tak tinggalkan link pun T___T Kalau dah baca entry neyh sila tinggalkan link eh cik strawberry , heee . jom belajar macam mana nak buat , senang je tauu :)




1. Pergi dekat page / gambar / stuff yang u all nak tu .
2. Tekan Ctrl+Prtsc Sysrq secara serentak , macam dalam kotak merah gambar di bawah



3. Bukak paint , pastekan kat situ .
4. Adjustlah apa yang patut ok .
5. SAVE !

Selamat mencuba Cik Strawberry , jom comment(s) ehhh ~





Wednesday, November 10, 2010

TUTORIOL BLOG : Exchange your cursor blogger !




Assalamualaikum semua :)


Selamat malam dan selamat makan , heh -________- Tutorial kali ini i nak share dengan korang korang dan korang satu website yang dapat memudahkan korang exchange cursor korang supaya nampak lebih cantik , menawan dan memikat , HAHAH . jom follow step ini :

1. Carik cursor fav u all kat sini
2. Make sure u all TIDAK pilih cursor yang jenis animated tau , sebab cursor jenis neyh hanya berfungsi kat IE je tauuu ! Ingat ! Hehe .

3. Copy code yang fav cursor korang .

4. Kod akhir korang hanya kelihatan seperti ini sahaja . Selebihnya boleh didelete !
< type=" text/ css ">body , a, a : hover {cursor: url ( http://cur . cursors- 4u . net/cursors/cur-2/cur116.cur ), progress;}

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut .

6. Save dan lihat hasilnya .

Selamat maju jaya okeyyyy , jangan lupa leave a comment :) Hehe . Bye-bye !

Sunday, November 07, 2010

TUTORIAL BLOG : Visitors



toturial ini direquest oleh adk muja . cuba korang tengok kat sidebar i , ape itu visitor yang di maksudkan oleh adk muja neyh , hehe . jom belajar macam mane nak buat binatang macam gambar di bawah neyh , heh .


1. pergi ke website ini untuk pengunjung .
2. edit code itu dengan bubh url blog anda .
3. copy paste code tersebut pada html anda dan SIAP !
4. pergi ke website ini pulak untuk pelawat .
5. sign up dan ikot step step yang seterusnya .
6. paste code tersebut pada sebelah code tadi .
7. save dan blog anda dah cantik macam i , HAHA :)

Saturday, November 06, 2010

TOTURIAL BLOG : Post entry keluar 2 kali






Selamat pagi bloggers :)


sebelum neyh , korang perasan tak entry i keluar dua kali ? okey , i dah cuba sedaya upaya mana silapnya tapi ta jugak jumpa jumpa mana silapnya , DAMN ! but but , finally , i berjayaaa ! yesss , best gila la wa cakap lu , heheh . apa silapnye eh ?




okey , cuba korang tengok betul betul ape yang dihighlight tu . faham tak ? hehe . okeyy , dea ade blog 1 and blog 12 kan ? so that mean post blog korang ade 2 , itu lah sebabnye post entry keluar dua kali , yeeeeayyyy ! i get it ! so entry neyh sangat berguna okey bagi sesiapa yang bernasib malang macam i kan , hehe :) jum ikot step di bawah macam mana nak caik code itu , ehe :) selamat mencuba !

1. pergi ke edit HTML ==> tick pada expand widget templetes
2. tekan CTRL+F secara serentak .
2. paste code ini pada ruangan find
blog post

3. delete salah satu code tersebut seperti dalam gambar di atas .
4. preview . kalau tiada error boleh lah save .





Monday, November 01, 2010

TOTURIAL BLOG : Kotak Blockqoute





Assalammualaikum


Selamat tengah pagi :) hari ini cikgu nak mengajar anak anak murid cikgu buat kotak blockquote . eh eh ? ape itu kotak blockquote ya ? okey , mari belajar ya murid murid . cewahh , macam cikgu bagai plak kan ? haha . btw , i pun baru terer nak mencantikkan blog . wahh , bangga u all . sebelum neyh i jealous u all tengok blog blog syaitan orang yang cun melecun tuu . hahh ! sekarang i da berjaya menghasil kan blog yang cun melecun . amcam ? lawa tak blog i sekarang ? hehe , pinky gituu *winkwink* please laaaaaaaaaa cakap lawaaaaaaaaaa ! memakan beberapa saat hari untuk i mencipta blog yang sebigitu cantik tauu . pleaseela pujii , HAHAHA . eh eh ? ape u neyh alya ? kembali ke topic asal pleaseeee . apa itu kotak blockquote ? jeng jeng jengg ! saksikan !

*sila click image untuk tumbesaran yang lebih besar dan jelas*

ini lah kotak blockquote itu . cantik tak , cantik tak ? tak teringin nak buat ke hah ? hehe . jum follow step di bawah :)


1. firstly , dashboard u all pegy ke layout ==> Edit HTML ==> tick pada Expand Widget Templates .

2. then tekan ctrol + f pada keyboard anda and cari word .post blockquote { dan highlight semua word bawah ini ( tekan ctrl+c secara serentak untuk copy code )

post blockquote {
margin:1em 20px;


3. cut code di atas dan pastekan semua itu dengan code ini :

.post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
}


4. sekarang kita belajar lebih lanjut ya :)


.post blockquote { background: #FFCC99; ( ini background belakang warna plain , contoh if u all nak background kale pink u all bole tukarkan codenye , u all boleh tukar code dekat sini ada macam macam code utuk change colour yang u all nak )

-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; ( ini adalah border dea , ta payah tukar lebih afdhal )

padding: 6px; ( tak perlu usik )

Border: 1px solid #ff0d62; ( ini border color merah . kalau nak tukar line dia tebal , tambah lagi 1 kepada 5 atau 10px )

solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _

margin:1em 20px;
} ( tak perlu usik )



5. dah settle & save .

6 . pergi new post ==> then tulis lah sesuatu kemudian highlight semua word yang anda mahu bubuh kotak ini kemudian tekan ( yang dalam kotak warna merah tu )

*sila click image untuk tumbesaran yang lebih besar dan jelas*

7 . bagi yang nak background bercorak bunga , bintang and etc etc sila tukarkan code ( tekan ctrl+c secara serentak untuk copy code ) :

background: #FFCC99; ==> background: url(URL IMAGE);

credit to : Liana Lunia , maaf ya babe :)

SELAMAT MENCUBA !


Saturday, July 03, 2010

Tutorial Blog Untuk Bagi Kiut Macam Belog Aku




Assalammualaikum para blogger yang kiut miut. Selamat Malam.

Anda masalah nak mencantikkan belog korang? Taktahu macam mana nak edit belog? Jangan malu jangan segan, sila ikut tutor ni. Kalau ada nak tanya apa apa, tinggalkan aje komen pada ruangan komen box okeh? Nantikan lebih banyak tutor akan datang ye.

Type of post border

Button back to top

Effect salji pada cursor

Print screen

Exchange cursor

Visitor

Double post

Kotak Blockquote

Create your own header


Kalau copy entry ni, jangan lupa buat credit Alya Haduri okey? Sekian.