| ^SMK_PESAT^

Floating Menu JQuery Dengan Link Efek Disko

Pada tutorial kali ini saya akan mengetengahkan cara membuat "Floating Menu JQuery dengan Link Efek Disko", kenapa saya kasih judul ini mungkin karena apa yang saya bahas mirip dengan lampu disko hehehe, mungkin para sobat juga kurang puaskan apa dan seperti apa yang dibahas kali ini??..

Untuk kepastian dan meyakinkan kepada para sobat semua silahkan para sobat klik disni atau disini untuk melihat langsung demo yang kita bahas.

Gimana tertarik? OK kalau sobat semua tertarik dan ingin mencobanya silahkan lakukan langkah langkah sebagai berikut :

Langkah Pertama :
Seperti biasa para sobat harus dalam keadaan LogIn. Dasbor --> Rancangan --> Edit HTML. kemudian cari ]]></b:skin> Setelah ketemu simpan kode tersebut di atas kode tadi.

#floatMenu {
position:absolute;
top:150px;
left:50%;
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 ke Dua cari kode seperti ini <head> setelah ketemu simpan kode di bawah ini sebelum kode <head>

<script language="javascript" src="http://longfield22.googlecode.com/files/jquery_mini.js"></script>
<script language="javascript" src="http://longfield22.googlecode.com/files/jquery.dimensions.js"></script>
<script language="javascript">
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
});
</script>

<link href="http://longfield22.googlecode.com/files/reset.css" rel="stylesheet" type="text/css" />
<link href="http://longfield22.googlecode.com/files/page.css" rel="stylesheet" type="text/css" />

Langkah ke Tiga yaitu sobat cari kode seperti ini <body> setelah ketemu letakkan kode di bawah ini dibawah kode <body>

<div id="page-wrap">
<div id="header">
<h2> Longfield Floating menu</h2>
<h1>jQuery&CSS</h1>
</div>
<div id="content">

</div>
</div>

<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;"> category </a></li>
<li><a href="#" onclick="return false;"> forum </a></li>
<li><a href="#" onclick="return false;"> facebook gw </a></li>

</ul>
<ul class="menu3">
<li><a href="#" onclick="return false;"> Technical support </a></li>
</ul>
</div>

Setelah langkah-langkah di atas beres klik Simpan Template, beres deeh

PERHATIAN
JIka ada </div> yang kurang silahkan ditutup OK

Selamat mencoba semoga berhasil dan bermanfaat

Sumber: http://www.kangfatur.com/2011/05/floating-menu-jquery-dengan-link-efek.html

0 komentar

Membuat Judul Blog Bergerak

Selama ini, Sobat dapat membuat teks berjalan di area blog dengan marquee, seperti teks pada side bar, footer, header, atau judul postingan. Namun untuk membuat judul blog berjalan di bagian title bar pada browser, Sobat harus menggunakan bantuan Javascript tersendiri karena marquee hanya bisa berjalan (digunakan) di area blog saja.

Dengan tips ini, mungkin akan membuat blog Kita akan tampil beda dan yang pasti lebih hidup dan menarik. Jika tertarik, silakan ikuti tipsnya berikut ini:

Langkah-langkah membuat judul blog bergerak di title bar pada browser adalah sebagai berikut.

1. Seperti biasa Login ke Blogger hingga masuk dasbor, rancangan (design), edit HTML.

2. Kemudian cari kode <title><data:blog.pageTitle/></title> yang letaknya di bagian awal.

3. Kemudian ganti kode tersebut dengan kode di bawah ini:

<script language="JavaScript"><br />var txt="<data:blog.pagetitle/>";<br />var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;<br />txt=txt.substring(1,txt.length)+txt.charAt(0);<br />segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>

CATATAN:
Angka 100 menunjukkan kecepatan bergerak, Anda dapat menggantinya dengan angka yang lebih kecil atau lebih besar, semakin besar maka kecepatan bergeraknya semakin lambat dan berlaku sebaliknya.

4. Sebelum Anda simpan, klik pratinjau terlebih dahulu untuk melihat hasilnya.

5. Jika sudah berjalan dengan baik kemudian Simpan Template.

6. Selesai.

Selamat mencoba dan semoga bermanfaat

Sumber: http://www.kangfatur.com/2011/04/membuat-judul-blog-bergerak.html

0 komentar