Forum Blogowe 19 lat!

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
FAQFAQ    UżytkownicyUżytkownicy  grupa Blogger Polska! na FBBlogger Polska!  GrupyGrupy  regulaminRegulamin RejestracjaRejestracja  ZalogujZaloguj

»  »  »  »  ::
Autor Wiadomość
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany:    Ikonki w nagłówku postów skojarzone z etykietami
Chciałabym uzyskać efekt jak tu: http://zkotami.blogspot.com/.
Nad każdym postem, w jego nagłówku wyświetla się odpowiednia ikonka (ale może być napis, nie musi to być obraz) skojarzona z etykietą dla danego posta.
Właścicielka bloga próbowała mi pomóc:
http://zkotami.blogspot.c...ml#comment-form
Wkleiła nawet adres do skryptu (zewnętrznego), ale ja mam za mało wiedzy by sobie z tym poradzić.
Próbowałam podejrzeć kod, poszukać innych możliwość, ale utknęłam w martwym punkcie.
Bardzo proszę o pomoc.
:)
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  podziel si� tym postem na:



Utwórz darmowe konto na forum --- Zaloguj się --- Polub Blogowicza na FB!
Dołącz do grupy Bloggerów na FB

Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2012-06-16, 19:06   obrazki zamiast kategorii
Raczej właściciel, bo ma na imię Bartosz ;p

Czy efekt ma być identyczny? W sensie: obrazki wyświetlane przy (lub nad) tytule mają prowadzić do wybranych etykiet? Zapytaj autora skryptu o zgodę na użycie przez Ciebie i innych użytkowników naszego forum to wstawię instrukcję jak wdrożyć to na swoim blogu.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany: 2012-06-16, 19:41   
Raczej jest odwrotnie. Rodzaj wyświetlanego obrazka, zależy od etykiety jaką ma post.
Zaraz zapytam.

[ Dodano: 17-06-2012, 21:50 ]
Jest zgoda:
"Pewnie, że można korzystać z moich wypocin informatyzujących :) Jeśli skrypt ma być wykorzystany w jakimś mocno kopiowanym stylu miło by było wspomnieć o blogu `zkotami.blogspot.com` :) ... "
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2012-06-18, 02:25   obrazki przy wybranych etykietach / kategoriach postów
Kilka informacji:
Skrypt wyświetla obrazki dla wybranych etykiet. Generowane są one za pomocą skryptu a wyświetlanie zależy od ustawień CSS. Standardowo generowane są w obrębie ramki posta, czyli .post-outer

W podstawowej wersji skrypt wymagał własnego serwera dla plików składowych: biblioteka jquery, plik ze skryptem oraz obrazki. Po kilku modyfikacjach udało mi się wyeliminować wszystkie przeszkody. Poniżej będą zaprezentowane dwa rodzaje kodów: minimalistyczny, ale wymagający serwera oraz bardziej rozbudowany kod pozwalający wrzucić obrazki z dowolnego hostingu (imgur, imageshack, picasa).
Jaka jest różnica pomiędzy nimi? Własny serwer pozwala na ograniczenie liczby serwerów, z których pobierane są dane do 1. Dodatkowo mamy szybki dostęp do plików i możliwość zamiany obrazków etykiet bez edycji kodu. W przypadku wersji w pełni darmowej jest ich (serwerów) przynajmniej 2 a każda zmiana grafiki zmusza do edycji skryptu.

A) wersja całkowicie darmowa - z plikami pobieranymi z zewnątrz

1) Zacznij od przygotowania obrazków. Nie powinny być za duże, możesz użyć darmowych ikon. Zwróć uwagę żeby pliki były bez tła, najlepiej z rozszerzeniem .png lub .gif - nazwij je tak samo jak etykiety
2) Blogger nie posiada kategorii, ale ma etykiety (tagi). Część z nich można potraktować jako kategorie i przydzielić im ikony. Utwórz etykiety kategorii i przypisz je do postów na Twoim blogu. Jeżeli wcześniej o to dbałeś/łaś to przejdź do kolejnego punktu.
3) Wgraj grafiki na serwer bloggera lub inny i skopiuj do notatnika bezpośrednie linki (direct link) - zapisz sobie, która ikona odpowiada danej etykiecie.
4) Wstawiamy biblioteki do kodu szablonu. Przejdź do edytora HTML i odszukaj </head> a następnie tuż nad nim wklej kod:
Wiadomość (widoczna dla zarejestrowanych)
zapisz zmiany.
5) Przejdź do zakładki Układ i dodaj gadżet HTML/JavaScript, w okienku nie wpisuj tytułu a do treści należy wstawić taki kod:
Wiadomość (widoczna dla zarejestrowanych)
Uzupełnij skrypt. Zamiast tutaj_nazwa_etykiety wpisz nazwy etykiet, pamiętaj, że muszą być identyczne jak te dodane w panelu postów. Zamiast tutaj_adres_obrazka.pl/ikonka.png powklejaj odpowiednie adresy ikonek. Jeżeli chcesz więcej to wystarczy dodać ten fragment kodu:
Wiadomość (widoczna dla zarejestrowanych)
tuż pod jednym z dwóch poprzednich - wyglądających tak samo - i uzupełnić dane.

