2015/01/27

Slider zdjęć na bloga

Na prośbę naszej czytelniczki umieszczam instrukcję i kod do slidera zdjęć, który można wstawić na każdym blogu, obsługującym własny kod HTML. Dzięki różnorodnym efektom przejścia zaobserwujesz wrażenie animacji, która sprawia, że widżet zyskuje wspaniały design.
Witaj! Dzisiaj trafiłam na Twoją stronę - jest świetna! Tyle rzeczy się dowiedziałam :) i niektóre udało mi się zastosować u siebie :) Dziękuję, robisz naprawdę dobrą robotę, zwłaszcza dla ludzi bez specjalistycznej wiedzy :) Mam jeszcze pytanko - podobają mi się przewijane propozycje postów. Jest opcja żeby to zrobić na bloggerze, czy to już wyższy level? Pozdrawiam serdecznie i życzę powodzenia w dalszych działaniach!

Demo

Jak umieścić widżet na Bloggerze?

W panelu admina wejdź w menu Szablon => Edytuj kod HTML.
Kliknij w okno edytora, wciśnij kombinację klawiszy Ctrl + F i w wyszukiwarkę wpisz poniższy kod, po czym kliknij Enter.

<div class='region-inner tabs-inner'>

Następnie liczbę 1 zawartą w maxwidgets zamień na 2 (patrz obrazek poniżej), by uzyskać możliwość dodania drugiego gadżetu poza kartami z menu stron. Na koniec Zapisz szablon.
Teraz przejdź do menu Układ w panelu admina i tam, gdzie widnieją Strony - dodaj gadżet.
Wybierz HTML/JavaScript.
Tytuł gadżetu pozostaw pusty a w treść wklej poniższy kod widżetu, po czym kliknij Zapisz.

Kod slidera

<style type="text/css">
/* http://blokotek.pl */
#sliderFrame {
position:relative;
width:700px;
margin: 0 auto 40px;
}

#slider {
width:600px;
height:306px;
/* Make it the same size as your images */
background:#fff url(http://2.bp.blogspot.com/-2IRxompbPrs/VMZkSew285I/AAAAAAAAITM/8XN-d9lD09I/s1600/loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;
/*make the image slider center-aligned */
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:240px;
/* Its position is relative to the #slider */
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/-KTq3m5CoI4o/VMZkE3Cdr8I/AAAAAAAAITE/5T9szSHTx0E/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;
}

/* --------- 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="https://googledrive.com/host/0BzWYBwKfT2edbWdKbmpZUVAtNTg" type="text/javascript">
</script>
<div id="sliderFrame">
<div id="slider">
<a href="#">
<img src="http://3.bp.blogspot.com/-XOEZoX5PkVg/VMZitH-sG_I/AAAAAAAAISY/f6qFOptTqF4/s600/4-justin-leibow.jpg" alt="Morska fala rozbijająca się o kamienie" />
</a>
<a href="#">
<img src="http://3.bp.blogspot.com/-GMbXyIbc6_Q/VMZitCZMCpI/AAAAAAAAISc/CbEHK6q4WOg/s600/5-patryk-sobczak.jpg" alt="Mewy unoszące się w powietrzu" />
</a>
<a href="#">
<img src="http://4.bp.blogspot.com/-D6VzHZzQsb4/VMZitHluEHI/AAAAAAAAISg/NRuTq1yeXys/s600/6-israel-sundseth.jpg" alt="Wzburzone morze widoczne z plaży" />
</a>
<a href="#">
<img src="http://2.bp.blogspot.com/-jqEITccgWXU/VMZiuEXS_iI/AAAAAAAAISs/995Wkhe1gyM/s600/7-jeremy-cai.jpg" alt="Kamienie leżące nad brzegiem morza" />
</a>
<a href="#">
<img src="http://3.bp.blogspot.com/-7QsHPmknEAM/VMZiu-FpSaI/AAAAAAAAIS4/gRapEqIyAW4/s600/8-keith-misner.jpg" alt="Wzburzone fale uderzające o most"/>
</a>
</div>
</div>

Dostosowywanie slidera


  • # zaznaczony na zielono zamień na link.
  • Link zaznaczony na turkusowo zamień na bezpośredni adres do obrazka.
  • Tekst zaznaczony na pomarańczowo zamień na tytuł slajdu.

Brak komentarzy :

Prześlij komentarz

Komentarze zawierające SPAM zostaną usunięte.

Szablon stworzony z przez Blokotka. Wszelkie prawa zastrzeżone.