Tutorial button navigation bar terapung

12:50 PM



Hye korang, memandangkan dah lama sangat tutorial huda tu tak di updated so hari ni huda nak share satu tutorial dengan korang semua... ^_^ <-- keep smiling!


creadit google


Tutorial button navigation terapung <-- ha nilah tutorial yang huda nak share dengan korang semua... ^_^




Ok, baca step di bawah ini dengan teliti ^_^


1. Dashboard > Design/Layout > Add A Gadget > HTML/JAVA SCRIPT


2. Copy code di bawah ini

<a href="URL BLOG KORANG" target=_blank><div style="height: 50px; width: 50px; position: absolute; top: 0px; left: 0px;"> </div></a>
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:245px; left:-2px;'>

<a class='linkopacity' href='URL PAGE 1' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='homepage'><img border="0" src="URL IMAGE" /></a><br />
<a class='linkopacity' href='URL PAGE 2' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='aboutthisblog'><img border="0" src="URL IMAGE" /></a><br />
<a class='linkopacity' href='URL PAGE 3' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='tutorialtips'><img border="0" src="URL IMAGE" /></a><br />
<a class='linkopacity' href='URL PAGE 4' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='originalkarya'><img border="0" src="URL IMAGE" /></a><br />
</div>

Warna purple : gantikan dengan URL/link blog korang.
Warna merah / Warna oren : boleh ubah kedudukan top/left mengikut kesesuaian dalam blog korang.
Warna Pink : Gantikan dengan URL/LINK PAGE korang (Tutorial/Stuff/Owner/About and etc)
Warna biru : Gantikan dengan URL IMAGE korang. Boleh CLICK SINI untuk ambil freebies(image untuk navigation)



3. Paste dalam box HTML/JAVA SCRIPT korang.


4. Save dan lihat hasilnya. ^_^


Nak freebies tak? 
FREEBIES NAVIGATION BAR untuk korang ^_^

Selamat mencuba dan semoga berjaya ^_^

You Might Also Like

7 comment di sini.

  1. jemput join sini untuk dapatkan hadiah menarik :

    http://musyuxmusyux95.blogspot.com/2012/08/i-love-blogging-giveaway-by-wawa.html

    ReplyDelete
  2. Assalamulaikum! ;) Thanks for the tutorial! ;D

    ReplyDelete
  3. hai huda tuto akak menjadi :D TQ

    ReplyDelete
  4. tq.. kak huda banyak bantu sy dlm blog huhu almaklum la baru lg dlm dunia blog.. jemput singgah jee
    sayhaaalisyasaifullah.blogspot.com

    ReplyDelete
    Replies
    1. welcome dek.Alhamdulillah, akak bantu mana yang bole je hihi =D
      good luck

      Delete