Infinite scroll hos blogg.se

» > Tips - design,
Det är många som har problem med att bara 3 inlägg syns på startsidan och att kategorierna inte går att ses, får att lösa detta så behöver man lägga in kod för infinite scroll under alla kodmallar och en sån guide har Sanna gjort här
 
 

Designabloggen.com

» > Bloggdesign, Tips - design,
Nu kunde jag inte hålla mig nå mer, efter ett par veckors arbete lanserar jag nu designabloggen.com, en sida som kommer bjuda på blogg- och designtips, gratis designer m.m. Förhoppningsvis kommer den utvecklas mycket och bjuda på en massa mer. Jag behövde något att göra för att få dagarna att gå och kom på denna idé istället för att lägga upp en massa guider m.m. på denna privata bloggen, hoppas ni gillar sidan!
 
I och med denna lansering finns nu även en ny gratis design för nedladdning till förmån för Rosa bandet 2013, den ser du mer av och kan ladda ned genom sidan.

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:
 

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.

Byta header på gratis design

» > Tips - design,
Jag får många både kommentarer och mail om man får byta bilderna i headern på mina gratis designer och även hur man gör.
Först och främst så får ni byta header och ändra färger o vad ni vill på gratis designerna, så länge ni har kvar design av-länken då det fortfarande är min grund.


Hur byter man då header?

Hur? Ändra färg och avstånd på kursiv text i inläggen

» > Tips - design,
Fick ett mail i förrgår om hur man gör för att få annan färg och bredare avstånd mellan bokstäverna på kursiv text i inläggen. Detta är ett enkelt litet tips om hur du gör!

Gå in i stilmallen leta upp a:hover och efter dennes rad skriv in:
Ju högre värde på letter spacing du skriver desto bredare mellanrum, man kan även skriva -1px för att få dem tajtare.
Färgkoder (#-koder) hittar du bland annat enkelt via denna sida: Färgväljare

Hur? Byta headern i en gratis design

» > Tips - design,
Fick en kommentar här om dagen hur man gör om man vill ändra headern och lägga in sina egna bilder.

Steg 1: Börja med att gå in i stilmallen och sök upp: #header
Markera sedan sedan bildadressen som finns där och kopiera in i en ny flik på din webbläsare, och spara sedan ned bilden genom att högerklicka - spara bild som
Steg 2: Öppna sedan den sparade bilden i valfritt bildprogram, exempelvis photoshop.
Redigera sedan denna utefter hur du själv vill ha det. Spara sedan bilden och kom ihåg att spara med rätt filändelse (jpeg, png, gif - png gör att bilden får genomskinlig bakgrund, ändra ej detta!)

Steg 3: Ladda sedan upp bilden på din blogg
Skapa - Bild - Välj fil (leta reda på bilden och välj den) - Bildstorlek (välj 1000 pixlar) -> Ladda upp!
Klicka sedan på bilden två gånger så du får fram en adress till bilden och kopiera adressen

Steg 4: Gå sedan in i stilmallen, leta upp samma ställe och kopiera in din nya bild-adress.

Steg 5: Välj sedan förhandsgranska och se så det ser bra ut innan du sparar allt.

Lycka till! :)

Hur? Lägga till meny #1

» > Tips - design,
Fick en kommentar här på bloggen om hur man lägger till en meny, då tänkte jag börja med att visa hur du lägger in en sidmeny, då vissa av mina gratis designer inte har någon sid-meny alls, kan du enkelt få tillbaks den.

Börja alltid först med att kopiera all nuvarande kod och spara i anteckningar, ifall det blir något knas när du ändrar sedan.

Sen går du in i kodmallarna, sök upp och lägg till: <div id="side"> </div>
Innan den stängda div (</div>) får du lägga in vad du vill ha i menyn, text, bilder, länkar osv.

Gå sedan vidare till stilmallen och leta upp:
För att förstå lite mer och bättre om wrapper, side och content, läs här

Prova dig sedan fram så får du nog till det bra som du vill ha det till slut :)

Hur? Bildspel i headern

» > Tips - design,
Har fått ett flertal kommentarer kring detta och anar att det är ett antal fler som undrar hur man gör också, många av er är då även lite för slöa för att söka på Google för det är inte så svårt egentligen ;)

Men jag är snäll och ger er en liten hjälp på vägen!
För att få till ett bildspel i headern måste man använda sig av att script, detta script heter EmilyPictureBackground
Via en liten enkel sökning på google kommer ni kunna få fram kod och instruktioner, gör sedan dina olika bilder du vill ha i headern och spara på din blogg och använd sedan i koden.

Guide via denna sida som innehåller koder för scriptet
Skapa en div som heter exempelvis slideshow, bildspel eller vad du än behagar själv som du lägger in både i stilmallen och kodmallen.
I stilmallen är det för att positionera bildspelet så det hamnar rätt i headern och i kodmallen skriver du bara <div id="namnet">
Och följ sedan med punkt 2, 3 och 4 (med dina bildadresser) och fixa och trixa sedan så den ligger rätt och alla bilder är med o rullar :)

Så här ser det ut i min stilmall:

& så här i kodmallen:
Lycka till och ge inte upp i första taget!
Kom även ihåg att om det ska vara ett bildspel på varje sida att lägga in det under varje kodmall (framsida, arkivsida, kategorisida och inläggssida)

Hur? Runda hörn utan bilder

» > Tips - design,
Här kommer ännu ett tips, hur du får rundade hörn som exempelvis jag har på min hemsida där jag skriver:
Lägg då in denna kod i din stilmall inom side, content, wrapper eller där du vill ha rundade kanter.
Du kan sedan själva fixa dom genom att ändra 10px till något annat tal, prova dig fram! :)
Enkelt fixat istället för att fixa med bilder upp och ner överallt :)

Hur? Rullande twitterstatus

» > Tips - design,
Här kommer nog ett efterlängtat inlägg, har i alla fall fått frågan flera gånger hur man gör. Så läs och lär!

Börja med att gå in i din stilmall och lägg in:
Detta är rubriken som blir och stå ovanför den rullande twitterstatusen
Denna kod gäller för den själva twitterstatus-texten
Länken som blir är tiden som kommer rullandes efter twitterstatusen
Sen går du in i kodmallen och letar upp var du vill ha twitterstatusen, alternativt under <div id="side"> och lägg då in denna kod:
Leta upp i texten där det står ANVÄNDARNAMN och ändra till just ditt användarnamn på twitter

Sedan ska det fungera, Lycka till! =)

Tips: Skapa animering i PS

» > Tips - design,
Fick en förfrågan senast igår om att jag skulle göra ett inlägg om hur man skapar en animering.

Så här blev animationen jag gjorde i filmen:
Man behöver inte göra mellanstegen mellan varje bild, i detta fall hade det nog blivit bättre utan men det var mer för att visa hur man kan göra.

Tips - Spara för webb

» > Tips - design,
Något som många säkert inte vet om och är väldigt lätt att missa är alla färger som ofta går förlorad genom att spara som vanligt i Photoshop. Istället kan man "Spara för webben och enheter" och det blir en stor skillnad.

Här nedan ser ni skillnaden som blir:
Sparat som vanligt ↓
Sparat för webben och enheter ↓

Hur? - Tidsinställt inlägg

» > Tips - design,
Finns nog några guider på detta redan men fått frågan från flera stycken hur man gör ett tidsinställt inlägg här på blogg.se

Här nedan visar jag med bilder steg för steg hur du går till väga:
Detta är verkligen jättesmidigt, detta inlägg är även det ett tidsinställt var bara att skriva det igår och så publiceras det idag (19/1) när jag jobbar.

Psst! Man kan även lägga in inlägg bakåt i tiden ;)

Hur? - Skapa eget arkiv

» > Tips - design,
Har fått en förfrågan om att skriva hur man gör för att ordna upp sitt egna arkiv. Har visat lite grann tidigare hur man gör men här kommer en mer detaljerad guide:
Vanligtvis ser arkivet ut så här:
Jag har valt att ta bort arkiv - <div class="navheader">arkiv och gjort det till: <div class="2011">
För att uppdatera för varje månad blir koden att se ut så här:

Om man vill ha all kod färdigt på en gång för kommande månader också blir det så här:

Gör sedan detta för alla år du har arkiverat, kom då bara ihåg att ändra åren ↓

Tips - Mouseover

» > Tips - design,
Fick en förfrågan om jag kunde visa hur man gör mouseover (så den byter bild när man håller muspekaren över, exempelvis mina luckor) på bloggen så här kommer det!

1. Lägg in koden nedan precis innan </head> i kodmallen

2. Om du vill ha en mouseover fast i designen, i menyn exempelvis använd denna kod & lägg in på önskat ställe:
<a href="länkadressen"><img src="adressen till bild 1" oversrc="adressen till bild 2" border="0"></a>

eller om de inte ska vara länk till någon sida:
<img src="adressen till bild 1" oversrc="adressen till bild 2" border="0">

Vill du ha den i ett inlägg använd denna kod:
<img onmouseover="this.src='ADRESS TILL BILD 2'" onmouseout="this.src='ADRESS TILL BILD 1'" src="ADRESS TILL BILD 1" alt=" " />
Tidigare inlägg