0
Det är dem små detaljerna som får designen att kännas unik och ger en helhet. En liten detalj kan bland annat vara att sätta ett lite unikt typsnitt på sin blogg. Det kan man enkelt göra genom att använda sig av Google fonts, som både är enkelt att använda och helt gratis. 
 
 
2. Välj ett typsnitt genom att klicka på ett lilla röda plusset uppe i höger hörn.
 
3. Klicka på den svarta borden som dyker upp nere i höger hörn med texten "Family Selected".
 
4. Klicka på fliken customize och kryssa i de varianter du tänkt använda dig av.
 
5. Klicka på fliken embed och sedan på fliken @import kopiera @import... och klistra in högst upp i stilmallen.
 
6. Kopiera css regeln och klistra in på de element du vill ha typsnittet på i din stilmall.
 
Här är ett exempel på hur det skulle kunna se ut, där jag har valt typsnittet roboto till mina paragrafer. 
 

Lägg in ett typsnitt ...

Det är dem små detaljerna som får designen att kännas unik och ger en helhet. En liten detalj kan bland annat vara att sätta ett lite unikt typsnitt på sin blogg. Det kan man enkelt göra genom att använda sig av Google fonts, som både är enkelt att använda och helt gratis. 
 
 
2. Välj ett typsnitt genom att klicka på ett lilla röda plusset uppe i höger hörn.
 
3. Klicka på den svarta borden som dyker upp nere i höger hörn med texten "Family Selected".
 
4. Klicka på fliken customize och kryssa i de varianter du tänkt använda dig av.
 
5. Klicka på fliken embed och sedan på fliken @import kopiera @import... och klistra in högst upp i stilmallen.
 
6. Kopiera css regeln och klistra in på de element du vill ha typsnittet på i din stilmall.
 
Här är ett exempel på hur det skulle kunna se ut, där jag har valt typsnittet roboto till mina paragrafer. 
 
Läs mer >>
0
Gamla hemsidor byggdes oftast upp med en header, en eller två sides som innehöll menyer och en content med själva innehållet.
Idag bygger man upp hemsidor på ett lite snyggare sätt (enligt mig)! Istället för att lägga elementen bredvid varandra så brukar man lägga dem under vandra istället. Man har ofta en navigation bar som som följer med när man skrollar, vilket gör det mycket lättare att navigera sig runt. Eftersom man har en navigation bar så är det inte alltid man behöver någon side, vilket gör att man får mer plats till själva innehållet.  Och längst ner på sidan har man även en footer där man har kontaktuppgifter m.m. 
 
Vilken modell föredrar du, och vilken använder du dig av på bloggen? :) 
 
Gamla modellen:
  
 
 
Moderna modellen: 
  

Modell för gamla/mode...

Gamla hemsidor byggdes oftast upp med en header, en eller två sides som innehöll menyer och en content med själva innehållet.
Idag bygger man upp hemsidor på ett lite snyggare sätt (enligt mig)! Istället för att lägga elementen bredvid varandra så brukar man lägga dem under vandra istället. Man har ofta en navigation bar som som följer med när man skrollar, vilket gör det mycket lättare att navigera sig runt. Eftersom man har en navigation bar så är det inte alltid man behöver någon side, vilket gör att man får mer plats till själva innehållet.  Och längst ner på sidan har man även en footer där man har kontaktuppgifter m.m. 
 
Vilken modell föredrar du, och vilken använder du dig av på bloggen? :) 
 
Gamla modellen:
  
 
 
Moderna modellen: 
  
Läs mer >>
0
Har ni sett att jag lagt upp ett gäng gratisdesigner på min designblogg? Dessa bloggdesigner får man mer än gärna ladda ner, och dem är uppbygga så att man ska kunna göra dem mer personliga. Bland annat är det lätt att byta ut bilden/bilderna i headern och ditt bloggnamn hamnar automatiskt i eller ovanför headern. 
 
Designerna är till blogg.se, webblogg.se och blo.gg!
 
Min designblogg hittar ni under Bloggdesign ->Gratis bloggdesign i både dropdownmenyn och menyn! 
 

Gratis Bloggdesigner!

Har ni sett att jag lagt upp ett gäng gratisdesigner på min designblogg? Dessa bloggdesigner får man mer än gärna ladda ner, och dem är uppbygga så att man ska kunna göra dem mer personliga. Bland annat är det lätt att byta ut bilden/bilderna i headern och ditt bloggnamn hamnar automatiskt i eller ovanför headern. 
 
