Hvordan Design en roterende Header for Blogger

Hvordan Design en roterende Header for Blogger


Blogger - Googles Enkel publisering nettsted - gir brukerne registrerte alle de verktøyene de trenger for å lage en tilpasset nettside. Fra prefabrikkerte maler og oppsett til en rekke gadgets kan du legge til som sideelementer, Blogger lar deg bygge, design og publisere materiale på Internett. For å øke den estetiske appell av bloggen din, kan du opprette en roterende header for bloggen din ved hjelp av en Blogger-modul og Javascript.

Bruksanvisning

1 Klikk på "Design" -kategorien på dashbordet på Blogger-kontoen din.

2 Velg "Page Elements" fra listen over alternativer under "Design" -kategorien.

3 Klikk på "Legg til gadget" linken øverst i bloggen din - der overskriften ville gå. Hvis bloggens layout ikke har "Legg til gadget" linken her, og klikk på linken som ligger på bloggen din sidebar eller bunntekst - du kan flytte den til toppen av bloggen din senere.

4 Bla nedover i pop-up vindu til du ser gadget som heter "HTML / Javascript" og velg.

5 Skriv dette Javascript-kode inn i tekstboksen:

<Style type = "text / css">

ran1, # ran2, # ran3 {display: none;}

</ Style>

<Script type = "text / javascript">

window.onload = function () {

Var VM = (Math.floor (Math.random () * 3) 1);

document.getElementById ( 'kjørte' + VM) .style.display = 'inline';

}

</ Script>

<P id = "randomP">

<Span id = "ran1"> PRØVE TEKST # 1 </ span>

<Span id = "ran2"> PRØVE TEKST # 2 </ span>

<Span id = "ran3"> PRØVE TEKST # 3 </ span>

</ P>

Trykk på knappen Lagre nederst i vinduet.

6 Endre Javascript-koden fra trinn 5 for å tilpasse ditt roterende spissen. Du kan legge til så mange eller så få roterende funksjoner som du vil ved å endre tre elementer. Den andre linjen i koden har pakken "# ran3" i det; hvis du ønsket å legge til flere roterende elementer - fire, for eksempel - du vil legge til "# ran4" etterpå. Hvis du ville ha færre elementer - to, for eksempel - du vil slette "# ran3."

Den sjette linje av koden har nummer tre (3) i det, noe som reflekterer antall roterende elementer i koden. Hvis du har endret antall elementer i den andre linjen til fire, ville du trenger å endre nummer tre til nummer fire (4). Tallet i seks skal samsvare med antall elementer i linje to.

Det siste du trenger å endre, for å justere antall elementer, er den nest siste linje av koden. Hvis du vil legge til flere elementer, kopiere denne linjen og lim den direkte under. Endre nummer tre til nummer fire. Hvis du ønsker å slette den tredje roterende funksjonen, vil du kopiere og slette det nest siste linje. Igjen, bør antallet i den nest siste linje samsvarer med tallene i den andre og sjette linje av koden.

7 Erstatt eksempelteksten i din header med bilder. Slette "SAMPLE TEKST # 1" og erstatte den med HTML-koden for et bilde, for eksempel:

<a> <img style = "float: center; margin: 0 0 10px 10px; cursor: pekeren; cursor: hand; width: 400px; height: 300px;" /> </a>

8 Klikk på gadget du nettopp opprettet, og dra den til toppen av bloggen din. Lagre innstillingene ved å klikke på "Lagre" -knappen øverst til høyre på skjermen.