|
Tutorial Navigation Box (Like me)
Assalamualaikum and annyeonghaseyo. Good morning ! Pagi ni nani nak buat tutorial yg pertama nani.
No creadit to kak tieqa . Ni nani just try , Kalau menjadi bgitau ya ! Memang menjadi punn Nani dah try .
And This Is my first code .Okay Nak cubaa ? Let's Start #gediknya
|Contoh|
1. coppy code ni
<style type="text/css">
.boxer {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}
.boxer:hover {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.box {
width: 250px;
background: #d8d8d8;
color: #5E5E5E;
padding: 0px;
overflow: hidden;
height: 130px;
}
.close {
text-transform: lowercase;
top: 130px;
font-size:15px;
position: absolute;
background: #FFAEBC;
color: #777;
padding: 5px;
width:150px;
font-family:arial;
text-align:center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
left: 50px;
}
.close e, .boxer:hover f {
display: inline;
opacity:.8;
}
.close f, .boxer:hover e {
display: none;
opacity:.8;
}
</style>
<div class="boxer"><div class="close"> <e>Halo</e> <f>Credit!</f> </div>
<div class="box"><table><td><td>
<center>AYAT KORANG<center>
</center></center></td></td></table></div></div>
2. Layout > Html/JavaScript > Paste code tadii . Tapi paste di tempat lain .
Macamni .
|contoh|
3. Bagi yg nak buat creadit , coppy code ni .
<style type="text/css">
.boxer {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}
.boxer:hover {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}
.box {
width: 250px;
background: #d8d8d8;
color: #5E5E5E;
padding: 0px;
overflow: hidden;
height: 130px;
}
.close {
text-transform: lowercase;
top: 130px;
font-size:15px;
position: absolute;
background: #FFAEBC;
color: #777;
padding: 5px;
width:150px;
font-family:arial;
text-align:center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
left: 50px;
}
.close e, .boxer:hover f {
display: inline;
opacity:.8;
}
.close f, .boxer:hover e {
display: none;
opacity:.8;
}
</style>
<div class="boxer"><div class="close"> <e>Halo</e> <f>Credit!</f> </div>
<div class="box"><table><td><td>
<center>Ayat Korang <a href="Link"> Nama Orang</a>Ayat Korang<center>
</center></center></td></td></table></div></div>
4.Paste kan Di sini jugak
|contoh|
5. Save .
Kuning : Warna yg korang nak * boleh cari kat sini
Ungu cair : background . #same dengan warna
Biru cair : Ayat yg korang nak letak
Hijau : Ayat korang nak creadit kan Example : templete creadit by ....
Merah : Link creadit example : Templete creadit by khairah .
Ungu Pekat : Nama org yg korang creadit kan tuu.
Pink : Ayat korang Example : Templete creadit by .... Thanks for come to my blog .
|
