HOME OWNER TUTORIALS INFO & TIPS EXCHANGE CONTACT ME

Hide Navigation

Assalamualaikum dear readers..


Before that, credit to : Nabila Medan

1. Dashboard -> Layout -> Add A Gadget -> HTML/Javascript

2. Copy kod di bawah :

<style>
.hello{
width: 500px;
background: url(http://i.imgur.com/3xcNH.png);
top:0px;
left:-510px;
position: fixed;
top:100px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
border: #e69fba 3px solid;
border-right: #e69fba 40px solid;
border-top-right-radius: 200px;
border-bottom-right-radius: 200px;
-webkit-transition:All 0.8s ease;
-moz-transition:All 0.8s ease;
-o-transition:All 0.8s ease;
}
.hello:hover{
width: 500px;
left:-0px;
-webkit-transition:All 0.8s ease;
-moz-transition:All 0.8s ease;
-o-transition:All 0.8s ease;
}
a.bye{
background:#e69fba ;
left:220px;
text-decoration:none;
color:#fff;
padding:5px;
font:12px arial;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;
width:60px;
-webkit-transition:All 0.8s ease;
-moz-transition:All 0.8s ease;
-o-transition:All 0.8s ease;
}
a.bye:hover{background:#000;
color:#fff;
-webkit-transition:All 0.8s ease;
-moz-transition:All 0.8s ease;
-o-transition:All 0.8s ease;
}
</style>
<div class="hello">
<a class="bye" href="YOUR LINK">TITLE</a>
<a class="bye" href="YOUR LINK">TITLE</a>
<a class="bye" href="YOUR LINK">TITLE</a>
<a class="bye" href="YOUR LINK">TITLE</a>
<a class="bye" href="YOUR LINK">TITLE</a>
</div>

Merah : Ubah mengikut kehendak korang
Biru : Link korang
Pink : Tajuk kepada link korang

3. Paste di bahagian HTML/Javascript

4. Preview & Save

2 comments:

Queen Sophia said...

mcm mna nak wat live preview mcm awk tu?

Effa Nadia said...

kene ada blog yg dikhaskan utk live preview then awk delete semua widget trmasuk transparentkan background entri awk..