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

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