BizriL blog

25.6.09     + Bagikan / Simpan Post Ini

HORIZONTAL GLOSSY CSS MENU

CSS is Cascading Style Sheet, which is the command to format the various forms or variations of both the text and the variations with the release of HTML with so much and re-repeated commands. With this CSS command one can represent the other commands. Currently, the CSS has been dominated in the making of the homepage, blog and blogger layout. If you see the source code of blogger layout, much is using CSS.
On this post I want to explain about how to make horizontal menu bar using CSS.
Sit down and relax, follow and learn step by step :

Click Sttings-Edit HTML and Check Expand Widget Templates, Dont forget to back-up your template first before you change it !

Find out this code

</head>

Copy this code bellow and paste upper that code :

<style type="text/css">

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>


After that codes has copied, and then find out this codes :


</b:includable>
</b:widget>
</b:section>
</div>


copy and paste the code below under the appropriate code before :


<ul class="glossymenu">
<li class="current"><a href="http://your_url/"><b>Home</b></a></li>
<li><a href="http://
your_url/"><b>CSS</b></a></li>
<li><a href="http://
your_url/"><b>Forums</b></a></li>
<li><a href="http://
your_url"><b>Webmaster Tools</b></a></li>
<li><a href="http://
your_url/"><b>JavaScript</b></a></li>
<li><a href="http://
your_url"><b>Gallery</b></a></li>
</ul>


WAIT, not finish yet !! After all codes has copied you must :

- Change the blue typed words with your own image URL !
- Change the green typed words with your own URL to link the menu !
- Change the red typed words with your own MENU !
- You may download the images menu here :


menur_bg.gif
menur_hover_left.gif
menur_hover_right.gif

Upload all images to your own hosting place !!

You can add or sub the menu depend on your needed.
Example :
Look at my own horizontal menu ! it made by CSS codes.
Now it has finish, SAVE TEMPLATE and enjoy this menu !!

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster

facebook comments
logo32g 4 comments

4 komentar:

  1. Hola Indra,

    Thank you for visiting and awesome comment on BlogBeginners.com

    Really appreciate it very much.

    Thanks for this tutorial. Having Horizontal Glossy CSS Menu on my template would be nice. Hopefully I can try it out soon.

    See you around my friend. Greetings and lots of love from Malaysia.

    ~ ArahMan7

    BalasHapus
  2. You are welcome my friend ArahMan7
    I always like to visit your blog Blogbeginners.com many good blogging tutorial there.
    Maybe we can share another tips.
    See you

    BalasHapus
  3. mantap cuy tutorialnya, n txs ya... dah ngasih tau... moga trus sukses..
    AhMaD_Z

    BalasHapus
    Balasan
    1. Thanks for comment.
      Mantap juga cuy komennya :)

      Hapus

Bizril Blog ™ adalah DoFollow blog
.
Tulislah komentar dengan menggunakan bahasa yang baik dan tidak menyinggung SARA (Suku, Agama, Ras dan Antar golongan). Usahakan agar komentar anda relevan dengan topik bahasan.
Boleh menyertakan 1 link pada komentar, tetapi jika lebih dari 1 link akan dihapus.
Terimakasih atas komentar anda.