• Natlie Imbruglia

    Doesn`t she look very cool?

  • Thousands of Years

    Earth has lived thousands of years...

  • Fruits

    Fruits are vital for health and their nutrients...

  • The Lonely Road

    The Lonely Road reminds Me with You...

  • Twister

    Here are some twisting graphics for you...

Friday, February 5, 2010

Cara pasang Auto hide link box

Widget auto hide link box seperti yang boleh anda lihat pada side bar ini(sila klik) adalah kotak link yang akan di view secara auto apabila kursor mouse di letakkan atas teks Links. Kotak tersebut memaparkan link-link mengikut kategori yang di masukkan secara manual.

Auto hide link box ini dapat menjimatkan ruang pada sidebar blog.

Untuk memasang widget link box ini, sila ikut beberapa langkah di bawah.

p/s: Sila Save script template terlebih dahulu.

Langkah 1

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

Langkah 2

Dengan menggunakan keyboard, tekan kekunci Ctrl + F dan taip atau paste kod </head> di ruang Find. Seterusnya tekan kekunci Enter.


Langkah 3

Salin kod berwarna biru di bawah dan paste, sebelum atau di atas kod </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://sites.google.com/site/defaultjssite/linkbox.css"/>

<script type="text/javascript" src="http://sites.google.com/site/defaultjssite/linkbox.js">

/*
*/

</script>

<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script>

Seterusnya klik Preview dan jika tiada mesej Error yang terpapar, klik Save.

Langkah 4

Salin dan paste kod merah di bawah pada notepad. Seterusnya, edit kod yang di bold dengan teks dan URL pilihan anda.

<a id="megaanchor">Links</a>
<div id="megamenu1" class="megamenu">

<div class="column">
<h3>Tajuk 1</h3>
<ul>
<li><a href="masukkan url di sini">Link 1</a></li>
<li><a href="masukkan url di sini">Link 2</a></li>
<li><a href="masukkan url di sini">Link 3</a></li>
<li><a href="masukkan url di sini">Link 4</a></li>
<li><a href="masukkan url di sini">Link 5</a></li>
</ul>
</div>

<div class="column">
<h3>Tajuk 2</h3>
<ul>
<li><a href="masukkan url di sini">Link 1</a></li>
<li><a href="masukkan url di sini">Link 2</a></li>
<li><a href="masukkan url di sini">Link 3</a></li>
<li><a href="masukkan url di sini">Link 4</a></li>
<li><a href="masukkan url di sini">Link 5</a></li>
</ul>
</div>

<div class="column">
<h3>Tajuk 3</h3>
<ul>
<li><a href="masukkan url di sini">Link 1</a></li>
<li><a href="masukkan url di sini">Link 2</a></li>
<li><a href="masukkan url di sini">Link 3</a></li>
<li><a href="masukkan url di sini">Link 4</a></li>
<li><a href="masukkan url di sini">Link 5</a></li>
</ul>
</div>

</div>

Langkah 5

Klik pada Dashboard => Layout. Seterusnya, klik pada Add A Gadget.

Langkah 6

Salin kod yang telah siap di edit (rujuk langkah 4) dan paste pada ruang Content Add A Gadget.

Akhir sekali, klik Save.

4 comments:

  1. wah..berguna jugak ye...lebih mudah untuk menarik pembaca...tidak perlu untuk tunggu load satu persatu...cayok...!

    ReplyDelete
  2. salam. nes, boleh buat tutorial psl signature on every post tak? Thanks.

    ReplyDelete
  3. Thanks Nes...sangat menarik...

    ReplyDelete