Nu ska jag förklara hur man ändrar ramen runt bilderna, men även hur man tar bort den helt.

Gå in i stilmallen och bläddra ner till denna koden:

image {
border: 1px solid #cccccc; 
padding: 1px;
margin: 2px 2px 2px 2px;
background: #cccccc;
}

Ändra kantens bredd gör du det på border: 1px; ändra siffran till ett större värde

Öka mellanrummet mellan bild och kant på margin, ändra siffrorna till ett större värde

Bakgrunds färg ändrar du på background

Vill du ta bort kanten helt ta bort border... och background...

Man använder Clone Stamp Tool som finns i verktygslådan.

 Att använda verktyget är ungefär som att kopiera och klistra in.

Hur man gör:

1. Aktivera verktyget genom att klicka på det i verktygslådan.

2. Högerklicka sedan i bilden för att välja lämplig storlek på penseln. Detta påverkar både området som "kopieras" och det område du målar.

3. Håll sedan nere ALT-tangenten och klicka för att placera ut insättningspunkten (det område som ska kopieras).

4. Dra sedan markören till önskat ställe och börja måla. Avståndet mellan insättningspunkten och "penseln" är sedan konstant. Vanligtvis måste man alltså sätta ut nya insättningspunkter flera gånger.


Vilken pensel, skarp eller oskarp, du ska välja beror på bakgrunden. I exemplet är bakgrunden relativt oskarp och vi använde därför en oskarp pensel. Givetvis får man använda en skarp pensel om bakgrunden är detaljerad.

När allt började: Början av 2009 börja jag ta tag i det mer att lära mej alla dessa koder för att skapa en blogg som jag ville, det har varit många timmars envishet och tålamod för att lära mej allt, men nu tycker jag det är hur lätt som helst, men såklart finns det mycket mer att lära, och detta vill jag verkligen göra och kommer dela med mej av på sidan.

Sidan: Bloggstyle.se skapades Jan 2010
Med tiden som gått har sidan utveklats hela tiden med nya inlägg, ny design och andra funktioner.

Syftet med sidan: Att hjälpa till hur koder funkar, hur man bygger en blogg själv och stylar till den snyggt, men det finns också mycket annat på sidan, tävlingar, färdiga mallar och mycket mer.

Innehållet:
Alla inlägg på sidan har jag skrivit själv, det är förbjudet att kopiera rakt av ett inlägg och bilder för eget syfte, kopiera endast det tillåtna på sidan!

Design:
Mina gratismallar får man ladda ner och använda till sig själv, man får ej kopiera dem vidare!

Tävlingar:
Ibland är det tävlingar på sidan där man kan vinna en bloggdesign, eller så kan man bli veckans blogg på sidan, allt detta för en kul grej, och för att så många uppskattar det.

Videohjälp:
På sidan finns det videoförklaringar hur man gör, allt för att förstå vissa saker bättre, med tiden kommer det fler.

1. Hur man ändra teckensnitt, färg och storlek på rubriken

Gå in i stilmallen och bläddra ner till denna koden:

/** Entry headers **/
h3 {
font-family:verdana;    <--------ändra teckensnitt
font-size: 1px;           <---------ändra storlek
font-weight: medium;
color: #f4f4f4;      <---------ändra färg
background:none;      <--------ändra bakgrund
border-bottom: 1px solid  #a4a3a4;    <----------kanten runt rutan
padding: 0 5px 5px 20px;    <--------------flytta texten
}


Det är lite olika, men om detta inte funkar, bläddra ner till dessa koder:


div#content h3 {
  font-size: 24px; <-----ändra storleken på texten
  font-weight: normal;
  margin: 20px 0 10px 0;
}

h1,h3,h4,h5,h6, div.navheader, div.default {

font-family: verdana;
color: #ec0089;  <-------ändra färg på texten
}


2. Ändra texten du skriver i inlägget:


Gå in i stilmallen och bläddra ner till denna koden:




/** Post's body text **/
.entrybody {
font-family: "verdana", Times, serif;   <----ändra teckensnitt
font-size: 12px;     <--------ändra storlek
font-weight: normal;
text-align:left;
color: #a3a2a2;   <-----ändra färg
line-height: 140%;
background-color: #ffffff;
padding: 10px;
}


