Blogerzy wszystkich platform, łączcie się!

Dyskusje Blogerów, Fotoblogerów i Vlogerów - fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu



::
Autor Wiadomość
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany:    [blogger] Rotator zdjęć (pokaz slajdów) w nagłówku

Poszukując rozwiązania dla problemu z tematu losowy obrazek w nagłówku bloga natrafiłem na pewien wpis*. Za pomocą skryptu Pokazu slajdów (slideshow) z Bloggera - który można dodać jako gadżet w menu bloga - da się wygenerować pokaz slajdów o dowolnej liczbie zdjęć i wielkości.

Instrukcja będzie na przykładzie bloggera, ale skrypt można zastosować na dowolnym blogu z obsługą HTML.

1. Potrzebujemy Zdjęć. Najlepiej wszystkich w tych samych rozmiarach i układzie - z uwagi na to, że ma to być rotator w nagłówku zdjęcia powinny być poziomymi prostokątami, najlepiej dodawać zdjęcia panoramiczne (mała wysokość).
2. Zdjęcia wgrywamy do albumu Picasa Web Albums (mamy konto Google w ramach bloga, więc za jego pomocą logujemy się do albumów i wgrywamy tam zdjęcia). Dzięki temu nie będziemy musieli się martwić o transfer, o to, że nam coś skasują oraz dostaniemy gotowy link RSS do naszej galerii.
3. Logujemy się na bloga i przechodzimy do działu Układ
4. Dodajemy nowy gadżet HTML/JavaScript w sekcji nagłówka i wklejamy tam kod:
Wiadomość (widoczna dla zarejestrowanych)
i uzupełniamy po kolei:
width i height należy ustawić takie jak wysokość i szerokość naszych zdjęć (ja ustawiłem 800 i 450).
zamiast TUTAJ-URL-RSS-GALERII wklejamy odnośnik RSS do naszej galerii. Uzyskamy go poprzez wejście na stronie naszych albumów na Picasa w linka po prawej stronie w pasku menu o nazwie RSS, będzie to wyglądało mniej więcej tak:
Wiadomość (widoczna dla zarejestrowanych)
niestety jeżeli pozostawimy ten odnośnik w takiej postaci to wrócimy do punktu wyjścia, czyli wyglądu zdjęć jak w standardowym gadżecie.
Do adresu należy dopisać na końcu: &thumbsize=800, gdzie 800 do szerokość naszych zdjęć. W ten sposób miniaturki do pokazu będą się ładowały w pełnym wymiarze**.
Zamiast napisu "Loading..." możemy wpisać cokolwiek np. "ładowanie" lub nic. Ten napis widać przez chwilkę tuż przed wczytaniem pokazu.
displayTime służy do określania czas wyświetlania w milisekundach. 5000 oznacza 5 sekund
transistionTime - czas przejścia
numResults - maksymalna ilość zdjęć w slideshow
5. Zapisujemy uzupełniony kod gadżetu i przechodzimy na bloga - powinien się tam wyświetlać pokaz slajdów z naszej galerii.
Jeżeli nie chcesz paska z opcjami "prawo lewo play" edytuj kod i zamień w "fullControlPanel" true na false



Wiadomość (widoczna dla zarejestrowanych)


F.A.Q.
=> znak wodny / logo na zdjęciach widoczne cały czas w rogu
=> dodaj losowanie zdjęć w pokazie slajdów
=> kilka pokazów na jednej podstronie
=> wyłączanie panelu z opcjami
=> Jak pobrać adres RSS albumu na Google+
=> Jak ustawić rotator tylko na stronie głównej (ew. na wybranej podstronie)
---
=> rotator polecanych wpisów (ze zdjęciami, tytułami i opisem)
=> Jak dodać więcej widżetów w sekcji nagłówka?

Jeżeli sobie nie radzisz napisz do mnie
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:






Darmowa rejestracja - utwórz konto na forum --- Zaloguj się na swoje konto --- Polub Blogowicza na FB!

Jaro W 
Blogger.Klub


Dołączył: 25 Paź 2011
Posty: 0
Miasto: Świdnica

Wysłany: 2011-10-25, 16:22   Re: feed could not be loaded blogger

Witam, robię wszystko zgodnie z powyższą instrukcją i nie działa. Pokazuje się napis

Cytat

feed could not be loaded

Proszę o pomoc, bo już od dawna chciałem coś takiego zrobić na blogu i nigdzie nie znalazłem podpowiedzi, dopiero tutaj.
Edit
Dzięki już sobie poradziłem. Pozdrawiam
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2011-10-25, 21:49   

Jaro W napisał/a:

feed could not be loaded
to mogło oznaczać literówkę w linku (lub brak elementu np. cyferki)

Jaro W napisał/a:

Dzięki już sobie poradziłem. Pozdrawiam
fajnie zobaczyć rotator w akcji na cudzym blogu ;)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Jaro W 
Blogger.Klub


Dołączył: 25 Paź 2011
Posty: 0
Miasto: Świdnica

Wysłany: 2011-10-25, 22:52   

Jeszcze raz dzięki bardzo, od jakiegoś czasu szukałem sposobu jak zrobić coś takiego i wreszcie dzięki Tobie udało się.
Pozdrawiam serdecznie
Jaro
______________________________________________________

 
  podziel się tym postem na:
olo01 
Blogger.Klub

Imię: Ola
Dołączyła: 05 Sie 2011
Posty: 0

Wysłany: 2011-10-28, 20:10   

Witam,
też walczę z tym pokazem i wyświetla się ten sam napis co na początku u kolegi...:/
O literówce chyba nie ma mowy, bo kod wklejałam na zasadzie: kopiuj-wklej i wszystko dla mnie wygląda tak samo...:/ Gdzie zrobiłam babola? ;)
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2011-10-28, 20:27   

Masz zły link wklejony w "var feed", powinien przypominać schematem ten z mojego przykładu a wygląda zupełnie inaczej ;)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
olo01 
Blogger.Klub

Imię: Ola
Dołączyła: 05 Sie 2011
Posty: 0

Wysłany: 2011-10-28, 20:57   

Hmm...dziwne, że mam zły link :/ Taki mi się generuje jak klikam w picasie: Link do tego albumu: https://picasaweb.google....feat=directlink
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2011-10-28, 21:00   

i po prawej masz link RSS, który kopiujesz i wklejasz do skryptu ;)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
olo01 
Blogger.Klub

Imię: Ola
Dołączyła: 05 Sie 2011
Posty: 0

Wysłany: 2011-10-28, 21:06   

Haaa, działa. :) No tak nie ten link wklejałam, uparłam się, że to musi być z tej rameczki po prawej....;) Dziękuję :) :super:
A jak dodać logo do tego slajdu? Np. coś takiego jak tu?
http://agamarciniak.blogs...ja-ciazowa.html
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2011-10-28, 21:35   logo na pokazie slajdów widoczne cały czas

Tam jest obrazek nałożony na slajd. Można dodawać go do każdego zdjęcia, ale wtedy będzie zanikał razem z nim. Wystarczy jednak kilka modyfikacji żeby i nasz rotator miał takie logo:

ten fragment kodu:
Wiadomość (widoczna dla zarejestrowanych)
należy zamienić na to:
Wiadomość (widoczna dla zarejestrowanych)

left: 50px; - określa pozycję obrazka od lewej strony ram rotatora
bottom: 20px; - okresla pozycję od dolnej ramy rotatora

następnie ten fragment:
Wiadomość (widoczna dla zarejestrowanych)
na ten:
Wiadomość (widoczna dla zarejestrowanych)

Co się stało? Utworzyłem ramkę wokół rotatora i dorzuciłem boks z pozycjonowaniem absolutnym. W ten sposób można na slajdy nałożyć dowolny obrazek i zalinkować go np. do swojego portfolio.

zamiast "http://TUTAJ-ADRES-STRONY.pl" - podajemy adres naszej strony lub bloga (strony głównej).
w miejscu gdzie jest "http://TUTAJ-ADRES-OBRAZKA.pl/obrazek.jpg.gif.png" - wklejamy link do obrazka, który będzie naszym logiem, najlepiej gif lub png bez tła.
Do stylu #male-logo można dopisać też linijkę opacity: 0.5; - decydując w ten sposób jak bardzo widoczne ma być logo (wartości 0.1 do 1.0).
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
olo01 
Blogger.Klub

Imię: Ola
Dołączyła: 05 Sie 2011
Posty: 0

Wysłany: 2011-10-28, 21:42   

Zaraz będę testować, ale jesteś szybki, dzięki za instrukcje :)
Acha mam jeszcze pytanie odnośnie tego znaku "pauze" na slajdzie. Usunęłam zgodnie ze wskazówkami pasek z opcjami, ale ten znaczek pojawiający się po najechaniu myszką jest trochę denerwujący...Fajnie jakby slajdy po prostu zmieniały się bez możliwości ich zatrzymywania...
 
  podziel się tym postem na:
Htsz 
Blogger Top Contributor
Blogowicz.Team


Zaproszone osoby: 82
Imię: Arkadiusz (Arek)
Pomógł: 756 razy
Wiek: 31
Dołączył: 01 Sty 2006
Posty: 8746
Miasto: Wroclove City

Wysłany: 2011-10-29, 05:46   rotator bez zatrzymywania po najechaniu

olo01 napisał/a:

Acha mam jeszcze pytanie odnośnie tego znaku pauze na slajdzie. Usunęłam zgodnie ze wskazówkami pasek z opcjami, ale ten znaczek pojawiający się po najechaniu myszką jest trochę denerwujący..
tak, też to zauważyłem i zastanawiałem się jak wywalić z kodu. Już miałem kombinować z ukrywaniem tego w CSS, ale okazuje się, że wystarczy dopisać 1 linijkę w opcjach skryptu i znaczek zniknie ;)

Rozwiązania do wyboru:

1) chcemy żeby slajdy nie zatrzymywały się po najechaniu na nie myszą (wtedy nie pojawi się także znaczek zatrzymania "pause"). Należy pod tuż pod (w nowej linii)

Kod

var options = {
dopisać to:
Wiadomość (widoczna dla zarejestrowanych)


2) chcemy żeby slajdy zatrzymywały się, ale żeby nie było obrazka pauzy. Należy w tym samym miejscu co w punkcie 1) dopisać to:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum

Think before you post™ | ^_^ na każdego posta znajdzie się riposta™

Jeżeli nasze posty pomogły rozwiązać Twoje problemy możesz odwdzięczyć się dodając link do tego forum na swoim blogu lub stronie!
Nie zapomnij kliknąć
lubię to! na facebooku lub dodać do obserwowanych na google+. :^^:
 
  podziel się tym postem na:
Wyświetl posty z ostatnich:   
::
Odpowiedz do tematu
Nie możesz pisać nowych tematów. Zobacz szczegóły.
Nie możesz odpowiadać w tematach. Zobacz szczegóły.
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB & Weblove.pl © 2006-2017 Wrocław | modified by Przemo © 2003 phpBB Group.
skocz na górę   |  shoutbox
 
Dodaj na Facebooku:
Dodaj na Google+:


Zobacz także:


Szablony wordpress
kod zniżkowy -10% za licencję
w koszyku wpisz: Blogowicz
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz