Selasa, 20 September 2011

0 Cara Membuat Menu Navigation Tersembunyi


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Menu Navigation Tersembunyi ini menyimpan Profile,
Facebook, Twitter, E-Mail dan RSS Feed Anda.

Lihat contohnya di bagian atas blog ini.
Coba arahkan cursor Anda pada menu-menunya.



Berikut ini langkah untuk membuatnya :

1.   Rancangan -> Tambah Gadget ->
      Pilih HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini lalu simpan.

<ul id="navigation">
<li class="about-me"><a href="URL Profile Anda/"><span>My Profile</span></a></li>
<li class="facebook"><a href="URL Facebook Anda"><span>My Facebook</span></a></li>
<li class="twitter"><a href="URL Twitter Anda"><span>My Twitter</span></a></li>
<li class="e-mail"><a href="URL E-mail Anda"><span>My E-mail</span></a></li>
<li class="rss"><a href="URL RSS Feed Anda"><span>RSS Feed</span></a></li>
</ul>

KETERANGAN :

Masukkan URL-URL Anda sesuai namanya.

3.   Lalu masuk ke Edit HTML.

4.   Cari tag ]]></b:skin>

5.   Copy kode berikut dan letakkan
      di atas tag ]]></b:skin> ini.

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width:750px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: 0px;
width: 100px;
height: 25px;
background-color:#fff;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #0000ff;
-moz-border-radius:0px 0px 8px 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-khtml-border-bottom-left-radius: 8px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a:hover{
background-color:#fff;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#ff0000;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
}
ul#navigation .about-me a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO9lg8rMiI/AAAAAAAABUk/DwJNZAO8Wnc/s400/photo.png);
}
ul#navigation .facebook a {
background-image: url(http://1.bp.blogspot.com/_LZtXSNcp76A/TQO8LKKzUVI/AAAAAAAABT0/uDnhDlFgPuA/s400/facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://3.bp.blogspot.com/_LZtXSNcp76A/TQO8MAfFqUI/AAAAAAAABUU/z1PwLV5UWlA/s400/twitter.png);
}
ul#navigation .e-mail a {
background-image: url(http://2.bp.blogspot.com/_LZtXSNcp76A/TQO9lQ5T9GI/AAAAAAAABUc/Nyk6OTOMOH8/s400/mail_edit.png);
}
ul#navigation .rss a{
background-image: url(http://4.bp.blogspot.com/_LZtXSNcp76A/TQO8L8P3ZKI/AAAAAAAABUM/CI6VTjlEZsI/s400/rss.png);
}

6.   Cari lagi tag </body>

7.   Copy kode berikut dan letakkan di atas
      atau sebelum tag </body> ini :

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery-1.3.2.js"></script>

<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Selamat mencoba dan tetap good luck!

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *