Ta bort ramen runt en bild:  

border: 0; 

Ändra storlek på bilden: 

height: 10px; width: 10px; (Värdena kan t.ex se ut så...)

Ha en bakgrundsbild istället för färg:

background-image: (NAMNET PÅ DIN BILD.jpg); 

KODMALLEN;

Klickbar bild;

<a href="http://första bilden du valt.jpg"><img src="http://den andra bilden du valt att lägga in.jpg">

T.ex; <a href="http://candlewoman.se/images/2011/dsc_0088_166443913.jpg"<img src="http://candlewoman.se/images/2011/dsc_0061_167385744.jpg">

OBS.... I exemplet i blogginlägget så funkar inte detta, detta funkar endast när man skriver in koderna i kodmallen. Klickar man på länken i min blogg så ser man "bara" de båda bilderna var för sig...

Klicka på en bild och kom vidare till en infotext;

För att detta ska funka måste dokumentet alltid sluta på .html eftersom just .html är ändelsen på ett textdokument. Förstår ni inte vad jag menar, ställ gärna en fråga i min bloggresponse så kan jag förklara bättre...

Jag har t.ex en bild kopplad till en infotext om min älskling och det här är koden jag skrivit in i "side" menyn i min kodmall...

<a href="http://candlewoman.se/2011/march/alsklingen.html"><img src="http://northerncandle.blogg.se/design/images/2011/dsc_0028_167850253.jpg">

Klickbar text för att komma direkt till en blogg/hemsida;

<a href="http://candlewoman.se/index.html" title="Till Candle Womans blogg">Candle Woman</a>

Jag har då alltså länkat till min startsida här inne på min blogg, kopierat urladressen (http://) bara rakt av.

Title kan du skriva vad du vill, den texten syns inte sen.

Men däremot där jag skrivit Candle Woman, den texten är den som syns på din sida där du valt att klistra in länken.

Vill man t.ex ha Candle Woman i fet stil så skriver man bara "Till Candle Womans blogg"><strong>Candle Woman</strong>

Jaha, det var lite saker som jag gärna ville dela med mig av som jag själv lärt mig genom tidens gång...

Om ni av nån anledning inte förstår vad jag menar, fråga gärna. Jag hjälper så gärna till med de kunskaper jag har. Vet jag inte en sak så letar jag genast upp info om den...

Så fråga hellre en gång för mycket, jag blir bara glad av att kunna hjälpa till.......http:// bildens url adress & den man klickar på för att komma till nästa bild

Tänkte jag skulle visa hur man lägger in små bilder vid kommentaren som jag har här nere...



Och eftersom jag då har valt att min blogg ska heta Candle Woman av en orsak så får det också bli en bild som symboliserar detta... ;)  


Så här gjorde jag..........

1. Lägg upp en bild i ditt bildarkiv här på bloggen. 

Jag har testat mig fram väldigt mycket till vilken storlek som passar in i min blogg bäst och jag kom slutligen fram till att 28 x30 bildpunkter var det som såg bäst ut på min blogg...

För att få fram just det måttet använde jag mig av programmet paint & av "ändra storlek--->bildpunkter".

Jag skrev in olika siffror och la in bilden här i bloggen för att sen se hur det såg ut... Mycket trixande var det men tillslut vart jag nöjd... ;)

2. Gå in på ARKIV--->BILD och leta upp den bilden du nyss lagt in där. :D

3. Klicka på bilden 2 ggr så att du får fram bara bilden tillslut.

Så här ska det se ut då... :D

4. Kopiera bildens urladress. Alltså den adressen som står längst upp och som börjar med; http://

5. När du kopierat den klickar du på pil tillbaka och går in i: Design--->kodmallar

6. Håll inne Ctrl och F för att söka i din kodmall efter kommentars"knappen".

7. Skriv; entrymeta och klicka en enkel klick nånstans på din kodmall & scrolla neråt (detta görs för att se vart den gula överstrykningen är nånstans av det ordet du faktiskt letar efter...) då blir det så här.......

Under denna rad <a href="${EntryCategoryLink}">${EntryCategoryName}</a> lägger du in den här texten;

<img src="HÄR SKA DIN BILDKOD SOM DU KOPIERADE UNDER PUNKT 4 IN!">

8. För att få även en bild EFTER kommentars"knappen" så lägger du in den här texten igen... Men denna gången efter {EntryCommentCount})</a><img src="HÄR SKA DIN BILDKOD SOM DU KOPIERADE UNDER PUNKT 4 IN!">

9. Vill man så kan man göra som jag och skriva nåt annat istället för Kommentarer... Då skriver  man bara det man vill ha efter #comment"> så blir det mer personligt stylat också på din blogg...

10. Kom ihåg!! Dessa ändringar måste göras på ALLA sidor i kodmallen om man vill att besökarna ska se det man ändrat även när dom klickar t.ex på; Kategori, Arkiv.......