Om inte denna koden finns testa med detta alternativet:

div#content div.entrybody {
   margin: 0 15px 0 15px;
font-family: verdana;  <-----ändra teckensnitt
font-size: 12px;  <----ändra storlek på texten
color: #7a7a7a; <----ändra färg
padding-top:20px;
}

Om inte font-size eller color: står med, klistra in det.

(Obs bara det fetstilta ska stå i stilmallen)

1. Välj ut en bakgrund du vill ha först

2. Ladda upp den på din blogg, är din (content) inläggs spalten 700px bred ställer du inte det när du laddar upp.

3. När du Laddat upp bilden klicka på den och kopiera länken högst upp

4. Gå nu in i stilmallen

Bläddra ner till denna koden:

div#content {
position: absolute;
top:355px;
  left:6px;
  float: right;
  clear: right;
  display: inline;
  padding: 0 5px 5px 5px;
  width: 700px;
background: #ffffff; <------ändra här
}

Så här ska det se ut istället:

background: url (din länk);

Klistra in din länk och förhandsgranska och se om du blev nöjd, klicka sen spara.

Klart !

Att ladda upp en bild i ett inlägg är mycket lätt.
1. Börja med att kolla hur bred rutan är som ni lägger in alla era inlägg, (content)
Gå in i stilmallen och bläddra ner till denna koden:


Står det så här får inte bilden du laddar upp vara mer änn 650px  bred

2. Klicka nu på skapa och nytt inlägg, klicka sedan på det som visas på bilden nedan.



3. Klicka på ladda upp din bild och välj sedan hur bred bilden ska vara, du vet nu vad den max får vara men klicka även på din bild och se hur bred den är i px är den tex: 243px ska du ställa in på 300px när du laddar upp.

Hoppas detta har hjälp er något.

Lycka till!

Börja med att klicka in på sidan gifninja.com 

1. Klicka på create an animated Gif

2. Ladda upp dina bilder, och välj hastighet klicka sedan på make my gif.
Är du nöjd över den klickar du på Yes

3. Klicka sedan på save my gif
Du kan välja att spara den på datorn eller ta koden direkt och klistra in på din blogg.

4. Klistra in koden i din kodmall där du vill ha den, i tex menyn.
Du kan också klistra in den i ett inlägg, men kom ihåg att klicka på "ändra redigerare"
så det blir rätt.
Har du sparat gifen så ladda upp den som en vanlig bild på inlägget.

Mycket lätt för den som inte har photoshop eller annat program att skapa en gif i.

Lycka till!

1. Logga in på http://www.susnet.se

2. Registrera dej

3. När du loggar in klicka på statistikmätaren

4. Klicka på ny statistiksmästare och sedan på räknarkoder

5. Kopiera koder och klistra in i kodmallen, klistra in koden på raden innan </header>

6. Klistra in det som står nedan i kodmallen där du vill ha din räknare, nånstans nedanför <body>

<table>
<tr>
<td colspan="2"><b>Mina besökare</b></td>
</tr>
<tr>
<td>Totalt:</td>
<td>Klistra in koden från susnet här</td>
</tr>
<tr>
<td>Denna månad:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Denna vecka:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Idag:</td>
<td>Koden från susnet här</td>
</tr>
<tr>
<td>Online nu:</td>
<td>Koden från susnet här</td>
</tr>
</table>

7. Kopiera tex: antal besökare denna vecka och klistra in i koden på punkt 6 där det står koden från susnet här.

8. Om du inte vill ha med tex antal besökare denna vecka osv tar du bort denna koden:

<tr>
<td>Denna vecka:</td>
<td>Koden från susnet här</td>
</tr>

9. När du är klar ska det funka, hoppas detta hjälpte dej nått ;)

Hur man lägger in en bild i menyn är mycket lätt, så här gör man:

1. Kolla först upp hur bred din meny är i stilmallen 

Bläddra ner till denna koden:

#side {
position: absolute;
left: 744px;
top: 196px;
width: 200px; <---Bredden på menyn
display: inline;
padding: 0 5px 5px 5px;
background: #ffffff;
border-left-width: 1px;
border-left-style: dashed;
border-left-color: #dad9d9;
}

