How To Add Status Box

Halo semua! Hari ini Nadya mau ngepost tutorial tentang status box. Jadi, setelah Nadya preview, ternyata status box ini itu kaya nge-float diatas blog gitu (?) terus nanti pas kita tarik, muncul status kita. Mau? Read more!

[credit belongs to: kak Angel, kak Gifta]

ini preview nya ya! [pict creds: kak Gifta] 

1. Buka blogger, jangan lupa login (kalau belum)

2. Pilih menu Tata Letak

3. Lalu klik Tambahkan Gadget

4. Pilih yang HTML/Javascript yaa!

5. Copas kode di bawah

<style>

#stat {

position:fixed;

border:2px solid #E849FF;

width:150px;

top:-126px;

left:5px;

height:auto;

padding:6px;

background:#FFD5E7;

color:#000;

transition:all 1s;

}

#stat:hover {

top:-2px;

}

.status {

position:fixed;

border:2px solid #E849FF;

width:160px;

margin-top:117px;

left:5px;

height:auto;

padding:1px;

background:#FFD5E7;

color:#000;

border-bottom-left-radius:15px;

border-bottom-right-radius:15px;

text-align:center;

font:20px Short Stack;

}

.text {

padding:12px;

height:auto;

margin-top:0px;

box-shadow:1px 1px 10px 5px #FF006C inset;

font:12px Short Stack;

color:#000;

background-color:#FFFFFF;

width:auto;

}

.date{

float:center;

margin-top:7px;

border-radius:5px;

font:12px Short Stack;

text-align:center;

padding:10px;

background-color:#FFF;

width:auto;

box-shadow:1px 1px 10px 5px #FF006C inset;

}

</style>

<center>

<div id="stat">

<div class="status">STATUS</div>

<div class="text">TEXT KAMU</div>

<div class="date">TANGGAL UPDATE STATUS</div></div></center>

6. Edit- edit dulu kodenya disini. Sudah? Save!