Hvordan legge til en rullemeny til Linkbar i Blogger

Legg en drop-down til koblingen bar i Blogger for å forenkle navigeringen på din Blogger-blogg for leserne. Legge til drop-down menyer til bloggens navigasjon gir besøkende flere alternativer for å gå videre når han flytter markøren over menyen. Installasjonen krever innsetting av koden på bloggen.

Bruksanvisning

1 Logg på Blogger med Google legitimasjon. Velg "Design" fra under navnet på bloggen som du vil legge til drop-down menyer.

2 Velg "Rediger HTML" og deretter bla gjennom dokumentet før du kommer til </ head> -taggen. Klikk på linjen over tag, høyreklikk og lim inn følgende kode:

<Style>

sddm

{Margin: 0;
padding: 0;
z-index: 30}

sddm li

{Margin: 0;
padding: 0;
list-style: none;
float: left;
/

Font fra menyen øverst /
font: bold 11px arial}

sddm li en

{Display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/ Bredde på hver meny topp /
width: 60px;
/ Bakgrunnsfarge på hovedmenyen /
bakgrunn: # 5970B2;

/ Tekst farge på hovedmenyen /
color: #FFFFFF;
text-align: center;
text-decoration: none}

sddm li a: hover

{

/ Bakgrunnsfarge på hovedmenyen på hover /
bakgrunn: # 49A3FF}

sddm div

{Position: absolute;
synlighet: skjult;
margin: 0;
padding: 0;

/ Bakgrunnsfarge på rullegardinmenyen /
bakgrunn: #FFFFFF;
/ Grensen av rullegardinmenyen /
border: 1px solid # 5970B2}

sddm div en

{Position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: NOWRAP;
text-align: left;
text-decoration: none;
/ Bakgrunnsfarge på hver meny element /
bakgrunn: #FFFFFF;
/ Tekst farge på hver meny element /
color: # 2875DE;
/ Font av hvert menyelement /
font: 11px arial}

sddm div a: hover

{
/ Bakgrunn av hvert element på hover /
bakgrunn: # 49A3FF;
/ Font fargen på hvert menyelement på hover /
color: #FFFFFF}
</ Style>
<Script type = "text / javascript">

Var timeout = 500;
Var closetimer = 500;
Var ddmenuitem = 0;

// Åpne skjulte laget
funksjon mopen (id)
{
// Avbryte nær timer
mcancelclosetime ();

// Nær gamle lag
if (ddmenuitem) ddmenuitem.style.visibility = & # 39; skjult & # 39 ;;

// Få nytt lag og vise det
ddmenuitem = document.getElementById (id);
ddmenuitem.style.visibility = & # 39; synlig & # 39 ;;

}
// Nær viste lag
funksjon mclose ()
{
if (ddmenuitem) ddmenuitem.style.visibility = & # 39; skjult & # 39 ;;
}

// Gå nær timer
funksjon mclosetime ()
{
closetimer = window.setTimeout (mclose, timeout);
}

// Avbryte nær timer
funksjon mcancelclosetime ()
{
if (closetimer)
{
window.clearTimeout (closetimer);
closetimer = null;
}
}

// Nær lag når klikk-out
document.onclick = mclose;
</ Script>

Erstatte eventuelle fargekode elementer med fargekoder som tilsvarer bloggens tema, klikk på "Lagre mal". Velg "Page Elements" linken øverst på siden.

3 Velg "Legg til gadget", deretter "HTML / Javascript". Høyreklikk i "Body" -feltet, og deretter lime inn følgende kode:

<Ul id = "sddm">
<Li> <a href = "#"
onmouseover = "mopen ( 'm1')"
onmouseout = "mclosetime ()"> Hjem </a>
<Div id = "m1"
onmouseover = "mcancelclosetime ()"
onmouseout = "mclosetime ()">
<a href="#"> Først Meny # 1 Alternativ </a>
<a href="#"> Second Meny # 2 Alternativ </a>
<a href="#"> Tredje Meny # 2 Alternativ </a>
</ Div>
</ Li>
<Li> <a href = "#"
onmouseover = "mopen ( 'm2')"
onmouseout = "mclosetime ()"> Last ned </a>
<Div id = "m2"
onmouseover = "mcancelclosetime ()"
onmouseout = "mclosetime ()">
<a href="#"> Først Meny # 2 Alternativ </a>
<a href="#"> Second Meny # 2 Alternativ </a>
<a href="#"> Tredje Meny # 2 Alternativ </a>
</ Div>
</ Li>
<Div style = "clear: både"> </ div>

Bytt ut "#" bak hver "<a href=>" element med nettadressen til siden du vil koble, og sett prøven tittelen bak hver med tittelen på siden. Klikk "Lagre Widget".

4 Se bloggen din i en ny fane eller et vindu. Drop-down menyer er nå aktive i linken bar.