Ostatnio instalowałam u kilku blogerek szablony zewnętrzne. Wiele takich szablonów ma efekty, które pojawiają się po najechaniu kursorem na zdjęcie. To sprawia, że blog staje się bardziej dynamiczny i jest taki "bardziej" :) Wiecie, że na szablonach bloggerowych tez możemy mieć takie bajery? Najlepsze w tym jest to, że nie będziecie musiały nawet przechodzić do edycji kodu HTML. Odpowiednie kody wystarczy wkleić do arkusza CSS dostępnego w zaawansowanych opcjach edycji szablonu.
Po zalogowaniu do bloggera przejdź do SZABLON>DOSTOSUJ>ZAAWANSOWANE i w arkuszu CSS wklej wybrany kod.
Po zalogowaniu do bloggera przejdź do SZABLON>DOSTOSUJ>ZAAWANSOWANE i w arkuszu CSS wklej wybrany kod.
ZAMGLENIE
Efekt zamglenia powstaje poprzez zmianę przezroczystości zdjęcia. Im wartość 0.80 i 80 będą niższe tym zdjęcie będzie bardziej zamglone po najechaniu na nie kursorem.
.post img{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease
; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { opacity:0.7;
filter:alpha(opacity=50); }
CZARNO-BIAŁE
Stosując ten efekt zdjęcia na blogu staną się czarno-białe po najechaniu na kursorem.
.post img
{ -webkit-transition:
all 1s ease; -moz-transition:
all 1s ease; -o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; }
.post img:hover { -webkit-filter:
grayscale(100%); }
POWIĘKSZENIE
Po najechaniu kursorem zdjęcie zostanie powiększone. Im bardziej zwiększymy wartość 1.1 (koniecznie we wszystkich 3 miejscach) tym zdjęcie będzie bardziej się powiększać (np. 1.2, 1.3...1.8) Nie zalecam jednak na blogu stosowania zbyt dużych wartości bo efekt będzie zbyt agresywny.
.post img{
-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;
}
.post img:hover {
-o-transition: all 0.6s;
-moz-transition: all 0.6s;
-webkit-transition: all 0.6s;
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-webkit-transform: scale(1.1);
}
Ciekawa zmiana na blogu chociaż chyba wolałam ten blog w czerwieni :)
OdpowiedzUsuńJak zawsze bardzo fajne porady. Sama skusilam sie na szablon zewnetrzny, bo zadna ze mnie artystka i koncentruje sie teraz na tresci, a nie na wygladzie. Pozdrawiam serdecznie beata
OdpowiedzUsuńJestem w trakcie kombinowania i szukania nowego wyglądu...dla siebie chyba projektuje się najtrudniej:)
OdpowiedzUsuńWpis fantastyczny, ale zmiany u Ciebie ... jestem pod wrażeniem. Kolorystyka, czcionka - wszystko gra :))
OdpowiedzUsuńObawiam się, że to nie wersja ostateczna....dla siebie najtrudniej coś wybrać:P
OdpowiedzUsuńGadżet fajny. Muszę pomyśleć, czy u mnie mi się taki widzi ;)
OdpowiedzUsuńTwoje zmiany na blogu - podobają mi się bardzo. Ja za czerwienią nie przepadam, ten musztardowy bardziej mi się widzi. Baner prezentuje się dużo lepiej ;)
Uśmiecham się jak czytam jak rożnie odbierają mój ( z założenia) "złoty" - Był już sraczkowaty i żółty :)
OdpowiedzUsuńwow te efekty są świetne, muszę któryś wykorzystać
OdpowiedzUsuńWidzę, że u Ciebie przysłowie "szewc bez butów chodzi" się nie sprawdza! Nie wiem jak Ty to robisz,że znajdujesz na wszystko czas :-) Gażety na bloga świetne - jak zawsze :-)
OdpowiedzUsuńSwietna porada ,czasem wystarczy tak niewiele aby blog "żył".może i ja coś zmienię w końcu idzie wiosna,,,tylko...ja taka niekumata
OdpowiedzUsuńJesteś genialna! Świetne są takie efekty! Dzięki ♥
OdpowiedzUsuństrasznie irytujące są takie efekty przy czytaniu postów na blogach. chciałabym zobaczyc dokładnie co jest na zdjęciu, a przy takich efektach muszę pilnować, żeby kursor był poza zdjęciem. nie widzę żadnych plusów takich efektów niestety.
OdpowiedzUsuńTo niestety nie tak do końca biorąc pod uwagę jak długo się do tego zabierałam i że wciąż szukam czegoś dla siebie:)
OdpowiedzUsuńPrzy opcji powiększania można przyjrzeć się nawet bliżej:) A tak serio to rozumiem i dziękuję za ten głos.
OdpowiedzUsuńTo daleko nie jestem, musztarda to takie złoto przecież :D
OdpowiedzUsuńPodzielam głos poprzedniczki - mnie te efekty denerwują, ale fajnie, że pokazałaś, jak to zrobić i może kiedyś dojrzeję do tego.
OdpowiedzUsuńAle widzę, że ikonka Pin na zdjęciach się zmieniła - jest coraz bliżej mojego faworyta. Mam nadzieję, że będzie kurs o wykreowaniu własnego Pina :)
Raczej takiego kursu w najbliższym czasie nie będzie jednak nie jest to sprawa skomplikowana. Wystarczy stworzyć napis, rysunek bez tła...cokolwiek chcesz w pliku PNG. Można do tego użyć nawet strony picmonkey.com. Samo umieszczenie przycisku opisywałam tu: http://www.zyj-kochaj-tworz.pl/2014/07/zyj-kochaj-tworz-upieksza-blogi.html
OdpowiedzUsuńOczywiście, że się przyda. :)
OdpowiedzUsuńdziękuję Ci ślicznie za kolejną wspaniałą instrukcję :))
OdpowiedzUsuńBardzo fajne i efektowne! Pięknie na blogu nowe logo oraz kolory cudnie!!!!
OdpowiedzUsuńBardzo pożyteczne informacje :) świetne porady tutaj serwujesz :)
OdpowiedzUsuńŚwietny post! Zaraz robię, tylko się jeszcze waham - zamglenie czy powiększenie:)
OdpowiedzUsuńPisałam Ci jakiś czas temu, pod postem o zmianie adresu, o przeniesieniu domeny z nazwa.pl na ovh. Jednak rezygnuję, bo musiałabym najpierw zapłacić im...ponad stówę. W każdym bądź razie, dziękuję Ci za rady:)
Mnie kosztowało to 10 zł, ale to może zależy jaki był regulamin w momencie zakupu.
OdpowiedzUsuńTo ze mianą na b&w jest najlepsze!! Świetne porady.
OdpowiedzUsuńO łał! Ale super!
OdpowiedzUsuńAle czary- mary dla nas wyczyniasz :D Dla mnie to czarna magia :) Ale spróbuję się pobawić!
z czarno białym coś ci nie wyszło
OdpowiedzUsuńBardzo się przyda.
OdpowiedzUsuńWow! Twój blog wygląda po prostu...wow!
Niezwykle pomocne, jeżeli ktoś chce uświetnić swojego bloga...a to właśnie mnie czeka w najbliższym czasie
OdpowiedzUsuńZgadzam się :-) najtrudniej :-)
OdpowiedzUsuńCo dokładnie nie wyszło. Nie działa jak trzeba czy dzieje się coś innego?
OdpowiedzUsuńJak zawsze coś przydatnego. I bardzo mi się podobają zmiany u Ciebie! Moje ulubione kolory :)
OdpowiedzUsuńOch, jak dobrze, że tu trafiłam. A ja zawsze zastanawiałam się jak to robią inni blogerzy. :) Dzięki, już skorzystałam z Twojej rady.
OdpowiedzUsuńPamiętam jak jeszcze nie dawno sama się z tym zmagałaś:)
OdpowiedzUsuńI nadal nie jestem zadowolona i ciągle coś grzebię na blogu roboczym w kodach :-)
OdpowiedzUsuńWow, ale super! :)
OdpowiedzUsuńswietne rady!! :)
OdpowiedzUsuńFajny wpis! :)
OdpowiedzUsuńDzięki wielkie! Jesteś niezastąpiona :D To dzięki Tobie mój blog wygląda już normalnie i nie straszy :D Robisz kawał dobrej roboty i nie przestawaj. Uściski :)
OdpowiedzUsuńhej mam pytanie, w jakim programie dodajesz napisy do zdjęć głównych na blogu?
OdpowiedzUsuńZwykle w Photoshopie, czasami w Inkscape. Program nie ma większego znaczenia. "Tajemnica" tkwi w opcji, która pozwala na zwiększenie przestrzeni między literami.
OdpowiedzUsuńCzy to samo da się robić przy postach?
OdpowiedzUsuńTa instrukcja dotyczy zdjęć w postach.
OdpowiedzUsuńMam na myśli, czy da się zrobić to podczas pisania danego posta. I aby ten efekt był tylko do np. 2 spośród wszystkich.
OdpowiedzUsuńAaaaa.....da się:) W trybie edycji posta musisz przejść w zakładkę HTML. Będziesz widziała wpis w formie kodu. Musisz w nim odnaleźć zdjęcia, które mają mieć dany efekt.
OdpowiedzUsuńKod zdjęć wygląda mniej więcej tak
Dane zdjęcie trzeba zamknąć divie, czyli przed kodem zdjęcia wklejasz coś takiego:
a po kodzie:
słowo zamglenie zmieniasz na inne dowolone.
Z kodami z wpisu postępujesz tak jak to opisałam z tą różnicą, że występujące w nich słowo post zmieniasz na nazwę, którą nadałaś ( w moim przykładzie na słowo zamglenie)