Status Box Style (1)

Met Sabtu! Hari ini Gifta mau bagi-bagi kode untuk status box style. Apa itu status box style? Itu lho, yang seperti punya Gifta! Ga paham? Cekidot, lihat gambarnya setelah read more!

STYLE KALI INI SANGAT UNIK

Hasilnya akan seperti ini:

Cek langkahnya!

Step one:

Blogger >> Layout / Tata Letak >> Add a Gadget >> HTML/JavaScript

Step two:

Copy this code:

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

Bisa dicoba dulu dan diedit di html editor ini

Step three:

Save!

Oke, selesai! Gimana, bagus kan? Itu hasil utak-atik Gifta sendiri.

DON'T CLAIM IT AS YOURSS!