Vi vill länka till dig!

Hör du till dem som fått hjälp av något du läst här på fixabloggen eller som fått hjälp på vårt forum?

Vill du berätta om det för andra med ett par korta meningar och i utbyte få en länk till din blogg på vår nya Testimonials-sida?

Toppen!

Skriv ned dina åsikter här i kommentarsfältet och glöm inte din blogglänk. Vill du så får du gärna lämna en länk till en bild på dig, det är alltid roligt för dem som tittar på listan att se vem som skrivit vad och det kan få dem att välja just din blogg att hälsa på. (För visst blir något som innehåller en bild genast mer intressant! ;-)
Ev bilder minskar jag så att alla får samma storlek, ca 90x90px, så det behöver du inte tänka på.

Själv tycker jag att det vore jätteroligt att samla oss blogspottare så att man lätt kan kika runt i olika bloggar och få designtips och nya idéer till den egna bloggen.

Länken till den nya sidan kommer att hamna uppe i listen här på Fixabloggen och likaså på forumet så att ni lätt hittar dit. Självklart lägger jag in länken även här i inlägget när sidan är publicerad.

Är ni med?
Okej, då börjar jag med kodningen och upplägget så lämnar ni era blogglänkar och åsikter om Fixabloggen/forumet här nedan!

-------------------

Era åsikter börjar ta form ->:  Sagt om FixaDinBlogg

Hojta till om ni har en bild eller ikon ni vill ha istället för standardbilderna!

Och du förresten - varje vecka väljer jag ut en åsikt (i första hand de som har egna bilder ;-) och lägger upp en bannerbild på forumets sida med tavlorna och här på fixabloggen. Bilden innehåller ditt citat, din bild och länkar till DIN blogg.  Tjänster och gentjänster!

»»  läs vidare

Styla dina listor

Så här kan en vanlig enkel lista se ut i en blogspot-blogg. Runda diskar framför varje rad och med antalet objekt i parentes efter ordet.
Inte så där jätteskoj alla gånger kanske. Även om dina listor inte har diskar eller fyrkanter framför orden kan man vilja fixa till dem och göra dem lite roligare.
Observera att koderna som följer nedan gäller de nya Designmallarna från Malldesignern!



Du kan med en enkel kod styla listor i din sidokolumn och göra något lite roligare. Här har jag lekt lite med nyanser och ramar, du kan anpassa koden till det du själv vill ha.

Jag har lagt till en streckad ram, flyttat texten till mitten, givit varje rad lite padding och bakgrund samt en hover-effekt när man håller musen över (mittenlänken). Helt plötsligt blev min lista till en rad knappar i stället.
Jag öppnade också min etikettsgadget och ändrade lite där, tog bort rubriken och visningen av antal inlägg.
Vill du så kan du också redigera vilka etiketter som visas.

Du väljer själv om du vill styla enskilda list-gadgets eller alla samtidigt, men tänk på att om du väljer alla så påverkar du också alla listor. Om du har t.ex Populära inlägg-gadgeten kan det se lite lustigt ut, likaså påverkas också gadgets som Blogglistor etc.
Testa gärna med den enklare koden först och om du inte blir nöjd med resultatet kan du radera koden du la in och börja styla enskilda listor istället.

Läs i slutet på inlägget vad alla rader i koden betyder och vilka olika val du kan göra!

För att styla alla listgadgets du har i dina sidokolumner väljer du den här koden:

/*  Rutan bakom hela listan */
.sidebar .widget  ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

/* Varje enskild rad i listan */
.sidebar .widget  ul li {
background: #d2d2d2;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
padding: 10px;
margin:10px;
list-style: none;
text-align: center;
}

/* Enskild rad med musen över */
.sidebar .widget  ul li:hover {
background: #f2f2f2;
}

/* Texten/länkarna i listan */
.sidebar .widget  ul li a {
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
font-weight:normal;
color: #bf0000;
}

Om du däremot hellre vill styla en eller ett par listor ska du göra så här:

Gå till din kodmall och rulla allra längst ner.

Här hittar du dina gadgets, vad de heter och viktigast - vilket id de har. Spar id'et till de gadgets du vill förändra, på ett papper eller i ett anteckningsdokument på datorn. Det är viktigt att du behåller exakt stavning, stora resp. små bokstäver och siffran i slutet på id'et, så var noga!
De små 'tecknen' på respektive sida om id'et hör inte till, de ska inte med.

Nu är det dags att lägga in din kod.
Ska du bara ändra en gadet är det enkelt, du byter bara ut mitt ord id mot din gadgets id på varje rad där det förekommer (rödmarkerat i koden).

div#Label1 ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

Vill du däremot förändra fler gagets (och styla dem lika) ska du göra så här:

