н ι α т υ ѕ —

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 !; November 28, 2012 at 5:27 PM [REPLY]
atiqahjaidin said...: @nurhamiza shuhada : U're welcome :); November 28, 2012 at 5:38 PM [REPLY]
Zahira zuraidi said...: Thanks akak :); November 28, 2012 at 7:48 PM [REPLY]
Unknown said...: thanks !! jadi . boleh share tak ?; November 28, 2012 at 10:52 PM [REPLY]
atiqahjaidin said...: @Siti Nur Zahira: Welcome, dik :)
@Steira Tisdale: Welcome..boleh, tp letak credit ye~; November 28, 2012 at 10:58 PM [REPLY]
Unknown said...: okay okay ^_^ thanks kak :); November 28, 2012 at 11:14 PM [REPLY]
Alia Syahira said...: akak..sy nak share tuto nie..nnt sy creditkn..^^; November 29, 2012 at 3:05 AM [REPLY]
atiqahjaidin said...: @Steira Tisdale : You're welcome :)
@alia syahira : Ok, silakan ^^; November 29, 2012 at 7:44 AM [REPLY]
Unknown said...: mnjadi ! thanks :); November 30, 2012 at 6:11 PM [REPLY]
Hidayah Suhailee said...: menjadi.. boleh x kalau tulisan y kat kotak tu tukar dengan prkataan??; December 7, 2012 at 12:47 PM [REPLY]
atiqahjaidin said...: @Are fieqarh: U're welcome :)
@yaya c domo: Boleh..tukar dekat code ni < div class=" y " >Y< / div>; December 7, 2012 at 12:54 PM [REPLY]
cнσcσℓαтε_ℓαттε96 said...: thanx watkan utk sya..btw,mnjadilh..; December 7, 2012 at 4:51 PM [REPLY]
atiqahjaidin said...: @Juliana lia : Welcome..hehe :); December 7, 2012 at 9:08 PM [REPLY]
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 . :"; December 8, 2012 at 12:07 AM [REPLY]
atiqahjaidin said...: @Naailah : Buang code ni
background-repeat:no-repeat;; December 8, 2012 at 8:52 AM [REPLY]
A'isyah Sakinah said...: Kak Atiqah, boleh dak nak tukaq warna kotak yanga da huruf Y tuh ? Thankx :); December 9, 2012 at 12:44 AM [REPLY]
atiqahjaidin said...: @Aisyah Yusra : Cari code ni
background: #faafbe;; December 9, 2012 at 6:54 PM [REPLY]
anshmnf said...: Dah jadi.Terima kasih :); December 26, 2012 at 11:07 PM [REPLY]
Nblh said...: Thanks for this tuto ! :D; December 31, 2012 at 12:04 AM [REPLY]
Hanis said...: saya pakai tuto awk yee. nice menjadi :*; February 5, 2013 at 5:46 PM [REPLY]
Unknown said...: akak,sy nak share tuto nih,sbb ade org request..sy akan creditkan akak :); February 21, 2013 at 10:18 PM [REPLY]
Aisyah said...: Akak . saye share . da credit .; March 6, 2013 at 7:15 PM [REPLY]