6) Zapisz zmiany, przeciągnij gadżet pod posty i zapisz rozmieszczenie
7) wróć do zakładki Szablon i odszukaj w kodzie ]]><, tuż nad nim dodaj kod CSS:
Wiadomość (widoczna dla zarejestrowanych)
Jest to przykładowy styl dla elementu .label_icons, w którym wyświetlane są ikony. Zapisz zmiany.

Na blogu powinny wyświetlać się obrazki, tuż nad tytułami postów, które zawierają określone w skrypcie etykiety.

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

B) wersja z własnym serwerem.

1) - 3) jak wyżej
4) Tutaj można zostawić lub wrzucić plik jQuery na swój serwer. Wtedy należy podmienić adres na swój. Jeżeli zdecydujemy się trzymać u siebie także skrypt z ikonami to trzeba dopisać drugą linię, razem będzie wyglądało tak:

Kod

<script src='http://adres_naszego_serwera.pl/jquery-1.7.2.min.js' type='text/javascript'/>
<script src='http://adres_naszego_serwera.pl/labels.js' type='text/javascript'/>
gdzie labels.js będzie plikiem zawierającym kod z następnego punktu a jquery pobierasz wczytujac linka w pierwszej instrukcji (za potem wybierasz w przeglądarce "zapisz stronę jako...").
5) Kod jest mniejszy i wymaga mniej uzupełniania. Do gadżetu HTML wklejamy:
Wiadomość (widoczna dla zarejestrowanych)
Jeżeli wklejamy do notatnika by zapisać w pliku to pomijamy pierwszą i ostatnią linię (te ze <script> i </script>). Nazwa pliku labels.js a następnie wysyłamy go na nasz serwer (FTP), w to samo miejsce co biblioteki.

Podobnie jak w przypadku A) uzupełniamy kod. Zamiast tutaj_nazwa_etykiety wstawiamy nazwy, zamiast tutaj_adres_serwera.pl/folder_z_ikonami/ podajemy adres z folderem, w którym znajdują się nasze ikony. Ważne: nazwy ikon muszą być takie same jak etykiet np. etykieta komar to obrazek komar.png

Jak chcesz dodać kolejne etykiety to dopisujesz w nawiasie - tuż za ostatnią - to:
Wiadomość (widoczna dla zarejestrowanych)
a na serwer wgrywasz plik o takiej nazwie.

6) - 7) - tak samo jak w instrukcji A)

Efekt końcowy:
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany: 2012-06-18, 07:35   
Dziękuję. W najbliższym czasie spróbuję to wdrożyć u siebie :) ...

[ Dodano: 18-06-2012, 14:02 ]
Działa poprawnie (umieściłam i skrypt i grafiki na serwerze swoim), tylko ikonki, wyświetlają się u dołu i z lewej strony...
http://dziennik-abigail.b...arch/label/film

Coś w CSS mam inaczej chyba...

[ Dodano: 18-06-2012, 14:14 ]
Już mam. W złym miejscu wkleiłam kod... Taki układ znaczników "]]>" się powtarza...
Należało wkleić w sekcji: "<![CDATA"

[ Dodano: 18-06-2012, 14:20 ]
A! I jeszcze wydaje mi się ważne:
nazwy ikon i plików png nie mogą zawierać polskich znaków.

[ Dodano: 18-06-2012, 14:25 ]
Teraz myślę, jak to w js zapisać, by dla pozostałych etykiet był jeden wspólny obraz... ale to może nie być możliwe... :(
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2012-06-18, 16:50   jeden obrazek dla wielu etykiet / kategorii
Dodam jeszcze dwie informacje:

własnym serwerem może być dowolny, nawet darmowy, który posiada opcję hotlinkowania grafiki poza jego obszar (czyli jak zalinkujemy na blogu to nam wczyta obrazek). Z tego co widzę użyłaś republika.pl, trzeba zwracać na ilość transferu na takim koncie, bo przy dużym ruchu może go brakować, szczególnie jak jest 1-3GB.

=> google drive jako hosting plików bloga

W szablonie muszą być włączone etykiety (Posty w blogu -> edytuj -> i zaznaczamy). Wyświetlają się one w DIV o klasie .post-labels i to z niego skrypt czyta czy zawiera wybrane przez nas nazwy.

abigail napisał/a:

Teraz myślę, jak to w js zapisać, by dla pozostałych etykiet był jeden wspólny obraz... ale to może nie być możliwe... :(
W przypadku rozwiązania B) i przypadku kiedy resztę etykiet chcemy także określać obrazami sugeruję wrzucenie kodu z punktu 5 do gadżetu HTML, będzie go łatwiej uzupełniać o nowe etykiety.
tuż nad (});):