Lägg in din första gadgets id i det rödmarkerade id'et. Upprepa för varje stycke.
Kopiera hela raden fram till, men inte med {-tecknet.
Sätt ett kommatecken efter det första id'et, gör ett mellanslag och klistra sen in det du nyss kopierade. Byt ut det första id'et mot nästa gadgets.
Det kan alltså se ut så här:

div#Label1 ul,  div#Label2 ul, div#PageList1 ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

Se du att jag fick med ul för varje gadget? Det är det viktiga, att du både har gadgetens id och att listelementet kommer med.
Upprepa för varje stycke.

Här kommer koden:

/*  Rutan bakom hela listan */
div#id ul {
width: 200px;
background: #eeeeee;
border: 1px dashed #bf0000;
padding: 0;
}

/* Varje enskild rad i listan */
div#id ul li {
background: #d2d2d2;
border-bottom: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
padding: 10px;
margin:10px;
list-style: none;
text-align: center;
}

/* Enskild rad med musen över */
div#id ul li:hover {
background: #f2f2f2;
}

/* Texten/länkarna i listan */
div#id ul li a {
text-transform: uppercase;
text-shadow: 1px 1px #ffffff;
font-weight:normal;
color: #bf0000;
}

Ett bra tips kan vara att kopiera över den här koden till ett anteckningsdokument på din dator och lägga in dina listors id där. När du är säker på att du klistrat in allt rätt kan du lägga in koden i din kodmall.

Så är det dags att lägga in koden i kodmallen.
Eftersom en del bloggare upplevt att koden som läggs i Malldesignerns css-ruta försvinner och blir osynlig (=svår att redigera) så lägger vi den här koden direkt i kodmallen. Är man lite noga är det enkelt!

När du öppnat kodmallen ska du rulla ner tills du ser den här rubriken: /* Widgets */
Längst ner i det stycket (under de andra koderna, men innan nästa rubrik kommer) lägger du in din kod.

Börja med att förhandsgranska.
Du kommer säkert att vilja ändra en hel del i utseendet och just därför har jag lagt in ett antal val. Radera de rader du inte är intresserad av, men prova gärna lite först, kanske hittar du användning för de flesta alternativen om du tänker efter lite.
Förhandsgranska sen efter varje ändring tills du är nöjd. Glöm inte att titta hur alla gadgets i bloggen ser ut om du använder den första, allmänna koden. Kanske påverkas en gadget på ett sätt du inte gillar, det är lätt att missa någon om man har många.
När du är nöjd - Spara!


Ps, vill du ENBART ta bort de där punkterna/fyrkanterna framför listor?
Lägg då in den här koden istället:

 .sidebar .widget  ul li {
list-style: none;
}

Här följer en förklaring för den som vill veta lite mer om de olika radern i koden.

background:  Bakgrundsfärg  Använd färgkod  # + 6 siffror/bokstäver Ex. #ffffff  = vit

color:  Textfärg  Använd färgkod  # + 6 siffror/bokstäver Ex. #000000 = svart

text-transform: Stora eller små bokstäver. Radera raden om du hellre vill påverka texten via gadgetens egen text när du öppnar gadgeten i bloggens layoutläge.
     Alternativ: uppercase   lowercase

font-weight: Normal eller fetad stil.   
     Alternativ: normal   bold   bolder   lighter

text-shadow: Skugga på bokstäver. 1px 1px #ffffff  betyder vit skugga en pixel nedåt och åt höger.
     Textshadow syns inte i Internet Explorer!

border: Ram. Kan läggas runt hela objektet genom att skriva ex. border: 1px solid #000000; eller på enskild sida genom att skriva ex. border-top: 1px solid #000000;
     Alternativ - placering: border-top   border-bottom   border-left   border-right 
     Alternativ - utseende: solid   dotted   dashed   double   ridge   groove   inset   outset

width: Vidden på bakgrunden i det här fallet. Finns med i koden ifall du behöver öka eller minska vidden. Radera om du ej behöver använda. 

margin: Marginalen till element som ligger utanför det aktuella elementet.
     Alternativ:  margin   margin-top   margin-bottom   margin-left   margin-right

padding: Marginalen inne i ett element, t.ex hur mycket tomt utrymme som ska vara runt en text innan bakgrundens kanter kommer. Är du osäker på skillnaden på margin och padding - prova och se vad som händer.
     Alternativ:   padding  padding-top   padding-bottom   padding-left   padding-right

text-align: Textens placering.
     Alternativ:  left   center   right

list-style: Vad som finns framför varje enskild länk i listan, alltså den där lilla kvadraten eller disken.
    Alternativ:  none   - inget
                        circle  -cirkel
                        disc  -    ifylld cirkel
                        square - kvadrat
                        decimal - siffor  ex. 1, 2, 3
                        lower-alpha  - bokstäver  ex, a, b, c
                        upper-alpha  - bokstäver  ex A, B, C
                        lower-roman  - romerska siffror  ex  i, ii, iii, iv
                        upper-roman  - romerska siffror  ex I, II, III, IV

»»  läs vidare

Lägg till logo vid bloggrubriken

Vill du lägga till en liten logga/bild brevid din bloggrubrik utan att behöva skapa en helt ny headerbild? Kanske vill du ha kvar möjligheten att redigera bloggens rubrik i Malldesignern men vill ändå lägga till en liten bild som gör din blogg mer personlig.


Börja med att välja ut din bild. Du kan använda png, jpeg eller en animerad gif, vilket du vill.
Ladda sen upp din bild på valfri uppladdningssida. Själv föredrar jag Minus.com där man inte behöver registrera sig om man inte vill.

Spar fliken med din uppladdade bild och öppna sen din bloggs kodmall  i en annan flik.

Här ska du Kryssa i rutan för Utöka gränssnittskomponentmallar som står ovanför kodmallsrutan.

När du har gjort det ska du trycka på Ctrl och F på ditt tangentbord för att få fram en sökruta i webläsaren.
Beroende på vilken webläsare du använder hittar du sökrutan i över-eller underkant på fönstret.

I rutan fyller du i  <!--No header image -->  och trycker Enter på tangentbordet.
Då kommer du automatiskt till det här stycket i din kodmall. Det är här vi ska lägga till bilden/loggan.

 <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>

Om du vill ha din bild före rubriken lägger du in bildkoden före den rödmarkerade titel-taggen och om du vill ha bilden efter lägger du den efter det rödmarkerade. Det går utmärkt att lägga till bilder på båda sidor om rubriken också.

Den här bildkoden ska du använda om du bara vill lägga in din bild men inte behöver flytta runt den för att passa in den. Byt ut http://bildadress mot din bilds direktlänk.

<img src="http://bildadress" border="0" />

Om du när du förhandsgranskar märker att din bild hamnar lite tokigt kan du istället använda koden nedan och flytta runt bilden litegrann. Spara inte mallen mellan varje liten ändring du gör, välj Förhandsgranska under kodmallens ruta istället. Då slipper du gå tillbaka och börja om med att söka rätt plats i kodmallen om det inte stämmer direkt.
Beroende på vilken kodmall du har fungerar inte alla mått, det måste finnas plats inom "elementet" som rubriken ligger i för att du ska kunna flytta din bild men prova och se, förhoppningsvis hamnar din bild där du vill ha den.

<img src="http://bildadress" border="0" style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px;" />

Så här ska det se ut i kodmallen när du lagt till din bildkod, antingen före, efter eller på båda sidor om <b:include name='title'>

<!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
       <h1 class='title'>
          <img src="http://bildadress" border="0" /><b:include name='title'/><img src="http://bildadress" border="0" />
        </h1>


Förhandsgranska och om du är nöjd sparar du!

Så här kan det se ut om man gillar kor ;-)

Undrar du vad bildens direktlänk betyder?
Det är den länk som inte har en massa konstiga tecken före eller efter sig, inga < eller [ alltså. När man klickar på länken ska bara bilden visa sig på en annars tom skärm. Det brukar för det mesta stå just Direktlänk eller Direct Link, välj det alternativet om det finns.
Är du osäker så klistra in din uppladdade bilds länk i en ny flik i webläsaren. Ser du enbart din bild och inget från någon websida så är det rätt. 

Du hittar direktlänken till din uppladdade bild längre ner på sidan om du använder Minus.com

»»  läs vidare

Snöar det på din blogg idag?

Hör du till dem som insett att det helt plötsligt snöar på bloggen idag?

Då är risken stor att du har ett script du hämtat här på Fixabloggen och lagt in i en HTML/Javascript-gadget på din blogg. Att snön kom tillbaka idag beror på att jag lagt tillbaka snöscriptet på min server för att lokalisera vart alla försök till hämtning av det kommer ifrån. (ett kod som har ett inlänkat script som i det här fallt försöker alltid ladda scriptet, det sker automatiskt  - det är det det är skapt för)
Jag tog tidigare bort scripten då belastningen på min server blev för hög, men nu får jag istället ett stort antal felmeddelanden då många bloggar försöker hitta mitt script. Det är inte heller bra...

Om det här gäller dig vill jag be dig ta bort gadgeten från din blogg (vi går ju ändå mot sommar) så återkommer jag i höst med ett nytt snöscript som du kan använda, ett som ligger på en lite kraftfullare server ;-)

Tack på förhand!
Anneli

»»  läs vidare

Designa din Instrumentpanel

VIKTIGT MEDDELANDE ANG INLÄGGET!

Blogger verkar ha ändrat ett antal av namnen i instrumentpanelen vilket gör att det mesta av nedanstående kod inte fungerar för tillfället. 

Jag ska söka info ang detta hos Blogger och återkommer.

LÄGG ALLTSÅ INTE IN KODEN JUST NU!


Nu är det dags för alla att börja använda det nya gränssnittet på instrumentpanelen i Blogger och jag gissar att det är fler än jag som verkligen inte gillar det bleka, urvattnade utseendet?

Vi kan inte göra så mycket åt själva uppbyggnaden, men det går faktiskt att designa om med färger och annan css-kod förutsatt att du använder Google Chrome eller Firefox när du surfar. Den förändring du gör syns bara i just den webläsaren och bloggar du från en annan dator kommer du inte heller att se din nya design.
Eftersom jag själv alltid sitter vid samma dator och använder samma webläsare (både Chrome och Firefox) passar det här mig ändå bra, kanske är det något för dig med?

