Bloggdesigntips: Ikonen/bilden ändras vid mouseover
<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>
Bloggdesigntips #4 - Bakgrunden följer med när man scrollar
Bloggdesigntips #3 - Hur många inlägg som visas på startsidan
Nu tänkte jag visa hur man ändrar antalet inlägg som visas på startsidan på bloggen! Det är superenkelt, läs inlägget! Bloggdesigntips #2 - Snö på bloggen
<script type="text/javascript">
Width =1200; // ange bredden på sidan som ska snöas in...
Height =7000; // ange höjden på sidan som ska snöas in...
Count =50; // antal snöflingor OBS! ange inte för stort antal!
MaxStep=3; // max steg i rörelsen
MinStep=1; // min steg i rörelsen
MaxFlake=10; // max storlek på snöflinga
MinFlake=4; // min storlek på snöflinga
PosX = new Array();
PosY = new Array();
StepX = new Array();
StepY = new Array();
StarSize=new Array();
for (i = 0; i < Count; i++) {
PosX[i] = Math.random()*Width;
PosY[i] = Math.random()*Height;
StepX[i] =MinStep+Math.random()* -MaxStep;
StepY[i] =MinStep+Math.random()* MaxStep;
StarSize[i]=MinFlake+Math.random() * MaxFlake;
document.write("<div id='Obj" + i + "' style='position:absolute; left:0px; top:-20px; z-index:10000; visibility:hidden; color:#ffffff; font-weight:normal; font-family:Verdana; font-size:"+StarSize[i]+"pt'>•</div>");
}
function animate() {
for (i = 0; i < Count; i++) {
PosY[i] += StepY[i];
PosX[i] += StepX[i];
document.getElementById("Obj"+i).style.visibility = "visible";
if (PosY[i] > Width || PosX[i] > Height || PosX[i]<0) { // starta om från toppen av sidan när mitten nås
PosX[i] = Math.random()*Width; ///2
PosY[i] = -20;
StepX[i] = MinStep+Math.random()* -MaxStep;
StepY[i] = MinStep+Math.random()* MaxStep;
}
document.getElementById("Obj"+i).style.top = PosY[i] + "px";
document.getElementById("Obj"+i).style.left = PosX[i] + "px";
}
setTimeout("animate()", 50);// hastighet
}
setTimeout("animate()", 1000);
</script>
Bloggdesigntips #1 - Använd det gamla designverktyget
Hur jag planerar en bloggdesign
Hur jag har gjort texten utanför menyn
Hur man gör för att bilderna ska gå ända ut i kanten av inlägget
Hur man gör boxar i menyn
Hur jag fixar flikar över headern
Hur man fixar högerklicksskydd med popup
Hur man gör en "tonad bakgrund"
välj "linjär" i menyn och dra så som på den här bilden (nerifrån och upp):
Hur man tar bort understrykningen på länkarna i menyn
.nav a { color: #000000; text-decoration:none;}
.nav a:hover { color: #cccccc; }
5. Förhandsgranska (om du vill) och glöm inte att spara!
6. Klart!
Hej och välkommen! Jag heter Alice, är 19 år och går första året på samhällsprogrammet med inrikting media. Jag älskar att fota, photoshopa, webdesigna, blogga, kolla youtube, instagrama, lyssna på musik och vara med vänner!