Designerna är till blogg.se, webblogg.se och blo.gg!
 
Min designblogg hittar ni under Bloggdesign ->Gratis bloggdesign i både dropdownmenyn och menyn! 
 
Läs mer >>
0
Tänkte visa hur man lägger in sina instagram bilder i menyn. I detta tipset visar jag hur man läger in en Grid, som kan se ut som mina instagrambilder här nedan! Ända man ska tänka på innan är att detta fungerar inte om man har en privat instagram! 


 
1. Gå in på http://snapwidget.com/ och skrolla ner ner en bit på sidan.
2. Fyll i ditt användarnamn eller hashtag och välj vilken widget typ du vill ha .
 
 
3. Fyll nu i storlek samt hur många bilder du vill ha. 

 
4. Klicka på Get Widget och kopiera din kod! 

 
5. Gå in under Design och leta upp stycket som heter Side, klistra in din kod på önskad plats och klicka på spara. Gör sedan likadant i alla dina kodmallar.
 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)  

Instagrambilder i men...

Tänkte visa hur man lägger in sina instagram bilder i menyn. I detta tipset visar jag hur man läger in en Grid, som kan se ut som mina instagrambilder här nedan! Ända man ska tänka på innan är att detta fungerar inte om man har en privat instagram! 


 
1. Gå in på http://snapwidget.com/ och skrolla ner ner en bit på sidan.
2. Fyll i ditt användarnamn eller hashtag och välj vilken widget typ du vill ha .
 
 
3. Fyll nu i storlek samt hur många bilder du vill ha. 

 
4. Klicka på Get Widget och kopiera din kod! 

 
5. Gå in under Design och leta upp stycket som heter Side, klistra in din kod på önskad plats och klicka på spara. Gör sedan likadant i alla dina kodmallar.
 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)  
Läs mer >>
0
Bloggdesigner: Beställ design Gratisdesign Text: Text i menyn Underskrift Skugga bakom rubriker STORA BOKSTÄVER på rubrikerna Ta bort text i headern Text i kommentarsrutan Ändra text på "skicka kommentar" knappen Lägg in typsnitt på bloggenNew
Länkar: Bildlänk Dropdown-meny Flikar över headern Övrigt: Dela på side och content Dela på side och content New Egen shortcut icon New Fast bakgrund Instagrambilder i menyn New Kontakta knapp Modell för hemsidor New Smileys till din blogg
Hittar du inte det du sökte? Kom då gärna med förslag på nya design tips jag kan skriva om :) 
Skulle någon länk vara fel, eller av någon anledning inte fungera så kontakta mig antingen via en kommentar eller via mejl. Glöm inte beskriva vilken länk som inte fungerar så jag snabbt kan rätta till det! :)

Martinas Designtips!

Bloggdesigner: Beställ design Gratisdesign Text: Text i menyn Underskrift Skugga bakom rubriker STORA BOKSTÄVER på rubrikerna Ta bort text i headern Text i kommentarsrutan Ändra text på "skicka kommentar" knappen Lägg in typsnitt på bloggenNew
Länkar: Bildlänk Dropdown-meny Flikar över headern Övrigt: Dela på side och content Dela på side och content New Egen shortcut icon New Fast bakgrund Instagrambilder i menyn New Kontakta knapp Modell för hemsidor New Smileys till din blogg
Hittar du inte det du sökte? Kom då gärna med förslag på nya design tips jag kan skriva om :) 
Skulle någon länk vara fel, eller av någon anledning inte fungera så kontakta mig antingen via en kommentar eller via mejl. Glöm inte beskriva vilken länk som inte fungerar så jag snabbt kan rätta till det! :)
Läs mer >>
0
Att lägga in en egen shortcut icon ikon är väldigt enkelt, och det ger bloggen ett lite mer mer personligt utseende! 
 
 
Gör såhär:
1. Ladda upp din bild, och kopiera bildlänken!
 
2. Gå in under Design -> Redigera kodmallar, och leta upp stycket som heter <head>
 
3. Kopiera koden nedan och klistra in under <head>, och byt sedan ut texten DIN BILDLÄNK mot länken till din bild.
 
4. Spara, och gör sedan likadant i alla dina kodmallar! :) 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :) 
 

Egen shortcut icon

Att lägga in en egen shortcut icon ikon är väldigt enkelt, och det ger bloggen ett lite mer mer personligt utseende! 
 
 
Gör såhär:
1. Ladda upp din bild, och kopiera bildlänken!
 
2. Gå in under Design -> Redigera kodmallar, och leta upp stycket som heter <head>
 
3. Kopiera koden nedan och klistra in under <head>, och byt sedan ut texten DIN BILDLÄNK mot länken till din bild.
 
4. Spara, och gör sedan likadant i alla dina kodmallar! :) 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :) 
 
Läs mer >>
0
Att göra rubrikerna till inläggen i stora bokstäver är inte något svårt. Allt man behöver göra är att lägga till en liten bit kod under Entry headers i stilmallen.  
 
1. Gå in under design -> redigera stilmall, leta sedan upp stycket som heter
 /** Entry headers**/
OBS hittar du inte rubriken Entry headers i stilmallen så leta upp h3! 

2. Klistra in koden nedan och spara! 
 
 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Stora bokstäver på ru...

Att göra rubrikerna till inläggen i stora bokstäver är inte något svårt. Allt man behöver göra är att lägga till en liten bit kod under Entry headers i stilmallen.  
 
1. Gå in under design -> redigera stilmall, leta sedan upp stycket som heter
 /** Entry headers**/
OBS hittar du inte rubriken Entry headers i stilmallen så leta upp h3! 

2. Klistra in koden nedan och spara! 
 
 
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>
3
Vet att jag "skrivit" ett inlägg om detta innan, där jag länkat till tipset, men länken i inlägget fungerar inte längre. Så här kommer ett nytt inlägg, där jag själv förklarar hur man gör!

Att dela på side och content är väldigt enkelt, det enda man behöver göra är att ta bort en kod från wrapper, och sedan lägga till den i side och content.



1. Gå in under design -> redigera stilmall. Leta upp stycket som heter #wrapper, och ta bort background-color: #FFFFFF;



2. Leta upp stycket som heter #side, och klistra in background-color: #FFFFFF;



3. Precis under side hittar du stycket som heter #content, även här ska du klistra in  background-color: #FFFFFF;



Nu är det klart , men man kan behöva gå in och redigera lite i avstånden mellan side och content. Det gör man genom att ändra margin: ...px ...px ...px ...px; i side och content, och testa sig fram tills man är nöjd! :)

Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Dela på side och cont...

Vet att jag "skrivit" ett inlägg om detta innan, där jag länkat till tipset, men länken i inlägget fungerar inte längre. Så här kommer ett nytt inlägg, där jag själv förklarar hur man gör!

Att dela på side och content är väldigt enkelt, det enda man behöver göra är att ta bort en kod från wrapper, och sedan lägga till den i side och content.



1. Gå in under design -> redigera stilmall. Leta upp stycket som heter #wrapper, och ta bort background-color: #FFFFFF;



2. Leta upp stycket som heter #side, och klistra in background-color: #FFFFFF;



3. Precis under side hittar du stycket som heter #content, även här ska du klistra in  background-color: #FFFFFF;



Nu är det klart , men man kan behöva gå in och redigera lite i avstånden mellan side och content. Det gör man genom att ändra margin: ...px ...px ...px ...px; i side och content, och testa sig fram tills man är nöjd! :)

Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>
3
Tänkte tipsom om hur man får skugga bakom sina rubriker på bloggen.

Gör såhär:
1. Gå in under design -> redigera stilmall
2. Kopiera koden nedan (Ctrl + C) och klistra in den under /** Entry headers **/

3. Ändra pixlarna efter hur mycket skugga du vill ha, och spara! 




Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Skugga bakom rubriker...

Tänkte tipsom om hur man får skugga bakom sina rubriker på bloggen.

Gör såhär:
1. Gå in under design -> redigera stilmall
2. Kopiera koden nedan (Ctrl + C) och klistra in den under /** Entry headers **/

3. Ändra pixlarna efter hur mycket skugga du vill ha, och spara! 




Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>
8
Ser att en del kommenterat inlägget flikar i överkanten av headern om att tjejen jag länkat till tagit bort sin blogg. Så tänkte därför göra ett nytt inlägg om detta, fast istället för bara vanliga flika så tänkte jag visa hur man gör en dropdownmeny.  :)

1. Kopiera koden nedan (markera och klicka Ctrl + C för att kopiera)

<ul id="navbar">

<li><a href="http://miniimartina.blogg.se"> Rubrik 1 </a> <!-- Klickbar rubrik -->
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik </a></li>
</ul>
</li>

