Tutorial : Slide Status Box (All Templates)


Assalamualaikum and annyeonghaseyo. Hai hai. Memandangkan ramai yg tnya tieqa mcm mana nk buat slide status mcm dekat blog ni. Tieqa malas nk printscreen. So,sila lihat ke sbelah kiri. Then nmpak tak box kecil yg ada huruf 'Y' tu?

Template Designer

1. Dashboard > Layout > Add Gadget > HTML/JavaScript

Template Classic

1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code dekat bawah ni
<style>
.y {
border-radius: 0px 15px 15px 0px;
width:10px;
padding:10px;
height:25px;
margin-top:30px;
margin-left:255px;
background: #faafbe;
color:white;
font-size:12px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus {
position:fixed;
border:4px double #000000;
width:250px;
left:-265px;
top:50px;
height:100px;
padding:4px;
text-align:left;
font-size:8pt;
font-family:trebuchet ms;
background-color:white;
background-image:url(URLIMG);
background-repeat:no-repeat;
background-position:right;
color:#333333;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
#kotakstatus:hover {
left:1px;
}
</style>
<center><div id="kotakstatus"><div class="y">
Y</div>
<div style="margin-top: -80px;">
STATUS AWAK</div></div></center>
4. Utk template designer paste dekat HTML/JavaScript
5. Utk template classic paste di bawah code </style>
6. Preview & save.

Biru : URL image
Oren : status

Credit : FatinHazwani & Afiqah

22 comment [s]:

nurhamiza shuhada said...

thanks :) menjadi !

Nurul AtiQah said...

@nurhamiza shuhada : U're welcome :)

Siti Nur Zahira said...

Thanks akak :)

Steira Tisdale said...

thanks !! jadi . boleh share tak ?

Nurul AtiQah said...

@Siti Nur Zahira: Welcome, dik :)
@Steira Tisdale: Welcome..boleh, tp letak credit ye~

Steira Tisdale said...

okay okay ^_^ thanks kak :)

alia syahira said...

akak..sy nak share tuto nie..nnt sy creditkn..^^

Nurul AtiQah said...

@Steira Tisdale : You're welcome :)
@alia syahira : Ok, silakan ^^

Are fieqarh said...

mnjadi ! thanks :)

yaya c domo said...

menjadi.. boleh x kalau tulisan y kat kotak tu tukar dengan prkataan??

Nurul AtiQah said...

@Are fieqarh: U're welcome :)
@yaya c domo: Boleh..tukar dekat code ni < div class=" y " >Y< / div>

Juliana lia said...

thanx watkan utk sya..btw,mnjadilh..

Nurul AtiQah said...

@Juliana lia : Welcome..hehe :)

Naailah said...

Kak Atiqah, macam mana nak buat IMG tu bagi full satu kotak eh ? Saya punya tengah tengah ja . tak jadi macam akak punya pun . Background tu full satu kotak . :"

Nurul AtiQah said...

@Naailah : Buang code ni
background-repeat:no-repeat;

Aisyah Yusra said...

Kak Atiqah, boleh dak nak tukaq warna kotak yanga da huruf Y tuh ? Thankx :)

Nurul AtiQah said...

@Aisyah Yusra : Cari code ni
background: #faafbe;

Nurul Anisah said...

Dah jadi.Terima kasih :)

Naaaaafa said...

Thanks for this tuto ! :D

Mia said...

saya pakai tuto awk yee. nice menjadi :*

Luhan Sehun said...

akak,sy nak share tuto nih,sbb ade org request..sy akan creditkan akak :)

NuraisYah said...

Akak . saye share . da credit .