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]:

taehygsbby said...

thanks :) menjadi !

atiqahjaidin said...

@nurhamiza shuhada : U're welcome :)

Zahira zuraidi said...

Thanks akak :)

Unknown said...

thanks !! jadi . boleh share tak ?

atiqahjaidin said...

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

Unknown said...

okay okay ^_^ thanks kak :)

Alia Syahira said...

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

atiqahjaidin said...

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

Unknown said...

mnjadi ! thanks :)

Hidayah Suhailee said...

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

atiqahjaidin said...

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

cнσcσℓαтε_ℓαттε96 said...

thanx watkan utk sya..btw,mnjadilh..

atiqahjaidin 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 . :"

atiqahjaidin said...

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

A'isyah Sakinah said...

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

atiqahjaidin said...

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

anshmnf said...

Dah jadi.Terima kasih :)

Nblh said...

Thanks for this tuto ! :D

Hanis said...

saya pakai tuto awk yee. nice menjadi :*

Unknown said...

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

Aisyah said...

Akak . saye share . da credit .