Sunday, April 30, 2017

Status Box Style (2)

 Hay guys! Gifta's comeback! Hari ini Gifta mau post tutorial tentang status box! Ini udah yang kedua^^ Kalau mau tahu yang pertama klik ini. Yawdah, langsung aja ya!

PLEASE GIVE CREDIT IF YOU WANT TO REPOST / RETUTORIAL
IT'S OWNMADE, DON'T CLAIM IT AS YOURSSS 

Step one:

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

Step two:

Copy this code:
<style type="text/css">
@font-face {
font-family:happy monkey;
src: url('../fonts/happy-monkey-v5-latin-regular.eot');
}
.back {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 100px;
top: 0px;
font-family:happy monkey;
font-size:15px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
.back:hover {
margin-top: 0px;
}
.hove {
top: 130px;
font-size:15px;
position: absolute;
background: #FFA9B8;
color: #000;
padding-top: 5px;
padding-bottom: 5px;
width:250px;
text-align:center;
font-family:happy monkey;
font-size:15px;
border-radius: 0px 0px 100px 100px;
-moz-border-radius: 0px 0px 100px 100px;
-webkit-border-radius: 0px 0px 100px 100px;
}
.hove  f, .back:hover d {
display: inline;
}
.hove  d, .back:hover f {
display: none;
}
.txtbox {
width: 250px;
background: #FFD8ED;
color: #000;
padding: 0px;
overflow: hidden;
height: 130px;
text-align:center;
vertical-align: middle;
display: table;
display: table-cell;
font-family:happy monkey;
font-size:15px;
border:2px solid #FFA9B8;
}
</style>
<div class="back"><div class="hove"> <f>Tutorial by</f> <d>www.giftasblog.co.vu</d> </div>
<div class="txtbox">
Put code, CBOX, status, profile, or anything here...
</div></div>
Bisa dicoba dulu dan diedit di html editor ini

Step three:

Save!

Gampang kan? Kalau mau lihat hasilnya, cek html editor aja^^ (link ada di step two)

There are 2 comments.
Please post another comment..