Kod

});
// free use, please do not delete author information
dodaj to:
Wiadomość (widoczna dla zarejestrowanych)
i zamiast tutaj_adres_serwera.pl/folder_z_ikonami/nazwa_uniwersalnej_ikony.png wklej link do obrazka dla reszty a tutaj_nazwa_etykiety uzupełnij nazwami pozostałych kategorii.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany: 2012-06-18, 17:26   
No tak, taki zapis ma sens, jeżeli masz kilka, kilkanaście etykiet. Wtedy można je wymieniać po kolei. Ja mam ponad 300 ;) .
Myślałam o zapisie:

jeżeli etykieta 1 to X lub etykieta 2 to Y lub etykieta N to Z
jeżeli nie (jeżeli żadna z nich) to etykieta XX

W tej chwili jest jakby pierwsza część instrukcji warunkowej.


ps. serwer na republice mam opłacony.
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2012-06-18, 17:57   jednakowy obrazek dla pozostałych etykiet.

abigail napisał/a:

No tak, taki zapis ma sens, jeżeli masz kilka, kilkanaście etykiet. Wtedy można je wymieniać po kolei. Ja mam ponad 300 ;) .
Tak, bo ten skrypt przewidziany jest na kilka etykiet, które służą nam jako kategorie. Przy 300 stosowanie obrazków średnio ma sens, bo jak użyjesz 10 etykiet w poście to dla wszystkich zostanie dodany obrazek.

zrobiłem test i okazuje się, że zadziałało. Zamiast kodu z mojego poprzedniego posta trzeba wkleić taki:
Wiadomość (widoczna dla zarejestrowanych)
i uzupełnić.
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany: 2012-06-18, 22:58   
U mnie nie działa :( ...
Skrypt wygląda tak:
Wiadomość (widoczna dla zarejestrowanych)
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  podziel si� tym postem na:
Htsz 
Blogger Product Expert
Blogowicz.Team


Zaproszone osoby: 84
Imię: Arkadiusz Narowski
Pomógł: 816 razy
Wiek: 39
Dołączył/a: 01 Sty 2006
Posty: 8949
Miasto: Wrocław
Wysłany: 2012-06-19, 00:45   
Jeżeli korzystasz z uniwersalnego wyświetlania obrazków z tego samego katalogu (na swoim serwerze) i chcesz dla reszty mieć jednakową ikonę to kod ma wyglądać tak:
Wiadomość (widoczna dla zarejestrowanych)
w przypadku gadżetu HTML:

Kod

<script type='text/javascript'>

powyższy kod

</script>
______________________________________________________
nie radzisz sobie? :arrow: pomoc indywidualna oraz blogi i strony na zamówienie
zapraszam do przewodnika po forum oraz grupy Blogger Polska! na fb
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ę, udostępniając link do tego forum na swoim blogu, fanpejdżu lub stronie!
Nie zapomnij kliknąć lubię to! na facebooku. :^^:
 
  podziel si� tym postem na:
abigail 
Blogger.Klub


Dołączyła: 24 Mar 2012
Posty: 62
Wysłany: 2012-06-19, 14:51   
Dzięki. Działa, ale daje tyle rysuneczków ile jest pozostałych etykietek :) Masz rację, że to się nie nadaje, na bloga tego typu co ten. Ale z dwiema całkiem dobrze wygląda :) ...
______________________________________________________
Koty: http://kociki-abigail.blogspot.com
 
  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-2025 Wrocław | modified by Przemo © 2003 phpBB Group.
↑ skocz na górę ↑   |  shoutbox
 
Dodaj na Facebooku:

Zobacz także:


Szablony blogów i stron na wordpress
ogromna baza motywów WP, podzielona na kategorie tematyczne. Proste, jednostronicowe wizytówki lub zaawansowane układy, także z funkcją sklepu internetowego (ecommerce).
Wyszukaj na Blogowiczu:
snapchat blogowicz instagram blogowicz