Ebba Granholm Ström ✾

Direktlänk till inlägg 17 oktober 2011

Hur du gör en sideslow i din header på blogg.se

Av Ebba Granholm Ström - 17 oktober 2011 07:47

Börja med att lägga in denna kod mellan <head> i dina kodmallar.

Kom ihåg efter <head> inte </head>


<script type="text/javascript" src="http://www.bloggdesign.nu/include/bloggdesign.js"></script> 


Sen lägger du in denna kod efter <div id="header">


<div style="position:absolute; width:903px; x-index:0; left: 900px; top:350px;"><head>   <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>testsida</title> <style type="text/css"> body{ font-family:arial }   .clear { clear:both }   #gallery { position:relative; height:0px } #gallery a { float:left; position:absolute; }   #gallery a img { border:none; }         #gallery .caption .content { margin:5px }   #gallery .caption .content h3 { margin:0; padding:0; color:#15555; }   </style> <script type="text/javascript"> $(document).ready(function() { //Execute the slideShow slideShow(); }); function slideShow() { //Set the opacity of all images to 0 $('#gallery a').css({opacity: 0.0}); //Get the first image and display it (set it to full opacity) $('#gallery a:first').css({opacity: 1.0}); //Set the caption background to semi-transparent $('#gallery .caption').css({opacity: 0.7});   //Resize the width of the caption according to the image width $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});   //Get the caption of the first image from REL attribute and display it $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')) .animate({opacity: 0.7}, 400); //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds setInterval('gallery()',5000);   }     function gallery() {   //if no IMGs have the show class, grab the first image var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));   //Get next image, if it reached the end of the slideshow, rotate it back to the first image var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));   //Get next image caption var caption = next.find('img').attr('rel');   //Set the fade in effect for the next image, show class has higher z-index next.css({opacity: 0.0}) .addClass('show') .animate({opacity: 1.0}, 1000);   //Hide the current image current.animate({opacity: 0.0}, 1000) .removeClass('show');   //Set the opacity to 0 and height to 1px $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });   //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );   //Display the content $('#gallery .content').html(caption);   } </script> </head>   <body> <div id="gallery">     <a href="#" class="show"> <img src="BILD 1" alt="" alt="" title="" width="650" height="339" rel="<h3></h3>"/></a> </a>   <a href="#"> <img src="BILD 2" alt="G" alt="" title="" width="650" height="339" rel="<h3></h3>"/> </a>   <a href="#"> <img src="BILD 3" alt="G" alt="" title="" width="650" height="339" rel="<h3></h3>"/> </a>   <div class="caption"><div class="content"></div></div> </div> <div class="clear"></div>   </body> </html> </head></div>  


Och längst ner i koden ovan står det BILD 1 BILD 2 & BILD 3 och mella dem klistrar du in 3 olika bildkoder i rätt storlek som passar i din header. 


För att ändra var din header ska vara så ändrar du på top och left högst upp i koden.


Lycka till!   

 
ANNONS
 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 13:49

Sv; allt är olagligt att ladda ner om det inte är en gratiskopia eller ett gratisprogram. Har ingenting med hur dyrt ett program är. Nej, mitt är inte riktigt, det är nedladdat från piratebay. Fast det är ju inte oäkta för det, det är ju inte en kopia, utan det är äkta, bara att setup-filen och serienumret har lagts ut på internet. Betalar ju inte 11 000 spänn för ett datorprogram liksom..

quicktime kan man ladda ner på apples hemsida, precis som itunes.
tack förresten (:

http://sannasrum.se

Ebba Granholm Ström

17 oktober 2011 13:53

Okej, tack för upplysningen :D

Men nu har du en macbook, var det du hade på din windows också en piratkopia?

Det var så lite så =D

 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 14:20

Svarade jag på din kommentar? ;P fick hjärnsläpp här, minne som en guldfisk!

http://sannasrum.se

Ebba Granholm Ström

17 oktober 2011 14:47

Ja bara det första men itne om det där med din windowsdator ;)

Om du ahr det så har vi något gemensamt ;3

 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 15:02

Sv; haha okej, vad knäpp jag är!
Men jo, som sagt så har inte jag pengar till att lägga 11 000 kronor på ett program, så en gammal pojkvän som jag hade i sjuan eller nåt fixade photoshop till mig. Sedan var det brorsan som fixade till min macbook (:

http://sannasrum.se

Ebba Granholm Ström

17 oktober 2011 15:04

Aha =D Okej, tack igen ;D

 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 15:23

Sv; men du har alltså köpt ditt för 11 000 spänn?

http://sannasrum.se

Ebba Granholm Ström

17 oktober 2011 15:31

Nej jag har fått det av min moster som har både CS och Elements :D

http://nattsyrransphoto.wordpress.com/

Så jag vart såklart superglad. :D

Hon fick med när hon köpte Elements en skiva till macdatorer och då fick jag en installation :D

 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 15:37

Ja, det var ju väldigt snällt av henne i och med att man bara får installera det på två datorer enligt lagen, så det var du och hon då (: Men då har du elements då?

http://sannasrum.se

Ebba Granholm Ström

17 oktober 2011 15:44

Japp, jag har Elements :D

Du hade CS om jag inte minns fel :D

 
sɑɴɴɑs ʀυм

sɑɴɴɑs ʀυм

17 oktober 2011 16:05

Sv; ja men då förstår jag, det kostar ju inte 11 000 så då är det inte så konstigt (:

http://sannasrum.se

Ebba Granholm Ström

18 oktober 2011 07:39

Aa :)

 
elsa

elsa

17 oktober 2011 16:50

hejsan!
hur lägger man till profil bild på devote för det står ju
saknar foto fattar inte hur man lägger till bilden;)
och sen hur lägger/ändra saker i menyn???
svara gärna så fort du kan^^

http://elsinilsson.devote.se

Ebba Granholm Ström

18 oktober 2011 07:38

Om du kollar på mina bloggtips och kollar lite längre ner så står det kåder till devote och där fixar du saker till menyn och för att ändra presentationsbild klickar du på den gula fliken där det står "om mig" och väljer inställningar :)

 
Amanda

