Ruchomy banner/Slider na Bloggerze


Hej! Dziś mniej twórczo, ale za to przydatnie :) .
Bardzo długo szukałam sposobu na wstawienie na moim blogu ruchomego bannera zamiast zwykłego obrazka.  Na polskich stronach nie znalazłam pomocy. Co  prawda jest jeden artykuł na forum blogowicz. info, który instruuje, jak przerobić malutki pokaz slajdów,  który jest udostępniony w gadżetach na bloggerze (LINK), jednak zdarzają się problemy z jego uruchomieniem. Jakiś czas korzystałam z tego sposobu i bardzo go sobie ceniłam. Swoją drogą podziwiam Pana Htsz'a z teamu wyżej wymienionego forum, za cierpliwość i chęć pomocy innym, mniej utalentowanym blogowiczom.
Oczywiście za długo nie mogło być tak pięknie i  przy kolejnej edycji mojego bloga, wszystko szlak trafił. Prawdopodobnie, coś na moim blogu pogryzło się z tym rotatorem i dlatego nie chciał odpalić. Mimo wszystko warto jest spróbować tego sposobu, bo jak napisał u mnie w komentarzu autor tego dzieła "przerobiony gadżet jest o tyle lepszy, że skrypty pobierane są z serwerów Google, nie z prywatnych".Chyba każdy domyśla się co to oznacza.
Osobiście nie miałam już sił kombinować z wnętrznościami mojego bloga, żeby mój stary rotator znów zadziałał, a męczyć ludzi na forum też nie chciałam (a można do woli :D ), więc wybrałam inną opcję - czyli znalezienie innego rotatora.
Pewnego dnia odezwała się do mnie Oliwia (http://oliwiaart.blogspot.com/) pisząc, że chciałaby mieć taki banner. Wtedy zyskałam nowe moce i szukałam... i szukałam... i szukałam.. aż znalazłam! :D
Instrukcję jak wstawić slider na bloggera, znalazłam na zagranicznym blogu imagesliderforblogger.blogspot.com (LINK). Wszystko jest prosto i jasno wytłumaczone, jednak dla spokoju duszy, postanowiłam przetłumaczyć to na polski.


 INSTRUKCJA:

1. Wejdź w pulpit nawigacyjny swojego bloga/Układ/Dodaj gadżet.
2. Wybierz gadżet HTML/Javascript.
3. Skopiuj poniższy kod i wklej w okienko nowego gadżetu.

KOD :
<style type="text/css">
/* http://dimpost.com */

#sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
       
#slider {
    width:700px;height:306px;/* USTAW TAKĄ SAMA WIELKOŚĆ JAK WYBRANE PRZEZ CIEBIE OBRAZKI*/
background:#fff url(http://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/s1600/loading.gif) no-repeat 50% 50%;
 position:relative;
 margin:0 auto;/*WYŚRODKOWUJE SLIDER */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position:absolute;
 border:none;
 display:none;
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
 z-index:2;
 display:none;position:absolute;
 top:0px;left:0px;border:0;padding:0;margin:0;
 width:100%;height:100%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
 position:absolute;
 width:100%;
 height:auto;
 padding:0;
 left:0px;
 bottom:15px;
 z-index:3;
 overflow:hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color:black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color:#EEE;
 z-index:4;
 padding:10px 0;
 text-align:center;
}
div.mc-caption a {
 color:#FB0;
}
div.mc-caption a:hover {
 color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {
 top:320px; left:280px; /* POŁOŻENIE KROPECZEK NAWIGACYJNYCH POD SLIDEREM*/
 width:150px;
 background:none;
 padding-left:20px;
 position:relative;
 z-index:5;
 cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div
{
    width:11px; height:11px;
    background:transparent url(http://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
.intro {
    bottom: 0;
    color: rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: absolute;
    right: 0;
    text-decoration: none;
    z-index: 99999;
}
/* --------- Others ------- */
#slider
{
 transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider-1.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/js-image-slider-2.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg" alt="DOWOLNY TEKST" /></a>
<a href="#"><img src="http://3.bp.blogspot.com/-eOR0aaChxAw/UR-VGiVnp1I/AAAAAAAABnM/_bIC8_EisxQ/s1600/image-slider-2.jpg" alt="DOWOLNY TEKST"/></a>
<a href="#"><img src="http://4.bp.blogspot.com/-5NisCPe6tEc/UR-VGfF8_8I/AAAAAAAABnE/kUtLaL3SzWE/s1600/image-slider-3.jpg" alt="DOWOLNY TEKST" /></a>
<a href="#"><img src="http://2.bp.blogspot.com/-gl-HJvghglA/UR-VK7FgIBI/AAAAAAAABnc/EfjVW6e1nz4/s1600/image-slider-4.jpg" alt="DOWOLNY TEKST" /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
------------------------------------------------------------------------------------------------------------------------------------
WYJAŚNIENIE: 

width - szerokość slidera
height - wysokość slidera
Pokaz slajdów musi mieć tę samą wysokość i szerokość, co wstawiane przez was obrazki.

 top:320px; left:280px;  - umiejscowienie kropeczek nawigujących, które znajdują się pod sliderem. "top" czyli wysokość (jeżeli pokaz slajdów ma wysokość 300px, a kropeczki mają być pod nim, trzeba ustawić nieco większą wartość np. o 20 px - czyli 320px). "left" czyli lewy margines. Tutaj już w zależności od ilości obrazków, musicie popróbować zmieniać tę wartość, żeby kropeczki były w miarę wyśrodkowane.

# - w miejsce tego krzyżyka, możecie wsawić link, do którego zostaniecie przeniesieni po naciśnięciu na umieszczony w sliderze obrazek. Ja osobiście w swoim sliderze, zostawiłam to tak jak jest :)

http://3.bp.blogspot.com/-1LayoXAEu_Y/UR-VGlIl8eI/AAAAAAAABnI/yI0SkxYfRsc/s1600/image-slider-1.jpg - na miejsce tych linków wstawiacie swoje linki do wybranych przez was obrazków. Polecam wstawienie obrazków na portal https://plus.google.com/

Pamiętajcie, o odpowiedniej wielkości obrazków! Można to zrobić nawet w zwykłym paint'cie  (LINK).
DOWOLNY TEKST - tu możecie wstawić dowolny tekst, który będzie się pokazywał przy każdym z obrazków. Jeśli nie chcecie żadnych napisów, po prostu zostawcie te pola puste.


No i to chyba wszystko :) Może wygląda to trochę skomplikowanie, ale naprawdę każdy powinien sobie poradzić! Efekty są super :) Powodzenia! W razie wszelkich pytań piszcie! Jeśli wytłumaczyłam coś źle, to zwracajcie mi śmiało uwagę. Geniuszem nie jestem :D. Mam nadzieję, że komuś przyda się ta instrukcja.
Pamiętajcie też o wypróbowaniu rotatora z forum blogowicz. To, że u mnie pojawiły się jakieś komplikacje (spaczenie bloga :P) nie znaczy, że u was nie zadziała. Nawet jeśli będziecie mieli jakieś problemy, to jest tam pełno pomocnych dłoni, które was poprowadzą :) .
Miłego Dnia i Pa! Pa!

27 komentarzy:

  1. Jeszcze tego nie przeczytałam ale już dziękuję za pomoc, od dawna chciałam sobie uatrakcyjnić stronkę w ten właśnie sposób, pozdrawiam Joasiu!!

    OdpowiedzUsuń
  2. pomocne, tylko jak tego dokonać, pomimo że przeczytałam i tak poległam:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Krok po kroku i dasz radę :D A jak nie to w wolnym czasie, będę mogła pomóc :)

      Usuń
  3. Hej, nie zalinkowałaś tematu, o którym napisałaś ;-P a rotator działa każdemu, kto wkleja dobrze link - to jak powinien wyglądać też jest wyjaśnione w temacie, nawet dla nowych albumów google+ ;=)
    Przerobiony gadżet jest o tyle lepszy, że skrypty pobierane są z serwerów google, nie z prywatnych.

    OdpowiedzUsuń
    Odpowiedzi
    1. Ooo xD Dzięki za zwrócenie uwagi. Zaraz to poprawię. U mnie Twój sposób z rotatorem działał pięknie <3, a później, kiedy testowałam rotator, który skleiłam dla koleżanki na swoim blogu, już nie chciał odpalić. Jestem pewna, że coś mi się pogryzło na tym blogu i dlatego nie chciał zadziałać. Próbowałam go uruchomić chyba z 50 razy xD .Ciągle coś kombinowałam - a to w kodzie, a to z linkami. I w końcu zrezygnowałam, bo nie znam się na tyle, żeby szukać głębiej w blogu :D . Fajnie, że napisałeś! Podziwiam i Dziękuję! :)

      Usuń
    2. Aaa dodam jeszcze, że zanim zaczęłam testować rotator dla koleżanki, skopiowałam cały swój pięknie działający kod rotatora i zapisałam w wordzie. Później wkleiłam go ponownie... i dupa :/

      Usuń
    3. Zmieniłam trochę wpis, żeby nie brzmiał tak pretensjonalnie w stosunku do Twojego rotatora :P i pozwoliłam sobie zacytować jedno Twoje zdanie :D Mam nadzieję, że nie będziesz miał mi tego za złe :)

      Usuń
    4. Z kodami HTML trzymaj się jak najdalej od worda :D O wiele lepiej zapisywać to do zwykłego notatnika.

      Usuń
    5. oo xD to już będę wiedziała na przyszłość! :D

      Usuń
  4. Jak dla to mnie czarna magia :D
    Nominowałam Cię do Liebster awards , będzie mi miło, jeśli zechcesz wziąć udział
    pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. Każda czarna magia jest do ogarnięcia :D

      Usuń
  5. Witam:) super wyglada taka migawka,wzielam sie za to ale za nic nie potrafilam wstawic zdjec:(

    OdpowiedzUsuń
  6. Dziękuję! Teraz mój blog jest całkowicie kompletny <333

    OdpowiedzUsuń
  7. Witam, jak zrobić, aby slider nie był wyśrodkowany, tylko do lewej?

    OdpowiedzUsuń
  8. Dziękuje ci właśnie tego szukałem :)

    OdpowiedzUsuń
  9. A jak zrobić by slider był zamiast nagłówka ? czyli otwierając bloga widać było pierwszy Slider (pokaz zdjęć) ? Z góry dziękuje

    OdpowiedzUsuń
  10. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  11. Ładny ten baner :) Podoba mi się.

    OdpowiedzUsuń
  12. Super dzięki Tobie mam wreszcie to cudo : )
    Myślałam że nie podołam ale udało się !!!!

    OdpowiedzUsuń
  13. Bardzo przydał mi się ten post, ale mam pytanie jak zrobic aby ten slider był tylko na stronie głównej. pomocy ;)

    OdpowiedzUsuń
  14. ratujesz mi życie!!
    za kilka dni zmienię wygląd mojego bloga! :)
    kochana!! :D

    www.arakumla.blogspot.com

    OdpowiedzUsuń
  15. A ze mnie jakaś ciemna masa.... Nie wiem, który właściwy link mam dać tych zdjęć jak mam album zgrany do konta google....bo co wklejam to na podglądzie bloga wyświetla mi się "bad request" :(

    OdpowiedzUsuń
  16. Dziękuję Ci. Post bardzo mi się przydał, bo właśnie tego szukałam.
    Mam pytanie: W którym miejscu można zmniejszyć/zwiększyć przejście zdjęć?

    OdpowiedzUsuń
  17. możesz mi powiedzieć jak zrobić ten slider, żeby się kręcił w kółko?
    mam tylko trzy zdjęcia i chciałabym żeby odtwarzane były cały czas.
    w tej chwili odtwarzanie dochodzi do ostatniego
    i się zacina.
    próbowałam nawet z czterema, ale nie wiele to dało zacina się na ostatnim
    z góry dziękuję za pomoc

    OdpowiedzUsuń
  18. W końcu jakiś działający slider. Super!

    OdpowiedzUsuń
  19. super slider i ładnie chodzi, a wiesz może co zrobić żeby był responsywny? z góry dziękuję za odpowiedź

    OdpowiedzUsuń