Slik installerer du en Drop Down Navbar i Blogger

February 20

Hvis du ønsker å gjøre bloggen din skiller seg ut fra flokken, må du tilpasse den. Du kan gjøre dette ved å plukke eller opprette en mal ingen bruker, eller ved å redigere HTML-koden for å tillate tilpassede widgets, for eksempel en rullgardin navigasjonsfeltet. For å tilpasse navigasjonsfeltet, må du være erfaren med HTML-kode - men du kan legge til en navigasjonsfeltet til bloggen din ved å kopiere og lime inn et par stykker av kode.

Bruksanvisning

1 Gå til Blogger.com og logg på kontoen din.

2 Klikk på "Design". Dette tar deg til din blogg redigering grensesnitt.

3 Klikk på "Design" -kategorien.

4 Velg "Rediger HTML".

5 Klikk "Last ned hele malen" for å lagre en kopi av din nåværende mal som backup, i tilfelle noe går galt.

6 Klikk på boksen ved siden av "Utvid Widget Maler."

7 Finn "Header" segmentet av bloggen din mal. Du vil se denne teksten:

8 Kopier og lim inn følgende kode under overskriften segmentet av bloggen din mal. Merk at hvis du allerede har en navigasjons strekkode, må du lime over det.

Navigasjonsmenyen
-------------------------------------------------- ---- /

NavbarMenu {

width: 100%;
height: 35px;
bakgrunn: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) gjenta-x toppen;
color: # cdaa7d
margin: 0 auto 0;
padding: 0;
font: normal 12px Arial, Tahoma, Verdana;
border-top: 1px solid # 855e42;
border-bottom: 1px solid # 855e42;
}

NavbarMenuleft {

width: 1200px;
float: left;
margin: 0;
padding: 0;
}

nav {

margin: 0;
padding: 0;
}

nav ul {

float: left;
list-style: none;
margin: 0;
padding: 0;
}

nav li {

list-style: none;
margin: 0;
padding: 0;
}

nav li a, #nav li a: link, #nav li a: besøkte {

color: # ff0000;
display: block;
text-transform: kapitalisere;
margin: 0;
padding: 9px 15px 8px;
font: fet 12px Arial, Tahoma, Verdana;
}

nav li a: hover, #nav li a: active {

bakgrunn: #ffffff;
color: # 8b5a00;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}

nav li li a, #nav li li a: link, #nav li li a: besøkte {

bakgrunn: # cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) gjenta-x toppen;
width: 140 px;
farge: #fff;
text-transform: kapitalisere;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid # 855e42;
border-left: 1px solid # 855e42;
border-right: 1px solid # 855e42;
font: normal 12px Arial, Tahoma, Verdana;
}

nav li li a: hover, #nav li li a: active {

bakgrunn: #ffffff;
color: # 8b5a00;
padding: 7px 10px;
}

nav li {

float: left;
padding: 0;
}

nav li ul {

z-index: 9999;
position: absolute;
venstre: -999em;
height: auto;
bredde: 170 piksler;
margin: 0;
padding: 0;
}

nav li ul et {

width: 140 px;
}

nav li ul ul {

margin: -32px 0 0 171px;
}

nav li: hover ul ul, #nav li: hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

venstre: -999em;
}

nav li: hover ul, #nav li li: hover ul, #nav li li li: hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

venstre: auto;
}

nav li: hover, #nav li.sfhover {

stilling: statisk;
}

9 Finn følgende HTML-kode:

"/ B: del - / div"

Den enkleste måten å gjøre dette på er å trykke "Ctrl" og "F" samtidig for å åpne funksjonen "Finn" i nettleseren din, og deretter kopiere og lime: - ". Finn" "/ b seksjon / div" og klikk

10 Kopier og lim inn følgende kode under "/ b: del - / div":

<Div id = 'NavbarMenu'>
<Div id = 'NavbarMenuleft'>
<Ul id = "nav">
<Li> <a expr:href='data:blog.homepageUrl'> Hjem </a> </ li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
<Li> <a href='#'> SEKSJON </a>
<Ul>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
<Li> <a href='SECTION</a> & lt; / li "rel =" nofollow "> http://www.theredheadriter.com '> DEL & lt; / a> & lt; / li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div> <! - End navbar ->

11 Klikk "Preview" for å se hvordan den ser ut, klikk på "Lagre mal" hvis det ser bra ut.

Hint

Hvis du ikke liker hvordan navbar ser ut, kan du laste opp sikkerhetskopien av malen til Blogger for å gå tilbake til det du hadde før.