Tutorial : Kotak Status Macam Ana

Ana Myhusna | 15:27 | 5Comments |

Hai semua! Okay.. Kalini, Ana nak buat tutorial status box. Ataupun dalam bahasa melayu kotak status. Tutorial ni diminta oleh adik Aisya Maisara.


Susah nak screen capture. (Tak pandai sgt pakai windows 7! XD) Amboii.. Malas nak search ye.. Hehe.. Okay-ii takpe.. Nak buat status box ni mudah je.. Tak susah pun.. Tapi, rasanya adik Aisya Maisara ni pakai blogskin. Okay-ii.. Takpe.. Ana pun pakai blogskin jugak dulu.. Tak lupa pun cara nak pakai blogskin nih. Ehehe..

Untuk pengguna blogskin :
1. Dashboard - Template
2. Search code di bawah
</style>
3. Then, copy code yang Ana bagi ni dan pastekan bawah code yang korang cari tadi.
<style>
@font-face {
font-family: "tinytots";
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
#line{position:fixed;
left:80px;
top:0px;
border-left:10px solid #CCCCCC;
border-right:10px solid #CCCCCC;
width:70px;
height:50px;}
.statioo {
font-family:tinytots;
font-size:8px;
letter-spacing:2px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;color:#000;
width:150px;
margin-left:-38px;
margin-top:40px;
text-align:center;
padding:5px;background: #FFFFFF;}
#notii {
border:1px dashed #CCCCCC;
width:150px;
font-family:tinytots;
font-size:8px;margin-top:10px;
margin-left:-38px;
padding:4px;
height:30px;
text-align:left;
background:#FFFFFF;
color:#444;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
</style>
<div id="line">
<div class="statioo">
▼ ƧƬΔƬƲƧ ▼
<div id="notii">
Your status</div></div>
4. Siap! Bagi pengguna template designer just copy code kat atas ni dan pastekan dekat HTML/Javascript.

Mudah je kan? Okay.. Assalamulaikum

5 comments:

Afiqah Adzan said...

Nice tutorial :)

Aisya Maisara said...

Thanks..

Nur Umairah Safura said...

uwaaa asl x jd?

vista alnia said...

assalamualikum ka ana..
terus kalau kita mau buat status nya, itu dimana ya ka'?
mohon balasannya...

Ana Myhusna said...

@vista alnia Walaikumsalam.. Kamu bisa update di "Your status" itu.. :)