Welcome visitor! Please wait till I load my blog page...

.......

25 “Vertical” Navigation Menus For Blogger – CSS-HTML Tab Menus



The CSS Menus Tutorials and Articles Tutorials section below has links to helpful CSS tutorials on creating CSS menus, CSS navigation tutorials and tips, styling lists.A reader wanted to know how he could add a navigation menu bar in the header. You can add your most frequently occuring labels as tabs in the header.Many thanks to Christopher and Highdots for making this code and I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers.

  • 17+ Featured Content Slider for Blogger Using jQuery Tutorial





  • How To Add A Vertical Navigation CSS Menu To Blogger? 


    Well the process is as simply as it can be. Simply follow these steps carefully,

    1.Log in to Blogger,go to Design -> Edit HTML
    and mark the tick box "Expand Widget Templates" and Back-up your template.


    All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!


    2. Paste the CSS code for your selected Menu just above ]]></b:skin>

    3. For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.


    • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
    • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>
    Note:- Since most templates use different coding. 
        4.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D





    Editing The Links In The Navigation Menu 

    To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,


    <li><a href="#1" >Link 1</a></li>
    <li><a href="#2" >Link 2</a></li>
    <li><a href="#3" >Link 3</a></li>
    <li><a href="#4" >Link 4</a></li>
    <li><a href="#5" >Link5</a></li>


    Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from the HTML code,


    <li><a href="#" >Link</a></li>















    Live Demo






    Navigation Menu #1

    Navigation Menu 1 
    CSS CODE:











    HTML CODE:











    Navigation Menu #2

    Navigation Menu 2
    CSS Code:











    HTML Code:











    Navigation Menu #3

    Navigation Menu 3
    CSS Code:











    HTML Code:












    Navigation Menu #4

    Navigation Menu 4
    CSS Code:











    HTML Code:











    Navigation Menu #5

    Navigation Menu 5
    CSS Code:











    HTML Code:











    Navigation Menu #6

    Navigation Menu 6
    CSS Code:











    HTML Code:











    Navigation Menu #7

    Navigation Menu 7
    CSS Code:











    HTML Code:











    Navigation Menu #8

    Navigation Menu 8
    CSS Code:











    HTML Code:











    Navigation Menu #9

    Navigation Menu 9
    CSS Code:











    HTML Code:











    Navigation Menu #10

    Navigation Menu 10
    CSS Code:











    HTML Code:











    Navigation Menu #11

    Navigation Menu 11
    CSS Code:











    HTML Code:











    Navigation Menu #12

    Navigation-Menu-With-No-image-used
    CSS Code:











    HTML Code:











    Navigation Menu #13

    CSS Menu Tabs 13
    CSS Code:











    HTML Code:











    Navigation Menu #14

    CSS Menu Tabs 14
    CSS Code:











    HTML Code:











    Navigation Menu #15

    CSS Menu Tabs 15
    CSS Code:











    HTML Code:











    Navigation Menu #16

    CSS Menu Tabs 16
    CSS Code:











    HTML Code:











    Navigation Menu #17

    CSS Menu Tabs 17
    CSS Code:











    HTML Code:











    Navigation Menu #18


    CSS Menu Tabs 18
    CSS Code:











    HTML Code:











    Navigation Menu #19

    CSS Menu Tabs 19
    CSS Code:











    HTML Code:











    Navigation Menu #20

    CSS Menu Tabs 20
    CSS Code:











    HTML Code:











    Navigation Menu #21

    CSS Menu Tabs 21
    CSS Code:











    HTML Code:











    Navigation Menu #22

    CSS Menu Tabs 22
    CSS Code:











    HTML Code:













    Navigation Menu #23

    CSS Menu Tabs 24
    CSS Code:











    HTML Code:











    Navigation Menu #24

     CSS Menu Tabs 25
    CSS Code:











    HTML Code:











    Navigation Menu #25

    CSS Menu Tabs 26
    CSS Code:











    HTML Code:













    That’s All!
    Hope you have enjoyed the post.










    Thanks to My Blogger Trick

    1 comments: