09.03.2016.

CSS3 meni za vas blog


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.


5 коментара:

  1. Dopada mi se ovo, ali ne mogu da nadjem kod mene: Pronadjite (CTRL+F) ]]></b:skin i dodajte izned njega sledeci kod:

    ОдговориИзбриши
    Одговори
    1. Pronadjite b:skin, to bi izgledalo kao na slici http://prntscr.com/af7kfs, potrebno je samo da kliknete na crnu strelicu koju sam obelezio i kod ce se prosiriti, a onda pronadjite ]]></b:skin.

      Избриши
    2. Nasla sam, ali ne mogu da postavim na vrh?

      Избриши
    3. Probajte sa dodavanjem koda kao na slici http://prntscr.com/af91di. Drugi kod postavite ispod Zaglavlja tj. "Header" http://prntscr.com/af932n.

      Избриши
  2. Hvala puno, ali ocigledno danas nije moj dan. Ne mogu nikako da se snadjem. Lep pozdrav!

    ОдговориИзбриши