Men klicka bara Ctrl F så kommer datorn ihåg det ordet du sökte efter sist... Så kan du ta dig snabbt ner till den raden igen! BRA VA?! :P

Jag hoppas ni förstår vad jag menar i min beskrivning.. Jag kanske inte är så duktig på att förklara vad jag menar och vilka saker jag menar alla gånger...

Men frågan är fri som man ju brukar säga... Så ställ gärna en fråga i min blogresponse så svarar jag så fort jag ser din fundering där... :D

Lycka till!! :D Och gör som jag, våga göra fel... ;) MEN en bra sak kan vara att göra en testblogg här på blogg.se som du ju gör under "Mitt konto" men det är ett helt annat kapitel det!! :D

Ja nu är jag då färdig med Iris blogg... Jag tycker det blev bra, hoppas nu bara att hon gör det med.

Men hon verkade då nöjd tidigare och då var jag inte ens klar. Men det tar sin lilla tid. Några timmar tar det allt innan man får koderna på plats.

Kul är det tycker jag och så roligt att se resultatet sen också. :D

Klicka på bilden så kommer ni till hennes blogg... :D

Nu säger jag god natt till er för jag måste sova nu. :D Börjar ju att jobba om 6,5 timme! :D

Ha det så bra!! :)

Gå in i design-->kodmallar-->

Tryck på knappen Ctrl på tangentbordet, håll den inne och klicka sen på ett F. Då söker den det du väljer att skriva in... 

Skriv t.ex; entrybody 

Då markeras det du du söker med gult så hittar man det man söker lättare. I det här fallet så kom det upp; div class entrybody.

Och det är just i entrybody som vi ska lägga in en kodrad som talar om att du vill ha nånting i varje inlägg du skriver... :D

Så skriv av denna kod; <P style="text-align: center;"><img src="http://DIN BILD ELLER TEXT.JPG"></p>

Och vips så har du en bild eller en text under varje inlägg du skriver i din blogg... Skitlätt är det bara man kommer på hur det funkar med koder och sånt...

Kom ihåg att du måste göra om detta i ALLA 4 kodmallarna för att ändringen ska synas även när man t.ex klickar på ett inlägg som skrevs förra veckan typ... Eller om man kikar på nåt ur en viss kategori...

Hoppas detta var till nån hjälp för den som funderat på hur man gör... :)

• Ladda upp bilden till galleriet i din blogg

• Gå in i galleriet och klicka på bilden du ska ha på din sida

  

  
  
  
  
  
  Klicka på själva bilden så att den blir större.
  
  
  
  Kopiera texten längst upp
  
  
  
  
  Klicka på design-->Redigera stilmall-->#header{
  
  Efter background och färgkoden skriver du dit url
  
  Gör en parantes efter url och klistra in din bildlänk. Gör en parantes efter länken och kolontecken.
  
  Sen har jag gjort så min header ligger i mitten. Och det har jag gjort med texten; no-repeat center center;
  
  Så här ser det ut i min stilmall... :D
  
  
  #header {
  background: #000000 url(https://cdn1.cdnme.se/cdn/7-2/2036786/images/2010/banner2_97544447.jpg);
   no-repeat center center;
  padding-left: 0px;
  padding-bottom:0px;
  padding-top:0px;
  margin: 0px 0px 20px;
  width: 900px;
  height: 200px;
  }
  
  Så så lägger man in en bild längst upp på sin sida... Hoppas ni förstått hur man gör av min beskrivning... Svårt att förklara sånt man själv lärt sig av andra genom att googla och söka informationen...
  
  

Design-->Redigera stilmall-->/**Entry headers**/

 /** Entry headers **/

h3 {

background: #000000; (Om du vill ha en bakgrundsfärg bakom rubriktexten!)

font-family: comic sans MS,Arial, Helvetica, sans-serif; (Här ändrar du rubrikens textstil)

Jag har valt att lägga till Comic sans MS då jag dels gillar den stilen och sen har de flesta datorer den i sin dator också så det blir inte nåt annat eller nåt konstigt med teckensnittet.

Anledningen till att det står flera teckesnitt är för att det ska finnas ett val så att alla datorer ska kunna läsa din text.

Hade du bara valt t.ex ett teckensnitt som du laddat ner till din dator så är det inte alls säkert att jag har sett vad du har sett på din sida.

För mig kan det vara konstiga tecken eller vara en helt annan stil. Så det är väl det man ska tänka på när man skriver dit sitt favorit teckensnitt.

font-weight: bold; (Bold står för fet stil. Alternativen är; bold & normal, )

padding:10px 10px 10px 0px;

color: #ff00ff; (Här ändrar du färgen på texten)

margin: 0px 0px 10px;

text-transform: uppercase lowercase;

}

