CSS3 meni za vas blog

Ulepsajte vas blog - CSS3 meni

Jedna od bitnijih stvari za uspeh vaseg bloga jeste da vas blog bude sto atraktivniji i sto lepsi. Za atraktivnost vaseg bloga, "menu bar" je na prvom mestu. Morate imati lep "menu bar" na vasem blogu !

U ovom postu, ja cu objasniti kako da dodate CSS3 meni na vasem blogu.

1.

• Ulogujte se na vas Blogger Account i idite na opciju "Sablon".
• Kliknite na "Izmeni HTML"
• Pronadjite (CTRL+F) ]]></b:skin i dodajte izned njega sledeci kod:

/* The CSS Code for the menu starts here */

nav ul{  padding: 0;
    margin: 0;
    list-style: none;      
}
nav li
{ float: left;}
nav a{
    float: left;
    color: #FFFFFF;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid #660099;
    font: bold 14px Arial, Helvetica;     
    background-color: #660099;
    background-image: -moz-linear-gradient(#400099, #660099);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#400099), to(#660099));    
    background-image: -webkit-linear-gradient(#400099, #660099);
    background-image: -o-linear-gradient(#400099, #660099);
    background-image: -ms-linear-gradient(#400099, #660099);
    background-image: linear-gradient(#400099, #660099);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8);    
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset;    
}
nav a:hover
{
    background-color: #400099;
    background-image: -moz-linear-gradient(#660099, #400099);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#660099), to(#400099));      
    background-image: -webkit-linear-gradient(#660099, #400099);
    background-image: -o-linear-gradient(#660099, #400099);
    background-image: -ms-linear-gradient(#660099, #400099);
    background-image: linear-gradient(#660099, #400099);
}
nav a:active
{
    background: #000000;
    position: relative;
    top: 2px;    
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}
nav span
{
    border: 1px dashed #eba1a3;
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;    
    background-color: #000000;
    background-image: -moz-linear-gradient(#400099, #990099);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#400099), to(#990099));      
    background-image: -webkit-linear-gradient(#400099, #990099);
    background-image: -o-linear-gradient(#400099, #990099);
    background-image: -ms-linear-gradient(#400099, #990099);
    background-image: linear-gradient(#400099, #990099);
}

nav a:hover span
{    
    background-color: #000000;
    background-image: -moz-linear-gradient(#990099, #400099);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#990099), to(#400099));      
    background-image: -webkit-linear-gradient(#990099, #400099);
    background-image: -o-linear-gradient(#990099, #400099);
    background-image: -ms-linear-gradient(#990099, #400099);
    background-image: linear-gradient(#990099, #400099);
}

• Sacuvajte

2.

• Sada je potrebno da kliknete na opciju "Izmeni"
• Kliknite na "Dodaj Gadzet" > HTML / JavaScript
• Dodajte sledeci kod:

<nav>
    <ul>
        <li><a href="#"><span>Home</span></a></li>
        <li><a href="#"><span>Kategorije</span></a></li>
        <li><a href="#"><span>Opste</span></a></li>                
        <li><a href="#"><span>Bloggerisanje</span></a></li>
        <li><a href="#"><span>Kontakt</span></a></li>
        <li><a href="#"><span>Trikovi</span></a></li>
    </ul>
</nav>

• Sacuvajte i to je to.

Mesta gde se nalazi # zamenite vasim URL-om.

Mesta oznacena crvenom bojom izmenite po vasoj zelji.