Don't you sometime feel like adding more dynamics to your blog and make it more user friendly, like giving them their own control like toggling show/hide of a gadget. You will learn how to do that in Blogger.
A little instruction to JQuery: It's a powerful and small JavaScript library to add dynamic features and sometimes also used for transferring data.
For a demo of this JQuery effect, click on the Title of About me gadget on right sidebar and see it toggling between hide and show. Ain't it great, you let your users decide whether they want to choose to display the gadget or not.
To do that in blogger, Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>
This is the magical code doing it all, study it well and read what ever line is about
You can use this on other areas of your blog just by making some changes in selectors, selectors can be identified easily with chrome developer tools.
Result : So when you are done placing the codes at right place, Save the template and refresh your blog using CTRL+F5 to ensure that all files are loaded freshly. Now try clicking on title of any of your gadget and see the amazing toggle effect. That will just make you blog to a new level.
This JQuery will not work on some blogs having different templates, so if you don't have any idea what to do then post your blog links in the comment and we will guide you through the process.
A little instruction to JQuery: It's a powerful and small JavaScript library to add dynamic features and sometimes also used for transferring data.
For a demo of this JQuery effect, click on the Title of About me gadget on right sidebar and see it toggling between hide and show. Ain't it great, you let your users decide whether they want to choose to display the gadget or not.
Adding the JQuery lib.
In classic blogger template, JQuery library isn't added in the document already. So to make the JQuery codes work you first have to implement the JQuery library.To do that in blogger, Go to Blogger Dashboard -> Template -> Edit HTML -> Use CTRL+F and find </head> and paste this HTML script tag just above </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>This is just the first step, now read further for the real trick.
The JQuery to make the effect
The main think we have to focus on this is the correct selector so it should work for your blog too. Although there i know the basic selector for classic blogger templates and can be applied on any template unmodified.This is the magical code doing it all, study it well and read what ever line is about
<script type="text/javascript">
$(document).ready(function(){
$('.sidebar .title').one("click",function(){
$(".sidebar .widget-content").slideToggle("slow");
});
});
</script>
Note : The first and last line is just to wrap it into script tag to be placed in the document.- Line 2 : It tells the browser to load the Jquery after the document is fully loaded and read for performing JQuery effects
- Line 3 : The whole line describes that when .title in the .sidebar gets clicked then perform the function (which is in the next line)
- Line 4 : Continuing from the above line, it plays the function that was declared in the 3rd line, it makes the .widget-content inside .sidebar to hide when it's visible on a click event and when it's already hidden it's comes back in view.
- Line 5 and 6 : Ending for the above lines
You can use this on other areas of your blog just by making some changes in selectors, selectors can be identified easily with chrome developer tools.
Result : So when you are done placing the codes at right place, Save the template and refresh your blog using CTRL+F5 to ensure that all files are loaded freshly. Now try clicking on title of any of your gadget and see the amazing toggle effect. That will just make you blog to a new level.
Your feedback ?
This tutorial is designed to make implementation of JQuery in blogger easy and make you understand jquery, so if you find anything difficult and don't understand it then drop your comments and we may just look to it.This JQuery will not work on some blogs having different templates, so if you don't have any idea what to do then post your blog links in the comment and we will guide you through the process.
