Enkel drop down meny
<div id="header">
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;
}
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:
Vill du ha en till kategori lägger bara till följande:
Byt bakgrundsfärg
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.
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!
Lite mer headers









Collage med runda ringar
2. Tryck på "Collage"
3. Välj så många bilder du vill använda, jag tog 3.
4. Välj sedan collaget, och därefter "Ducks in a Row".

5. Gå sedan in på färgbrickan och därefter drar du "corner rounding" till 100%.

6. Spara bilden sen är det klart!
Kommentera gärna om något är oklart så ändrar jag det så att det blir mer tydligt :)
Gör headern till en länk
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.
Nya headers




Tips - vänd dina bilder mot varandra




Länkar under inlägget - färg
2. Leta upp följade:

Till toppen med ett klick
#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"
>↑</
a
></
div
>
<
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!
Q/A
Svar: Du ska ändra koderna i kodmallen. Men det är som en hjälp bara, så du ska inte klista in hela detta stycket någonstans utan om du vill ha en kursiv i menyn så klistrar du in <i>DIN TEXT</i> och sen skriver du in det du vill ha kursivt där det står: DIN TEXT.
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 ----»
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
2. Leta upp kodavsnittet: /** Entry headers **/
Det kan finnas en kodrad redan med text-align, då är det bara att ändra den så det står center.
Bildspel i headern
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:

<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.