Przy okazji jedynego z artykułów dotyczących wtyczek do WordPress’a pojawiło się pytanie dotyczące slidera a konkretnie umieszczania slidera w Bloggerze. Dziś spełniam życzenie i pokażę Wam jak taki slider na Bloggerze umieścić.

 

 

Czym jest Blogger?

Blogger to (bezpłatna) platforma blogowa udostępniana przez Google. Założenie swojego pierwszego konta na Bloggerze ma kilka zalet:

  • Blogger jest całkowicie darmowy, każdy kto posiada konto w Google może sobie go bezpłatnie aktywować.
  • Blogger jest łatwy w konfiguracji. W tym systemie nie ma nic skomplikowanego – nawet laik poradzi sobie z publikowaniem postów i wstępną konfiguracją.
  • Zakładając stronę na Bloggerze, nie potrzebujemy domeny i serwera – domenę i miejsce na dysku dostajemy od Google.

A minusy?
Prostota, którą jest zaletą, jest również poważnym mankamentem.

Blogger to prosta platforma blogowa,  a z tym wiążą się poważne konsekwencje. W Bloggerze nie ma tylu możliwości modyfikacji,  co w WordPressie. Zestaw tzw. gadżetów, czyli dodatków do Bloggera nie jest tak imponujący.  Podobnie jest z liczbą szablonów, które powstają na Bloggera – ich dostępność również jest mniejsza niż w przypadku WordPressa.

 

Tyle tytułem wstępu i przechodzimy już do meritum sprawy.Dziś pokażę Wam jak w tym prostym Bloggerze umieścić slider ze zdjęciami.

Punktem wyjścia będzie podstawowy szablon Bloggera , czyli Simple.

 

Krok 1:

Zaloguj się do Bloggera. Wejdź w zakładkę Szablon oraz  kliknij Edytuj kod HTML oraz w dalszym okienku Kontynuuj. 

Krok 2:

Krok 2: Na stronie wyświetli ci się plik z kodem HTML. Teraz kliknij przycisk Ctrl+F  oraz wyszukaj w kodzie znacznik </head>

 

Krok 3:

Przed znacznikiem </head>wklej następujący kod:

 

<a href=”http://24work.blogspot.com” target=”_blank” title=”Blogger Widgets”><img src=”http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png” border=”0″ alt=”Blogger Widgets” style=”position:absolute; top: 0px; right: 0px;” /></a><script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’ type=’text/javascript’></script>

<script type=’text/javascript’> //<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption $(‚ul.slideshow’).append(‚<li id=”slideshow-caption” class=”caption”><div class=”slideshow-caption-container”><h3></h3><p></p></div></li>’);

//Set the opacity of all images to 0 $(‚ul.slideshow li’).css({opacity: 0.0});

//Get the first image and display it (set it to full opacity) $(‚ul.slideshow li:first’).css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it $(‚#slideshow-caption h3’).html($(‚ul.slideshow a:first’).find(‚img’).attr(‚title’)); $(‚#slideshow-caption p’).html($(‚ul.slideshow a:first’).find(‚img’).attr(‚alt’));

//Display the caption $(‚#slideshow-caption’).css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow var timer = setInterval(‚gallery()’,speed);

//pause the slideshow on mouse over $(‚ul.slideshow’).hover( function () { clearInterval(timer); }, function () { timer = setInterval(‚gallery()’,speed); } );

}

function gallery() {

//if no IMGs have the show class, grab the first image var current = ($(‚ul.slideshow li.show’)? $(‚ul.slideshow li.show’) : $(‚#ul.slideshow li: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().attr(‚id’) == ‚slideshow-caption’)? $(‚ul.slideshow li:first’) :current.next()) : $(‚ul.slideshow li:first’));

//Get next image caption var title = next.find(‚img’).attr(‚title’); var desc = next.find(‚img’).attr(‚alt’);

//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 caption first, and then set and display the caption $(‚#slideshow-caption’).animate({bottom:-70}, 300, function () { //Display the content $(‚#slideshow-caption h3’).html(title); $(‚#slideshow-caption p’).html(desc); $(‚#slideshow-caption’).animate({bottom:0}, 500); });

//Hide the current image current.animate({opacity: 0.0}, 1000).removeClass(‚show’);

}

//]]> </script>

<style type=”text/css”> ul.slideshow { list-style:none; width:600px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; font-family:Arial,Helvetica,Trebuchet MS,Verdana; ; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { width:600px; height:240px; border:none; } #slideshow-caption { width:600px; height:70px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; } </style>


Zapisz szablon.

Krok 4:

Wejdź w zakładkę Układ klinij pod nagłówkiem w Dodaj gadżet i  wybierz gadżet HTML/JavaScript. Do gadżetu wklej następujący kod

<ul class=”slideshow”>

<li><a href=”#”><img src=”http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg” title=”This is featured post 1 title” alt=”Replace This Text With Your Featured Post 1 Description.” /></a></li>

<li><a href=”#”><img src=”http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg” title=”This is featured post 2 title” alt=”Replace This Text With Your Featured Post 2 Description.” /></a></li>

<li><a href=”#”><img src=”http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg” title=”This is featured post 3 title” alt=”Replace This Text With Your Featured Post 3 Description.” /></a></li>

<li><a href=”#”><img src=”http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg” title=”This is featured post 4 title” alt=”Replace This Text With Your Featured Post 4 Description.” /></a></li>

</ul>

 

Zapisz. Slider pojawi się na stronie.

Teraz musimy zamienić zdjęcia oraz dopasować rozmiar lidera do naszego szablonu

Krok 5:

Dopasowanie rozmiarów.
Żeby zmienić wielkość lidera wejdź w szablon, Edytuj kod HTML => Kontynuuj i znajdź fragment kodu z liczbami ( Crtl+F i szukaj „width:600px;”)

 

ul.slideshow {

list-style:none;

width:600px;

height:240px;

 

W tym miejscu zmień rozmiar slidera.

W kolejnym parametrze ustawisz szerokość paska z napisem

 

#slideshow-caption {

width:760px;

height:20px;

 

Po ustawieniu wielkości slidera,  trzeba podmienić fotografie*. Fotografie należy przygotować w wielkości slidera,  czyli w moim przypadku było to 760×400 px. Wgrywamy zdjęcia do Bloggera. Z każdego zdjęcia kopiujemy link URL.

 

 

Wchodzimy ponownie w Układ i edytujemy gadżet. Podmieniany linki  i wypełniamy tekstem zgodnie z informacjemi w kodzie.

Slider gotowy. Teraz możemy cieszyć się z efektu!

Prawda , że proste? Slider to element, który uatrakcyjni  twoje portfolio. Warto się nieco namęczyć. 🙂

* W sliderze wykorzystano zdjęcia Moniki Ralcewicz- Ciaiolo (www.studiotutto.com)