Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Beautify Sidebar Link List with Jquery Effect


Hi! After few days ago I wrote about TipTip Jquery, Today I’ll share about beautify sidebar link list with Jquery. Usually we have many link list in the sidebar, like categories, recent posts, or recent comments. We will add an effect to make this list prettier, if we hover to a link, the link will move smoothly to right and will back to original position then. This effect doesn’t use a Jquery plugin, but we directly use the function in the Jquery framework. So, don’t wait anymore, let’s go to the steps!

Javascript

Add this following code before </head>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

If you have already add this code, you no longer need to add this code again.

Then, add this following code. This is the core of this tutorial.

<script type=”text/javascript”>
$(document).ready(function(){
$(‘.widget-content ul li a, #panel ul li a’).mouseover(function(){
$(this).animate({paddingLeft:”20px”}, { queue:false, duration:250});
});
$(‘.widget-content ul li a, #panel ul li a’).mouseout(function(){
$(this).animate({paddingLeft:”0″}, {queue:true, duration:250})
});
});
</script>

Some Options

  • Change 250 to set the animation speed (in millisecond)
  • Change 20 to set the animation distance (in px)
  • If not work, try to change .widget-content with .sidebar

Demo

That’s all. See you!!

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

May 23, 2010 Ritesh Sanap Blogger Tutorials Jquery

Comments

  1. hamada says

    July 25, 2010 at 4:43 am

    thank you ..

    Reply
  2. Ritesh Sanap says

    July 25, 2010 at 9:37 am

    @hamada
    You are most welcome

    Reply

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Stardust – Blogger Template
Next Next post: Facebook Like or Recommend Button For Blogger

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • Windows Vista CD key
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • Embed Text Resizing Widget To Increase or Decrease The Font Size
  • Free Online Angry Birds game
  • Different way’s to shutdown your pc
  • Check if your Antivirus Is Working Properly
  • Free Online Virus and Malware Scan
  • 110 Amazing Magic Tricks with Everyday Objects - eBook

Get Latest post in your Inbox

Random Posts

How to Unlock / Unhide / Show the Administrator Account in Windows XP !

July 18, 2008 By Ritesh Sanap 1 Comment

WordPress Optimization

November 7, 2010 By Ritesh Sanap 4 Comments

A Great Magic Trick With Google – Fool your Friends

July 21, 2008 By Ritesh Sanap 1 Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

Google 2-Step Verification

May 2, 2011 By Ritesh Sanap 5 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean