Tampilkan postingan dengan label Jquery. Tampilkan semua postingan
Tampilkan postingan dengan label Jquery. Tampilkan semua postingan

Minggu, 30 Oktober 2011

Cara Bikin Gambar bergetar dengan jQuery

Masuk ke-edit html dan cari kode ]]></b:skin> lalu simpan kode ini di atas nya

.gambargetar{
    position:relative
    }     

Lalu masukan Script di bwah ini tepat di atas tag </body>

    script type="text/javascript" src="http://dimash.waphall.com/Getar.js.txt"></script> 

Untuk pemanggilan nyamasukan kode ini
    <img src="MASUKAN_URL_GAMBAR_DI_SINI" class="gambargetar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()"> 

selamat mencoba sob........

Cara Bikin Gambar bergetar dengan jQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

jQuery 3d list menu

1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode  ]]></b:skin> dan simpan kode ini di atas nya


#list{ 
        margin:0 auto; 
        height:600px; 
        width:600px; 
        overflow:hidden; 
        position:relative; 
        background-color: #111; 
        -moz-box-shadow:0px 10px 20px #000; 
    } 
    #list ul, 
    #list li{ 
        list-style:none; 
        margin:0; 
        padding:0; 
    } 
    #list a{ 
        position:absolute; 
        text-decoration: none; 
        color:#666; 
        text-shadow:0px 1px 2px #000; 
    } 
    #list a:hover{ 
        color:cyan; 
    } 

Lalu masukan html kode di bawah ini untuk pemanggilannya
sobat bisa memasukan nya di edit html atau di bawah <body atau di Javascript

   <div id="list">
    <ul>
    <li><a href="#">ajax</a></li>
    <li><a href="#">css</a></li>
    <li><a href="#">design</a></li>
    <li><a href="#">firefox</a></li>
    <li><a href="#">flash</a></li>
    <li><a href="#">html</a></li>
    <li><a href="#">Devirtuoso</a></li>
    <li><a href="#">jquery</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">SEO</a></li>
    <li><a href="#">usability</a></li>
    <li><a href="#">www</a></li>
    <li><a href="#">web</a></li>
    <li><a href="#">xhtml</a></li>
    </ul>
    </div> 

Dan ini javascript nya,silakan sobat tambahkan script jQuery di bawah ini tepat di atas tag </body>

         <script src="http://dimash.waphall.com/jquery1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var element = $('#list a');;
        var offset = 0; 
        var stepping = 0.03;
        var list = $('#list');
        var $list = $(list)
        $list.mousemove(function(e){
            var topOfList = $list.eq(0).offset().top
            var listHeight = $list.height()
            stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
        });
        for (var i = element.length - 1; i >= 0; i--)
        {
            element[i].elemAngle = i * Math.PI * 2 / element.length;
        }
        setInterval(render, 20);
        function render(){
            for (var i = element.length - 1; i >= 0; i--){
                var angle = element[i].elemAngle + offset;
                x = 120 + Math.sin(angle) * 30;
                y = 45 + Math.cos(angle) * 40;
                size = Math.round(40 - Math.sin(angle) * 40);
                var elementCenter = $(element[i]).width() / 2;
                var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
                $(element[i]).css("fontSize", size + "pt");
                $(element[i]).css("opacity",size/100);
                $(element[i]).css("zIndex" ,size);
                $(element[i]).css("left" ,leftValue);
                $(element[i]).css("top", y + "%");
            }
            offset += stepping;
        }
    });
    </script> 

selamat mencoba sob..............
jQuery 3d list menu 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Animasi Tooltip dengan jQuery

ok selamat malam semua kali ini saya akan memulai posting kembali di blog ini.setelah lama saya vacum kali ini saya akan sedikit berbagi postingan.ok bro langsung aja ya.kali ini saya akan share cara membuat TOOLTIP dengan JQUERY atau link terbang seperti saya ini.ok langsung aja bro.

Untuk membuatnya ikuti langkah-langkah dibawah ini.
   1. Login blogger
   2. Tata Letak/Layout - Edit HTML
   3. Klik pada Expand Template Widget.
   4.  Selanjutnya cari kode ]]></b:skin>
Jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode]]></b:skin>

/* dimash */
    #dimash a {    
           color:#fff;
           text-shadow:0 0 1px #fff;
    }
    #dimash span {
           width: 245px;
           height:auto;
           z-index:60;
           background: -moz-linear-gradient(top, #999, #252525, #999); 
           position:absolute;
           padding: 3px;
           left:35%;
           text-align: center;
           text-decoration:none;
           display: none;
           line-height:90px;
           font-size:30px;
           color:#bbb;
           text-shadow: 1px 1px 2px  #000;
           border:1px solid #111;
           -moz-border-radius:20px;
          -moz-box-shadow: 0px 10px 20px #000
    } 

Simpan kode di bawah ini di atas kode </head>

<script src='http://dimash.waphall.com/jquery.min.js'></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
      $("#balon li").hover(
        function(){
           $(this).find("span").attr({
              "style": 'display:block'
           });
           $(this).find("span").animate({opacity:0.9,top: "200px"}, {queue:false, duration:400});
        },
        function(){
           $(this).find("span").animate({opacity:0,top: "-9999px"}, {queue:false, duration:1000}, "linear",
           function(){
             $(this).find("span").attr({"style": 'display:none'});
           }
        );
      });
    });
    </script> 

Dan ini kode untuk pemanggilan nya melalui HTML /  JAVASCRIPT
<ul id="dimash">
    <li><a href="#">Home<span>START PAGES</span> </a></li>
    <li><a href="#">About<span>WHO I AM</span> </a></li>
    <li><a href="#">Portofolio<span>LOOK AT MY WORK</span> </a></li>
    </ul>
    </div> 

Selesai Selamat mencoba sob.............
Animasi Tooltip dengan jQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Selasa, 05 Juli 2011

Cara Membuat Link Memudar Dengan Efek Jquery

1. Login Dashbord
2. Edit HTML
3. Kemudian Cari kode <head>  Setelah itu Masukan kode di bawah ini sebelum kode <head> Tadi


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>

Selesai Selamat Mencoba.............
.



 
Cara Membuat Link Memudar Dengan Efek Jquery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Rabu, 29 Juni 2011

zFPmenu Code

Untuk Demo nya anda bisa lihat di sini lihat pada pojok kanan bawah,Ok langsung aja jika anda berminat untuk membuat nya kali ini say akan share di sini caran-nya :

1. Login Dashbord anda
2. Edit HTML ( beri centrang template )
3. Kemudian cari kode </body> jika sudah masukan kode di bawah ini tepat sebelum / di atas kode </body> 


<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
Place ads, text message, or anything here.
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
   <ul>
      <li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
         <ul>
            <li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
            <li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
         </ul>
      </li>
      <li><a href="">YOUR SUBMENU 2.2</a></li>
      <li><a href="">YOUR SUBMENU 2.3</a></li>
   </ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://blogdimash.wap.sh/jquery.min_1.js"></script>
<script type="text/javascript" src="http://blogdimash.wap.sh/zfpmenu.js"></script>
<!-- zFPmenu END -->
 
selesai dan lihat hasil nya selamat mencoba sob..............
zFPmenu Code 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Selasa, 28 Juni 2011

Tips Trik Membuat Slider Related Post jQuery

1.  seperti biasa pilih Dashboard,
2 . lalu Tata Letak / Rancangan
3. Add New Widget atau Tambah Gadget
4. HTML/Javascript
5. Masukan script berikut pada  blog anda


<script src="http://blogdimash.wap.sh/jquery-1.3.2.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:1px;
padding:0px 0px;
height:300px;
}
#spylist ul{
width:100%;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:100%;
padding: 0px 0px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
width:100%;
font-size:10px;
height:12px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:12px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
showRandomImg = true;

boxwidth = 200;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 50;

thumbheight = 50;

fntsize = 9;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 100;

home_page = "http://red3vil666.blogspot.com";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src='http://blogdimash.wap.sh/jquery.min.js' type='text/javascript'></script>
</div></center>


6. save dan lihat hasil nya.............
Tips Trik Membuat Slider Related Post jQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Jumat, 24 Juni 2011

