Tävling - 24 december

» > Julkalender,
 
Den färdiga designen du kan vinna kan du se här
 

Första advent - lucka

» > Bloggdesign, Julkalender,
 
I år kör jag adventsluckor via designabloggen.com, följ via bloglovin eller gilla sidan på facebook för att hänga med när luckorna 'tänds'
 Se designen live / Ladda ned den här

Fjärde advent - Lucka 4

» > Gratis designer, Julkalender, Tips - design,
 
I denna, sista och avslutande lucka har du chansen att vinna en valfri design! För att vara med och tävla kommentera detta inlägg eller maila mig på design@camillafamme.se och skriv rubrik "Lucka 4".
 
Två vinnare är dragna och kontaktade via mail, Grattis Cim och Jenny!

 
Se designen live / Ladda ner designen här
Information om hur du lägger in designen samt regler hittar du här
Gör så här för att fixa en tillbaka till toppen-knapp/text:
Steg 1:
Placera ut denna kod [ <a name="top"></a> ] i din kodmall där du vill att "toppen" ska vara, alternativt under headern
 
Steg 2:
Lägg in denna kod i stilmallen för att styra över textstilen
.topp {
font-family: trebuchet ms, verdana, sans-serif;
/*Ändra typsnittet här*/
font-size: 9px;
/*Ändra storleken på texten här*/
font-weight: normal;
color: #979797;
/*Ändra färgen på texten här*/
text-align: right;
/*Ändra till left/center beroende på vart du vill ha texten ligga*/
padding: 4px 2px 4px 2px;
}

.topp a { color: #53454b;
/*Ändra färgen på länken här*/
text-decoration: none; }
.topp a:hover { color: #F3EDE7;
/*Ändra färgen på länken när du håller muspekaren över, här*/ }
 
Steg 3:
Nu ska du placera koden med länken på önskat ställe i din kodmall
Länk med text: <div class="topp"> <a href="#top">Tillbaka till toppen</a></div>
Länk med bild:
<div class="topp"><a href="#top"><img src="adressen till din bild" title="Tillbaka till toppen" border="0"></a> </div>

I gratis designen här ovan har jag lagt in den i kodmallen efter div class="entrymeta"

Tips - Google Web Fonts

» > Julkalender, Tips - design,
Nu finns möjligheten att använda typsnitt på bloggen som dina läsare inte har installerat på sin dator och detta via Google Web Fonts. Bara genom en enkel liten kod in i stilmallen så är problemet löst!
 
Gör så här:
  1. Klicka dig in på Google Web Fonts
  2. Bläddra bland alla fonts och välj ett du gillar - Klicka på "Quick use"

     
  3. Kopiera då den kod som kommer upp

     
  4. Logga in på din blogg - Kugghjulet → Design → Kodmall (startsida, inlägg, arkiv, kategorier)
    Klistra in kodstycket ovanför </head>
     
  5. Gå sedan tillbaka till Google-sidan och kopiera koden under
     
  6. Tillbaks till din blogg - Kugghjulet → Design → Stilmall
    Klistra in koden där du vill använda typsnittet, exempelvis inläggsrubrikerna {h3}
     
  7. SPARA! Uppdatera din bloggsida och se hur snyggt det blev med det nya typsnittet!
 
 

Tredje advent - Lucka 3

» > Gratis designer, Julkalender, Tips - design,
 
Se designen live / Ladda ner designen här
Information om hur du lägger in designen samt regler hittar du här

 
Nu ska ni även få lära er hur man enkelt får bakgrundsbilden fast och inte försvinner upp när man scrollar ned på sidan.
Lägg då bara enkelt in detta kodstycke i din stilmall under background:
background-attachment: fixed;
 
Så det ser ut så här:
Och om du inte vill att bakgrundsbilden ska repeteras alls,
skriv med no-repeat,
om du vill att den ska repteras i bredd, skriv: repeat-x
om du vill att den bara ska repeteras i längd: repeat-y
 

Få instagram-widget på bloggen

» > Julkalender, Tips - design,
Instagram blir väl bara större och större och jag älskar det! Att sen då lägga det som en liten widget så ens bloggläsare kan hålla sig uppdaterad med bilderna också är kanon. Även om jag inte uppdaterar bloggen varje dag så uppdateras oftast min instagram-widget och så kan man enkelt bara klicka på en bild för att se den i större format :)
 
För att skapa denna widget gå in på denna sida: http://web.stagram.com/tools/
Skrolla sedan ned till denna text:
Så här ställer du då sedan in för att få widget med dina bilder:
Med Preview knappen kan du sen granska din widget om du vill först.
Välj sedan generate code → kopiera den koden som kommer upp i popup-fönstret
 
→ Logga in på din blogg - Kugghjulet - Kodmall och leta upp det stället du vill lägga in widgeten på
Alternativt någonstans efter <div id="side"> för att få den att ligga i menyn. → Spara kodmallen och sen är det klart!
 

Andra advent - Lucka 2

» > Gratis designer, Julkalender, Tips - design,
 
Se designen live / Ladda ner designen här
Information om hur du lägger in designen samt regler hittar du här
 
I och med det nya blogg.se kom även möjligheten att skapat ett inlägg i flera kategorier samt skriva taggar till inläggen som ökar sökbarheten i din blogg.
Som jag exempelvis har gjort här:
 
Få flera kategorier att synas:
Gå in i kodmall - startsida (logga in - kugghjul - design - redigera kodmallar)
 
 Sök upp koden som ser ut så här:
<a href=”{{ entry.category_link }}”>{{ entry.category_name }}</a>
Ta bort denna ↑ och ändra till ↓:
{% for category in entry.categories %}<a href="{{ category.link }}">{{ category.name }}</a>, {% endfor %}
 
Spara och gör sedan detta i alla kodmallar (startsida, inlägg, arkiv, kategorier)
 
Få taggar att synas:
För att få taggar att synas börjar du med samma sak, gå in i kodmallarna.
Nu väljer du själv vart du vill ha detta ligga men alternativt kan man ju lägga det direkt efter kategori-koden eller någonstans där i närheten, den koden ser ut så här:
 
{% for tag in entry.tags %}
<span>{{ tag }}</span>,
{% endfor %}
 
Spara och gör sedan detta i alla kodmallar (startsida, inlägg, arkiv, kategorier)
 
För att få ett bättre helhetsintryck över hur koden kan se ut får ni se hur det ser ut i min kod:
 

Redigera dina bilder enkelt & snyggt online!

» > Julkalender, Tips - foto,
Nu är det bara 20 dagar kvar till julafton och med det så delar jag med mig av ett tips som kan underlätta för många.
 
Här kan du enkelt redigera bilder med en massa verktyg samt göra snygga kollage! Gå till hemsidan här

Årets julkalender

» > Julkalender,
Då jag inte riktigt i år har tiden för att fixa en lucka varje dag men vill ändå fortsätta med lite tips osv så har jag i år en lucka för varje adventssöndag samt tre extra tips för nedräkning mot julafton. Hoppas ni gillar det! & ni missade väl inte den första luckan igår?! Och imorgon kommer första designtipset!

Första advent - Lucka 1

» > Gratis designer, Julkalender, Tips - design,
 
Se designen live / Ladda ner designen här
Information om hur du lägger in designen samt regler hittar du här

Med denna design medföljer även headern i .psd-format (photoshop-format)
så att man kan ändra headerbilderna om man vill.
 
Kod för fallande snö på bloggen
I. Kopiera denna kod:

<script type="text/javascript">
Width =1000; // ange bredden på sidan som ska snöflingorna ska falla
Height =2000; // ange höjden på sidan som ska snöflingorna ska falla
Count =25; // 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:#fff; 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>
 
II. Lägg in denna kod i kodmallarna mellan <head> och </head> någonstans
 
III. Där det är markerat här nedan är där du kan ändra färg samt symbol i din kod
Exempel på symboler man kan ha istället: ★ ☆ ✰ ✭ ✰ ✳ ❅ ☃ ♥ ❤ ❤ ❦ ♩ ♪ ♫ ♬
Exempel på färger hittar du här
 
För att ändra antalet flingor, bredd, höjd, storlek osv se guide-koden som ligger högst upp i kodstycket.

Lucka 24

» > Julkalender,
Vinn något valfritt från mitt företag, vad som passar dig bäst!
Håll muspekaren över bilden för att se innehållet

Lucka 23

» > Julkalender,
Moderskeppet
Håll muspekaren över bilden för att se innehållet

Lucka 22

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 21

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 20

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 19

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 18

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 17

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 16

» > Julkalender,
Håll muspekaren över bilden för att se innehållet

Lucka 15

» > Julkalender,
Håll muspekaren över bilden för att se innehållet
Tidigare inlägg