<li><a href=""> Rubrik 2 </a> <!-- EJ klickbar rubrik -->
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 1 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
</ul>
</li>

<li><a href="http://miniimartina.blogg.se"> Rubrik 3 </a>
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 1 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
</ul>
</li>

</ul>


2. Gå in under design -> kodmallar och klistra in under <div id="header">




3. Kopiera koden nedan, gå sedan in under design -> redigera stilamll och klistra in koden längst ner.

#navbar {
margin-top: -45px;
margin-left: 3px;
padding: 0;
height: 1em; }

#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället */

#navbar li a  {
display : block;
padding : 3px 10px;
color : #000000; /*Ändra textfärg på länkarna*/
text-decoration : none;
font-family : Georgia; /*Ändra typsnitt*/
font-size : 15px;}

#navbar li ul  {
display : none;
width : 10em;
}

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }

#navbar li:hover li a, #navbar li.hover li a  {
border-bottom : 1px solid #000;}

#navbar li:hover li a, #navbar li.hover li a {
border-bottom : 1px solid #000;
color : #ffffff;} /*Ändra textfärg på undermenyn*/

#navbar li li a:hover {
background-color: #c8a685; } /*Ändra färg när man håller musen över undermenyn*/


Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Dropdown

Ser att en del kommenterat inlägget flikar i överkanten av headern om att tjejen jag länkat till tagit bort sin blogg. Så tänkte därför göra ett nytt inlägg om detta, fast istället för bara vanliga flika så tänkte jag visa hur man gör en dropdownmeny.  :)

1. Kopiera koden nedan (markera och klicka Ctrl + C för att kopiera)

<ul id="navbar">

<li><a href="http://miniimartina.blogg.se"> Rubrik 1 </a> <!-- Klickbar rubrik -->
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik </a></li>
</ul>
</li>

<li><a href=""> Rubrik 2 </a> <!-- EJ klickbar rubrik -->
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 1 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
</ul>
</li>

<li><a href="http://miniimartina.blogg.se"> Rubrik 3 </a>
<ul>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 1 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
<li><a href="http://miniimartina.blogg.se"> Underrubrik 2 </a></li>
</ul>
</li>

</ul>


2. Gå in under design -> kodmallar och klistra in under <div id="header">




3. Kopiera koden nedan, gå sedan in under design -> redigera stilamll och klistra in koden längst ner.

#navbar {
margin-top: -45px;
margin-left: 3px;
padding: 0;
height: 1em; }

#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället */

#navbar li a  {
display : block;
padding : 3px 10px;
color : #000000; /*Ändra textfärg på länkarna*/
text-decoration : none;
font-family : Georgia; /*Ändra typsnitt*/
font-size : 15px;}

#navbar li ul  {
display : none;
width : 10em;
}

#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }

#navbar li:hover li a, #navbar li.hover li a  {
border-bottom : 1px solid #000;}

#navbar li:hover li a, #navbar li.hover li a {
border-bottom : 1px solid #000;
color : #ffffff;} /*Ändra textfärg på undermenyn*/

#navbar li li a:hover {
background-color: #c8a685; } /*Ändra färg när man håller musen över undermenyn*/


Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>
9

Absolut kan man ändra texten i "skicka kommentar" knappen.  Det är inte så svårt att göra det heller.

 

1. Gå in under design -> kodmallar -> inläggssidan

 

2. Skrolla ner en bra bit under mitten tills du hittar koden som ser ut som nedan, där efter är det bara att byta ut skicka kommentar till det du vill istället och klicka på spara.

 

 


Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Ändra text på "skicka...

Absolut kan man ändra texten i "skicka kommentar" knappen.  Det är inte så svårt att göra det heller.

 

1. Gå in under design -> kodmallar -> inläggssidan

 

2. Skrolla ner en bra bit under mitten tills du hittar koden som ser ut som nedan, där efter är det bara att byta ut skicka kommentar till det du vill istället och klicka på spara.

 

 


Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Läs mer >>
6

Svar: Ska erkänna att jag faktiskt inte kan detta själv. Men har letat runder lite och hittat ett inlägg hos designadinblogg.se där han förklarar hur man gör sin header till en länk, sen så har jag hittat hur man lägger in bilder i sig header inne hos Tescho. Så hoppas dessa två kan hjälpa dig Mimi och även alla er andra som under hur man gör.

 

Gör din header till en länk:

