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 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. . :)
Post a Comment