Friday, 19 July 2013

Status Box vers 1

Assalamu'alaikum~
Thanks for Maya :) Ini tutorial dapet dari blog dia~
Preview :
Classic Template :
  • Copy kode yang Salsa sediakan, lalu paste-kan di kolom Html/JavaScript tadi.
Blogskin :
  • Dashboard > Template > Search kode </style>
  • Copy kode yang Salsa sediakan, lalu paste-kan dibawah kode </style>.
Codes :
<style>
#line{
position:fixed;
right:50px;
top:0px;
border-left:10px solid #ffd2e0;
border-right:10px solid #ffd2e0;
width:70px;
height:50px;}

.statioo {
border:1px solid #ffd2e0;
font-family:  'GFS Neohellenic', sans-serif;
font-size:13px;
letter-spacing:2px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;color:#000;
width:150px;
margin-left:-38px;
margin-top:40px;
text-align:center;
padding:5px;
background:url(Url Background);
}
#notii {
border:1px solid #ffd2e0;
width:150px;
font-family:  'GFS Neohellenic', sans-serif;
font-size:13px;margin-top:10px;
margin-left:-38px;
padding:4px;
height:%0px;
text-align:left;
background:url(Url Background);
color:#444;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
</style>
<div id="line">
<div class="statioo">
STATUS</div>
<div id="notii">
YOUR TEXT</div>
</div></div>
    Adjust code :
- Merah : posisi status box.
-  Hijau : border status box, bisa diganti dengan (dashed, double, dotted, etc.)
- Oranye : kode warna border.
- Biru : font status box.
- Aqua : Url background.
- Ungu : kode warna font status box.
- Pink : Judul status box dan Isi status box.

4 comments:

 
Copyright © 2013-2017 By Anugerah Mullia Ulfa Salsabella. All Rights Reserved.