Nina Shukri

okey assalamualaikum...harini nina nak ajar cara nak buat navigation new style..okey now korang hover navigation kat bawah untuk tgk contoh navigation yg nina nak tunjuk kat korang tu

Live preview :
TITLE TITLE TITLE TITLE
mmm okey? mcm mana? korang berminat? nak guna? guna jelah but jgn lupa credit sudah xD

• copy code kat bawah
• Template Designer : Dashboard > Layout > Add a Gadget > Paste dlm HTML/JavaScript
• Blogskin/ Template Classic : paste code ni dibawah code </style>

<style>
a.linky {
background: #F7F7F7;
border-left:solid 5px #FCEBED;
border-right:solid 5px #FCEBED;
width:100px;
color:#000000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font:10px calibri;
text-align: center;
text-decoration: none;
text-transform: uppercase;
display:inline-block;
margin:5px;
padding:3px;
}
a.linky:hover {
border-radius: 1em 4em 1em 4em;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
color:#fff;
background:#F7F7F7;
}
</style>
<a class="linky " href="LINK">TITLE</a>
<a class="linky " href="LINK">TITLE</a>
<a class="linky " href="LINK">TITLE</a>
<a class="linky " href="LINK">TITLE</a>
<a class="linky " href="LINK">TITLE</a>

okey assalamualaikum...harini nina nak ajar cara nak buat navigation new style..okey now korang hover navigation kat bawah untuk tgk...

Assalamualaikum korang hari ni nina nak share dgn korang navi yg nina guna skunk

Live preview


Tutorial Freebies Entries Affies

• copy code kat bawah
• Template Designer : paste kat Html/Javascript
• Blogskin : paste kat atas code  </style> 

<style>
a.navi {
border:1px solid #ebebeb;
text-transform:uppercase;
background: #fff;
text-decoration:none;
color: #666; padding: 6px;
font: 8px yow;
margin-left: 5px; margin-right: 5px;
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
text-decoration:none;
box-shadow:inset 0px 0px 0px #111,
inset 0px 0px 0px #111; display: inline-block;
width: 65px;
}
a.navi:hover {
-webkit-transition-duration: 0.5s;
box-shadow:inset 0px 14px 0px #111,
inset 0px -14px 0px #111; color: #fff;
}
@font-face { font-family:yow !important;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf') !important;
}
</style>
<center>
<a class="navi" href="/">Tutorial</a>
<a class="navi" href="/">Freebies</a>
<a class="navi" href="/">Entries</a>
<a class="navi" href="/">Affies</a>
</center>

Assalamualaikum korang hari ni nina nak share dgn korang navi yg nina guna skunk Live preview Tutorial Freebies Entries Affi...

My code don't re-post





Assalamualaikum....hari ni nina nak ajar korang nak buat navigation macam kat bawah....sebenarnya  code ni nina dah lama buat...tapi belum ada masa nak post...tapi hari ni nina post sbb dah ada masa terluang ..and remember one thing ni nina punya code ,so don't ever re-tuto...ceh...kerek pulak...ok..jom start..

Demo:

Tutorial Freebies Entries Affies

• copy code kat bawah
• Template Designer : Dashboard > Layout > Add a Gadget > Paste dlm HTML/JavaScript
• Blogskin/ Template Classic : paste code ni dibawah code </style>

<style>
a.mine{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
display:inline-block;
text-align:center;
background: pink;
color:#fff;
width:75px;
padding:6px;
overflow: hidden;
}
a.mine:hover{
color: #ffffff;
background:black;
-webkit-transform: scale( 0.7) rotate( 8deg);
-moz-transform: scale( 0.7) rotate( 8deg);
}
</style>
<a class="mine" href="http://www.blogger.com/LINK">Tutorial</a>
<a class="mine" href="http://www.blogger.com/LINK">Freebies</a>
<a class="mine" href="http://www.blogger.com/LINK">Entries</a>
<a class="mine" href="http://www.blogger.com/LINK">Affies</a>

My code don't re-post Assalamualaikum....hari ni nina nak ajar korang nak buat navigation macam kat bawah....sebenarnya  code ...

My own code don't re-post



Assalamualaikum and hye...ok sekarang nina ada buat navigation...korang nampak gambar kat bawah kan? kalau korang nak tengok click preview...mmmm.... kalau korang nak guna code ni mesti creadit nama nina...ok

(Live Preview)

Template Designer : paste kat Html/Javascript
Blogskin : paste kat bawah code </style>

<style>a.nina{
box-shadow: inset 9px 0 0px 0 #FFD7E6;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:1px;
display:inline-block;
text-align:center;
position: center;
color:#B1B1B1;
width:50px;
border:1px dashed #000000;
border-left:20px dashed #000000;
width: 100px;
overflow: hidden;
}
a.nina:hover {
box-shadow: inset 850px 0 0px 0 #FFFFFF;
color: #B1B1B1;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}</style>
<a class="nina" href="http://www.blogger.com/LINK">TITLE</a>
<a class="nina" href="http://www.blogger.com/LINK">TITLE</a>
<a class="nina" href="http://www.blogger.com/LINK">TITLE</a>
<a class="nina" href="http://www.blogger.com/LINK">TITLE</a>

My own code don't re-post Assalamualaikum and hye...ok sekarang nina ada buat navigation...korang nampak gambar kat bawah kan? kal...