Enkel drop down meny

1. Klicka dig in på fliken "Design" och sedan vidare till "Kodmallar".
 
 
2. Precis under

<div id="header">
<h1><a href="${BlogUrl}">${BlogTitle}</a></h1>
<h2>${BlogDescription}</h2>
</div>

lägger du till följande:


<ul id="dropdown">
<li><a href="#">KATEGORI 1</a>
<ul>
<li><a href="http://www.blogghjalparn.blogg.se">Designhjälp</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 2</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 3</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>
<li><a href="#">KATEGORI 4</a></li>
</ul>

3. SPARA KODMALL!

 

4. Nu klickar du in dig på "redigerastilmall"

 

 

5. Längst ned i stilmallen kopierar du och klistrar in följande:

#dropdown {
background: #FFF url();
float: center;
padding: 0px;
color:#000;
margin-top: 0px;
width: 100%;
}


#dropdown li {
background: #FFF url();
float: left;
list-style: none;
padding-top:5px;
position: relative;
height:27px;
width:120px;
text-align:center;
}

#dropdown li:hover {
background: #ccc url();
text-align:center;
}


#dropdown li a {
font-family: Arial, Helvetica, Sans-serif;
font-size: 12px;
font-weight: bold;
color: #000;
padding:10px;
text-transform: uppercase;
text-decoration:none;
}

#dropdown ul {
background: #ccc url();
display: none;
margin: 0;
padding: 0;
position: absolute;
top: 20px;
left: 0px;
z-index: 500;
}

#dropdown ul {
background: #ccc url();
position: absolute;
}

#dropdown li:hover ul {
background: #ccc url();
display: block;
margin-top:12px;
}

6. Nu kan du ändra utseendet på menyn så du vill ha det!


7. "Spara stilmall" när du är klar!


8. Nu har du en dropdown meny under headern men utan länkar. Så klicka dig till "kodmallar" igen och koden du klistra in där förut. Lägg nu in länkarna du vill ha i meyn.

Där det står LÄNKADRESS skriver du in själva länken t.ex http://www.blogghjalparn.blogg.se . OBSERVERA att du måste ha med https:// eller http:// innan www. ! Annars kommer inte länken funka.

Där det står LÄNKENS NAMN skriver du in t.ex Designhjälp!


9. "Spara kodmall".


För att få fler länkar under t.ex KATEGORI 2 så lägger du till <li><a href="EN TILL LÄNKADRESS">NYA LÄNKENS NAMN</a></li> mellan <ul> och </ul> såhär:


<li><a href="#">KATEGORI 2</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="EN TILL LÄNKADRESS">NYA LÄNKENS NAMN</a></li>
</ul>
</li>


Vill du ha en till kategori lägger bara till följande: 


<li><a href="#">NY KATEGORI</a>
<ul>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
<li><a href="LÄNKADRESS">LÄNKENS NAMN</a></li>
</ul>
</li>

Byt bakgrundsfärg

Detta är superenkelt! Din blogg blir mycket snyggare med lite färg eller med en snygg stilren grå eller vit. Hur du gör detta ser du här:

1. Gå in på http://www.colorsontheweb.com/colorwizard.asp

2. Välj färg genom att dra i kolumnerna eller skriv in en du redan vet i rutan "Enter Hex Kode:" Du kan även trycka på färgerna under färglängorna. 

3. Kopiera sedan koden som kommer upp i rutan "#" strax till höger om den stora färgrutan. Kopiera denna!

4. Gå in på design, "redigera HTML" och välj sedan stilmallen.

5. På ungefär fjärde stilmallsraden står det "background" och därefter en färgkod. I detta fallet står det #FFFFFF, där stätter du in din nya kod som ska se ungefär lika dan ut. 


6. Spara och sen är det klart!

Gör headern till en länk

1. Gå in på dina kodmallar.

2. Leta upp kodraden som ser ut såhär: <div id="header"></div>

3. Radera denna koden.

4. Kopiera nu denna koden: 
   <a href="http://designamedronja.blogg.se/"><div id="header"></div></a>

5. Lägg nu in denna koden där du tog bort den andra koden, alltså ersätt den korta koden till den långa. 

6. Byt sedan ut http://designamedronja.blogg.se/ till din egen blogg. Så nu när du trycker på din header så kommer du till startsidan. 


Sedan tar du bort och lägger in koderna i alla kodmallar!

Länkar under inlägget - färg

1. Gå in på din stilmall.



2. Leta upp följade: 

Till toppen med ett klick

1. Klistra in detta längst ner i din stilmall: 

#totop a
{
    display: block;
    display: none;
    z-index: 999;
    opacity: .8;
    position: fixed;
    top: 100%;
    margin-top: -80px;
    float:right;
    right:100px;
    -moz-border-radius: 24px;
    -webkit-border-radius: 24px;
    width: 50px;
    line-height: 48px;
    height: 50px;
    padding: 10px;
    background-color: #000; /* Du kan byta färg genom att du först tar bort #000 och skriver in den färg som ska visas när man inte hovrar */
    font-size: 24px;
    text-align: center;
    color: #fff;
    text-decoration:none;
}
 
#totop a:hover {
    background: #900; /*Färg när man hovrar! Byt ut #900 till en annan färg (om du vill) */
}
 


2.  Klistra in denna i din kodmall, direkt under <body>

<div id="top"></div>
<div id="totop"><a href="#top">&uarr;</a></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#totop a');
var $window = $(window);
var top = $(document.body).children(0).position(0).top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
</script>
 


3. Klart!       

Koder

Fet stil ----» <b>DIN TEXT</b>

Kurisv stil ----» <i>DIN TEXT</i>

Centrera text/bild ----» <center>DIN TEXT</center>

Radbrytning ----» <br />

Överstruken text ----» <strike>DIN TEXT</strike>

Mellanslag ----» &nbsp;

En bild ----» <img src="ADRESSEN TILL DIN BILD">

Understruken text ----» <u>DIN TEXT</u>

En länk ----» <a href="ADRESSEN TILL SIDAN">DIN LÄNKTEXT</a>

Ändra storlek på din text ----» <font size="SKRIV SIFFRA MELLAN 1-6">DIN TEXT</font>

En bild som länk ----» <a href="ADRESSEN TILL SIDAN"><img src="ADRESSEN TILL BILDEN" border="0"></a>

Ändra typsnittet/textstilen ----» <font face="TYPSNITTETS NAMN">DIN TEXT</font>

Ändra färg på texten ----» <font color="FÄRGEN">DIN TEXT</font>

Typsnitt,färgen och storleken i samma kod ----» <font face="TYPSNITTETS NAMN" color="FÄRGEN" size="STORLEKEN 1-6">DIN TEXT</font>

Centrera inläggsrubriken

1. Gå in på din stilmall.



2. Leta upp kodavsnittet: /** Entry headers **/
 

3. För att få texten centrerad måste du i de flesta fall lägga till en kodrad som ser ut så här: text-align: center;

Det kan finnas en kodrad redan med text-align, då är det bara att ändra den så det står center.

Bildspel i headern

Jag utgår från stilmallen "Fashion". Om det inte funkar har ni gjort fel, gör om, gör rätt!

1. Gå till "design" sen "kodmallar"



2. Klistra in den här koden just ovanför </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: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. Leta upp <div id="header"> och gör som bilden säger:


4. Nu ska du kopiera den här koden och klistra in den just under <div id="header">:

<div id="EmilyPictureBackground">
<img src="FÖRSTA BILDEN" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"FÖRSTA BILDEN;ANDRA BILDEN; TREDJE BILDEN, FJÄRDE BILDEN",5);
</script>



5. Nu kan du spara, sen ladda upp alla bilder du ska ha i ditt bildspel. Kopiera koderna till varje bild sen klistrar du in dom i den lilla koden, såhär kan det se ut när du är klar:


6.  Efter varje bild så är det en ; och så ska det vara förutom efter sista bilden där det ska vara ",5 
Så om du vill ha fler bilder är det bara att skriva efter sista bilden ett ; och sen bildkoden.



7. Nu kan du göra såhär i alla kodmallar, sen är du klar.
RSS 2.0