Welcome here! Please leave your comment and follow my blog. Use CTRL+C to copy (no right click allowed)
This blog is full of tutorials. Please use them, by clicking the "STUFF" page above^^ Thanks for your visit!!
I'm Gifta, I can't online everyday /^-^\/>

Thank you for your visit, please use my tutorials...!
August 05, 2016

Saturday, April 1, 2017

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!

No comments

Post a Comment