membuat toolbar dengan efek jQuery dan CSS3 ~ TEKNOLOGI BISNIS & HIBURAN

Monday 30 April 2012

membuat toolbar dengan efek jQuery dan CSS3

Berikut ialah contoh toolbar dengan efek jQuery dan CSS3

* Cara pembuatannya sebagai berikut
* Masuk ke blogger
* Pilih Rancangan dan masuk ke Edit HTML
* Tekan tombol F3 dan cari kode <head>
* Letakan kode jquery dan CSS dibawah ini diatas kode <head> atau sebelum kode <head>

<link href='https://sites.google.com/site/jayanaktkj/toolbar/style.css' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/jayanaktkj/toolbar/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){

//hide toolbar and make visible the 'show' button
    $("span.downarr a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeIn("slow");
});

//show toolbar and hide the 'show' button
$("span.showbar a").click(function() {
    $("#toolbar").slideToggle("fast");
    $("#toolbarbut").fadeOut();
});

//show tooltip when the mouse is moved over a list element
$("ul#social li").hover(function() {
        $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
    $(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
        $(this).find("div").hide();
    });
});

//don't jump to #id link anchor
$(".facebook, .twitter, .delicious, .digg, .rss, .stumble, .menutit, span.downarr a, span.showbar a").click(function() {
   return false;
    });

//show quick menu on click
    $("span.menu_title a").click(function() {
        if($(".quickmenu").is(':hidden')){ //if quick menu isn't visible
            $(".quickmenu").fadeIn("fast"); //show menu on click
        }
        else if ($(".quickmenu").is(':visible')) { //if quick menu is visible
      $(".quickmenu").fadeOut("fast"); //hide menu on click
    }
    });

    //hide menu on casual click on the page
    $(document).click(function() {
            $(".quickmenu").fadeOut("fast");
            $(".quickmenu").css({'vivibility': 'hidden'});
    });
    $('.quickmenu').click(function(event) {
        event.stopPropagation(); //use .stopPropagation() method to avoid the closing of quick menu panel clicking on its elements
    });


});

</script>

* Dan langkah terakhir cari kode <body> letakan kode dibawah ini diatas atau sebelum kode <body>

<div id='toolbarbut'> 
<span class='showbar'><a href='#'>show bar</a></span>

</div>

<div id='toolbar'> 

<div class='leftside'> 
<ul id='social'>
    <li><a class='rss' href='#'/>
      <div class='tip' id='tiprss'>
        <ul>
          <li><a href='alamat-url'>580 Readers</a></li>

          <li><a href='alamat-url'><small>[Subscribe]</small></a></li>
        </ul>
      </div>
    </li>
    <li><a class='facebook' href='#'/>
      <div class='tip' id='tipfacebook'>
        <ul>
          <li><a href='http://www.facebook.com/sharer.php?u="%20+%20data:post.url%20+%20"&title="%20+%20data:post.title%27%20target=%27_blank'>Share Page</a></li>

          <li><a href='alamat-url'>| Profile</a></li>
        </ul>
      </div>
    </li>
    <li><a class='twitter' href='#'/>
      <div class='tip' id='tiptwitter'>
        <ul>
          <li><a href='http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>ReTweet</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul>
      </div>
    </li>
    <li><a class='delicious' href='#'/>
      <div class='tip' id='tipdelicious'>
        <ul>
          <li><a href='alamat-url'>Bookmark</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul>
      </div>
    </li>
    <li><a class='digg' href='#'/>
      <div class='tip' id='tipdigg'>
        <ul>
          <li><a href='http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul>
      </div>
    </li>
    <li><a class='stumble' href='#'/>
      <div class='tip' id='tipstumble'>
        <ul>
          <li><a href='alamat-url'>Stumble</a></li>
          <li><a href='alamat-url'>| Profile</a></li>

        </ul>
      </div>
    </li>
</ul>
</div>

<div class='rightside'> 
<span class='downarr'> 
<a href='#'/>
</span>

<span class='menu_title'>
    <a class='menutit' href='#'>quick menu</a> 
</span>
<div class='quickmenu'>
    <ul> 
      <li><a href='alamat-url'>Beranda</a></li>
      <li><a href='alamat-url'>Tips dan Trik</a></li>

      <li><a href='alamat-url'>jQuery</a></li>
      <li><a href='alamat-url'>CSS3</a></li>
      <li><a href='alamat-url'>Blog</a></li>
      <li><a href='alamat-url'>Web</a></li>
    </ul>
</div>
</div>

</div>