Tutorial : Slide status box

  Assalamualaikum & Annyeong Haseyo! Hari ni kali ke-2 Nana buat tutorial... Ada orang yang sama nama dengan Nana, iaitu cik Nana tanya macam mana nak buat slide status box macam ni :

Yang kat tepi kiri blog Nana tu... Nak buat juga? Jom ikut step-step mudah ni :


Step 1 :
-Template Classic / Blogskin-
Pergi Dashboard > Template > edit Html

-Template Designer-
 Mula-mula, korang pergi Dashboard > Layout > Add Gadget > HTML/JavaScript

Step 2:
-Template Classic / Blogskin-
Cari kod </style> , then copy kod kat bawah & paste kat bawah kod </style> .

-Template Designer-
Copy kod kat bawah & paste kat Html/javaScript.

<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(URL BACKGROUND STATUS BOX KORANG);
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 KORANG</div></div></center>

Biru - Url background status box korang nanti
Merah - Tulis la apa-apa (status korang ler)

Dah siap? Save!


Tag: Tutorial