Länkar under inlägget - färg
1. Gå in på din stilmall.
2. Leta upp följade:
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">↑</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
Fråga: Var ska man skriva in kodena,i kodmallen eller i stilmallen och vid vilken punkt ska man ändra? Gillar båda dina bloggar!
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.
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
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.
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:
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.
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:
<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.
