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'> <!-- hide button -->
<span class='showbar'><a href='#'>show bar</a></span>
</div>
<div id='toolbar'> <!-- toolbar container -->
<div class='leftside'> <!-- all things in floating left side -->
<ul id='social'>
<li><a class='rss' href='#'/><!-- icon -->
<div class='tip' id='tiprss'><!-- tooltip -->
<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'> <!-- all things in floating left side -->
<span class='downarr'> <!-- hide button -->
<a href='#'/>
</span>
<span class='menu_title'>
<a class='menutit' href='#'>quick menu</a> <!-- quick menu title -->
</span>
<div class='quickmenu'>
<ul> <!-- quick menu list -->
<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>
