samedi 5 mai 2012

How to style a HTML menu using CSS in Google blogger

This blog article builds on a previous post where I discussed how to create a HTML menu in your Google blog.  Utilising CSS, you can easily style your HTML menu without needing to change any of your overall settings that you have made in your Template Designer.

Below, in 12 easy steps, we are going to create a CSS class containing your styling instructions and then tell your HTML menu to look at your CSS class.

Locate Add Custom CSS panel in your blog
1.            Go to the Design tab in your blog.
2.            Select Template Designer.
3.            Select Advanced.
4.            Select Add CSS to display your “Add custom CSS” panel.
Add custom CSS panel
Get CSS code for your menu
5.            From a different browser window, choose one of the CSS styles located at
               the bottom of this article to style your menu.
               If you don’t like the colours or something else quite minor, don’t worry, you
               can play with the CSS style until you are happy with your menu a little bit
               later.
6.            Copy and paste the relevant CSS code into your “Add Custom CSS” panel
               in your blog.
7.            Select Apply To Blog.

Locate your HTML menu gadget in your blog
8.           In a different browser window again, go to the Design tab in your blog.
9.           Select Edit on your HTML/JavaScript gadget.
Edit HTML/JavaScript gadget
Get your HTML code
10.         Copy and paste the below HTML code into your HTML menu gadget.
              Carefully change all your links and the title of your links to reflect the
              links you want in your menu.

<div class="techamenu"><ul> 
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3RoZXRlY2huaWNhbGF1dGhvci5ibG9nc3BvdC5jb20v">Latest Blog Entry</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3RoZXRlY2huaWNhbGF1dGhvci5ibG9nc3BvdC5jb20vcC9ibG9nLWluZGV4Lmh0bWw=">Blog Index</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29t">The Technical Author</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL2NvbnRhY3QuYXNweA==">Contact Details</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3dyaXRpbmdzZXJ2aWNlcy5hc3B4">Writing Services</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3dlYnNlcnZpY2UuYXNweA==">Online Services</a></li>
<li><a href="http://c-lien.blogspot.com/?aHR0cDovL3d3dy50aGV0ZWNobmljYWxhdXRob3IuY29tL3BlcnNvbmFsLmFzcHg=">Author's Professional Details</a></li>
</ul></div>

11.          Select Save.


View your new menu
12.          Open another browser window and check that you are happy with the way
               your blog looks.  If not, you can go back to your CSS code and change
               the settings until you are happy with what you have.

Editing and styling your CSS is heaps of fun and I would recommend it.  However, I also want to warn that that this can become very addictive!

Editing your CSS code later on

The bad side with using the Template Editor to add CSS code is that once you have moved on to do other things, you may no longer see your CSS code in the Add Custom CSS panel.  However, don’t worry, you can still alter it.  I have a posting already created on how to edit your CSS code.

If you have any problems, don't hesitate to comment below and I will be happy to help.

Pink Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: bold 11px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li{
border-bottom: 1px solid #CCCCCC; /* gray border beneath each menu item */
}

.techamenu li a{
display: block;
background: #FFF0F5; /* to display a block colour behind each link */
color: #000000;
width: auto;
border-left: 4px solid #FFA1A3;
border-bottom: 2px solid #FFFFFF;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited {
color: #000000;
}

.techamenu li a:hover {
background:  #FFA1A3;  /* settings for hover over effect  */
color: #000000;
}

.techamenu li.lastitem, border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link */
}


Blue Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: bold 11px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li{
}

.techamenu li a{
display: block;
background: #FFFFFF; /* to display a block colour behind each link */
color: #191970;
width: auto;
border: 1px solid #191970;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited {
color: #191970;
}

.techamenu li a:hover {
background: #191970; /* new colour setting for hover over effect  */
color:  #FFFFFF;
}

.techamenu li.lastitem {
border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link  */
}
Green Menu

.techamenu{
margin: 0;
padding: 0;
width: 245px;
font: 10px Arial;
}

.techamenu ul{
margin: 2px;
padding:1px;
list-style-type: none;
}

.techamenu li a{
display: block;
background: #FFFFFF; /* to display a block colour behind each link */
font: bold 11px;
color: #000000;
width: auto;
border-left: 1px solid #006400;
border-bottom: 1px solid #006400;
padding: 7px 0;
text-indent: 8px;
text-decoration: none;
}

.techamenu li a:visited{
color: black;
}

.techamenu li a:hover{
background:  #006400; /* settings for hover over effect  */
color: #FFFFFF;
}

.techamenu li.lastitem {
border-bottom-width: 0; /* remove bottom border on final item */
}

.techamenu li.lastitem {
padding: 8px 0; /* compensation of last menu link */
}
Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)