Amanda

17 oktober 2011 17:43

Sv; Jaa! Jag vill jättegärna ha ett länkbyte med dig! :) <3
Länkar dig i ett inlägg nu! ^^

http://mandoh.bloggplatsen.se

Ebba Granholm Ström

18 oktober 2011 07:34

Nu har jag länkat dig =D

 
sofia

sofia

17 oktober 2011 17:51

Hehe, jag såg vad du heter i skype när Amanda chatta med dig ;)
E det ok om jag addar dig eller vill du inte det? : O

http://www.sofiasfoton.bloggplatsen.se

Ebba Granholm Ström

17 oktober 2011 22:16

Såklart det är okej :D

 
AniPani

AniPani

4 december 2011 20:24

sv: Tack! Men tyvär funkar det inte... tror det är samma kod som jag provat tre gånger förut.......

http://anipani.webblogg.se

 
Anna

Anna

22 juni 2012 12:09

Vad är en sideslow egentligen? :o

http://amboree.bloggplatsen.se

 
Emma Thyrén

Emma Thyrén

23 juni 2012 20:57

kan man bara ha tre bilder? :)

http://troolleem.bloggplatsen.se

 
Ingen bild

Camilla

18 juli 2012 18:55

Vet du hur man fixar slideshow på bloggplatsen också? Tacksam för svar :D

Ebba Granholm Ström

18 juli 2012 19:04

Det går inte att göra en animerad header på bloggplatsen med koder men om du gör en gifbild i b.l.a Photoshop så går det =)

 
Amanda

Amanda

16 februari 2013 18:08

Hej :)
Skulle du kunna hjälpa mig att göra en sideshow till min blogg?
svara gärna på min blogg så mailar jag bilderna sen om du kan/vill göra en sån header åt mig :)

http://www.amandahagberg.blogg.se

Från
    Kom ihåg mig
URL

Säkerhetskod
   Spamskydd  

Kommentar

Av Ebba Granholm Ström - 3 januari 2016 19:34

Hej alla fina! Det här har jag funderat på att göra tror jag ni vet om. Jag tycker att det är en bra idé att göra detta nu efter årsskiftet så jag kan börja nya tag och "börja om".  Jag vill utveckla mina bilder och jag känner inte att jag kan gö...

Av Ebba Granholm Ström - 30 december 2015 22:15

Imorgon går vi från 2015 till 2016. Jag började året med att fotografera som en riktig tok men det svackade under någon månad eller två. Ska se vad jag kan skrapa ihop för fint åt er dock. Gör så att jag sammanfattar varje månad för sig, sen hittade ...

Av Ebba Granholm Ström - 28 december 2015 12:22


God fortsättning alla fina! Min jul har varit jättehärlig och full av mys. Jag gör inte speciellt mycket på dagarna, vilket jag personligen tycker är hur mysigt som helst. Nu har det kommit lite snö så jag tror att det blir lite foto eller så njuter ...

Av Ebba Granholm Ström - 23 december 2015 14:15


Min motivation just nu. I tider man tycker man gjort dumma val eller inte gjort vissa val. Har man fått ut något av det man gjort så var det inget dumt val du gjorde. Tro på dig själv.  Kram Ebba ...

Av Ebba Granholm Ström - 21 december 2015 12:00

Kram Ebba

Om Ebba Granholm Ström

Ebba Granholm Ström ♥ gymnastik
svartvitt ♥ 1998 ♥ fotografera ♥ 
sommar ♥ vänner
Läs mer.........

instagram, twitter, tumblr, kontakt, bloglovin,

youtube, vsco, flickr 

- - - - - - - - - - - - - - - - - - - - - 

MIN KAMERAUTRUSTNING

MINA BLOGG-GUIDER

 

business inquiries { ebba.granholm-strom@live.vasteras.se 

Senaste inläggen

Sök i bloggen

Kategorier

 

Fråga mig

1 735 besvarade frågor

Arkiv

Copyright

I min blogg har jag 100 % copyright på både bilder, bloggdesign ALL text och koder och kopieras det något så kommer jag prata med dig om detta © Maila mig om det är något du skulle vill ha dela med dig av så ordnar vi upp detta tilsammans och ser du någon annan som kopierat från mig. Länka inlägget till mig. Det uppskattas. ©

Låt inspirationen slinka in men låt er inre kunskap skina igenom.

Reklam och annonser











---