En header till Samkii – 2011.

untitled_148357485

0 kommentarer

Blogg.se: Tidsinställ inlägg på bloggportalen.

1. Du skriver en text, lägger upp bilder eller vad du nu vill att det ska vara i ditt inlägg.
2. Du klickar på kalender-ikonen som syns på bilden nedanför och väljer ett datum som inlägget ska visas i.

tidsinstll-inlgg_113400827_147768732

0 kommentarer

Blogg.se: Ladda upp en bild på bloggen.

Så här gör du om du vill ladda upp en bild på bloggen, som bara kommer synas för dig. – Men du kan sedan använda bilden i bloggen!

1. Klicka på fliken: ”Skapa” och sen på under fliken: ”Bild”.
2. 
Klicka på: ”Välj Fil” och leta upp bilden du vill ladda upp.
3. 
Välj storlek på bilden som du vill ha.
(Du kan även skriva in rubriktext samt bildtext ifall du vill, dock inget måste!)
4.
 Klicka på: ”Ladda Upp Bild” och sedan är det klart..
5. – Om du vill använda bilden i bloggen, som till exempel en bakgrundsbild eller som en bild i menyn, så måste du också kopiera bild adressen till bilden. Och det gör du genom att klicka på den bilden som du har laddat upp så att den öppnas i ett eget fönster.

6. Kopiera sedan adressen till bilden, alltså den adressen som står i din webbläsare när du har bilden uppe. – Ungefär så här:

– Adressen som jag har markerat i grå färg är den adressen du ska kopiera..
untitled_147212420(Denna bilden är bara ett exempel.)
0 kommentarer

Blogg.se: Meny under headern.

Här kommer inlägget om hur man får en meny med länkar under headern. Det är ganska krångligt att förklara allt men jag hoppas att ni förstår, annars får ni berätta för mig vad som är ”krångligt”. Jag gör ett försök i varje fall!

1. 
Klicka på fliken: ”Design” och sedan vidare på: ”Redigera Stilmall”.
2. Klista in följande längst ned i stilmallen:
#meny3 li{
display: inline;
}

#meny3 ul{
float: left;
width: 100%;
background: #666;
font: 12px arial;
color: #fff;
padding:0px;
margin:0px;
}

#meny3 ul a{
float: left;
color: #fff;
text-decoration: none;
font-weight: bold;
padding: 0.3em 2em;
}

#meny3 a:hover{
background: #666;
font-weight: bold;
color: #000;
}
3. 
”Spara Stilmall”.
4.
 Klicka nu vidare till: ”Kodmallar”.
5.
 Precis innan: ”<div id=”content”>” klistrar du nu in:

<div id=”meny3″>
<ul>
<li><a href=”länk adess1″>NAMN PÅ LÄNK1</a></li>
<li><a href=”länk adess2″>NAMN PÅ LÄNK2</a></li>
<li><a href=”länk adess3″>NAMN PÅ LÄNK3</a></li>
<li><a href=”länk adess4″>NAMN PÅ LÄNK4</a></li>
<li><a href=”länk adess5″>NAMN PÅ LÄNK5</a></li>
</ul>
</div>
6. 
Nu fixar du till det som du själv vill ha det. Där jag har skrivit: ”NAMN PÅ LÄNK1” och så vidare. Där skriver du in eget namn på länkarna. Där det står: ”länk adress1”, där klistrar du in adressen dit du vill länka. Vill du till exempel länka till: ”Kategorin – Allmänt”, så blir det så här: ”<li><a href=”http://DIN BLOGGS NAMN.blogg.se/category/allmant.html”>ALLMÄNT</a></li>”
7. 
När du är klar med det, är det bara att ”Spara Kodmall”.
8. 
Om du nu vill ha ett annat utseende på menyn, får du klicka dig in på: ”Stilmallen” igen och leta upp det du klistrade in i steg: ”2”.
#meny3 li{
display: inline;
}

#meny3 ul{
float: left;
width: 100%; <- Här ändrar du längden på menyn.
background: #666; <- Här ändrar du bakgrundsfärgen på menyn.
font: 12px arial; <- Här ändrar du teckensnitt och storlek på texten.
color: #fff; <- Här ändrar du färgen på texten.
padding:0px;
margin:0px;
}

#meny3 ul a{
float: left;
color: #fff;                   <- Här ändrar du färg på texten.
text-decoration: none; <- Här ändrar du om texten ska vara understucken eller ej. – None eller underline.
font-weight: bold;       <- Här ändrar du tjocklek på texen. – Normal eller bold.
padding: 0.3em 2em;  <- Här ändrar du mellanrummet uppåt och nedåt samt åt sidorna.
}

#meny3 a:hover{
background: #666; <- Här ändrar du bakgrundsfärgen vid mouse over.
font-weight: bold; <- Här ändrar du tjocklek på texen vid mouse over. – Normal eller bold.
color: #000; <- Här ändrar du färg på texen vid mouse over.
}
9. När du har gjort allting ovanför, så rekommenderar jag att du klickar på: ”Förhandsgranska” innan du sparar Stilmallen. – För om någonting har blivit fel så syns det ju när du Förhandsgranskar din egna blogg..