Flashing Message Box using JQuery

  1. Seperti biasa Login ke blogger
  2. Masuk ke Rancangan >> Elemen Halaman 
  3. Setelah itu tambahkan sebuah gadget (untuk tempat pilih dimana saja)
  4. lalu pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{
//first slide down and blink the message box
$("#object").animate({
top: "0px"
}, 2500 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

//close the message box when the cross image is clicked
$("#close_message").click(function()
{
$("#object").fadeOut("slow");
});
});
</script>
<style type="text/css">
.message{
border:1px solid #CCCCCC;
position:absolute;
width:270px; /*kamu dapat menyesuaikannya dengan pesan kamu, dengan merubah nominal angka*/
border:1px solid #c93;
background:#ffc;
padding:5px;
left:0px;
top : -170px;
}


</style><div id="object" class="message"><img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />

<strong>Tulis Judul Pesan Disini</strong>
<p >Isi dari pesan kamu tulis disini</p>
</div>
Flashing Message Box using JQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Floating Message Bottom With jquery

  1. Login ke Blogger
  2. Masuk ke Rancangan >> Elemen Halaman 
  3. lalu tambahkan sebuah gadget (untuk tempat pilih di mana saja) lalu pilih yang HTML/javascript 
  4. setelah itu masukan kode di bawah ini kedalamnya

<style media="all" type="text/css">
#message_box {
position: absolute;
left: 0px;
z-index: 10;
background:#ffc;
padding:5px;
border:1px solid #CCCCCC;
text-align:center;
width:99%;
display:none;
color:#0000FF;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
}

</style>
<script type="text/javascript" language="javascript">
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
$(document).ready(function()
{
if(getCookie('show_message')!='no')
{
var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
$('#message_box').css("top",pos-28+"px");
$('#message_box').show(); //display the message box

//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
var pos=parseInt($(window).scrollTop())+parseInt($(window).height());
$('#message_box').animate({top:pos-26+"px" },{queue: false, duration: 500});
});
}
//when the close button at right corner of the message box is clicked
$('#close_message').click(function()
{
//the messagebox gets scrool down with top property and gets hidden with zero opacity
$('#message_box').animate({ top:"-=15px",opacity:0 }, "slow");
setCookie('show_message','no',1); //cookies is set to no value
});
});

//function to set the cookie name, values and expiry time in hours
function setCookie(c_name,value,expireHours)
{
var exhour=new Date(); //create the current date object
exhour.setHours(exhour.getHours()+1);
document.cookie=c_name+ "=" +escape(value)+
((expireHours==null) ? "" : ";expires="+exhour.toGMTString());
}

//function to get the value from cookie name
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}

</script>
<div id="message_box"><img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />PESAN/LINK IKLAN KAMU DISINIjquery</div>

5.selesai dan lihat hasil nya
Floating Message Bottom With jquery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Jquery Image Hover Fade Effect For Blogspot

  1. Login ke blogger
  2. Masuk ke Rancangan >> Edit HTML
  3. Cari kode </head> lalu tambahkan kode di bawah ini tepat di atasnya

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
<script type='text/javascript'>
$(document).ready(function() {
$('img').fadeTo('slow', 0.5);
$('img').hover(function() {
$(this).fadeTo('slow', 1.0);
}, function() {
$(this).fadeTo('slow', 0.5);
});
});
</script>

simpan dan lihat hasil nya...... 
Jquery Image Hover Fade Effect For Blogspot 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Rabu, 15 Juni 2011

Cara Memasang Menu navigasi CSS Mac Dock with jQuery

Ok sob kali ini aku akan sedikit berbagi tentang cara memasang navigasi CSS jQuery ok cara nya sangat lah mudah dan simple aja contoh nya bisa anda lihat d blog saya ini.ok langsung ke TKP aja sob silakan ikuti langkag-langkah berikut ini :




    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :

