28 Jun 2012

How To use Jquery Toggle Effect in Blogger



jquery toggle effect
In my previous posts i gave you the tutorials on how to create various Jquery toggle effect menus. In this tutorial i am going to give you some small illustration on how to use those Jquery toggle effects in blogger blogs. Well you know that i have taken the example of ul tags and div tags in different toggle effect tutorials to make the tutorial more simpler and understandable. I recommend that you use same tags for a particular toggle effect as i have used in the Jquery tutorials. So let us move with the structure of how to use Toggle effects on your blogger blog.




Jquery Toggle() Effect Series
How To Use Toggle Effects In Blogger

Jquery Toggle Effect Tutorial

Lets Start With The CSS Part

This is the important and tricky part you must be aware of in customizing your menu for better appearance and professional look. CSS is not a hard task if you give some time to understand it. Use the same Css codes as i have used in previous tutorials and you can however make some modifications to it and you can even make it a horizontal menu by editing the CSS. Use some online tools to create and test your CSS style. Once after you created Css style for your menu, You need to go to blogger dashboard --> Template --> Edit HTML and find for ]]><b:skin> and paste your CSS code just above it.

Creating HTML Part

Create your own HTML menu for better customizations. Use the same tags as i have used in the previous toggle effect tutorials and you can easily create an HTML menu using those tags. You can expand the HTML tags to add some more options to your toggle menu. Understanding the elements of HTML part is necessary before making customizations on it.

Adding Jquery Toggle Effect

I have already given you the Jquery scripts for different types of toggle effects and as you have used the same HTML parts to create your own unique menu, just have a look over defining the id or class of your custom menu bar inside the Jquery script and make the necessary changes.

Once after your HTML part and Jquery scripts are ready, Go to blogger dashboard -->Template --> Edit HTML and find for <head> tag and place your HTML and Jquery codes Just below it along with Jquery 1.7.1 script tag.

Now your Jquery menu is clearly set in blogger and is ready to showcase on your blogger blog. Hope this series helped you in learning various toggle effects and understanding the steps involved in implementing these  menus on your blogger blog. If you feel difficult at any part, feel free to ask me in the comment section below and i would be pleased to help my blogging friend like you. Peace and blessings pals. . :)


0 comments:

       

Confused? Feel free to ask

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.

Note:

 

Something About Author:

My Photo
The CEO of "My Creative Web Solutions".

One Of The Science Student Of India With A Blogging Passion And Hobby. .He wants To Be A Tech Geek And Spread The Latest Technologies Of  Web Developments Like Html, Css, Javascript, Jquery, php, Ajax, Blogging Fushion  With his Friends Like You And He Is On his purpose With the Innovation of His Blog At Bloggertricks.biz

Have Projects!?.. Get To Me Via 

Follow Us: