O Internecie, oprogramowaniu oraz moich własnych małych projektach...
Blog > Komentarze do wpisu

Lista odnośników społecznościowych

Przy okazji wpisu „8 kroków do zmniejszenia ilości obrazków na stronie" na blogu topblogger.pl wywiązała się dość ciekawa dyskusja odnośnie prawidłowej implementacji listy odnośników typu dodaj do. Jako, że sam niedawno wykonywałem podobny element dla tego bloga, to postanowiłem opisać także moje podejście do tego zagadnienia.

Wcześniejsze głosy w dyskusji

  • Semantyka HTML: lista nieuporządkowana" na blogu Zaistnieć w sieci.
  • Lista ikonek pod tytułem" na blogu Przełamać sieć.

Do czego zmierzamy

Naszym celem będzie dziś przygotowanie kodu HTML i CSS dla bloku „dodaj do" z odnośnikami do serwisów społecznościowych. Końcowy efekt powinien wyglądać podobnie do listy znajdującej się na tym blogu poniżej pełnych wpisów, z tą różnicą, że kod HTML będzie semantyczny (na blogu dodaję listę przez JS zatem jest z tym gorzej).

Kod HTML

Podstawą kodu HTML będzie lista nieuporządkowana z odnośnikami do poszczególnych serwisów.

<ul class="socicons">
  <li><a href="#" title="del.icio.us">del.icio.us</a></li>
  <li><a href="#" title="linkr">linkr</a></li>
  <li><a href="#" title="wykop">wykop</a></li>
  <li><a href="#" title="gwar">gwar</a></li>
  <li><a href="#" title="Technorati">Technorati</a></li>
  <li><a href="#" title="StumbleUpon">StumbleUpon</a></li>
  <li><a href="#" title="co.mments">co.mments</a></li>
</ul>

W przeciwieństwie do innych rozwiązań nie nadaję elementom listy klas. Wyróżnienie otrzymuje jedynie cała lista. Dla przejrzystości kodu pominąłem w linkach adresy zastępując je znakiem #.

Efekt:

Style CSS dla listy

Mamy już gotowy kod HTML, który teraz należy ostylować, aby uzyskać założony, poziomy układ linków. Dodatkowo wzbogacimy listę o atrakcyjny efekt typu rollover.

Zmieniamy układ elementów listy

Poziomu układ elementów listy oraz usunięcie znaków wypunktowania zapewni poniższy CSS:

.socicons {
   list-style:none;
   padding:0;
}
.socicons li{
   float:left;
}

Efekt:

Dodajemy ikony i ukrywamy tekst odnośników

W przeciwieństwie do pozostałych rozwiązań nie stosuję tutaj techniki CSS sprites i ikony umieszczam nie jako tło odnośników, ale całej listy (element ul). Ten sposób umieszczenia ikon wymaga odpowiedniego ich rozmieszczenia na obrazku. Wzajemnego położenia ikon na obrazku nie będzie można później zmienić za pomocą arkusza CSS. Jest to niewątpliwie ograniczenie mojej metody, ale przecież nie zmienia się tego typu elementów co tydzień.

.socicons {
   list-style:none;
   padding:0;
   height:16px;/* odpowiada wysokości ikon*/
   background: transparent url(ADRES_OBRAZKA) left top no-repeat;
}
.socicons li{
   float:left;
   margin-right: 8px;/*odpowiada odstępom między ikonami*/
}
.socicons a{
   display: block;
   width: 16px;
   height: 16px;
   text-indent: -9999px;
}

Efekt:

Dodajemy efekt rollover

Aby urozmaicić wygląd wygląd poszczególnych ikon zmodyfikujemy tak, aby wydawały się one częściowo przezroczyste (działa jedynie na jednolitym tle). Po wskazaniu odnośnika myszką ikona pojawi się już bez efektu przezroczystości.

Aktualizacja: Należy podkreślić (co Łukasz i Paweł zrobili już w komentarzach), iż zastosowanie sztuczki z przezroczystością powoduje błąd w walidacji arkusza CSS. Wynika to z faktu wykorzystania niestandardowych rozszerzeń przeglądarek. Nie zmiena to jednak faktu, iż efekt działa na większości przeglądarek.

.socicons a{
   display: block;
   width: 16px;
   height: 16px;
   text-indent: -9999px;
   background-color:#fff;  /*kolor tła*/
   opacity: 0.6;
   -moz-opacity: 0.6;
   -khtml-opacity: 0.6;
   filter:alpha(opacity=60)
}
.socicons a:hover{
   opacity: 0;
   -moz-opacity: 0;
   -khtml-opacity: 0;
   filter:alpha(opacity=0)
}

Efekt przy wskazaniu jednego z odnośników myszką:

Finalny kod CSS

Łącząc ze sobą nasze kolejne kroki otrzymujemy następujący CSS:

.socicons {
   list-style:none;
   padding:0;
   height:16px;
   background: transparent url(ADRES_OBRAZKA) left top no-repeat;
}
.socicons li{
   float:left;
   margin-right: 8px;
}
.socicons a{
   display: block;
   width: 16px;
   height: 16px;
   text-indent: -9999px;
   opacity: 0.6;
   -moz-opacity: 0.6;
   -khtml-opacity: 0.6;
   filter:alpha(opacity=60);
}
.socicons a:hover{
   opacity: 0;
   -moz-opacity: 0;
   -khtml-opacity: 0;
   filter:alpha(opacity=0);
}

Tyle jeżeli chodzi o HTML i CSS. Resztę, czyli właściwe adresy odnośników, trzeba uzupełniać za pomocą, np. PHP lub JavaScrip, jak robię to ja. Działanie powyższego kodu możecie sprawdzić na przykładowej stronie.

W pełni funkcjonalne rozwiązanie (używające JavaScript) dla Bloksa opublikuję w przyszłym tygodniu. Jeżeli zainteresowała Cię opisana tu lista, to nie przegap tego wpisu. Najlepiej subskrybuj kanał RSS bloga.

tagi/klucze: , ,
poniedziałek, 25 lutego 2008, s.z.y.m.o.n
Tagi: blox

Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Lista ikonek - tworzymy podcień z przełam sieć
Wcześniejszy wpis w którym opisane było tworzenie listy ikonek pod tytułem pozwolił na wytworzenie następującej listy ikonek. Ładnie toto wygląda, jest małe i wygodne. Ale może by tak dodać jeszcze cień pod każdą z graficzek? Sposoby n... »
Wysłany 2008/02/26 16:03:12
Komentarze
kosciak1
2008/02/25 22:48:16
Masz złe linki do topbloggera - na pełnym wpisie jest "testblog.blox.pl/2008/02/http;//topbloger.pl/ a na skrócie "topbloger.pl/ czyli jest trochę lepiej ale brakuje jednego "g" w topblog_g_er
-
s.z.y.m.o.n
2008/02/25 22:57:59
Dzięki, już poprawione.
Dziwne rzeczy dziś się przy tym wpisie dzieją ;)
-
Gość: Łukasz Sobek, *.neoplus.adsl.tpnet.pl
2008/02/26 06:34:51
Dziękuję za poprawę linka :) (domeny topbloger.pl jeszcze nie zdążyłem podpiąć :) .

Tak się zastanawiam, czy przypadkiem .socicons a:hover{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter:alpha(opacity=0); } nie wyświetla się jako błąd w validatorze CSS.
-
Gość: Pavel, *.net.mlociny.pl
2008/02/26 08:18:36
Naturalnie validator tego nie uznaje, ale coś za coś. Albo mamy pare errorów w validatorze więcej, albo próbujemy to zrobić za pomocą półprzeźroczystego PNG i IE fixów do tejże przeźroczystości. Kwestia priorytetów.

Ja osobiście zrobiłbym z PNG, bo można to wykorzystać jeszcze w innych miejscach, a to tylko 1x1 plik, który zajmować będzie tyle co nic. :)
-
s.z.y.m.o.n
2008/02/26 11:46:34
@Łukasz
Faktycznie CSS dla efektu rollover nie przejdzie przez walidator, bo używa rozszerzeń specyficznych dla różnych przeglądarek, które nie znajdują się w specyfikacji (to koszt bajeru). Chyba warto będzie to wyraźniej zaznaczyć w treści notki.
@Paweł
Dokładnie, coś za coś. Ja osobiście nie demonizuję dodatkowych rozszerzeń dla CSS jeżeli można dany efekt uzyskać w większości przeglądarek. Sam wpis powstał jako nawiązanie do notki Łukasza Sobka, a tam koncentrował się on na zmniejszeniu odwołań przeglądarki, stąd też raczej rozwiązanie z przezroczystością nadaną poprzez CSS.

Rozwiązanie z PNG również nie jest idealne, choć jeżeli korzystamy z tego efektu więcej razy, to faktycznie może być bardziej opłacalne. Jakby nie patrzeć chcąc mieć rozwiązanie działające z IE musimy nieco odejść od standardów.
-
rdkg
2008/02/26 12:46:25
Brawo! Świetna robota :)

Mam tylko pytanie - czy wszystkie z obecnych serwisów są konieczne? Taki Linkr lub StumbleUpon? Linkr jest chyba tak niszowy jak onmedia, w pigułce, spis. A czy wielu polaków używa SU? Jeśli jest SU to powinien być i Digg, a mam wrażenie, że są oba bardzo niszowe... Może za to warto by dodać google bookmarks.
-
s.z.y.m.o.n
2008/02/26 13:28:09
@Radek
Kwestia tego jakie kto sobie dobierze. Przed publikacją wersji dla Bloksa chciałbym jeszcze zrobić rozpoznanie, więc wszelkie sugestie mile widziane. Na bank zostaną delicje, wykop, technorati i co.mments (reszta wymaga jeszcze rozważenia). Ciekaw jestem czy było gdzieś robione porównanie popularności tego typu serwisów w Polsce.

Mam zamiar opisać jak zmodyfikować listę, zatem dla upartych da radę zmienić ;)
-
rdkg
2008/02/26 14:54:59
@s.z.y.m.o.n
Znając życie takiego rankingu popularności nikt nie robił, lub jest to nie do zrobienia.

Na bank zostaną delicje, wykop, technorati i co.mments - popieram!

Mam zamiar opisać jak zmodyfikować listę, zatem dla upartych da radę zmienić - super :)
-
audiobooki
2011/02/05 18:51:18
@rdkg

Załóż konto na StumbleUpon i dodaj tam swoje linki to zobaczysz jak zwiększysz ilość wejść w 5 sekund. Polecam

Skrypt ostatnie komentarze w nowej wersji
Po sporych perturbacjach skrypt wraca do życia. Teraz z prostym generatorem kodu do w klejenia na blogu!
Wszyskich zainteresowanych zapraszam do ponownej instalacji.
Czytaj dalej...
Promuj swojego bloksa
Czytelnicy mogą promować Twojego bloga umieszczając linki do notek w serwisach społecznościowych. Ułatw im to zadanie dodając na blogu listę odnośników, która tą czynność sprowadzi do jednego kliknięcia.
Czytaj dalej...