Cara pasang Floating Menu Jquery di blogspot

Floating Menu Jquery seperti yang boleh anda lihat di net.tutsplus.com, (Demo, sila klik)  boleh di pasang pada template blogspot. Tutorialnya juga ada di tunjukkan di sini.

Kalau di lihat dari segi fungsi, mungkin efek ini sedikit sebanyak membantu admin ataupun pengungjung yang melawat blog dan juga. Floating menu ini akan mengikut arah page scroll, sama ada ke bawah ataupun ke atas. Pada bahagian Floating Menu tersebut, anda boleh meletakkan link-link yang berkaitan ataupun di jadikan sebagai Control Panel.

Untuk melihat contoh efek Floating Menu di pasang pada blogspot, sila klik di sini.

Untuk memasang Floating Menu Jquery, sila ikut beberapa langkah dibawah.

p/s: Sila backup script template anda terlebih dahulu.

Langkah 1

Log in blog=> Dashboard=> Layout=> Edit HTML.

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl dan F secara serentak. Bar Find akan muncul. Seterusnya, taip atau paste kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter.

Langkah 3

Salin kod biru di bawah dan paste sebelum atau diatas kod ]]></b:skin>

#floatMenu {

font:11px trebuchet MS;

text-align: left;

position:absolute;

top:150px;

left:55%;

margin-left:235px;

width:200px;

}

#floatMenu ul {

margin-bottom:20px;

}

#floatMenu ul li a {

display:block;

border:1px solid #999;

background-color:#222;

border-left:6px solid #999;

text-decoration:none

color:#ccc;

padding:5px 5px 5px 25px;

}

#floatMenu ul li a:hover {

color:#fff;

background-color:#333333;

}

#floatMenu ul.menu1 li a:hover {

border-color:#09f;

}

#floatMenu ul.menu2 li a:hover {

border-color:#9f0;

}

#floatMenu ul.menu3 li a:hover {

border-color:#f09;

}

Langkah 4

Sekali lagi, pada ruang Find, taip atau paste kod </head> . Seterusnya tekan Enter

Langkah 5

salin kod merah dibawah dan paste diatas atau sebelum kod </head>

<script language='javascript' src='http://sites.google.com/site/defaultjssite/jquery_mini.js'/>

<script language='javascript' src='http://sites.google.com/site/defaultjssite/jquery.dimensions.js'/>

<script language='javascript'>

var name = &quot;#floatMenu&quot;;

var menuYloc = null;

$(document).ready(function(){

menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))

$(window).scroll(function () {

offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;

$(name).animate({top:offset},{duration:500,queue:false});

});

});

</script>

Seterusnya klik Preview, jika tiada mesej error terpapar, klik saja Save.

Langkah 6

Klik pada Layout => Add A Gadget => HTML/Javascript. Seterusnya edit kod di bawah dan kemudian paste pada Content Add A Gadget.( Seeloknya bahagian sidebar)

<div id="floatMenu">

<ul class="menu1">

<li><a href="#" onclick="return false;"> Home </a></li>

</ul>

<ul class="menu2">

<li><a href="#" onclick="return false;"> Table of content </a></li>

<li><a href="#" onclick="return false;"> Exam </a></li>

<li><a href="#" onclick="return false;"> Wiki </a></li>

</ul>

<ul class="menu3">

<li><a href="#" onclick="return false;"> Technical support </a></li>

</ul>

</div>

p/s: Gantikan kod yang di bold hitam dengan Menu anda dan gantikan # dengan URL.

Akhir sekali klik Save.