joi, 19 aprilie 2012

Meniu derulant pentru blogger

tutoriale bloggerDaca blogul dumneavoastra ofera multe informati din diferite categori atunci este timpu sa le faci vizitatorilor o navigare mai usoara adaugind blogul dumneavoastra pe categorii.
Deci daca utilizatori gasesc repede ce isi doresc vor mai reveni Meniurile derulante oferi o navigare usoara si curat prin organizarea şi oferind link-uri importante din categoria de blog

Instalarea este extrem de simpla

1.Du-te la Blogger> Aspect
2.Apasa Adaugati un obiect gadget alege HTML/JavaScript
3.Adaugati codul de mai jos in interiorul casetei



<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script> 
<style> 
/* ######### Drop Down Menu by www.blogger-trafic.blogspot.com ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/ 
font: normal 13px Verdana; 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
background: white; 
border: 1px solid black; 
border-bottom-width: 0; 
visibility: hidden; 
z-index: 100; 
}
.ddsubmenustyle ul{ 
margin: 0; 
padding: 0; 
position: absolute; 
left: 0; 
top: 0; 
list-style-type: none; 
border: 0px none; 
}
.ddsubmenustyle li a{ 
display: block; 
width: 170px; /*width of menu (not including side paddings)*/ 
color: black; 
background-color: lightyellow; 
text-decoration: none; 
padding: 4px 5px; 
border-bottom: 1px solid black; 
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/ 
display: inline-block; 
width: 170px; /*width of menu (include side paddings of LI A*/ 
}
.ddsubmenustyle li a:hover{ 
background-color: black; 
color: white; 
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/ 
padding-left: 4px; 
border: 0; 
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/ 
position: absolute; 
padding-top: 3px; 
left: 100px; 
border: 0; 
}
.ddiframeshim{ 
position: absolute; 
z-index: 500; 
background: transparent; 
border-width: 0; 
width: 0; 
height: 0; 
display: block; 
}


/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{ 
margin: 0; 
padding: 0; 
font: bold 12px Verdana; 
list-style-type: none; 
border-bottom: 1px solid gray; 
background: #414141; 
overflow: hidden; 
width: 100%; 
}
.mattblackmenu li{ 
display: inline; 
margin: 0; 
}
.mattblackmenu li a{ 
float: left; 
display: block; 
text-decoration: none; 
margin: 0; 
padding: 6px 8px; /*padding inside each tab*/ 
border-right: 1px solid white; /*right divider between tabs*/ 
color: white; 
background: #414141; 
}
.mattblackmenu li a:visited{ 
color: white; 
}
.mattblackmenu li a:hover{ 
background: black; /*background of tabs for hover state */ 
}
.mattblackmenu a.selected{ 
background: black; /*background of tab with "selected" class assigned to its LI */ 
}
</style>

<div id="ddtopmenubar" class="mattblackmenu"> 
<ul> 
<li><a href="#">LINK1</a></li> 
<li><a href="#" rel="ddsubmenu1">LINK2</a></li> 
<li><a href="#" rel="ddsubmenu2">LINK3</a></li> 
<li><a href="#">Link4</a></li> 
<li><a href="#" rel="ddsubmenu3">LINK5</a></li> 
</ul> 
</div>
<script type="text/javascript"> 
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar") 
</script>


<ul class='ddsubmenustyle' id='ddsubmenu1'> 
<li><a href='#'>LINK2 ITEM 1</a></li> 
<li><a href='#'>LINK2 ITEM 2</a> 
  <ul> 
  <li><a href='#'>LINK2 ITEM 2.1</a></li> 
  <li><a href='#'>LINK2 ITEM 2.2</a></li> 
  </ul>
</li> 
<li><a href='#'>LINK2 ITEM 3</a> 
  <ul> 
  <li><a href='#'>LINK2 ITEM 3.1</a></li> 


    </ul>
</li> 


<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>


<ul class='ddsubmenustyle' id='ddsubmenu2'> 
<li><a href='#'>LINK3 ITEM 1</a></li> 
<li><a href='#'>LINK3 ITEM 2</a></li> 
<li><a href='#'>LINK3 ITEM 3</a> 
  <ul> 
  <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li> 
  <li><a href='#'>LINK3 ITEM 3.3</a></li> 
  <li><a href='#'>LINK3 ITEM 3.4</a></li> 
  </ul> 
</li> 
<li><a href='#'>LINK3 ITEM 4</a></li> 
<li><a href='#'>LINK3 ITEM 5</a> 
  <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li> 
  <li><a href='#'>LINK3 ITEM 5.2</a> 
    <ul> 
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li> 
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li> 
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul> 
  </li> 
    </ul> 
</li> 
<li><a href='#'>LINK3 ITEM 6</a></li> 
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'> 
<li><a href='#'>LINK5 ITEM 1</a></li> 
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li> 
<li><a href='#'>LINK5 ITEM 4</a></li> 
<li><a href='#'>LINK5 ITEM 5</a></li> 
</ul>


De stiut



  • Inlocuiti # simbolurile cu link-uri de pagini
  • Inlocuiti textele LINK2 ITEM 1, LINK2 ITEM 2 cu titlurile de pagini
  • Pentru a crea un meniu vertical în interiorul un link Meniu principal este simplu de a adauga un atribut rel ca rel = "ddsubmenu 1 Modifica numarul corespunzator.
  • Link-uri principale sunt menţionate in primul drop jos link-uri de meniu sunt mentionate separat, dupa ce functia de apel JavaScript.
  • Pentru a schimba culoarea de fundal a meniului edita simplu background: #414141;

4. Salvaţi



Va astept cu intrebari
Si care cred ca nu se descurca lasati-mi un mesaj si va ajut sa il instalati dar in schimbul ajutorului oferit public un articol pe blogul dvs

5 comentarii:

  1. Super tare ! Bravo !Cel mai simplu ghid .M-am chinuit o saptamana sa bag un meniu, insa ,nu am reusit... pana am citit postarea ta . Merci mult !

    RăspundețiȘtergere
  2. Thanks for the lessons, I will always be behind you .... :) I wish you wonderful days!

    RăspundețiȘtergere
  3. Tutoriale foarte utile.
    Stima si Respect.

    RăspundețiȘtergere