Om du är osäker är ett tips att kolla i t.ex skrivprogrammet Word så ser du ju där hur STOR text man kan ha. Och där kan du ju också se vilka teckensnitt du har i din dator och om du vill använda nån av dom till din blogg.

Klicka på den här länken till färgkartan http://www.mera.se/PMS.html   så ser du vilka färger och koder som finns. Där det står HTML är den koden du ska använda. T.ex svart #000000. Den färgkoden för svart har jag fått från en annan färgkarta.

Tycker den är bättre än denna men hittade inte på den just nu.

Eller rosa #ff00ff som jag har mestadels på min blogg men den koden finns ej med på den här kartan då jag fått den från en annan färgkarta... Det ska också funka att skriva in det engelska namnet på färgen. T.ex black, purple, pink...

Men jag har testat detta men ej fått den färgen jag varit ute efter. Tror det har att göra med bakgrundsfärgen kanske. Jag skriver i alla fall in HTML-koderna för då vet jag vad jag får så att säga...

Content = Allt du skriver i ditt blogginlägg.

Upptäckte nu att jag inte ens hade valet att ändra teckensnitt eller textstorlek.
Så då kopierade jag helt enkelt ”font-family” & ”font-size” ifrån #header a och lade det under color. Vips så hade jag mitt favoritteckensnitt och annan storlek på texten. 

#content {

color: #ff00ff; (Ändrar färgen på blogginlägget)

font-family: comic sans MS,Arial, Helvetica, sans-serif; (Ändrar textens stil)

font-size: 24px; (Här ändrar du storleken på texten)

overflow: hidden;

width: 538px;

position:relative;

left:0px;

padding: 20px 0px;

voice-family:"\"}\"";

voice-family:inherit;

width:538px;

float: right;

margin: 0px 10px 0px 0px;

}html>body #content { width: 538px }

Hoppas detta varit till nån hjälp i alla fall. Lycka till!! :D

• Gå in på t.ex youtube och skriv in den videon du vill ladda upp till din blogg.
  

• Klicka på knappen ”bädda in” och kopiera koden du får fram. Du ser här nere vad jag menar med koden... Det som är blåmarkerat är koden du ska kopiera. :)
  
  
  

• Gå till din blogg.
  

• Skapa inlägg-->HTML-->klistra in koden från youtube.
  

• Klicka på uppdatera.
  

• Då ska det synas en gul stor ruta.
  

• Klicka på publicera och du har din video på din blogg.

 Enkelt va?! :D Och när du gjort allt detta borde det se ut som nedan.. :)

Tyvärr så är det dock inte alla videoklipp som det finns en "bädda in" kod på...

Print screen=kopierar en sida kan man säga...

 Öppna upp den sida du vill print screena, t.ex youtube som i det här exemplet....

• Håll nere ALT tangenten samtidigt som du letar en tangent som det står Prt Sc på tangentbordet... Brukar vara ovanför "insert","home"...

• När du hittat den så klickar du på den knappen. Det du då gör är att du kopierar den aktuella sidan.

• Öppna till exempel Paint, Word, power point eller nåt annat program som du är bekväm med.

• CTRL + V för att klistra in det du kopierat i dokumentet.

• Och så här blir resultatet... :D 

Varför man print screenar är väl egentligen för att visa nåt man försöker förklara... En bild säger ju mer än tusen ord sägs det ju, vilket stämmer rätt så väl tycker jag... :)

ÄNDRA RUBRIKEN I BLOGGEN

Om du har en rubrik som bara har STORA bokstäver så gör du så här för att ändra den;

•  Design-Redigera---> Stilmall--->Leta upp /**Entry headers**/
• Ändra ”text-transform” till uppercase lowercase;

 /** Entry headers **/

h3 {

background: #000000;

font-family: segoe print,Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

padding:10px 10px 10px 0px;

color: #cc66cc;

margin: 0px 0px 10px;

text-transform: uppercase lowercase;

}

 Så, då ska det bli; Stor bokstav och resten litet... :)

Få bort ramen runt bilder och thumbnailbilder;

 Design--->Redigera stilmall---->.image { ---->ändra border till 0px & padding till 0px


Så här ser MIN stilmall ut & jag ändrade värdet till 0 på det som är fetstil. Det funkade för mig när jag testade. :D

 .image {

Border: 2px solid #CCCCCC;

background-color:#FFFFFF;

padding: 2px;

margin: 0px 6px 6px 0px;

}

Gör samma sak med bilderna som är klickbara och som kallas för thumbnail (miniatyr).

 Design--->Redigera stilmall---->.thumbnail { ------> ändra border till 0px & padding till 0px

.thumbnail {

Border: 2px solid #CCCCCC;

background-color:#FFFFFF;

padding: 2px;

margin: 0px 6px 6px 0px;

}

Så där!! Då har du tagit bort ramen runt dina bilder.