Monday 22 April 2013

Tutorial : Tutobies Section ( Designer )




Assalamualaikum . Nak buat macam tutobies section aimi tak ? Contoh macam bawah ni 

Live Preview

1. Dashboard > Edit HTML (page)
2. Copy code kat bawah ni 

<style>
.lulu{
background:url(BACKGROUND);
color:#AAAAAA;
-webkit-transition: 1.0s; 
-moz-transition: 1.0s;letter-spacing:5px;
margin-bottom:5px;
margin:15px;
width:500px;
font-family:'arial';
font-size:12px;
line-height:8px;
text-align:center;
padding-right:0px;
}

.eunji {
cursor:pointer;
display:inline-block;
text-align:left;
width:350px;
color:#888;
padding:1px;
background:url(FAVICON);
color:#888;
background-repeat:no-repeat;
background-size:14px;
padding-left:15px;
line-height:18px;
}

.eunji:hover{
background:url(FAVICON);
background-repeat:no-repeat;
background-size:14px; 
padding-left:15px;
line-height:18px;
color:#EAABFE
}

</style>
<div class="lulu">TITLE</div>
<a class="eunji" href="LINK">TITLE</a>
<a class="eunji" href="LINK">TITLE</a>
<a class="eunji" href="LINK">TITLE</a>

3. Paste dekat bahagian HTML
4. Preview & save .

Pink : background
Biru : favicon
Hijau : width {lebar}
Oren : tajuk
Ungu : link

Credit to : NAJ

0 comments: