Home » , » Membuat Menu Link Bergoyang

Membuat Menu Link Bergoyang

Buat sobat blogger yang suka otak atik template, Menu Link Bergoyang ini bisa jadi alternatif untuk menambah tampilan blog anda lebih keren. Saya sebut Menu Link Bergoyang sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergoyang seperti dicolek sama tangan, Berikut Trik Membuat Menu Link Bergoyang yang saya maksud :






Langkah 1
Login ke blogger dengan akun anda.
Langkah 2
Klik Rancangan.
Langkah 3
Dan KLik tab Edit HTML.
Langkah 4
Cari kode di bawah ini atau yang mirip dengan kode ini : </head>
Langkah 5
Copy kode di bawah ini dan letakkan sebelum kode : </head>

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

$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

<style type="text/css">
ul.listpanah {list-style-image:url('https://lh6.googleusercontent.com/-aBZJpeUc4l8/TZEahcXjKFI/AAAAAAAAAks/H8h34EcKuSI/s12/List%2B6.jpg');}

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>


STOP...! Jangan tutup dulu Tutorial masih belum usai perjalanannya Kita.

Langkah selanjutnya anda tinggal menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda tinggal menambah gadget. Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman
2. Tambah Gadget
3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript
4. Copy dan paste kode dibawah ini pada gadget tersebut :


<div class id="sliding-navigation">
<ul class="listpanah">

<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK1</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK3</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 4</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL/NAMA LINK 10</a></li>

</ul></div>


Selesai sudah tutorial kali ini, Selamat mencoba dan Semoga bermanfaat.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan atas.
Jangan lupa luangkan waktu untuk berkomentar di Lora Malunk Blog......Terima Kasih.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

29 Maret 2012 14.40

thx my info nya lora malunk blog

tolong mampir juga ya ke link ku
http://dofollowdotkom.blogspot.com/

Terimakasih dofollow.com atas Komentarnya di Membuat Menu Link Bergoyang

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger