Thursday 25 May 2017

How to Add a jQuery & CSS3 Menu to Blogger

Adding a custom menu to your Blogger blog can help your blog stand out from the crowd. To add a menu coded in the jQuery scripting language and controlled by CSS3 -- Cascading Style Sheet 3 -- design code, access your blog template’s HTML code and paste the necessary code elements into three portions of the blog template. Before configuring your blog, ensure you’ve correctly copied the necessary jQuery, CSS and HTML code snippets from the source script library or design website.

Image result for jQuery png
Download PL/SQL Developer lots of features, plug-ins & morewww.allroundautomations.com
1. Sign in to your Blogger account. Click “Design” below the title of the blog to which you want to add the jQuery and CSS3 navigation menu. Select “Edit HTML” in the Design submenu navigation bar at the top of the screen to access the HTML code for your blog.
2. Click the “Download Full Template” link at the top of the page to download and save a copy of your existing template to your computer’s hard drive. This allows you to restore the original template if you make a mistake when tweaking the template or dislike the new navigation menu.
3. Go to the “]]></b:skin>” code tag in your blog’s template. To find this element, press “Ctrl” and “F” on your keyboard to launch the page search tool.
4. Paste only the CSS3 code -- usually, the largest code element of the three codes you need for the menu -- immediately before “]]></b:skin>” in the template.
5. Go to the “</head>” tag in your blog template’s HTML. Again, use the page search feature to find the code swiftly.
6. Paste the jQuery code immediately before the “</head>” tag. The code looks similar to this example: 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/> <script src='http://source.example.com/files/menu.js' type='text/javascript'/>
7. Click “Save Template” at the bottom of the page. Click “Page Elements” in the Design submenu navigation bar.
8. Click “Add a Gadget” in the part of the page on which you want to display the navigation menu. This is usually at the top of the page so that you can run the menu across the full width of the blog under the header.
9. Select “HTML/Javascript” from the list of available Blogger Gadgets. Paste the HTML code for the menu into the input field in the gadget configuration window. Click the “Save” button to store your changes. Blogger publishes the jQuery/CSS3 navigation menu on your blog.

0 comments: