Välj färger hur du vill!

designadinblogg.se
2012-05-19 @ 02:24:00 Permalink smått och gott Kommentarer (0) Trackbacks ()

Slideshow i headern!

Nu kommer denna efterlängtade kod!

1: Gå till din stilmall och lägg in koden ↓ under avsnittet #header {

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


2.Sedan går du med att gå in på design - kodmall och lägger in den koden ↓. Någonstans mellan <head> och </head>.

<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:2500, 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 sedan in koden↓ mellan <div id="header"> och </div>. Du kan ha så många bilder du vill i bildspelet, men den sista bilden du lägger in ska inte ha en ; bakom sig!



Sådär, klart!
2012-05-10 @ 23:09:04 Permalink Header Kommentarer (3) Trackbacks ()

Hur man byter färg på bakgrunden!

det är bara att byta ut #000 mot någon annan färgkod! :)
De vanligaste färgkoderna är dessa:
Vit: #FFF
grå: #CCC
svart: #000
2012-05-06 @ 15:26:36 Permalink smått och gott Kommentarer (0) Trackbacks ()

Lägga till ikoner på din blogg!

Det är faktiskt väldigt simpelt!

Välj en bild, (helst i .png format, då man kan placera den vart man vill utan att få en ful vit ruta bakom) ladda upp den i ett inlägg på blogg.se.
då kommer din kod till bilden se ut någorlunda såhär (för att få redan på bildkoden så klickar man på "ändra redigerare" längst ner i höger hörn där du laddat upp bilden på blogg.se);

den koden kan du sedan placera vart du vill på din blogg så kommer den bildfilen att synas! :)
och vill man sedan kunna placera dem vart som helst, t.ex. i header så får man använda sig av en kod som ser ut såhär:
position:absolute; left:400px; (antal pixlar från vänsterkanten) top:400px; (antal pixlar från toppen på bloggen)">
2012-04-22 @ 14:02:20 Permalink smått och gott Kommentarer (1) Trackbacks ()

Sidan ska få en ny uppdatering, ett enklare sätt att hitta!

Jag ska snarast göra en ny design så det blir lättare att hitta på denna sidan!

Jag ska även uppdatera alla koder så att de verkligen funkar och skriva lite noggrannare då jag märkt att flera stycken har haft problem med vissa koder! :)
2012-03-23 @ 08:49:44 Permalink Kommentarer (2) Trackbacks ()

rundade hörn på bloggen!

Det är en hel del frågar om hur man ska göra för att få runda hörn på sin blogg. På sidomenyn, på content, wrapper o.s.v! Visst går det går att fixa om man använder sig av bilder, men det kan vara lite klurigt. Jag ska därför visa ett enklare sätt! :)

Observera att detta inte funkar i alla webbläsare. (Fungerar bäst i nyare verisoner av webbläsare)


1. Gå in på fliken "Design" och klicka sen vidare på "Redigera stilmall".


2. Vill du ha runda hörn runt själva bloggen. Letar du upp stycket #wrapper och klistar in:

-moz-border-radius:
15px;border-radius: 15px;

vill ni ha det på sidomenyn letar ni upp #side o.s.v ! :)

Såhär alltså:




Om du vill ha ökad rundning på hörnen ökar du bara på 15px.


3. "Spara stilmall" eller "Förhandsgranska".
2012-02-08 @ 14:55:08 Permalink smått och gott Kommentarer (7) Trackbacks ()

fallande löv

Fick även frågan om fallande löv på bloggen,
det är faktiskt väldigt simpelt, om ni tar koden nedanför och klistrar in den under <div id="header"> i kodmallarna.
2011-11-11 @ 22:46:52 Permalink smått och gott Kommentarer (5) Trackbacks ()

skugga bakom inlägg

fick en fråga om skugga bakom inläggen. Då ska ni bara kopiera den här koden:
klistra sedan in där du vill ha den, och nu färklarar jag ju för er hur man lägger in den bakom inläggen och då är det under #content i stilmallen som koden ska läggas! :)
som på bilden nedan:
2011-11-11 @ 22:38:56 Permalink smått och gott Kommentarer (1) Trackbacks ()

hur man lägger in en header

det sista jag säger är att om ni har några frågor kan ni bara kommentera här under ;)
2011-10-20 @ 18:17:26 Permalink Header Kommentarer (7) Trackbacks ()

Hur du får orginella överskrifter!

Gå in på cufón. Höger klicka på download och "save as.."
VIKTIGT: avsluta namnet med".js"
Sedan kan ni gå in på "dafont" och hitta den textstilen ni vill ha.
TTF-filen som ni får när ni packar upp den ska ni lägga på skrivbordet.
Sen får man gå in på cufón och ladda upp sina text stilar.
När du är klar med det går du in på "fuskbugg.se" och laddar upp de två
filerna du laddat ner(typsnittet och cufónfilen). Kopiera bildlänkarna och
skriv in dem där "lägg in koden....." i andra koden står! :)
Jag tror jag får göra en video på detta ist? ;)
längst ner i stilmallen!
lägg till i kodmallen efter <head>
2011-09-22 @ 09:23:17 Permalink smått och gott Kommentarer (3) Trackbacks ()

intresserad av en design av mig? :)

Standard - 50-100 kr beroende på hur enkelt ni vill ha det.

Innehåll: 

» Enkel Header;
- Valfri text & bilder.
» Meny;
- Profilbild & personlig information, 
- Egen designad Bloglovin ikon & Rss ikon 
- Styling av länkar och rubriker
» Kommentarsida; Stylade kommentarer

Övrigt i designen: Enkel bakgrund. Färg eller färdiggjord bakgrund.

avancerad - 100-200 kr.

Innehåll:
- Se tidigare designpaket Standard. 

Exempel på tillval:
» Egen organisering av arkiv & kategorier, mer personlig meny med exempelvis bilder & citat
» Dropdown meny.
» Egen designad bakgrund gjord av mig utifrån dina önskemål
» Mouseover
» Statistikräknare
» Egna Annonser & reklam
» Översättningsfunktion
» Egna rubriker i menyn
» Valfrifärg på kursiv eller fettext
» Skugga i designen
» 2 menyer eller flera
» "Inramade" inlägg
» Eventuellt något annat som du kommer på
2011-09-11 @ 19:58:21 Permalink Sugen på en ny design? Kommentarer (1) Trackbacks ()

något ni vill veta?:)

vill ni veta något annat? :)
2011-09-08 @ 20:20:28 Permalink Kommentarer (13) Trackbacks ()

ändra antalet "senaste inläggen".

gör såhär:

  1. Klicka på fliken "Design" och sedan vidare på "Kodmallar".

  2. Leta upp följande: <div>Senaste inläggen</div>
    Precis nedanför eller strax nedanför ska det finnas en rad dom ser ut såhär:    <tag:recentlist limit="20">
  3. Där kan du ändra hur många inlägg som ska synas under "senaste inläggen". Vill du t.ex. att 15 inlägg ska visas under ska det alltså stå: <tag:recentlist limit="15">
  4. Spara kodmall.
ett tips: för att leta upp koder lättare, kan du hålla in "ctrl+f" så får du upp en sökruta. Klistra in det du letar efter, så letar datorn upp det åt dig! =)
2011-08-18 @ 14:10:02 Permalink Meny Kommentarer (0) Trackbacks ()

skugga i sidmenyn, eller någon annanstans på bloggen! :)

  1. Gå in i din Stilmall
  2. Leta upp där du vill ha din skugga. I tillexempel sidmenyn.
  3. Då ser det ut såhär att först ska du:

kopiera denna koden:
-moz-box-shadow:10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;


Lägg till den under "#side {". såhär kommer det att se ut:

#side {
-moz-box-shadow:10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
height:auto;
left:740px;
padding:7px 0 0;
position:absolute;
top:87px;
width:195px;
}

hoppas ni lyckades! glöm inte att förhandsgranska innan ni sparar ifall det blev fel någonstans! :)
Lycka till!♥
2011-08-18 @ 13:55:35 Permalink Meny Kommentarer (3) Trackbacks ()

Fast bakgrund

det är jätte simpelt, kopiera bara koden här under, och byt ut den mot den koden som ligger längst upp i din stilmall.
som ser ut ungefär såhär: 

body {
margin: -40px;
padding: 80px;
background: #818181 url( )
}
body {
margin: 0px;
padding: 0px;
background: #000000 url( );
}
den som inte är fetstilt ska det läggas på en ändring! :)
Direkt efter den raden så lägger man till "fixed" och "no-repeat"
Det kommr då att se ut såhär:
body {
margin: 0px;
padding: 0px;
background: #000000 url( ) fixed no repeat;
}
simpelt va? :)
2011-08-18 @ 13:47:51 Permalink smått och gott Kommentarer (3) Trackbacks ()