/* ---------------
Menu navigasi CSS Mac  Dock with jQuery
---------------------------------- */
.dock {
    position: relative;
    height: 50px;
    text-align: center;
}
.dock-container {
    position: absolute;
    height: 50px;
    background: url(http://red3vil.xtgem.com/dock-bg2.gif);
    padding-left: 20px;
}
a.dock-item {
    display: block;
    width: 40px;
    color: #000;
    position: absolute;
    top: 0px;
    text-align: center;
    text-decoration: none;
    font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
    border: none;
    margin: 5px 10px 0px;
    width: 100%;
}
.dock-item span {
    display: none;
    padding-left: 20px;
}


dan simpan script berikut diatas kode </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://kangdadang.googlecode.com/files/interface.js"></script>

Selanjutnya simpan script berikut diatas kode </body> :
<script type="text/javascript">
  
    $(document).ready(
        function()
        {
            $('#dock').Fisheye(
                {
                    maxWidth: 50,
                    items: 'a',
                    itemsText: 'span',
                    container: '.dock-container',
                    itemWidth: 40,
                    proximity: 90,
                    halign : 'center'
                }
            )
        }
    );

</script>
Dan cara pemanggilan nya melalui HTML 
<div class="dock" id="dock">
  <div class="dock-container">
  <a class="dock-item" href="http://dimashredevil.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHCOfa02kbdSMjXSGuGW_IvJ_vhTXwFf3_AkWVujfmcHLBtz0ngOz73F4ynL5gXYfEepB0r7cmZSg35LCVCUnOpIE_6-vIitGg2qukMTd_cIrNTfOsyCB0OOq1LdkQkCyJH3fmnxhj_CQ/s1600/home.png" alt="Home" /><span>Home</span></a>
  <a class="dock-item" href="http://www.blogger.com/profile/15357131409388946339"><img src="http://dimash.mw.lt/lg profil.png" alt="Profile" /><span>Profile</span></a>
  <a class="dock-item" href="    facebook.com/reddevil.detected"><img src="http://dimash.mw.lt/lg fb.png" alt="Facebook" /><span>Facebook</span></a>
  <a class="dock-item" href="http://twitter.com/dim4sh"><img src="http://dimash.mw.lt/lg tw.png" alt="Twitter" /><span>Twitter</span></a>
  <a class="dock-item" href="http://koprol.com/users/dim4sh"><img src="http://dimash.mw.lt/lg yho.png" alt="Koprol" /><span>Koprol</span></a>
  <a class="dock-item" href="http://dimash_devil@yahoo.com"><img src="http://dimash.mw.lt/lg email.png" alt="Email" /><span>Email</span></a>
  <a class="dock-item" href="http://youtube.com"><img src="http://dimash.mw.lt/lg youtube.png" alt="Youtube" /><span>Youtube</span></a>
  <a class="dock-item" href="http://dim4sh.wapdale.com"><img src="http://dimash.mw.lt/wap.jpg" alt="Wap" /><span>Wap</span></a>
  <a class="dock-item" href="http://red3vil-666.blogspot.com"><img src="http://dimash.mw.lt/lg blog.jpg" alt="Blogspot" /><span>Blogspot</span></a>
</div>
</div>

untuk melihat hasil nya clic DISINI


CATATAN : untuk yang berwarna hijau rubah dengan url anda
                     dan yang berwarna merah url gambar anda

Save dan lihat hasil nya...........selamat mencoba sob
Cara Memasang Menu navigasi CSS Mac Dock with jQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Animated Drop Down Menu with jQuery




    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :





/* ---------------
Animated Drop Down Menu with jQuery
---------------------------------- */
 ul, li .menu_head{
     margin:0; padding:0;
     list-style:none;
     }

.menu_head{
    border:1px solid #998675;
    }

.menu_body {
    display:none;
    width:184px;border-right:1px solid #998675;
    border-bottom:1px solid #998675;
    border-left:1px solid #998675;
    }
.menu_body li{
    background:#493e3b;
    }
.menu_body li.alt{
    background:#362f2d;
    }
.menu_body li a{
    color:#FFFFFF;
    text-decoration:none; padding:10px;
    display:block;
    }
.menu_body li a:hover{
    padding:15px 10px; font-weight:bold;
    }


selanjutnya simpan script berikut diatas kode </head> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_body li:even").addClass("alt");
    $('img.menu_head').click(function () {
    $('ul.menu_body').slideToggle('medium');
    });
    $('ul.menu_body li a').mouseover(function () {
    $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout(function () {
    $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
</script>

terakhir cara pemanggilannya pada Html  :
<img src="http://dimash.waphall.com/navigate.png" width="184" height="32" class="menu_head" />
<ul class="menu_body">
<li><a href="#">About Us</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support Forums</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

selesai... jangan lupa simpan template...
Catatan : Untuk script jquery yang diberi warna Biru ; jika sudah ada, tidak perlu ditambahkan lagi

Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb... :)
Animated Drop Down Menu with jQuery 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:

Fancy Apple-Style Icon Slide Out Navigation


    Cara membuatnya :
  1. Login blogger
  2. Rancangan, Edit Html, Cari kode ]]></b:skin>
  3. Dan Simpan kode berikut diatasnya :
/* -------------------------
Fancy Apple-Style Icon Slide Out Navigation
------------------------------------------ */
.navigationaple{
    position:relative;
    margin:0 auto;
    width:915px;
}
ul.menuaple{
    list-style:none;
    font-family:"Verdana",sans-serif;
    border-top:1px solid #bebebe;
    margin:0px;
    padding:0px;
    float:left;
}
ul.menuaple li{
    float:left;
}
ul.menuaple li a{
    text-decoration:none;
    background:#7E7E7E url(http://dimash.waphall.com/bgMenu.png) repeat-x top left;
    padding:15px 0px;
    width:128px;
    color:#333333;
    float:left;
    text-align:center;
    border-right:1px solid #a1a1a1;
    border-left:1px solid #e8e8e8;
    font-weight:bold;
    font-size:13px;
    -moz-box-shadow: 0 1px 3px #555;
    -webkit-box-shadow: 0 1px 3px #555;
    text-shadow: 0 1px 1px #fff;
}
ul.menuaple li a.hover{
    background-image:none;
    color:#fff;
    text-shadow: 0 -1px 1px #000;
}
ul.menuaple li a.first{
    -moz-border-radius:0px 0px 0px 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-left:none;
}
ul.menuaple li a.last{
    -moz-border-radius:0px 0px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
}
ul.menuaple li span{
    width:64px;
    height:64px;
    background-repeat:no-repeat;
    background-color:transparent;
    position:absolute;
    z-index:-1;
    top:80px;
    cursor:pointer;
}
ul.menuaple li span.Home{
    background-image:url(http://dimash.waphall.com/home.png);
    left:33px; /*128/2 - 32(half of icon) +1 of border*/
}
ul.menuaple li span.About{
    background-image:url(http://dimash.waphall.com/about.png);
    left:163px; /* plus 128 + 2px of border*/
}
ul.menuaple li span.Email{
    background-image:url(http://dimash.waphall.com/email.png);
    left:293px;
}
ul.menuaple li span.Portofolio{
    background-image:url(http://dimash.waphall.com/portofolio.png);
    left:423px;
}


selanjutnya simpan script berikut diatas kode </body> :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
            $(function() {
                var d=1000;
                $('#menuaple span').each(function(){
                    $(this).stop().animate({
                        'top':'-17px'
                    },d+=250);
                });

                $('#menuaple > li').hover(
                function () {
                    var $this = $(this);
                    $('a',$this).addClass('hover');
                    $('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
                },
                function () {
                    var $this = $(this);
                    $('a',$this).removeClass('hover');
                    $('span',$this).stop().animate({'top':'-17px'},400).css({'zIndex':'-1'});
                }
            );
            });
        </script>

yang terakhir pemanggilan pada Html :
<div class="navigationaple">
<ul class="menuaple" id="menuaple">
<li><span class="Home"></span><a class="first" href="#">Home</a></li>
<li><span class="About"></span><a href="#">About</a></li>
<li><span class="Email"></span><a href="#">Email</a></li>
<li><span class="Portofolio"></span><a class="last" href="#">Portofolio</a></li>
</ul>

</div>

dan selesai selamat mencoba..........
Fancy Apple-Style Icon Slide Out Navigation 9out of 10 based on 10 ratings. 9 user reviews.
Diposting oleh di
Label:
Langganan: Postingan (Atom)
 

Dafatr Isi

Label Blog

japarus
Template | copyright@2011 | Design by : DiM4sHDiM4sH