Där ser du hur bred menyn är, padding är 5px det är hur långt ifrån bilden är kanten på
menyn till höger och vänster.

Exempel: Skapa en bild som är 190 bred och höjden får du bestämma själv, gör detta i tex photoshop eller annat program du har.

2. Ladda nu upp bilden i bloggen och kopiera länken till bilden.

3. Gå in i kodmallen och bläddra ner till  <div id="side">

Kopiera denna koden:
<img src="länk">

Klistra nu in din länk till bilden, Exempel:
<div id="side">
<img src=http://bloggstyle.se/images/2010/meny_67965893.jpg>

Man kan ju placera bilden var man vill i menyn genom att klistra in den någonstans mellan
 <div id="side">
</div>

Testa dej fram lite, kom ihåg att kopiera hela kodmallen innan, ifall det blir fel!

MENYN

- Ändra storlek på rubrikerna i menyn

INLÄGGSRUTAN

- Ändra färg och typsnitt på Datum

- Ändra färg på en viss text i ett inlägg

- Ändra rubriken och bakgrund i inlägg

- Hjärta innan rubriken

- Skugga på rubriken

KOMMENTARSFÄLTET

- Ändra texten på kommentarsfältena

- Ändra utseende på kommentarer

LÄNKAR

- Ändra färg på alla länkar i inlägg

ÖVRIGT

- Texten i headern

- Öka mellanrummet mellan raderna i text (Länkar, Inlägg, Menyn)

Ändra storleken på datum

div.entrymeta {
  font-size: 21px;  <-----ändra storleken
  font-family:MS Reference Sans Serif; <----ändra typsnitt
  color: 000000;  <----Ändra färg
  margin: 0 0 0 15px;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
line-height: 140%;
}

Ändra procenten till hur stort mellanrum du vill ha, hittar du inte det som står klistra in det.

line-height: 140%;


Exempel:

/* font & border */
body {
  font: 8px/6px font-family: Courier New,arial;
  border-top: 0px solid #369;
line-height: 140%;
}

/** Entry headers **/
h3 {
font-family:Courier New,arial ;
font-size: 13px;
font-weight: medium;
color: #ffffff;
background:none;
border-bottom: 1px solid black;
line-height: 140%;
}

Länkarna i menyn:

 a:link { color: #A9A9A9;font-family: Courier New,arial;
text-decoration:none;
font-size: 13px;
line-height: 140%;}

För att ändra mellanrummet på texten i inlägg:

/** Post's body text **/
.entrybody {
font-family: "verdana", Times, serif;
font-size: 12px;
font-weight: normal;
text-align:left;
color: #000000;
line-height: 140%;
background-color: #ffffff;
padding: 10px;
}

För att ändra mellanrummet på texten längst ner på inlägg:

2010-01-05 @ 23:51:54
Permalink Bakgrund i kommentarsrutan Kommentarer (0) Trackbacks (0)


div.entrymeta {
  font-size: 11px;
  margin: 0 0 0 15px;
  padding: 10px 0 10px 0;
  color: #666;
  line-height: 7px;
line-height: 140%;
}

1. Skapa en bild eller ta en bild du hittar på nätet, bilden bör vara 440x130 pixlar stort (om du inte har ändrar storleken på rutan )
Ladda upp bilden i bloggen, klicka på bilden och spara länken som kommer upp.

2. Gå sedan in i stilmallen
Kopiera det fetstilta och klistra in längst ner i stilmallen:

textarea{
background-image: url(adressen till din bild); 
border: 1px solid black;  
}

Ändra kantens tjocklek och färg, om du vill ta bort kantlinjen skriv 0px och black till någon annan färg. 

3. Spara så var det klart :)

1. Skapa först en egen eller ta en du hittar på nätet.

2. Klicka på skapa, bild och ladda upp bilden, kolla hur stor bilden är
tex: 1000x800 då ska du ändra bredd till 1000 när du laddar upp bilden.

3. När du laddat upp bilden klicka på den och kopiera länken högst upp.

4. Gå in på stilmallen bläddra ner till

body {
  background:url(Länken till bilden här);  <-----Lägg in länken här

Klicka på stilmallen och bläddra ner till:


body {
  background:#ffffff; <----ändra färgen här



För lättare veta vilken färg du vill ha klicka på färgkartan här