Intresserad av att köpa en färdig design?

Bloggdesign

 
Jag tänkte hör med er om det är någon som skulle vara intresserad av att köpa en redan färdig design som jag gjorde till en tjej som slutade höra av sig och helt enkelt inte köpte den. Designen har ett bildspel som header med tre bilder (går att göra fler eller färre) samt länkar till startsidan, bloglovin och ett inlägg om sig själv på trädets grenar (dessa går att byta ut till andra länkar, typ mejl, we heart it osv). Hela designen kan ni se HÄR.
 
Så är det någon som är intresserad? Färger och små detaljer går självklart att ändra och jag hjälper er att göra headern och ladda in profilbilden. Min tanke var att jag säljer designen för 200 kr eller den som ger mig det högsta budet. Jag skulle vanligt vis ha tagit 350 kr för en design som denna. Jag tänkte mig att om ni är intresserade kan ni mejla mig ett bud, eller att ni vill köpa den för 200 kr. Budstopp sätts 48 timmar efter första budet!
 
Sprid gärna detta om ni vet någon som är intresserad av en ny design. Ni kan också beställa designer nu igen!

Bloggdesign guide - ta bort "punkter/prickar" i menyn

Bloggdesign

 
Jag har upptäckt att det för många blir en slags lista med punkter i menyn och att många undrar hur man kan få bort den så tänkte bara slänga in ett snabbt inlägg med lösningen, för det är faktiskt inte alls svårt att fixa! Det enda ni ska göra är att lägga in en kod under #side.
 
Dvs, denna kod:
list-style: none;
 
Se bilden här under:
 

Kände för lite förändring

Bloggdesign

Har blivit lite trött på min design så kände att det var dags för en ny! Dock (om jag känner mig själv rätt) kommer jag snart byta bilder igen för att jag vill göra designen lite vårigare/somrigare. Men för tillfället får den stanna som den är!

Ny design då

Bloggdesign

 
Har gjort klart min bloggdesign nu! Kommer nog bli lite små ändringar i den under veckan men ville verkligen byta design så nu är den så här tillsvidare i alla fall. Kommer också komma upp lite viktiga inlägg under veckan som jag ska ha länkar till i menyn.
 
Vad tycker ni?

Beställ bloggdesign

Bloggdesign

 
Intresserad av att beställa bloggdesign?
 
Jag säljer just nu bloggdesigner till blogg.se för 200-400 kr beroende på hur avancerad designen är och hur lång tid den tar att göra. På grund av begränsat med tid gör jag inte lika många designer som jag har gjort tidigare och det kan ta lite längre tid än vanligt att få den färdiga desigenen beroende på vilken tid beställningen gjordes. Men är du intresserad så mejla mig [fannyfredrica.blogg@hotmail.com] så ser vi vad vi kan göra!
 
Det kommer finnas en bild i menyn där det står att det är jag som har gjort designen. Den bilden får inte tas bort!
 
 ps. det är alltid gratis att fråga och bolla idéer så tveka inte att mejla! :)
 
! UPPEHÅLL !
pga. tidsbrist
 

Intresserad av att köpa en design som redan är färdig? - kolla här!
 

Fixar en ny bloggdesign

Bloggdesign

 
Borde ha pluggat nu efter middagen men det har inte blivit av, inte alls. Har istället suttit och börjat med en ny bloggdesign, den är långt ifrån klar med hoppas att jag hinner klart med den i veckan i alla fall. Har ett hål på en och en halv timme imorgon som man bokstavligt talat bara sitter och rullar tummarna på så kommer nog sitta och hålla på med bloggdesignen då istället. Nyfikna på att se hur det blir?

Ni vet vad ni ska göra, press F5

Bloggdesign



Har gjort lite ändringar i min design under kvällen, kände att jag behövde lite nytt! Dock känner jag att det är något som saknas så mest troligtvis så kommer någon mindre ändring ske snart.

Men ni vet vad ni ska göra, tryck på F5 (eller något sånt) för att se den nya designen. Nu ska jag ta och lägga mig, godnatt och sov så gott!

Bloggdesign guide - Bildspel i headern

Bloggdesign


Har äntligen lyckats få till ett bildspel i headern igen så här kommer den efterlängtade guiden!

Instruktioner:

1. Börja med att lägga in koden nedanför ↓ istället för #header-avsnittet i stilmallen.

#EmilyPictureBackground {
float: center;
margin-right: 0px;
}



2. Kopiera koden i rutan här under och klistra in den ovanför </head> i alla kodmallarna.

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2011 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

// IE.

object.style.filter = 'alpha(opacity=' + opacityPct + ')';

// Old mozilla and firefox

object.style.MozOpacity = opacityPct/100;

// Everything else.

object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

var element=document.getElementById(id);

var msNow = (new Date()).getTime();

var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

if (opacity>=100)

{

SetOpacity(element,100);

element.timer = undefined;

}

else if (opacity<=0)

{

SetOpacity(element,0);

element.timer = undefined;

}

else

{

SetOpacity(element,opacity);

element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

}

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

var foreground=document.getElementById(foregroundID);

if (foreground.timer) window.clearTimeout(foreground.timer);

if (backgroundID)

{

var background=document.getElementById(backgroundID);

if (background)

{

if (background.src)

{

foreground.src = background.src;

SetOpacity(foreground,100);

}

background.src = newImage;

background.style.backgroundImage = 'url(' + newImage + ')';

background.style.backgroundRepeat = 'no-repeat';

var startMS = (new Date()).getTime();

foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

}

} else {

foreground.src = newImage;

}

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

if (slideCache[nextImage] && slideCache[nextImage].loaded)

{

FadeInImage(pictureID,nextImage,backgroundID);

var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)

+ ';' + nextImage;

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",

displaySecs*1000);

// Identify the next image to cache.

imageSeparator = futureImages.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

} else {

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",

250);

}

// Cache the next image to improve performance.

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].loaded = false;

slideCache[nextImage].onload = function(){this.loaded=true};

slideCache[nextImage].src = nextImage;

}

}

</script><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>



<script src="fadeslideshow.js">



/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/

<script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js"></script>

</script>



<script>



var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})





var mygallery2=new fadeSlideShow({

wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "always",

togglerid: "fadeshow2toggler"

})



</script>




3. Lägg in den här koden under ↓ efter<div id="header">i alla kodmallarna.

<div id="EmilyPictureBackground">

<img alt="BILD 1" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">

</div>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"BILD 1; BILD 2; BILD 3; BILD 4",5);

</script>

 

BILD 1 - lägg in url-koden till första bilden

BREDDEN - byter du ut mot bredden på bilderna
HÖJDEN - byter du ut mot höjden på bilderna

För att ändra hur många bilder du vill ha i bildspelet kan du bara lägga till mer, eller midre, URL-koder. Se bara till att det är ett ; efter varje bild FÖRUTOM den sista bilden!

Spara och hoppas att det funkar! ;)

 


UPPDATERAT [2012-10-07] : Nu ska guiden fungera, annars vet jag faktiskt inte vad som är fel!


OBS! Kopiera genom CTRL+C (PC) eller CMD+C (MAC)

 

Bloggdesign guide - Mouseover bild

Bloggdesign



Fick en förfrågan hur man lägger in en mouseoverbild i menyn. Gjorde en guide om mouseoverbilder i inlägg i min julkalender men för att det ska vara lättare att hitta skriver jag ett nytt inlägg! :)

Instruktioner:
1. För att kunna lägga in en mouseover bild i ett inlägg/menyn så måste ni först ha en JavaScript kod i kodmallen. Kopiera koden under och lägg in den i alla kodmallarna ovanför </head>


<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//

function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}

function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;

// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>

2. Ladda upp båda bilderna ni vill ha på Skapa -> Bild och öppna bilderna i nya flikar.


3. Nästa steg är att lägga in mouseover-koden i inlägget. Börja först med att skriva klart inlägget ni vill ha bilden i. Där ni vill ha eran bild är det en smart idè att skriva BILD eller liknande så att ni snabbt hittar stället senare. Tryck sen på "Ändra redigerare" i högra hörnet och klistra in koden här under där ni har skrivit BILD. Det som du sen behöver göra är att ta bort BILDLÄNK TILL BILD 1 och såklart sätta in bildlänken.

Mouseover bild:
<img src="BILDLÄNKEN TILL BILD 1" oversrc="BILDLÄNKEN TILL BILD 2">

Mouseover bild med länk:
<a href="LÄNK TILL SIDAN"><img src="BILDLÄNKEN TILL BILD 1" oversrc="BILDLÄNKEN TILL BILD 2" border="0"></a>



För att lägga in bilden i menyn:
1. Följ steg 1-2 där uppe, de vill säga lägg in JavaScript koden i alla kodmallarna ovanför </head> och ladda upp bilderna.

2. Sen ska ni lägga in mouseoverkoden där ni vill ha bilden under <div id="side">. Byt BILDLÄNKEN TILL BILD 1, BILDLÄNKEN TILL BILD 2 och LÄNK TILL SIDAN till det som ska vara där. Tryck på spara stilmall! Klart!


Funkar det det inte eller är det något ni inte förstår, säg till så ska jag försöka hjälpa er! :)

Ny design, tryck F5

Bloggdesign

Har fixat en ny design till mig nu, ungefär som den jag hade tidigare men förhoppningsvis så ser texten inte lika konstig ut i andra webbläsare. Gillar i alla fall den här designen bättre också! Ser det konstigt ut, uppdatera sidan genom att tryck på F5. Ni kanske till och med behöver uppdatera sidan några gånger för att den ska se bra ut! ^^

Vad tycker ni?


Bloggdesign guide - Rutor i menyn

Bloggdesign


Det finns säkert många sätt att fixa rutor/boxar i menyn men så här har jag gjort!

1. Börja med att lägga in den här koden under #side i stilmallen

#box {
width: 212px;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
}


Vill ni att det ska vara skuggor runt rutorna ska ni lägga in den här koden också före }

-moz-box-shadow:0px 0px 15px #888;
box-shadow: 0px 0px 15px #888;


Sen får ni ändra width till hur breda ni vill ha rutorna osv.


2. Ta bort background: #FFFFFF; under #side

Det gör så att hela bakgrunden i menyn försvinner, det kommer se konstigt ut men box-koden kommer att göra att det blir en bakgrund igen!


3. Nästa kod ni ska lägga in ska läggas in i kodmallarna där ni vill ha rutorna

<div id="box">#</div>

# - byts ut mot det ni vill ha i rutorna. Vill ni till exempel ha en profilbild och text om er själva där som jag har i min översta ruta ska koden se ut så här:

<div id="box">
<img src="KOD TILL BILD">
<font face="TYPSNITT" color="FÄRG" size="STORLEK">DIN TEXT
</font>
</div>


För att få mellanrum mellan alla rutorna måst ni lägga in

<br/>
<br/>

4. Lägg in alla koden i alla kodmallarna!

Jag hoppas att det funkar för er, annars får ni säga till vad som blev fel så ska jag se om jag kan komma på vad felet är! Lycka till! :)


20 februari 2012 - Har uppdaterat inlägget då det inte fungerade. Missade att skriva steg 2 men hoppas att det fungerar nu i alla fall, annars vet jag inte vad felet kan vara!

Lägg till text ovanför kommentarerna

Bloggdesign

Fick en förfrågan hur man lägger in text ovanför där man kommenterar, så här kommer en snabb liten guide!


Koden för text: <font face="typsnittet" color="färgen" size="storleken">Din text</font>

Sälja bloggdesigner

Bloggdesign

Eftersom jag har börjat få så många frågor om ifall jag säljer designer så har jag nu bestämt mig för att börja med det. En design kommer kosta mellan 50-125 kr beroende på hur avancerad den är och hur lång tid den tar att göra. Vi kan säkert komma överens om ett pris när jag får veta vad du hade tänkt dig. :)

Är du intresserad av att köpa en eller bara vill veta mer så mejla mig - fannyfredrica.blogg@hotmail.com

Det är först till kvarn som gäller då jag inte kan göra hur många designer som helst samtidigt, så vill ni ha en så skynda er att mejla så att ni kommer först på listan!

Smygtitt

Bloggdesign

Jag har varit hela dagen med underbara Maja idag. Det var meningen att vi skulle plugga men det blev verkligen inte av. Förhoppningsvis blir det av imorgon eller någon annan dag. Jag kanske till och med borde försöka plugga lite nu även då jag är extremt trött.

Här kommer i alla fall en liten smygtitt på min nya design. Inte så stora ändringar men den är i alla fall vintrigare.

New Design

Bloggdesign

Tyckte det var dags med en ny, lite höstligare design. Tryck på F5 om ni inte ser den nya designen. Men lite små ändringar kommer ske men vet inte när jag har tid för det så tänkte att jag lägger upp designen nu på en gång.

Klickbart i headern

Bloggdesign

Fick en fråga om hur jag tidigare kunde ha min bloglovin-"knapp" ovanpå min profilbild. Det är inte alls svårt och koden kan användas till mycket mer än att ha bloglovin på profilbilden. I min nya design har jag använt samma kod till att sätta in de runda bilderna med länkar till t.ex. startsidan, bloglovin och bloggsvar på profilbilden. Ni kan också få bilder att exempelvis vara på headern.

Det ända som ska göras är att klistra in den här koden under <div id="header"></div>

<div style="position:absolute; width:903px; x-index:0; left: 835px; top:365px;">#</div>

# ska ni byta ut mot det ni vill ska synas där. Antingen kan ni ladda upp en bild och sätta in den i en vanlig htlmkod eller kan ni kopiera in koden till bloglvoin som ni hittar på deras hemsida. För mig skulle då koden se ut så här:

<div style="position:absolute; width:903px; x-index:0; left: 835px; top:365px;"><a title="FannyFredrica on Bloglovin" href="http://www.bloglovin.com/sv/blog/2301158/fannyfredrica/follow"><img alt="bloglovin" border="0" src="http://www.bloglovin.com/widget/subscribers_pink.php?id=2301158&lang=sv" /></a></div>

För att sen se till att bilden hamnar på rätt ställe får ni testa er fram genom att ändra talen som står bakom left: och top:. Bakom left ändrar ni hur många pixlar från vänstra kanten bilden ska vara på och bakom top hur nära den övra kanten. Det är bara att testa er fram tills bilden hamnar rätt.

Ni kan lägga in hur många sånna bilder ni vill men sätt alla olika bilder i egna koder. Hoppas att ni förstår hur ni ska göra, annars är det bara att fråga. :)

Ny design men problem med photoshop

Bloggdesign

Nu har jag fixat klart min nya design, blir nog lite små ändringar i morgon men det stora är klart. Tryck på F5 om du inte ser några ändringar.

Tyvärr har mitt photoshop slutat fungera så är lite små deppig just nu, vet inte vad jag ska göra om jag inte kan fixa det imorgon. Hade tänkt lägga upp en massa bilder från konfan ikväll men det blev ju lite problem med det...

Ny design

Bloggdesign

Nu är jag påväg att gå och lägga mig, är riktigt trött och det ska verkligen bli skönt att krypa ner under mitt mjuka täcke och bara få sluta ögonen och ta det lugnt för någon timme. ;)

Nu är min nya design i alla fall klar, syns den inte är det bara att klicka på F5 och hålla tummarna. Om headern är ett bildspel så är allt rätt. Dags att sova nu, godnatt och sov så gott!

Ny design

Bloggdesign

Nu ska jag stänga av datorn och göra mig ordning för att gå och lägga mig. Kommer nog inte släcka lampan och stänga av TV på ett tag men det är ganska skönt att bli av med stuprörsjeansen. ;) Godnatt!

Försöker göra klart

Bloggdesign

Sitter just nu och försöker göra klart min nya design, tyvärr går det inte speciellt mycket framåt. Ska se om jag får upp den nya designen till slutet av veckan. :)
Bild på den nya designen från arkivet, dock ser den helt annurlunda ut nu.. ^^
Tidigare inlägg