0 kommentarer

Textboxar och CSS.

Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga de flesta HTML-objekt och du kan lägga in bakgrundsfärg, bakgrundsbilder och göra andra formateringar av texten. En box är med andra ord ett område med text, bilder eller annan information på ett begränsat område.

1. Första boxen:
Vi gör en första box som är 200 pixlar bred och 150 pixlar hög. Den har alltså ett bestämt område som texten vi skriver inom exempelvis html-koden p kommer att hålla sig inom.

Namnlös

<style type=”text/css”>
<!–
.box { background-color: #cccccc; height: 150px; width: 200px; padding: 4px; border: 2px solid #004080; }
–>
</style>

I HTML-koden skriver du sedan:
<p>Du definierar..</p>

Med padding menas det med hur långt ifrån/hur nära texten får komma kanten av boxen.

2. En box med rullningslist:
Varför inte lägga till en rullningslist till boxen också?

yuj

Du definierar ett område eller en box på exempelvis 200 pixlar i bredd och 150 pixlar i höjd. I detta område kan du sedan lägga det flesta HTML-objekt och du kan lägga in bakgrundsfärg, bakgrundsbilder och göra andra formatteringar av texten. En box är med andra ord ett område med text, bilder eller annan information på ett begränsat område.

<style type=”text/css”>
<!–
.box2 { height: 70px; width: 200px; padding: 4 px; background-color: #cccccc; border: 1px solid #000000; overflow: auto; }
–>
</style>

Och i HTML-koden ser det ut så här:
<p>Du definierar..</p>

Jag minskade höjden till 70 pixlar, så att all text inte fick plats inom boxen.
Sedan angav jag också overflow: auto och så skapades en rullningslist.

0 kommentarer

Filter och CSS.

Detta avsnitt kallas filter och fokuserar på vad man kan åstadkomma för filter-effekter på texten. Jag ger först ett exempel på filter-effekten och sedan vilken kod som krävs för att uppnå respektive effekt.

Glöd/Glow Glöd
Koden till ovanstående:
<style type=”text/css”>

<!–
{
font-family: Verdana, ‘Times New Roman’, ‘Sans-Serif’;
font-style: italic;
font-size: 10pt;
font-weight: bold;
color: #000000;
}
–>

</style>


Glöd
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #ffffff;
filter: Glow(Color=ff6900, Strength=3);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>


Skugga/Shadow Skugga
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #ffffff;
filter: Glow(Color=ff6900, Strength=3);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>


Droppskugga
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
color: #004080;
filter: DropShadow(Color=0099cc, OffX=4, OffY=4, Positive=0);
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>


Suddigt/Blur
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
font-weight: bold;
color: #004080;
filter: Blur(Add=1, Direction=130, Strength=8);
width: 300px;
height: 65px;
}
–>

</style>


Suddigt
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 35px;
font-weight: bold;
color: #004080;
filter: Blur(Add=1, Direction=0, Strength=13);
width: 300px;
height: 65px;
}
–>

</style>


Flipp/Flip
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 25px;
color: #004080;
filter: FlipV;
width: 300px;
height: 65px;
font-weight: bold;
}
–>

</style>


Flip
Koden till ovanstående:

<style type=”text/css”>

<!–
.box {
font-size: 25px;
color: #004080;
filter: FlipH;
width: 200px;
height: 65px;
font-weight: bold;
}
–>

</style>


Toning/Alpha
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
color: #004080;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=50, StartY=50, FinishX=0, FinishY=100);
width: 300px;
height: 110px;
font-weight: bold;
}
–>

</style>


Toning
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
color: #004080;
filter: Alpha(Opacity=100, FinishOpacity=0, Style=2);
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>


Vågor/Wave
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
filter: Wave(Add=1, Freq=6, LightStrength=4, Phase=5, Strength=4);
color: #004080;
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>


Vågor
Koden till ovanstående:
<style type=”text/css”>

<!–
.box {
font-size: 65px;
filter: Wave(Add=0, Freq=6, LightStrength=3, Phase=7, Strength=4);
color: #004080;
width: 300px;
height: 100px;
font-weight: bold;
}
–>

</style>

0 kommentarer

Blogg.se: Förändra utseendet på muspekaren.

Jag har sammanställt det möjligheter som finns när det gäller att förändra muspekarens utseende på bildskärmen. För muspekaren över länkarna nedan för att se hur den förändras. För vart och ett av alternativen ser du också vilken kod som krävs i den länk du lägger in på din sida, för att få det fungera.

Observera att allt inte fungerar i alla webbläsare.

<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>
<a href=”cursor.html”> </a>

– Koden som är ovanför bilden ska du lägga in under den gråa texten som jag har markerat..

untitled_147067138(Denna bilden är bara ett exempel.)
0 kommentarer