Ändringar i designen

slider

Jag bestämde mig för att förändra bloggen en aning då jag tyckte den var tråkig helt enkelt. Ovan ser ni den nya slider-headern med fyra bilder på mig som skrollar mellan varandra. Detta är den nya headern jag fixat, bättre bilder kommer, har inte haft någon riktig photoshoot än, men det kommer som sagt.

profilbildcontent

Valde även att ändra min profilbild under “ABOUT” i sidomenyn till höger. Fixade en väldigt snygg ram i guld. Ändrade även bakgrunden till en grå vattenfärg med stjärnor. Rymd och vattenfärg. Vad mer kan man önska sig liksom? Jag la även in nya sociala media-knappar i sidomenyn då de var på tok för små och jobbiga över headern som jag tidigare hade det. Bild nedan.

follow

Vad tycker ni om förändringarna? Hiss eller diss?

Continue Reading

Margin och padding.

Jag får dagligen frågor om hur man ändrar sina mellanrum mellan content och menyn samt mellanrummet mellan inläggsbilder och content-side, så jag tänkte gå igenom detta nu. För det första så är det margin och padding som man ändrar för att få dessa mellanrum. Ni ser här nedan vad som styr vad.
Man kan skriva dessa på flera olika sätt, här nedan har ni de olika sätten.
Ovan ser ni det vanligaste sättet, första siffran styr toppen, andra högersidan, tredje nedre delen och fjärde vänstersidan.
Denna variant passar perfekt om man vill ha lika stort mellanrum runt hela objektet, dvs. att ett nummer styr alla sidor. Slutligen finns det en variant som låter en styra varje sida via en egen rad. Dvs. att toppen skrivs som margin-top: 10px; och likadant fast med padding. Sedan ändrar man bara top mot valfri sida, så varje rad styr en viss sida.
 
Vad vill ni lära er i nästa designtips? Hoppas ni har koll på margin- och paddingkoderna nu.
Continue Reading

Fallande snö i bloggen.

Då många ändrar sin bloggdesign till en vinterdesign så hade jag tänkt, i detta designtips, att visa er hur man får snö att falla på sin blogg. Bloggare som använder sig av denna kod är Alicelindstom.se samt EpicFaiil.se.

Det enda man behöver göra är att lägga in följande kod i alla kodmallar precis ovanför <head> och sedan ändra koderna efter smak och tycke samt för att koden ska anpassas efter ens egen bloggdesign.
 

<script type=”text/javascript”>
Width =1200; // ange bredden på sidan som ska snöas in…
Height =7000; // ange höjden på sidan som ska snöas in…
Count =50; // antal snöflingor OBS! ange inte för stort antal!
MaxStep=3; // max steg i rörelsen
MinStep=1; // min steg i rörelsen
MaxFlake=10; // max storlek på snöflinga
MinFlake=4; // min storlek på snöflinga
PosX = new Array();
PosY = new Array();
StepX = new Array();
StepY = new Array();
StarSize=new Array();
for (i = 0; i < Count; i++) {
PosX[i] = Math.random()*Width;
PosY[i] = Math.random()*Height;
StepX[i] =MinStep+Math.random()* -MaxStep;
StepY[i] =MinStep+Math.random()* MaxStep;
StarSize[i]=MinFlake+Math.random() * MaxFlake;
document.write(“<div id=’Obj” + i + “‘ style=’position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#f0feff; font-weight:normal; font-family:Verdana; font-size:”+StarSize[i]+”pt’>•</div>”);
}
function animate() {
for (i = 0; i < Count; i++) {
PosY[i] += StepY[i];
PosX[i] += StepX[i];
document.getElementById(“Obj”+i).style.visibility = “visible”;
if (PosY[i] > Width || PosX[i] > Height || PosX[i]<0) { // starta om från toppen av sidan när mitten nås
PosX[i] = Math.random()*Width; ///2
PosY[i] = -20;
StepX[i] = MinStep+Math.random()* -MaxStep;
StepY[i] = MinStep+Math.random()* MaxStep;
}
document.getElementById(“Obj”+i).style.top = PosY[i] + “px”;
document.getElementById(“Obj”+i).style.left = PosX[i] + “px”;
}
setTimeout(“animate()”, 50);// hastighet
}
setTimeout(“animate()”, 1000);
</script>

 

För att ändra vad som faller ner:
ändra det som står mellan >< i den här raden  font-size:”+StarSize[i]+”pt’>•</div> till valfri symbol, ex ♣Ω ♥ ♦ ☆ ♫ * ¤ •∞◊↓
 

Berätta gärna i en kommentar vad ni vill lära er i nästa designtips.

Continue Reading

Måsten i menyn.

Alla har vi kategorier, ett arkiv och annan skit på bloggen. Men vad är viktigast? Och hur stuktureras detta på allra bästa sätt? Check this out!
Igårkväll strukturerade jag min meny så det blir enklare att finna, samt fixade lite under kategori-fliken. Några must haves i menyn är översättningsverktyg, sökfunktion, kategorier samt arkiv. This is why we need…
 
Översättningsverktyg.
Alla som klickar in på en blogg kan inte alltid svenska. Även om någon från Sverige klickar in så är det inte alltid säkert att dennas modersmål är svenska och det blir enklare för denna att läsa bloggen i sitt eget språk. Dessutom lockar man många fler utländska läsare till bloggen om man ger dom chansen att läsa den i sitt språk.
 
Sökfunktion.
Det ska vara lätt för en läsare att söka upp något i din blogg, det ska inte krävas massa klick för att finna det den är ute efter. En fungerande sökfunktion är ett måste!
 
Kategorier.
Klart att en blogg måste ha kategorier, och många sådana. Ingen gillar att komma in på en blogg där alla inlägg ligger i en och samma kategori, man vill kunna klicka runt lite för att finna något intressant. Inte alla har ett ord på huvudet som de vill söka efter, därför krävs kategorier. Strukturera upp dessa med hjälp av olika rubriker, som jag gjort, så blir det enklare att hitta.
 
EXTRA – Populära inlägg.
Igårkväll la jag till detta under mina kategorier, varför? Jo, för att nya läsare enkelt ska kunna läsa de populära och mest läsvärda inläggen i bloggen så att deras intresse fångas och det kan leda till ännu en ny följare. Kalas bra!
 
Arkiv.
Har man bloggat i många år som jag gjort så är det alltid roligt att kolla tillbaka i sitt arkiv för att skratta åt sig själv, finna inspiration samt för att se sin utveckling genom tiden. Bäst är om man lägger in sitt arkiv under en dropdown-flik i menyn som jag har, då det annars tar allt för mycket plats.
 
Struktur.
Jag tycker själv att jag har en bra struktur på de olika momenten at the moment. Det är lätt att finna de olika sakerna så man behöver inte scrolla igenom menyn för att t.ex. finna kategorierna. Strukturera bättre och du kommer fånga fler läsares intressen.
Har ni en bra struktur i er blogg? Har ni med alla viktiga moment?
Continue Reading

Vad är vad i stilmallen.

I dagens designtips hade jag tänkt lära er vad som är vad i stilmallen samt kodmallarna. Detta tips kommer dock att vara i två delar, nästa del kommer redan imorgon! Vi börjar med grunderna i stilmallen.
 

body { ◄ “kroppen” på designen, här ändrar du bakgrunden på din blogg.

 

a { ◄ Länkavsnitt som styr länkarna i bloggen (avsnittet där man ändrar dessa alltså).

a:hover { ◄ Länkavsnitt som styr länkarna i bloggen när man håller musen över denna.

 

#wrapper { ◄ Det som omger allt vi ser förutom “huvudet” i bloggen. Det kan också ses som en ram runt hela bloggen och i denna ram ska allt innehåll få plats. Alltså får inget vara större än ramen för då blir det knas.

 

#wrapper:after { ◄ Allt efter wrappern, detta gör att wrappern går ända ner, hur långt man än scrollar.

 

#header { ◄ I detta stycke finns själva huvudet på designen. Här finns antingen text eller en bild man redigerat ihop i photoshop eller gimp. Huvudet kan sträcka sig ända från kant till kant (på bredden) eller så kan man välja att ha menyn bredvid, t.ex. så jag har det i min design.

 

#side { ◄ Side är sidomenyn som jag pratade om ovan. Detta är så sidan av designen (tänk en design som en hel kropp) och det kan finnas två av detta avsnitt. Har man två menyner så krävs det att den ena heter något i stil med #side2 {.

#content { ◄ Detta avsnitt styr ytan vi skriver och läser på i bloggen. Ska jag fortsätta likna designens uppbyggnad med en människokropp så skulle jag nog säga att detta är magen.

 

h3 { ◄ Detta är rubriken i varje inlägg, alltså det som är längst upp på content som ni läste om här ovan.

 

.navheader { ◄ Rubrikerna i sidomenyn.

 

.nav { ◄ All övrig text i sidomenyn.

 

.nav a {◄ Länkar i sidomeny.

.nav a:hover { ◄ Länkar i sidomeny när man håller musen över dessa.

 

.entrybody { ◄ All text i inläggen, alltså allt som skrivs på content.

 

.entrymeta { ◄ Texten under (kan vara över) varje inlägg dvs. antalet kommentarer, tid och datum med mera.

 

.entrymeta a { ◄Länkarna under alla inlägg, dvs kommentar-länken, kategori-länken med mera.
.entrymeta a:hover { ◄ Samma sak som ovan fast när man håller musen över.

 

Det finns även en massa kod som hör till kalendern som var standar för blogg.se förr, all kod som har med kalendern att göra kan man ta bort, onödig kod är dålig kod. Vill ni ändra något i de olika avsnitten så ser ni här nedan (direkt taget ur min stilmall) hur man gör detta.

Hoppas ni fick nytta av detta designtips. Har ni frågor så lämna en kommentar eller skicka ett mejl till quiethell@hotmail.comHör av er angående vad ni vill lära er i nästa tips.
Continue Reading

Text inne i kommentarsfältet.

I dagens designtips visar jag hur du snabbt och enkelt får en text inne i kommentarsrutan som försvinner när man klickar och börjar skriva. Snabba regler eller något annat roligt är bra att ha i denna ruta.
1. Gå in i kodmallarna, det är här vi ska jobba idag, inget stilmallsjobb krävs för detta. Gå in på kodmallen för inläggen, alltså inläggssidan.
2. Scrolla ner till kommentarsfälten, ni ser på bilden nedan vilket avsnitt jag menar.
3. Under “kommentar:” finns en kod som börjar med <textarea name=…”. Byt ut denna mot koden ni ser här nedan. Fyll i vad det ska stå. Spara, and you’re done!
<textarea name=”content” onchange=”doChange(this)” cols=”54″ rows=”7″ onFocus=”this.value=”; this.onfocus=null;“>Skriv din text här</textarea>
Hoppas ni fick nytta av detta designtips. Har ni frågor så lämna en kommentar eller skicka ett mejl till quiethell@hotmail.com. Hör av er angående vad ni vill lära er i nästa tips.
Continue Reading

Sektionera dina kategorier.

Hade i detta designtips tänkt visa er hur man delar upp sina kategorier i olika sektioner. Alltså att man har ett överkategorinamn och sedan underkategorier. Jag har detta både i min meny längst uppe i bloggen och i click-down-menyn i min meny här åt höger. För er som undrar varför jag har mina kategorier på två olika ställen så är detta för att det ska vara lättare för personer som går in på min blogg via mobilen då dessa inte alltid kan klicka ner menyn jag har högst upp i bloggen.
1. Börja med att gå in på kategorierna du vill ha med, kopiera varje kategoris länk och klistra in i anteckningar eller ett dokument på din dator.
 
2. Gå in i dina kodmallar och ta bort följande kod, den ligger i din meny.
<tag:categorylist>
<li><a href=”${CategoryLink}”>${CategoryName}</a></li>
</tag:categorylist>

3. På samma ställe som du just tagit bort kod lägger du in följande.
<div>ÖVERKATEGORINAMN</div> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>

<div>ÖVERKATEGORINAMN</div> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>

<div>ÖVERKATEGORINAMN</div> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>

<div>ÖVERKATEGORINAMN</div> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>
<a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br>

4. Fyll i fälten jag skrivit ut, överkategorinamn (syns), kategorilänk (detta syns inte, detta gör att du hamnar i just den kategorin när du klickar på titeln) samt kategorinamnet (syns, detta är titeln på kategorin). Vill du ha fler underkategorier är det bara att kopiera <a href=”KATEGORILÄNK”>KATEGORINAMN</a> <br> och lägga in under en överkategori. Vill du ha fler sektioner kopierar du ett helt stycke och klistrar in.
 
5. Förhandsgranska och publicera. Gör detta i alla kodmallar.
Hoppas ni fick nytta av detta designtips. Har ni frågor så lämna en kommentar eller skicka ett mejl till quiethell@hotmail.com. Hör av er angående vad ni vill lära er i nästa tips.
Continue Reading

Sätt in bildlänkar i menyn.

Får ständigt frågor angående hur jag sätter in bilder i min meny som också är länkar, som mina annonsbilder. Så, i detta designtips tänkte jag visa er hur man gör detta. Sjukt bra om man vill ha annonser i menyn eller något annat kul.
1. Börja med att göra en bild i t.ex. gimp eller photoshop som har samma bredd som din meny eller önskad plats för bildlänken då detta även fungerar i t.ex. menyn jag har längst upp i min blogg eller i footern på bloggen om man har det.
 
2. Ladda upp bilden här på blogg.se eller liknande sida.
 
3. Leta upp ett ställe i menyn där du vill ha bilden, lägg in följande kod här:
<a href=”LÄNK TILL SIDA” TARGET=”_blank” title=”VALFRI TITEL”><img src=”LÄNK TILL BILD” /></a>

4. Lägg in länken till sidan du vill länka, välj en titel samt lägg in bildkoden du fick när du laddade upp bilden.
 
5. Förhandsgranska och publicera. Testa så att länken fungerar som den ska. Sätt in koden i alla kodmallar.
Hoppas ni fick nytta av detta designtips. Har ni frågor så lämna en kommentar eller skicka ett mejl till quiethell@hotmail.com. Hör av er angående vad ni vill lära er i nästa tips.
Continue Reading

Ändra dina sociala medier.

Är du också trött på layouten på sidor som Facebook, Tumblr och YouTube? Gör som jag, ändra den! Här övan ser ni hur min facebook samt tumblr ser ut i det vanliga temat, samt hur det ser ut på min dator nu när jag ändrat det. Dessutom har jag ändrat en pytteliten sak på min YouTube som ni ser här ovan. Följ dessa steg för att ändra tema på dina sidor du med!
 
OBS: Google Chrome på din dator krävs för att detta ska fungera!
 
1. Börja med att gå in på denna sida och lägg till appen i din google-store, den är helt gratis.
 
2. Du har nu fått en liten “S”-ikon längst upp till höger, här kommer du kunna se hur många teman du laddat ner till en viss sida samt ta hand om dessa.
 
3. Gå nu in här och leta upp något roligt tema till Facebook, Tumblr, Google eller Youtube. Klicka in på ett tema och ladda ner det.
 
4. Gå nu in på sidan du laddade ner temat till, valde du ett till facebook så går du in på facebook, tror ni fattar. Nu används detta tema, kollar du på “S”-ikonen jag nämnde tidigare så ser du att den har en etta på sig. Klicka på ikonen för att se vilka teman du har för just denna sida, glöm inte att klicka bort ditt förra tema om du laddar ner ännu ett. För många aktiva teman på samma sida kan göra sidan slö.
 
Tänker ni testa detta? 
Continue Reading