Det du behöver göra är att installera ett speciellt tillägg/plugin som heter Stylish och i det klistra in den kodmall jag ger dig här i inlägget.

Stylish - Firefox

Stylish - Google Chrome

Det ser lite olika ut i de två webläsarna, men grunden är densamma.
Skapa en ny stilmall och klistra in den kod du får av mig i denna. Sen kan du redigera och förhandsgranska tills du är nöjd, då spar du.

Innan du börjar lägga till din nya stilmall, ÖPPNA INSTRUMENTPANELEN I BLOGGEN!

I Google Chrome:

Klicka på ikonen i verktygslisten och välj Manage installed styles. 

Välj att skapa en ny stilmall: Write new style

Fyll i uppgifterna, se till att Enabled är ikryssat så att du kan se din färdiga mall efteråt och klistra in koden. Spara för att kunna se dina förändringar.

Nästa gång du klickar på ikonen i verktygslisten kan du välja att redigera stilmallen, klicka då på Edit. Du kan också välja att tillfälligt inaktivera din stilmall genom att klicka på Disable.


I Firefox:

Leta rätt på Stylish-ikonen och klicka på den för att få fram menyn.
Välj Skriv ny Style och välj blogger.com

Här fyller du i ett lämpligt namn på stilmallen och klistrar in koden du får här i inlägget.

Klicka på förhandsgranska för att se hur din instrumentpanel ser ut och spara när du inte vill ändra mer.


Stilmallen jag skrivit innehåller en del av de element som du hittar i instrumentpanelen, men långt ifrån alla. Jag kommer att uppdatera med fler färgkombinationer och utöka mallen framöver, men jag känner att det ändå kan vara intresse för många av er att ta del av det jag hitills arbetat fram.

Den här stilmallen går i blå-grått, men du kan ändra alla färgkoder själv. I nedladdningen hittar du länkar till plugin/tillägg med färgväljare för båda webläsarna så att du enkelt kan hitta rätt färgkod till det utseende du vill ha.

Har du frågor om fler kodstycken till stilmallen, vill du veta vad något speciellt heter?
Ställ då din fråga i den här tråden på Fixas Forum.

/* bg ovanför headern */
.GPCRQBSKBB {
    background:#F4F3EB !important;
}
.GPCRQBSEEB {
    background:#F4F3EB !important;
}

/* Knapparna högst upp */
a.blogg-button.blogg-primary {
    background: #FB8F3D !important;
}
a.blogg-button {
    background: #FFFFFF !important;
}

/* headern */
.GPCRQBSMAB {
    background: #8096C9 !important;
}
.GPCRQBSMAB .GPCRQBSDBB {
    background: #8096C9 !important;
}

/* bakgrund */
.GPCRQBSCBB {
    background:#F4F3EB;
}
.GPCRQBSLAB {
    background: #F4F3EB;
}

/* headertext */
.GPCRQBSMAB .GPCRQBSPAB a {
    color: #FFFFFF !important;
}
.GPCRQBSPBB .GPCRQBSACB{
    color: #FFFFFF !important;
}
/* Layoutsidans gadget-bakgrund */
body#layout {
    background-color: #A4B8E8 !important;
    border: 1px solid #526EAF !important;
}

/* Layoutsidan flyttbara gadgets */
body#layout .draggable-widget {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}
/* Layoutsidan  låsta gadgets */
body#layout .locked-widget .widget-content {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Layoutsidan Lägg till gadget */
body#layout .add_widget {
    border: 1px dashed #526EAF !important;
}

/* Layoutsidan Favicon-gadgeten */
.GPCRQBSOSB {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Knapparna i headern, ej aktiva */
button.blogg-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Profilknappen */
button.blogg-menu-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Nytt inläggknappen ovanför menyn till vänster */
button.blogg-button.blogg-primary {
    border: 1px solid #FB8F3D !important;
    color: white;
}
/* Menyn till vänster - bakgrund */
.GPCRQBSGBB {
    background: #FFFFFF;
    border: 1px solid #E0E0E0 !important;
    margin-left: 24px !important;
    padding: 10px 0 10px 20px !important;
}

/* Menyn till vänster - hovereffekt */
.GPCRQBSDDB:hover {
    background: #FFFFFF !important;
}
.GPCRQBSEDB:hover {
    color:#F26300 !important;
}

/* Översikt Uppdateringar högersidan */
.GPCRQBSOFB {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
}
.GPCRQBSPFB td {
    border-bottom: 0px !important;
}

/* Översikt Sidvyer */
div.GPCRQBSMFB {
    background-color: #FFFFFF !important;
    padding: 10px !important;
}
img.gwt-Image {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    padding: 10px !important;
    margin-top: -10px !important;
}

/* Inläggsidan - bakgrund bakom inläggen */
.GPCRQBSMR{
    background: #FFFFFF;
    padding: 10px !important;
}
.GPCRQBSAEC:hover{background-color:#eeeeee !important;}
/* Sidor - sidgadgets */
.GPCRQBSGF {
    background: #FFFFFF !important;
    border: 1px solid #768DBF !important;
}
/* Sidor  Länkarna i gadgets */
.GPCRQBSKF a, .GPCRQBSKF {
    color: #000000 !important;
}
.GPCRQBSLF a {
    color: #4464AA !important;
}

/* Kodmallens bakgrund */
.GPCRQBSAQB {
    background: #B3C1E0;
}
/* Orden Redigera HTML i kodmallen */
.GPCRQBSPPB .GPCRQBSBQB em {
    color: #FFFFFF !important;
}

/* Mallsidan - bakgrunden bakom de olika mallarna */
.GPCRQBSPEC {
    background: #FFFFFF;
}

/* Inställningar menyn hovereffekt */
.blogg-tab .GPCRQBSDCB:hover {
    background: #FFFFFF !important;
}

/* Inställningar hovereffekt alternativen högersidan */
.GPCRQBSPK tr:hover {
    background: #FFFFFF !important;
}

/* bg ovanför headern */
.GPCRQBSKBB {
    background:#F4F3EB !important;
}
.GPCRQBSEEB {
    background:#F4F3EB !important;
}

/* Knapparna högst upp */
a.blogg-button.blogg-primary {
    background: #FB8F3D !important;
}
a.blogg-button {
    background: #FFFFFF !important;
}

/* headern */
.GPCRQBSMAB {
    background: #8096C9 !important;
}
.GPCRQBSMAB .GPCRQBSDBB {
    background: #8096C9 !important;
}

/* bakgrund */
.GPCRQBSCBB {
    background:#F4F3EB;
} 
.GPCRQBSLAB {
    background: #F4F3EB;
}

/* headertext */
.GPCRQBSMAB .GPCRQBSPAB a {
    color: #FFFFFF !important;
}
.GPCRQBSPBB .GPCRQBSACB{
    color: #FFFFFF !important;
}
/* Layoutsidans gadget-bakgrund */
body#layout {
    background-color: #A4B8E8 !important;
    border: 1px solid #526EAF !important;
}

/* Layoutsidan flyttbara gadgets */
body#layout .draggable-widget {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}
/* Layoutsidan  låsta gadgets */
body#layout .locked-widget .widget-content {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Layoutsidan Lägg till gadget */
body#layout .add_widget {
    border: 1px dashed #526EAF !important;
}

/* Layoutsidan Favicon-gadgeten */
.GPCRQBSOSB {
    border-right: 1px solid #3D5A99 !important;
    border-bottom: 1px solid #3D5A99 !important;
    border-top: 1px solid #6E85B7 !important;
    border-left: 1px solid #6E85B7 !important;
}

/* Knapparna i headern, ej aktiva */
button.blogg-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Profilknappen */
button.blogg-menu-button {
    border-right: 1px solid #C9C9C9 !important;
    border-bottom: 1px solid #C9C9C9 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-left: 1px solid #E0E0E0 !important;
}

/* Nytt inläggknappen ovanför menyn till vänster */
button.blogg-button.blogg-primary {
    border: 1px solid #FB8F3D !important;
    color: white;
}
/* Menyn till vänster - bakgrund */
.GPCRQBSGBB {
    background: #FFFFFF;
    border: 1px solid #E0E0E0 !important;
    margin-left: 24px !important;
    padding: 10px 0 10px 20px !important;
}

/* Menyn till vänster - hovereffekt */
.GPCRQBSDDB:hover {
    background: #FFFFFF !important;
}
.GPCRQBSEDB:hover {
    color:#F26300 !important;
}

/* Översikt Uppdateringar högersidan */
.GPCRQBSOFB {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
}
.GPCRQBSPFB td {
    border-bottom: 0px !important;
}

/* Översikt Sidvyer */
div.GPCRQBSMFB {
    background-color: #FFFFFF !important;
    padding: 10px !important;
}
img.gwt-Image {
    background-color: #FFFFFF !important;
    border: 1px solid #E0E0E0 !important;
    padding: 10px !important;
    margin-top: -10px !important;
}

/* Inläggsidan - bakgrund bakom inläggen */
.GPCRQBSMR{ 
    background: #FFFFFF; 
    padding: 10px !important;
}
.GPCRQBSAEC:hover{background-color:#eeeeee !important;} 
/* Sidor - sidgadgets */
.GPCRQBSGF {
    background: #FFFFFF !important;
    border: 1px solid #768DBF !important;
}
/* Sidor  Länkarna i gadgets */
.GPCRQBSKF a, .GPCRQBSKF {
    color: #000000 !important;
}
.GPCRQBSLF a {
    color: #4464AA !important;
}

/* Kodmallens bakgrund */
.GPCRQBSAQB {
    background: #B3C1E0;
}
/* Orden Redigera HTML i kodmallen */
.GPCRQBSPPB .GPCRQBSBQB em {
    color: #FFFFFF !important;
}

/* Mallsidan - bakgrunden bakom de olika mallarna */
.GPCRQBSPEC {
    background: #FFFFFF;
}

/* Inställningar menyn hovereffekt */
.blogg-tab .GPCRQBSDCB:hover {
    background: #FFFFFF !important;
}

/* Inställningar hovereffekt alternativen högersidan */
.GPCRQBSPK tr:hover {
    background: #FFFFFF !important;
}

Ladda ner en zippad fil med länkar, screenshots och koden här


Det här är nog min favorit - att få en mörkare ram runt kodmallen. Då ser man vad som är vad så mycket enklare...

»»  läs vidare

Vidarebefordra din blogg till ny adress

Har du tröttnat på din gamla blogg och vill starta en ny, men ta med dig dina trogna bloggbesökare till din nya blogg?

Det löser du enkelt genom att lägga till en vidarebefordring i din gamla bloggs <head>tagg. Med denna kommer dina besökare automatiskt att förflyttas vidare till din nya blogg.

Gör så här:

Öppna din kodmall.

I kodmallen letar du rätt på <head>. Den taggen ligger ganska högt upp i mallen, nästan i början.
Under <head> lägger du in följande kod, byt ut "nyadress.blogspot.com" mot din nya bloggadress. Det fungerar förstås lika bra oavsett om det är en blogspot-adress eller inte.

<meta content='0; url=http://nyadress.blogspot.com/' http-equiv='refresh'/>

Content='0; står för den tid det ska ta innan vidarebefordringen sker i sekunder och om du vill kan du lägga in en fördröjning på kanske 5-10 sek. Det kan vara praktiskt om du skrivit ett meddelande på din gamla blogg som du vill att dina besökare ska hinna läsa innan de skickas vidare till din nya blogg.
Byt i såna fall ut nollan (0) mot det antal sekunder du vill ha fördröjningen.

»»  läs vidare

Bildsmart - ladda upp bilder på bloggen på rätt sätt

När du laddar upp bilder till dina blogginlägg hamnar de hos Picasa i din bloggs webalbum. Om du har flera bloggar under samma profil (du loggar in med samma mailadress och du ser bloggarna i instrumentpanelens lista) räknas alla bloggars bilder in i ditt använda bildutrymme.
Du har 1 GB utrymme, alltså 1024 MB och rätt utnyttjat räcker det länge!

"Hemligheten" är att redigera dina bilders storlek innan du laddar upp dem på bloggen.

En bild som direkt från kameran kan vara 3000x2000px stor kan ta upp över 4mb utrymme. Då krävs det inte många bilder för att fylla upp en 1024 mb kvot som du kan förstå.
Minskar du bilden till den bredd din bloggs inlägg har, säg 600px kan du minska bildens vikt till 250 kb, alltså 0.24 mb - en stor skillnad!

Du behöver inte förstå hur man räknar kilobyte, megabyte och gigabyte, huvudsaken är att du funderar över om du verkligen behöver ladda upp större bilder än vad som faktiskt visas i bloggen.

Om du har en dator med operativsystemet Windows har du förmodligen programmet Paint på din dator och där minskar du enkelt dina bilder om du inte har något annat bildhanteringsprogram installerat. Du hittar Paint via Startmenyn - Alla program - Tillbehör - Paint.

Så, hur vet du hur mycket utrymme du har kvar på ditt Picasa-konto?
Du hittar Picasa via bloggens instrumentpanel. Klicka på pilen bredvid din profils namn uppe till höger och sedan på Kontoinställningar.

Här kommer du till en sida med din profils inställningar. Klicka på Produkter. Välj Picasa Webbalbum

Nu kommer du till ditt Picasa-album med dina foton. Längst ner på sidan hittar du en informationsrad där du kan se hur mycket utrymme du har kvar.

Här på Fixabloggen lägger jag oftast upp flera bilder i varje inlägg, men jag håller dem så små som möjligt för att spara utrymme. Trots att jag skrivit i den här bloggen sen 2009 har jag bara använt knappt 15 % av mitt utrymme och då har jag ändå över 15 bloggar på samma konto. Visserligen är de flesta testbloggar, men ett par är scrapbloggar med ganska många bilder i. Rätt utnyttjat räcker utrymmet länge!

Så, hur gör du då om du inte funderat över det här med att spara utrymme och du får ett meddelande om att du inte kan ladda upp fler bilder?

En bra sak med Blogspot är att bilder som är mindre än 800x800px är "gratis", de räknas inte in i det totala utrymmet så du kan fortfarande ladda upp bilder som är mindre än det här måttet. Du kan också välja att uppgradera ditt Picasakonto till hela 20GB för endast 5$ per år. 5 US dollar är idag ca 34 kr.

Att betala 34 kronor per år för att kunna blogga med så stora och så många bilder man vill tycker jag personligen är en liten kostnad, jämför med lite godis eller ett cigarett paket om du röker - jag vet vad jag hade valt...

Ett annat alternativ är att ladda upp bilderna på en gratissajt som photobucket.com, tinypic.com eller minus.com. Du kan sen länka in bilderna istället för att ladda upp dem från din dator, välj bara Från en webbadress istället för Överför och klistra in bildens direktadress.

»»  läs vidare

Vattenstämpla dina bilder

Ett sätt att skydda dina bilder är att göra dem lite mer personliga och därmed mindre åtråvärda. Om det tydligt står att att en bild är din blir det svårt för en bildtjuv att hävda att denne själv tagit fotot eller att denne trodde att "bilden var allmän" eller något liknande.
Att ta bort en vattenmarkering i ett bildhanteringsprogram går visserligen, men det är mer jobb än vad det är värt för de flesta, för att inte tala om att det kan vara svårt att få ett bra resultat.

Om du har ett bra bildprogram på din dator kan du skapa din egen vattenmärkning och lägga på dina bilder innan du laddar upp dem på bloggen. Genom att ha en färdig märkning går det snabbt och enkelt. Du kan använda gratisprogram som Picasa eller Gimp eller ett köpt program som Photoshop (du kan testa alla Adobes program gratis en månad, även photoshop och photoshop Elements som är en enklare variant)

Om du däremot vill använda ett program online finns det många varianter du kan prova tills du hittar din egen favorit.

Water Marquee
Photoshop Express editor   (jag får inte textfunktionen att fungera i Firefox, men däremot i Chrome)
Picmarkr
Watermark
Pixlr

Om du inte hittar någon favorit här ovan kan du söka på watermark online. Du kommer då att hitta många sajter där du kan skydda dina bilder. 

Personligen tror jag att en vattenmärkt bild är bättre skyddad än en bild på en blogg med högerklicksskydd. Det är riktigt enkelt att "låna" en bild genom att ta ett skärmklipp - högerklicksskydd eller ej - men en bild med vattenmärkning kräver jobb eller visar direkt att bilden är stulen.

»»  läs vidare

Rätt SEO för din blogg

När man har en blogg och skriver om allt man tänker på vill man självklart hitta nya läsare. Något alla pratar om är att få en bra sökmotor-ranking, om man skriver om viktiga saker vill man förstås att folk ska hitta det man skriver på den första eller åtminstone andra sidan av sökresultaten.

Hur hamnar man då där?

Blogger har lagt till en ny funktion i dina inställningar, Sökinställningar.
Här kan du välja Metataggar, (Beskriv din bloggs innehåll så att de som är intresserade av det du skriver hittar rätt) Omdirigeringar och Sökrobotinställningar.

En liten varning, ändra inte i inställningarna för Sökrobot och indexering om du inte vet vad du gör, inställningarna här är viktiga men gör du fel riskerar du att din blogg helt ignoreras av sökmotorerna och att du inte får några besökare alls.
Jag återkommer med ett inlägg med bra sökmotor-koder. Låt de här två rutorna vara tills dess om du inte hittar en riktigt bra tutorial  om vad du kan skriva och vad det innebär.

»»  läs vidare

Dinblogg.blogspot.se - Vad händer med adressen?

Har du sett att våra bloggadresser verkar ha ändrats till xxx.blogspot.se eller fått en annan ändelse beroende på vart i världen du som läsare befinner dig?
Var inte orolig, din riktiga bloggadress som slutar på .com har inte ändrat sig!

Blogger har tillsammans med resten av Google infört något som kallas "canonical tags". Det här innebär att din blogg som ju kan läsas över hela världen kan anpassas efter olika länders lagar utan att det påverkar grundbloggen. Vissa länder har mycket strängare lagar och censur än vad vi har och de kan kräva att en blogg stängs ner på grund av sitt innehåll. Det här är kanske inte så troligt för en vanlig svensk bloggare om man inte skriver starkt politiskt eller pornografiskt, våldsamt, känsligt eller på något sätt olagligt innehåll på bloggen, men för de som gör det kan det här göra stor skillnad.

Genom att varje land får en egen lands-ändelse (här får vi förstås .se) kan Blogger stänga ner en olämplig blogg i de länder som kräver det medan innehållet kan visas i de länder som inte har samma censur.

Adressändelsen sätts via ett geolocation-system, alltså som GPS, och det här kan påverka bloggar i små länder och för bloggläsare som bor nära en gräns. De kan då se en annan landsändelse än sitt eget lands.

Funktionen Canonical tags är en tagg som ligger i din bloggs kodmall och finns i alla de nya designmallarna, men äldre mallar kan sakna taggen.Om du har en specialmall hämtad någon annanstans på nätet kan taggen också saknas. Om du tidigare bytt till en egen domän för din blogg påverkas du inte heller,  men framöver kan även dessa få dra nytta av funktionen.

Du använder även fortsättningsvis din xxx.blogspot.com-adress när du använder den ute på nätet (t.ex. i formulär) och det är också under .com som all din statistik samlas - oavsett vilket suffix din läsare sett din blogg med. Du behöver inte fundera över din bloggs feed i blogglistor och liknande gadgets, allt sker automatiskt!

För att klargöra.
Tittar du på din blogg här i Sverige står det  ...blogspot.se
Tittar en person i Italien på samma blogg står det  ...blogspot.it
Alla kan komma till din blogg genom att skriva in ...blogspot.com

»»  läs vidare

Upp till toppen-knapp

Du har kanske sett att jag här på Fixabloggen har en behändig liten knapp nere i högra hörnet som visar sig när man rullat ner en bit. Knappen för dig upp till toppen igen och gör att sidan saktar in innan den stannar.

Jag hittade scriptet till den här "upp-knappen" hos Way2Blogging.

Så här gör du för att lägga in upp till toppen-knappen på din egen blogg.

Gå till din bloggs kodmall.

Här trycker du på Ctrl och F för att få fram en sökruta. I sökrutan skriver du in </head> och trycker sen Enter på tangentbordet. Du kan förstås också söka fram rätt plats i kodmallen manuellt.

Det första du ska göra är att klistra in ett Jquery-plugin. (om du redan har den här koden för att du använt ett annat script som kräver det kan du hoppa över det här steget)

Precis ovanför </head> klistrar du in följande rad:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

När du gjort det (om du behövde koden) är det dags för nästa steg, att lägga in själva knappen.

Mellan ovanstående kod och </head> lägger du in följande kod:

<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCirc' }); });
</script>

När du gjort det är det dags att Förhandsgranska!
Om knappen sitter på plats och inget ser fel ut sparar du! Om inte får du klicka på Rensa redigerar och prova en gång till.

»»  läs vidare

Ta bort ram på bilder

Jag har tidigare skrivit om att lägga till ramar på bilder i de mallar där det inte finns någon redan, men jag har sedan dess fått många frågor om att ta bort de befintliga ramarna.

Så här gör du om du har en av designmallarna Simple, Awsome eller Watermark.

Gå till din bloggs kodmall.

När kodmallen är öppen trycker du Ctrl och F på ditt tangentbord. Du får då fram en sökruta som hjälper dig att hitta rätt plats i mallen.
I sökrutan skriver du in  .post-body img  och trycker enter.
(sökrutan kan ligga på olika platser i olika webläsare, t.ex. i överkant på fönstret, men de fungerar lika ändå)

Nu är det dags att börja radera.
Koden ser lite olika ut i de olika mallarna, men de du har av följande rader ska raderas för att ta bort ram och skugga.

background
border
-moz-box-shadow
-webkit-box-shadow
box-shadow
-moz-border-radius
-webkit-border-radius
border-radius

Det kan alltså se ut så här och då ska de markerade raderna raderas.

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
}

Förhandsgranska och om det stämmer - Spara!
Om du får ett felmeddelande eller om skuggan/ramen inte är borta får du klicka på Rensa redigeringar och börja om.Var noga så att det lilla }-tecknet på slutet inte försvinner!

»»  läs vidare

Forumpaus och spännande nyheter

Det händer mycket spännande inom Fixas nätverk just nu, ja faktiskt inte bara inom...

Vi kommer i dagarna att få en ny ägare, Lari Salminen från Designadinblogg.se och tillsammans blir vi sveriges största ideella blogghjälpsnätverk!

På Designadinblogg läser du tutorials om blogg.se (blogg esse som många skriver), här på Fixabloggen läser du om Blogspot och på vårt forum svarar vi på frågor om både Blogg.se, Blogspot, Wordpress och övriga bloggplattformar i mån av kunskap.

I samband med ihopslagningen kommer vi att ta en paus på forumet och uppgradera vår programvara och rensa upp bland våra tavlor för att ge plats åt blogg.se och wordpress.  Forumet är nu stängt och uppgraderingen sker antingen i dag eller i morgon, beroende på hur fort kön hos vår support går.

Välkommen till ett nytt större bloggdesign-blogghjälp-nätverk!

Anneli

»»  läs vidare

Bloggar i din profil

När man klickar på en Blogspot'tares profil visar det Mina bloggar, Bloggar jag följer och Om mig. Det är en jättebra funktion, men har man diverse testbloggar vill man förstås inte visa upp dem för alla - de är ju just testbloggar. Du kan förstås också ha andra skäl att välja att dölja vissa bloggar i din profil!


Så här gör du för att dölja de bloggar du föredrar att inte ha i din offentliga lista:

Gå till din blogglista och klicka på pilen brevid din bloggprofils namn. Välj Blogger-profil.

Nu kommer du till den sida som visas för dina besökare - välj Redigera Profil.

 

Här kan du välja vilka bloggar du vill visa, klicka på länken Välj bloggar som ska visas.

Nu kryssar du i de bloggar du vill visa, avkryssa de andra! 

Spara!

Nu visas bara de bloggar du valt!

»»  läs vidare

Bloggtips - And the great Escape

Vinter

Normalt sett brukar Fixabloggen inte rekommendera bloggar, men den här bloggen är något utöver det vanliga.
En dansk familj, medelklass och väl integrerad i samhället bestämde sig för att göra något helt off grid och bosätta sig ute i den svenska vildmarken i en fäbostuga. De har ingen el, inget internet, och inga bekvämligheter alls.

Hur skulle du fixa ett år utan allt du är van vid?

En intervju med mamman i familjen kommer framöver, vilka frågor skulle du vilja ställa till henne?
Vem är denna modiga Andrea som vågar ta det steg vi andra bara drömmer om...
Vad har familjen vunnit på att återgå till naturen och vad var jobbigt?

and the great escape

»»  läs vidare