http://www.designadinblogg.se/2008/april/gor-din-header-till-en-lank.asp

 

Lägg in bilder i headern:

http://tescho.se/bilder-i-headern-design-15/

Svar på dagens fråga

Svar: Ska erkänna att jag faktiskt inte kan detta själv. Men har letat runder lite och hittat ett inlägg hos designadinblogg.se där han förklarar hur man gör sin header till en länk, sen så har jag hittat hur man lägger in bilder i sig header inne hos Tescho. Så hoppas dessa två kan hjälpa dig Mimi och även alla er andra som under hur man gör.

 

Gör din header till en länk:

http://www.designadinblogg.se/2008/april/gor-din-header-till-en-lank.asp

 

Lägg in bilder i headern:

http://tescho.se/bilder-i-headern-design-15/

Läs mer >>
6

Angående gratisdesignerna så är dem inte personliga, och kan användas av vem som helst. Så vill du använda dig av någon av de gratisdesignerna jag gjort så är det bara att ladda ner dem, vilket är både lagligt och utan kostnad! :)

Krav som jag har på de designer jag gör är att direktlänken längst ner i menyn ska finnas kvar så länge designen används. Det är ingen stor eller störande länk, utan den är ganska liten och gjorde för att match design. Anledningen till att jag har som krav att den sitter kvar är för att visa att det är jag som gjort designen.



[Ladda ner här]


[Ladda ner här]


[Ladda ner här]


[Ladda ner här]

Gratis bloggdesigner

Angående gratisdesignerna så är dem inte personliga, och kan användas av vem som helst. Så vill du använda dig av någon av de gratisdesignerna jag gjort så är det bara att ladda ner dem, vilket är både lagligt och utan kostnad! :)

Krav som jag har på de designer jag gör är att direktlänken längst ner i menyn ska finnas kvar så länge designen används. Det är ingen stor eller störande länk, utan den är ganska liten och gjorde för att match design. Anledningen till att jag har som krav att den sitter kvar är för att visa att det är jag som gjort designen.



[Ladda ner här]


[Ladda ner här]


[Ladda ner här]


[Ladda ner här]
Läs mer >>
14

Har fått frågan hur man lägger till en Kontakta "knapp" på sin blogg. Så tänkte visa hur man enkelt gör det nu.

1 Gör en bild som du vill använda som knapp i t.ex. Photoshop

2 Ladda upp bilden på bloggen och kopiera bildlänken

3 Lägg till koden nedan i din kodmall någonstans under  <div id="side">

<a href="mailto:Mejl"><img src="Bildlänken" alt="" />


4 Skriv in din mejl där det står "Mejl" och bildlänken där det står "bildlänk" och spara!



OBS tänk på att man måste ha outlook för att det ska fungera! Mer information om det hittar du här!
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Kontakta "knapp"

Har fått frågan hur man lägger till en Kontakta "knapp" på sin blogg. Så tänkte visa hur man enkelt gör det nu.

1 Gör en bild som du vill använda som knapp i t.ex. Photoshop

2 Ladda upp bilden på bloggen och kopiera bildlänken

3 Lägg till koden nedan i din kodmall någonstans under  <div id="side">

<a href="mailto:Mejl"><img src="Bildlänken" alt="" />


4 Skriv in din mejl där det står "Mejl" och bildlänken där det står "bildlänk" och spara!



OBS tänk på att man måste ha outlook för att det ska fungera! Mer information om det hittar du här!
 
Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>
1
Det var ju ett tag sedan jag la upp ett design tips, så tänkte göra det nu.
Jag tänkte visa hur man gör för att få bort texten i headern.


1 Gå in under Design -> Kodmall och leta upp stycket som heter <div id="header"> och ta bort de två mittersta raderna och spara!


2 Gör nu lika dant på de andra kodmallarna Archive page, Category page och Entry page och spara



Lite feedback uppskattas då du använt dig av ett av mina designtips :)

Ta bort text i Header...

Det var ju ett tag sedan jag la upp ett design tips, så tänkte göra det nu.
Jag tänkte visa hur man gör för att få bort texten i headern.


1 Gå in under Design -> Kodmall och leta upp stycket som heter <div id="header"> och ta bort de två mittersta raderna och spara!


2 Gör nu lika dant på de andra kodmallarna Archive page, Category page och Entry page och spara



Lite feedback uppskattas då du använt dig av ett av mina designtips :)
Läs mer >>