Xp-Fire

halo sobat sin1aja kali ini saya akan membahas tentang cara membuat menu berputar

---

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none; 
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(disini URL gambar pertama) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(disini URL gambar ke 2) repeat-x left bottom;
}

---

Langkah selanjutnya

anda cari kode ini

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

---

Setelah ketemu anda ganti kode berwarna biru

• ganti true dengan false
• ganti no dengan yes
• ganti 1 dengan 2

Dan semua akan jadi seperti ini

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>




Langkah selanjutnya anda copy paste kode di bawah ini di atas kode </head>


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


$(document).ready(function() {


$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...
var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag
$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag
});

$(&quot;#topnav li&quot;).hover(function() { //On hover...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find(&quot;span&quot;).stop().animate({
marginTop: &quot;0&quot; //Move the span back to its original state (0px)
}, 250);
});


});
</script>

---

Perhatikan kode warna kuning bila anda merasa atau anda lihat sudah punya maka jangan
mengcopy nya Lagi anda hanya tinggal copy kode di bawah nya saja, atau kalau memang anda mau
meng-copy nya hapus kode yang sudah ada, lalu anda tinggal copy semua kode di atas,
maksud saya hapus kode bukan hapus kode template anda tapi kode yang berwarna kuning sekali lagi
khusus warna kuning.

Setelah selesai anda SIMPAN TEMPLATE


Lalu pergi ke tab ELEMEN LAMAN
Lalu anda lihat ada Elemen baru di atas header
klik tambah gadget
pilih HTML/JAVASCRIPT

Lalu anda copy paste kode di bawah ini ke dalam nya

<ul class='v2' id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>JUDUL LINK</a></li>

<li><a href='#' title='MENU 2'>UDUL LINK</a></li>

<li><a href='#' title='MENU 3'>UDUL LINK</a></li>

<li><a href='#' title='MENU 4'>UDUL LINK</a></li>

<li><a href='#' title='MENU 5'>UDUL LINK</a></li>

<li><a href='#' title='MENU 6'>UDUL LINK</a></li>
</ul>


Perhatian


Kode # ganti dengan URL anda
kode menu 1 sampai 6, ganti terserah anda
Lalu JUDUL LINK ganti dengan judul URL anda


Sekian dari sin1aja, semoga bermanfaat bagi anda yang membaca

Share button memang masih merupakan suatu bahasan penting untuk ditempatkan dalam suatu blog. Ia akan membantu anda untuk mempublikasikan posting atau blog anda kepada pengunjung di dunia maya. Sebelumnya saya telah memposting artikel Cara Membuat Share Button Cantik yang sebenarnya berhubungan dengan posting ini. Namun saya hanya merubah tampilan share button tersebut dengan menambahkan fungsi cMotion Image Gallery dari Dynamic Drive. Kelebihannya anda dapat membuat image gallery dengan menempatkannya pada widget. Selain itu juga dapat memfungsikan ini sebagai tampilan gambar pada posting artikel anda. Sebelum lanjut lihat dulu demonya.



Sekarang mari kita lanjut pada cara pembuatannya. Silahkan ikuti langkah berikut ini.
Log in ke blog anda
Klik Rancangan


Klik Edit HTML


Masukkan kode berikut di atas kode </head>

<link rel="stylesheet" href="http://bloekoetoek-blogonol.googlecode.com/files/gallerystyle2.css" />
<script type="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/motiongallery2.js"></script>

Simpan template


Klik Lagi Rancangan


Klik Tambah Gadget


Pilih HTML/JavaScript


Masukkan kode berikut ke dalamnya dan jangan lupa Simpan

<div style="overflow:hidden;">
<div id="motioncontainer" style="width:auto; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">
<!--Gallery Contents below-->
<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br />
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat twitter anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-twitter.png" border=1></a><br />
<a href="masukkan alamat facebook anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-facebook.png" border=1></a><br />
<a href="masukkan alamat rss feed anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-rss.png" border=1></a><br />
<a href="masukkan alamat stumbleupon anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-stumbleupon.png" border=1></a><br />
<a href="masukkan alamat digg anda di sini"><img src="http://i1138.photobucket.com/albums/n524/blogonol/blogonol-digg.png" border=1></a><br />
<!--End Gallery Contents-->
</div></div></div>

Catatan 
Kalau anda ingin menggunakan menjadi motion image gallery, gunakan script di bawah ini. 

<div style="overflow:hidden;">
<div id="motioncontainer" style="width:auto; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">
<!--Gallery Contents below-->
<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br />
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br />
<!--End Gallery Contents-->
</div></div></div>

Kalau anda mau menambahkan gambar copy kode 

<a href="masukkan alamat blog anda di sini"><img src="masukkan alamat gambar anda di sini" border=1></a><br /> 

Kemudian masukkan sebelum kode <!--End Gallery Content-->

Kalau anda ingin menggunakannya pada posting artikel, silahkan masukkan kode di atas pada mood Edit HTML setelah anda berada di posting area. Jangan lupa Terbitkan Entri dan lihat hasilnya. Sekarang anda sudah memiliki Share Button dengan Motion Image. Selamat mencoba dan sukses selalu.