Zestaw czarnych ikon społecznościowych

Dziś paczka czternastu ikon społecznościowych w rozmiarach 100x100px. Wszystkie są czarne, z przezroczystym tłem i wycięciami, więc zdadzą egzamin niemal na każdym blogu. Idealnie sprawdzą się w tym tutorialu [KLIK].


W skład paczki wchodzą ikony, które możecie zobaczyć na powyższej grafice. Znajdziecie tam coś dla Facebooka, Bloglovin, RSS, Bloggera, Youtube, Aska, Twittera czy last.fm. Kliknięcie w poniższy link przenosi do Dysku Google, skąd można pobrać paczkę. Można to zrobić wciskając CTRL+S lub wybierając w lewym górnym rogu opcję Plik oraz Pobierz. Mam również nadzieję, że nie muszę nikomu przypominać, że przed użyciem tych grafik należy wrzucić je do sieci korzystając z hostingu (np. Picasa, Photobucket, Tinypic).

ZESTAW CZARNYCH IKON SPOŁECZNOŚCIOWYCH

Jak dodać na bloga obracające się ikony społecznościowe?

Jeżeli prowadzicie bloga, to z pewnością macie różne, powiązane z nim konta na portalach społecznościowych, którymi chcielibyście podzielić się z czytelnikami. Przyjemnym dla oka sposobem jest stworzenie małych ikonek i opakowanie ich w linki. Te, które przygotowałam dla was na dziś, po najechaniu na nie kursorem myszy, obracają się.


Przykładowy efekt końcowy możecie zobaczyć poniżej (ale bez odnośników). Czarne ikonki będą do pobrania w kolejnej notce.

• 
• 
• 
• 
• 

Aby wstawić takie ikonki na swojego bloga, wystarczy wejść w opcję Układ swojego bloga oraz dodać gadżet HTML/JavaScript. W jego treści należy wkleić cały poniższy kod. Oczywiście w miejsce tekstu LINK-DO-PROFILU wklejamy odnośnik do profilu społecznościowego (np. fanpage, instagram), a tekst LINK-DO-IKONKI zastępujemy adresem do odpowiedniej grafiki (link kończący się rozrzerzeniem pliku .jpg, .gif lub .png).

<style>
.social
{
   text-align: center;
}

.social li
{
   display: inline;
   list-style-type: none;
}

.social img
{
   -webkit-transition: all 0.75s ease-in-out;
   -moz-transition: all 0.75s ease-in-out;
   -ms-transition: all 0.75s ease-in-out;
   -o-transition: all 0.75s ease-in-out;
   transition: all 0.75s ease-in-out;

   margin:5px;
   width: 50px;
}

.social img:hover
{
   -moz-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -o-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
}
</style>

<ul class="social">
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>
</ul>

Aby wstawić kolejną ikonkę, wystarczy na samym końcu, przed linijką </ul> wstawić kod:

<li><a href="LINK-DO-PROFILU"><img src="LINK-DO-IKONKI" /></a></li>

Kod można dostosować do swoich potrzeb. Standardowo ikony wyświetlane są poziomo.  Aby ustawić je w pionie, wystarczy zamienić linijkę display: inline; na display: list-item;

Aby zmienić rozmiar ikonek należy zmienić liczbę 50 w linijce width: 50px; na taką, jaka nam odpowiada.

Wygraj metamorfozę swojego bloga!

Już w pierwszej notce obiecywałam, że wkrótce pojawi się konkurs/rozdanie, w którym będzie można wygrać metamorfozę bloga. Dziś nadszedł ten dzień - jeśli macie dość swojego starego szablonu, marzy wam się zmiana, lub po prostu chcecie spróbować czegoś nowego, to jest to szansa dla was!


Zasady są proste i dość standardowe. Wystarczy być publicznym obserwatorem bloga BlogoweABC. Dodatkowe losy można zdobyć like'ując facebookowy fanpage [KLIK], śledząc bloga poprzez Bloglovin [KLIK] oraz udostępniając informację o tym konkursie (można użyć pierwszego obrazka jako bannera).


- Zgłaszając się do rozdania akceptujesz regulamin oraz zawarte w nim zasady rozdania.
- Zwycięzca zostanie wyłoniony w drodze losowania.
- W rozdaniu mogą wziąć udział czytelnicy publicznie obserwujący bloga poprzez Sieć znajomych Google. Dodatkowe losy, zwiększające szansę na wygraną można zdobyć śledząc bloga poprzez inne, wyszczególnione w formularzu media społecznościowe.
- Zgłaszać można się do 25 IX do godziny 20:00. Decyduje godzina przesłania formularza.
- Rozdanie odbędzie się pod warunkiem, że zgłosi się minimum 10 osób.
- Zwycięzcą może zostać jedna osoba. Jeżeli zwycięzca nie zgłosi się w przeciągu tygodnia, zostanie przeprowadzone kolejne losowanie lub wybiorę zwycięzcę samodzielnie.
- Nagrodą jest spersonalizowany szablon blogowy przeznaczony na platformę Blogger lub Wordpress, stworzony według wytycznych zwycięzcy na warunkach opisanych w zakładce WARUNKI bloga BlogoweABC.
- Zwycięzca nie ponosi żadnych kosztów związanych z realizacją szablonu.

Pozdrawiam i życzę powodzenia!

Jak zmienić przezroczystość zdjęć po najechaniu na nie kursorem myszy?

Na jakimś blogu, niestety nie pamiętam już jakim, zobaczyłam całkiem ciekawy efekt znikających zdjęć. Po najechaniu kursorem myszy na obrazek w notce ów blakł, zmniejszała się jego przezroczystość. Spodobało mi się to na tyle, że postanowiłam poświęcić temu osobny tutorial.


Można to zrobić na dwa sposoby. Pierwszy jest taki, że wszystkie zdjęcia wyglądają normalnie, a po najechaniu na nie myszą blakną. Drugi polega na tym, że zdjęcia od samego początku są wyblakłe, a do normalnego stanu wracają po wskazaniu na nie myszą. Jeżeli nadal nie potraficie sobie tego wyobrazić, to możecie przetestować obie te opcje na obrazkach znajdujących się poniżej.


Żeby uzyskać taki efekt na swoim blogu wystarczy umieścić jeden z poniższych kodów CSS w swoim szablonie. Tutorial jak to zdobić znajdziecie tutaj: [KLIK!]
WAŻNE - kod będzie działać tylko na zdjęciach umieszczonych w notkach. Jeżeli chcecie, żeby wszystkie zdjęcia na blogu (także w stopce i na paskach bocznych) miały taką animację, usuńcie z poniższego kodu fragmenty .entry-content

Zdjęcie pojawiające się

.entry-content img 
{ 
   -webkit-transition: opacity 0.5s ease-in-out; 
   -moz-transition: opacity 0.5s ease-in-out; 
   -ms-transition: opacity 0.5s ease-in-out; 
   -o-transition: opacity 0.5s ease-in-out; 
   transition: opacity 0.5s ease-in-out; 

   opacity: 0.5; 
} 

.entry-content img:hover 
{ 
    opacity: 1; 
}

Zdjęcie znikające

.entry-content img 
{ 
   -webkit-transition: opacity 0.5s ease-in-out; 
   -moz-transition: opacity 0.5s ease-in-out; 
   -ms-transition: opacity 0.5s ease-in-out; 
   -o-transition: opacity 0.5s ease-in-out; 
   transition: opacity 0.5s ease-in-out; 

   opacity: 1; 
} 

.entry-content img:hover 
{ 
    opacity: 0.5; 
}

We fragmencie opacity: 0.5; można zmienić wartość 0.5 na inną. Ważne, by była ona z zakresu od zera do jednego włącznie. Im mniejsza liczba, tym słabiej widoczny będzie obrazek (jeżeli damy 0 będzie on niewidoczny). Ważne, aby przy zapisie liczby dziesiętnej użyć kropki, nie przecinka.

Metamorfoza bloga aGwer

