8.12.12

Tutorial : Floating Navigation

Author : Nabila Medan Time : 12/08/2012 08:30:00 PM Total Comment : 15 Label :

اَلسَّلَامُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَا تُهُ Dan Selamat Malam

Preview
Live Preview Here

Okay pertama sekali nabila nak credit dari Afiqah sebab nabila ambil code sebenar dari dia, tapi nabila ubah code dia jadi macam yang kat atas tu. Dan jangan risau nabila dah minta izin kat facebook dia, dan dia bagi. Thank awak! Code yang nabila ubah tu, nabila ubah sendiri.. Tapi nabila ada memantau ada blogger yang dah keluarkan tutorial ni lebih awal dari nabila. Mungkin dia ambil code dari customer nabila *mungkin*

Template Designer
1.Dashboard > Layout > Add a Gadget > HTML/Java Script
2.Copy code bawah ni dan paste dekat HTML/Java Script

Blogskin
1.Dashboard > Template > Search code </style>
2.Copy code bawah ni dan paste dekat bawah code </style>
<style>
a.navee, a.navee2, a.navee3, a.navee4{
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;background: #fff;
color:#000;font-family:arial;
text-transform:uppercase;font-size:10px;
width:40px;height:40px;
border:5px solid #FFD685;padding:5px;
border-radius:1000px;}

a.navee:hover, a.navee2:hover, a.navee3:hover, a.navee4:hover{
text-align:center;color: #fff;font-size:10px;
border:5px solid #fff;background:  #FFD685;
-moz-box-shadow: 0 0 5px 5px #eee;
-webkit-box-shadow: 0 0 5px 5px #eee;
box-shadow: 0 0 5px 5px #eee;
-webkit-transform: scale( -1.0) rotate( 540deg);
-moz-transform: scale( -1.0) rotate( 540deg);}

a.navee , a.navee3 {border:5px solid #BE81F7;}
a.navee2 , a.navee4 {border:5px solid #819FF7;}
a.navee:hover , a.navee3:hover {background: #819FF7;}
a.navee2:hover , a.navee4:hover {background: #BE81F7;}

</style><div style="left: 4px; position: fixed; top: 150px;">
<a class="navee" href="URL ANDA"><br />Home</a>
<a class="navee2" href="URL ANDA"><br />Owner</a>
<a class="navee3" href="URL ANDA"><br />Tutor</a>
<a class="navee4" href="URL ANDA"><br />Free</a></div>
*Jangan lupa tekan save!*

Yang warna merah tu korang tukarlah ikut kesesuaian.

15 comments

Saturday, December 08, 2012 8:48:00 PM Delete! [Reply Comment]

thanks! :D

Saturday, December 08, 2012 8:53:00 PM Delete! [Reply Comment]

Thanks kak nabila. Dah jadi :D

Saturday, December 08, 2012 9:07:00 PM Delete! [Reply Comment]

PANDAILA DIK NI WAT TUTO ..

Saturday, December 08, 2012 9:23:00 PM Delete! [Reply Comment]

nice tuto, thanks :)

Saturday, December 08, 2012 11:46:00 PM Delete! [Reply Comment]

nice tutorial.

Sunday, December 09, 2012 1:22:00 AM Delete! [Reply Comment]

saya dah buat..thanks nabila..cantik sangat

Wednesday, December 19, 2012 10:15:00 PM Delete! [Reply Comment]

thanks. dah lame duk cari :)

Friday, December 28, 2012 4:12:00 PM Delete! [Reply Comment]

nabila, ade x tutorial yg boleh buat cenggini tapi dalam blogskin?

Sunday, December 30, 2012 11:07:00 PM Delete! [Reply Comment]

dah jadi. thanks :D

Wednesday, January 02, 2013 4:05:00 PM Delete! [Reply Comment]

thanks for the tuto :)

Wednesday, January 09, 2013 8:56:00 PM Delete! [Reply Comment]

Thanks for the tutorial :)

Saturday, February 02, 2013 10:21:00 PM Delete! [Reply Comment]

dah jadi ! thanks sangat2 =D

Thursday, March 07, 2013 11:22:00 PM Delete! [Reply Comment]

Menjadi. Nice :D

Monday, March 18, 2013 6:10:00 PM Delete! [Reply Comment]

kita amek yea..tanx awk :)

Saturday, November 16, 2013 8:35:00 AM Delete! [Reply Comment]

Thanks for the tuto :) Menjadi :D

Post a Comment
Related Posts Plugin for WordPress, Blogger...