Na pewno znajdzie się tu ktoś, kto kojarzy Agnieszkę i jej bloga. Kilka razy pomagałam jej np. przy logo czy nagłówkach, aż w końcu oddała swojego bloga w moje ręce i zdecydowała się na nowy szablon. Poprzedni, choć jasny, to wydawał się nieco zabałaganiony i niedopracowany.




Po metamorfozie na blogu Agnieszki dominuje kolor niebieski i jego odcienie. Do tego zwijane notki, zaokrąglone zakładki, unoszący się pasek z ikonkami socjalnymi i wyraźny, rozpoznawalny nagłówek.





Szablon można zobaczyć w całości u aGwer [KLIK!]

Zestaw kwiatowych etykiet na bloga

Często na blogach można spotkać kolorowe, graficzne tytuły gadżetów, które zastępują zwyczajny tekst. Na dziś przygotowałam dla was zestaw dziesięciu etykiet blogowych w czterech różnych wersjach kolorystycznych.


Na każdy zestaw składają się napisy: archiwum, etykiety, kontakt, o mnie, obserwatorzy, rozdania, szukaj, wishlist, współpraca i wyświetlenia. Najprostszym sposobem na dodanie ich do bloga jest wejście w ustawienia układu bloga oraz dodanie gadżetu "Obraz" w miejscu, w którym chcemy, by pojawiał się obrazek.


Kliknięcie w któryś z poniższych linków przenosi do Dysku Google, skąd można pobrać zestaw. Można to zrobić wciskając CTRL+S lub wybierając w lewym górnym rogu opcję Plik oraz Pobierz.

BEŻOWY

NIEBIESKI

RÓŻOWY

ZIELONY

Jak automatycznie zaokrąglić rogi zdjęć w notce?

Dzisiaj startujemy z pierwszym, banalnym tutorialem, który wielu z was na pewno zaoszczędzi czas. Na wielu blogach widuję zdjęcia z zaokrąglonymi rogami - czasem autorzy chcą dopasować je do wyglądu szablonu, czasem to zwykłe widzimisię. Niestety, wiele z nich jest przerabianych w ten sposób z użyciem programów graficznych. Mam nadzieję, ze wad tej metody nie muszę nikomu tłumaczyć. Wiadomo, jest to praco- i czasochłonne, a także może przysporzyć nam problemów, gdy postanowimy zmienić szablon, lub gdy zwyczajnie... takie zdjęcia przestaną nam się podobać.
 
Najprostszym rozwiązaniem jest umieszczenie poniższego kodu CSS we własnym szablonie. Informację gdzie i jak to to zrobić, znajdziecie TUTAJ. Fragment ten zmieni rogi wszystkich zdjęć w notkach na zaokrąglone.

.post-body img 
{ 
 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px; 
}

Wartość "20px" można dowolnie zmieniać. Oznacza ona rozmiar zaokrąglenia w pikselach. Jeżeli nie orientujecie się, jak to może wyglądać, to zerknijcie na cztery przykłady poniżej. Możecie na nich zobaczyć, jak wygląda zaokrąglenie rogów o wartości 20px, 40px, 60px i 100px. Jeżeli zdecydujecie się na inną wartość pamiętajcie, żeby zmienić ją we wszystkich trzech liniach kodu!

Here we go!

Od dłuższego czasu nosiłam się z zamiarem założenia bloga o tematyce graficzno - tutorialowo - miszmaszowej. Dzisiaj mam przyjemność przedstawić wam Blogowe ABC. Dopiero startuje, ale wiem, że trochę wiary i wsparcia pomoże mu się rozkręcić.

Jeżeli prowadzisz bloga, lub dopiero zastanawiasz się nad jego założeniem, to jesteś w dobrym miejscu! Standardowe szablony Blogspota nie spełniają Twoich wymagań, ale nie znasz HTML ani CSS? Dobrze trafiłeś! Tutaj właśnie będą się tu pojawiać instrukcje z kodem źródłowym, różne tutoriale krok po kroku i pomysły na szablonowe udziwnienia, których - zapewniam - nie znajdziecie nigdzie indziej. Do tego będę publikować grafiki, które będzie można wykorzystać na swoim blogu.

A za niedługo... konkurs! Zachęcam do zaglądania!