Kaszka z mleczkiem normalnie. Jeden kawałeczek kodu, jedna zmiana w HTML i już :)
W HTMLowej wersji szablonu (Szablon -> Edytuj kod HTML -> Formatuj szablon) za pomocą Ctrl+F znajdujemy znacznik /body i przed nim wklejamy, co następuje:
Kasiu, Baśka ma kolor śmietankowobiały, całkiem przyjemny :) Beatko, jeśli się nie mylę, pierwotnie rozprowadzano w ten sposób gry komputerowe. Na szczęście teraz, w dobie ebooków, możemy tak kupować książki. Sylwio, bardzo dziękuję :) Janielko, a może kojarzysz przedwojenny film? Ewo, w mój gust akurat trafiają :) A może trzeba chłopaków pomonitować na FB żeby przygotowali jakiś fajny kobiecy pakiecik? :) Monotemo, super :) Olaboga, mnie się wydaje, że jeśli ktoś chce wesprzeć fundację na przykład, albo ma jakikolwiek inny powód, to niech kupuje :) W końcu to ebook, nie generuje kosztów ani zanieczyszczenia środowiska :) Yellow Mleczyk, ciekawa jestem, czy książka jest dostępna w wersji papierowej. Coś tam niby wykopałam w necie, ale nie wygląda na bardzo popularną.
Od kilku dni działa coraz prężniej serwis "Zrobisz to sam".
Dzisiaj chciałabym Wam pokazać, jak dodać do niego swoje tutoriale, kursy i porady, nie tylko druciarskie, szydełkowe itp. - ale w zasadzie z każdej dziedziny, w której czujecie się na tyle dobrze, by pomagać innym.
1. Wszystkie tutoriale itp. oznacz etykietą kurs (tutorial, DIY, porady - do wyboru). Wymaga to edycji każdego z postów, jeśli dotąd nie nadawałaś im takich etykiet.
2. Wejdź na stronę Zrobisz to sam i załóż konto. Jeśli nie chcesz od razu dodawać bloga, możesz zrobić to później.
3. Pobierz kod bannera ze strony (znajdziesz go w menu użytkownika) i wklej w gadżetach swojego bloga.
4. Znajdź feed dla etykiety kurs. Ja wiem, to dziwnie brzmi ;) Ale chodzi o taki adres: http://nazwatwojegobloga.blogspot.com/feeds/posts/default/-/nazwa.etykiety
Podmień w nim elementy zaznaczone na czerwono na własne i już.
5. Dodaj swój blog. W prawym górnym rogu strony Zrobisz to sam jest menu użytkownika, a w nim "Moje blogi". Dodając bloga w rubryce "Komentarz dla moderatora" wklej adres feedu z punktu 4. Zatwierdź i czekaj, aż moderacja doda blog.
Leno, to pewnie przesilenie przedwiosenne :) Będzie dobrze! Anutku, Zuziu, Aine - dzięki za puszczenie dalej, może to tylko symboliczny gest, ale ważny. April, cieszę się, że pomogłam :)
To już drugi czwartkowy post z poradami dotyczącymi bloggera. Mam nadzieję, że wyrobiłam w sobie juz tyle systematyczności, by stworzyły one cotygodniowy cykl.
Dzisiaj czas na pasek boczny, pasek widgetów czy jakkolwiek chcecie go nazwać.
Od razu powiem - nie jestem fanką układu z trzema kolumnami - zwykle blogi mają szerokość całkowitą ok. 1000 pikseli, a jeśli zastosujemy 2 paski boczne, powiedzmy po 250 pikseli każdy, na zdjęcia zostaje nam wąziutka kolumna - mniej niż 500 pikseli (bo jeszcze marginesy pomiędzy!), a takie zdjęcia na pewno nie zaprezentują w pełni tego, co chcemy pokazać.
Sporo blogów zrezygnowało w ogóle z bocznych pasków, ale w przypadku branży robótkowej moim zdaniemnie ma to sensu - lubimy nasze paseczki z postępem prac, linki czy blogrolle i nie ma powodu do rezygnowania.
Jeśli chodzi o położenie paska, szczerze polecam prawą stronę, głównie dlatego, że czytamy od prawej do lewej, czyli wzrok przy czytaniu skacze do lewego boku ekranu, spodziewając się znaleźć tam początek linijki. Jeśli umieścimy tam pasek z kolorowymi gadżetami i dodatkowym tekstem, czytelnik zdekoncentruje się i zmęczy. Oczywiście to tylko rekomendacja.
Aby pasek ładnie wyglądał, trzeba go trochę przemyśleć i uporządkować - plus zastosować kilka tricków, opisanych poniżej. Weź kartkę papieru, ołówek i na bieżąco notuj, co gdzie i jak :)
1. Zawartość
Zastanów się, co chesz umieścić w swoim pasku. Przykłady: rubryka "O mnie", paski z postępem prac, blogroll (ostatnie wpisy z ulubionych blogów), linki (do forów robótkowcyh, fajnych miejsc w sieci), obrazki typu "Twój komentarz dodaje mi skrzydeł" i tym podobne.
2. Grupowanie i kolejność
Teraz podziel kartkę na rubryki i zastanów się, co w każdej umieścić. Połącz ze sobą obrazki, osobne miejsce znajdź dla linków itd.
Blogroll jest osobną funkcją bloggera, więc siłą rzeczy tworzy osobny element/gadżet, podobnie jest z licznikiem wejść. Jednak jeśli chodzi o obrazki czy linki, wstawisz je za chwilę ręcznie, razem i w ładnym układzie.
3. Gotowe gadżety
Nie da się ich konfigurować poza paroma podstawowymi ustawieniami. To wada, dlatego dobrze przemyśl, w którym miejscu paska mają się znaleźć, żeby nie burzyć porządku :) Ciekawym pomysłem jest np. umieszczenie blogrolla na samym dole, pod wszystkimi postami.
4. Gadżet HTML/JavaScript
To jest nasz główny sprzymierzeniec. Poniżej podaję kody, służące do wstawiania linków, obrazków i obrazków będących linkami - wiecie, o co mi chodzi ;)
Wstawianie obrazków:
Wstawianie linków - użyj kodu, albo stwórz wpis próbny, którego nie opublikujesz, i tam skorzystaj z wstawiania linków po czym przejdź do wersji HTML i skopiuj kod.
Obrazek - link:
W gadżecie tym możesz wstawić dowolną ilość materiałów, wystarczy kopiować po raz kolejny kod. Aby przejść do nowej linii, użyj znacznika br - takiego jak na końcu ostatniej ramki.
5. Wyrównanie paska.
Są dwie szkoły - wszystko do lewej, czyli tak, jak nam automatycznie wskakuje, ale ja osobiście wolę drugie podejście, czyli wyśrodkowanie gadżetów do wspólnej osi.
Mozna to zrobić używając znacznika CENTER w gadżetach HTML lub wyśrodkować kolumnę według wskazówek z innej mojej lekcji.
Tyle o porządku i elegancji. O grafikach rozdzielających elementy paska przeczytacie tu.
Jeśli potrzebujecie więcej informacji i wskazówek, dajcie znać :)
I jeszcze ogłoszenie!!!
Kalurah, autorka kaptura Through the Woods, obniżyła do końca lutego cenę schematu na jedyne 0,99$ (czyli 3 złote!) - więc jeśli ktoś jeszcze nie kupił wzoru, teraz ma nadzwyczajną okazję :)
Oprócz tego pojawiła się jeszcze fajna throughthewoodsowa kominiarka dla dzieci, darmowa, i jej tłumaczenie już się pisze :)
JoannoP, głównie chodzi o prezentowanie tutoriali i kolekcjonowanie ich na swoim koncie użytkownika. Zresztą w weekend planuję konkretniejszy wpis na ten temat - ze wskazówkami, jak to zrobić :) Leno, ale może weny nabierzesz z wiosną? :)) Nev, bardzo się cieszę :)
Znacie agregatory blogów kulinarnych, takie jak Durszlak czy Mikser? Bardzo je lubię, chętnie korzystam i właśnie wczoraj dowiedziałam się, że rusza podobna inicjatywa z naszej, rękodzielniczej dziedziny:
Co Wy na to? Ja już dodałam swój blog i mam nadzieję, że agregator szybko ruszy.
A wiecie, co jest jeszcze świetne? Łatwe organizowanie i przeprowadzanie RaSZów, RaNDów i innych KALów - agregatory kulinarne mają takie funkcje :)
Jeśli idzie o robótki, nadal dłubię moją nimfę. Mam ostatnio sporo zleceń tłumaczeniowych i graficznych i mało czasu na dzierganie, ale postaram się skończyć wreszcie, bo czeka już włóczka na Owls dla mojej Miss :)
Asju - i ja Tobie dziękuję :* Bevo, Link Within niestety źle działa, ale Ela K. podesłała mi sposób na obejście ich usterki z bloga Kreatywna przyjemność - znajduje się tam i cała instrukcja :) Mr. K - taki był mój cel. Chciałam zgromadzić w jednym miejscu, po polsku, podstawowe informacje na ten temat :) Marto, zgadza się - gorzej, że LinkWithin ostatnio świruje.
Wartość białej przestrzeni jest nieoceniona. Oko nie lubi zatrzymywania się i poszukiwania, potrzebuje jasnej informacji, gdzie kończy się linia - no i lubi sobie odpoczywać. Jeśli główna szpalta bloga styka się z boczną kolumną, czytelnik szybko zniechęca się do czytania, bo zwyczajnie męczą mu się oczy. Oczywiście jeśli Twój blog nie ma białego tła, ten pas wypoczynkowy będzie w Twoim kolorze ;) Unikaj jedynie rozdzielacza wzorzystego, może utrudniać czytanie.
Podsumowanie: Zachowaj odstęp między szpaltami bloga.
Porządek w pasku bocznym
Pasek boczny to zbiór informacji o nas, postępie naszych prac, nasze manifesty, deklaracje, fajne linki i cokolwiek sobie wymarzymy.
Podstawową zasadą jest to, by cały boczny pasek był, o ile to tylko możliwe, wyrównany w ten sam sposób. Nieważne, czy do lewej, prawej, czy środka - jeśli będzie jednolity i równy, sprawi, że blog będzie wyglądał na bardziej uporządkowany.
Jeśli masz w pasku bocznym obrazki (np. bannery wspólnych akcji robótkowych, linki do sklepów, reklamy), możesz je zgrupować ze sobą i zadbać o ich jednakowy rozmiar. Staraj się nie umieszczać tam zbyt wiele. Jeśli korzystasz z blogrollu (ostatnie wpisy z ulubionych blogów), spróbuj ograniczyć ilość pokazywanych wpisów. O tym, jak wstawiać do paska grafiki i je grupować, będzie osobny wpis.
Podsumowanie:
Pasek boczny powinien być równy a jego zawartość nieprzeładowana i pogrupowana.
Tło bloga
No dobra. Tu pewnie niektórzy zaprotestują (w duchu lub w komentarzu). Sama protestowałam ;)
Sensem istnienia naszych blogów jest pokazywanie na nich zdjęć i opisywanie naszych zmagań z ukochanym hobby (choć nie tylko). Jeśli nasze tło będzie fulwypasideluks kolorowe i wzorzyste, zagłuszy treść bloga.
Unikajcie dużych, kontrastowych i rzucających się w oczy elementów, w końcu to nie one mają przyciągać czytelników, a wasze prace.
Tła można wybierać w ustawieniach szablonu, ale też znaleźć w internecie:
Takie tła jednak ładują się powoli na wolniejszych maszynach. Możesz w ustawieniach szablonu skorzystać z grafik bezszwowo łączących się w odpowiednio dużą całość, przezroczystych lub nie, albo ustawić jako tło pojedynczy kolor. Ja zdecydowałam się na biel, bo mnie samej, ale i wielu innym osobom, najłatwiej się odnaleźć na stronie o takim tle. Zajrzyjcie na Etsy czy Pakamerę, na portale gazet - większość również posługuje się bielą.
Podsumowanie:
Tło bez wyrazistych kontrastów i rzucających się w oczy elementów.
Asju, inspirujesz mnie bardzo :) Czytanie Twojego bloga to przyjemność, tak estetyczna, jak i merytoryczna :) Leno, ja już skończyłam, pokażę - muszę tylko dopaść Panicza w swetrze ;) Ewo, 3nereido, i jak, udało się kupić? Jolu, nowa pora roku też może być powodem dziergania nowych fajności :)) Kasiu, bardzo się cieszę, że nauczyłaś się robić rękawiczki :) Makneto, dlatego kocham moją zwijarkę :) Poduszeczko, nowa właścicielka też uznała, że komin jest milusi :) A ze zdaniem pięciolatki trzeba się liczyć :) Sylwio, cieszę się :)))) Creativamente, zajrzałam na bloga, podejrzałam źródło i nie widzę przyczyny. Przykro mi, ale chyba nie umiem pomóc :( Ennaven, wywołałaś mnie do tablicy, teraz twoja kolej ;)
Wiadomo, ładny nie znaczy tego samego dla wszystkich, Ale jest parę reguł, związanych z fizjologią człowieka, parę sztuczek z dziedziny sztuki i architektury i kilka związanych bezpośrednio z Internetem, które mogą pomóc.
Jak wiecie, długo miotałam się, szukając wyglądu idealnego. Ten, który teraz widzicie, bardzo podobał mi się na początku, ale teraz planuję pokombinować coś z tymi różyczkami, bo już mi się lekko opatrzyły. Dlatego czytam ostatnio o wszystkim, co może mi pomóc udoskonalić mój blog i chętnie się tym z Wami podzielę.
Może przydać się kartka i ołówek do szkicowania pomysłów :)
Kolory
Jedną z najtrudniejszych do zaakceptowania dla ludzkiego oka rzeczy w blogosferze jest skłonność blogerów do umieszczania jasnego tekstu na ciemnym tle. Tak, to może ładnie wyglądać na pierwszy rzut oka, schludnie i elegancko. Problem w tym, że jeśli zagłębiamy się w dłuższy tekst, to oczy męczą się nam szybko i zniechęcamy się do czytania. Nie na darmo książki są na papierze doprowadzonym do śnieżnej białości zabiegami chemicznymi ;)
Schemat kolorystyczny dla strony można obmyślić na kilka sposobów. Kiedyś wrzucałam linki do stron, na których można dobrać kolory. Ja jednak ostatnio polubiłam Design Seeds® i tam szukam inspiracji - zajrzyjcie choćby dla nacieszenia oczu pięknymi obrazami :)
Na kolory wpłynie też wybór użytych dekoracji/obrazków - takich jak moje różyczki. Ważne, by kolorów nie było zbyt wiele, to nie szablon bloga ma oczarować czytelników przede wszystkim - przecież chcecie pokazywać swoje myśli i prace i to one powinny przyciągać uwagę.
Struktura bloga
W Bloggerze dostępne są 3 podstawowe układy bloga - jednokolumnowy bez bocznych paneli, dwukolumnowy (szpalta główna plus panel boczny) i trzykolumnowy (szpalta główna plus dwa panele boczne w róznych układach).
Wypróbowałam wiele z nich. Przeczytałam wiele poradników. Różne źródła mówią różnie. Ale powiem jedno - nasze mózgi są dość leniwe i gdy przyzwyczają się do czegoś, ciężko je tego oduczyć, a gdy próbujemy - męczą się. Pismo mieszkańcy naszych okolic czytają od lewej do prawej, prawda? Tak samo badanie bloga będzie rozpoczynał każdy internauta. Jeśli po lewej od głównego tekstu będzie jeszcze coś, wzrok będzie mimowolnie zahaczał o to miejsce i rozpraszał się niepotrzebnie. Nieważne więc, ile na blogu jest kolumn - dobrze, jeśli główna szpalta, body jest pierwsza od lewej.
Ważne jest jeszcze jedno - by tekst nie był wyśrodkowany, tylko wyrównany do lewej. W przypadku tytułów, nagłówków, stopek czy gadżetów nie ma to znaczenia, ale tekst czyta się łatwiej, gdy początki linijek są tam, gdzie się ich spodziewamy ;)
To nie sprawa gustu, to fizjologia :)
Czcionki
W życiu próbowałam wielu czcionek na blogu. Szczególnie polubiłam Verdanę, jednoelementową, bezszeryfową (tzn. pisaną linią jednorodnej grubości, bez "chorągiewek" na końcach). Odkąd jednak odkryłam Google Fonts, to nie tylko okazało się, że na blogu mogę użyć dowolnej czcionki, ale w dodatku - skorzystać z pomocy w wybraniu najlepiej sprawdzającego się zestawienia.
Pierwszą zasadą dotyczącą czcionek jest to, że dokument czy blog nie powinny wykorzystywać więcej niż 2 z nich. Większa ilość stworzy wrażenie bałaganu i utrudni odbiór.
Po drugie - warto zachować zawijasy dla nagłówków, stopek itp., zaś główny tekst napisać czcionką prostą i łatwą w czytaniu.
Moja czcionka główna to Droid Serif, używam jej także w edytorze tekstu w dokumentach, które piszę i drukuję. Oczywiście czcionka to w pełni wybór użytkownika, byleby nie męczyła za bardzo oczu.
Kilka wskazówek, jak posłużyć się Google Fonts:
Tak wygląda główna strona Google Fonts. Po lewej są różne atrybuty czcionki, grubość linii, rozciągnięcie czy pochylenie liter. Najważniejsze jest jednak "All categories" - tam znajdziecie 4 kategorie czcionek: Serif, Sans Serif, Display i Handwriting. Jeśli szukacie czcionki na główną szpaltę - odznaczcie te dwie ostatnie - przydadzą się na nagłówki.
Po znalezieniu ładnej czcionki trzeba kliknąć w kwadracik obok klawisza "add to collection" i otworzyć kartę danego fontu.
Interesuje nas teraz zakładka "Pairings" - tam znajdziecie ładne zestawienia czcionek i odkryjecie, co może fajnie pasować na nagłówki Waszego bloga. Duru Sans na przykład świetnie zgrywa się z Amatic :)
O tym, jak użyć czcionek na swoi blogu, pisze Hafija - sama korzystałam z Jej poradnika :)
Leno, niektórzy znajomi są ciężcy do namówienia (na przykład ja ;) ) Claudio, dziękuję za poparcie :) Dziewczyny, widzicie? :) Jaddis, nie wiem, czemu "bez obrazy" co prawda, ale fakt, że pan sprzedający w osiedlowym warzywniaku może nie ufać terminalom, nie powinien powstrzymywać innych przed płaceniem kartą ;) Minimyszo, super :) A kaptur z czego byś chciała dziergnąć? Ann, zainspirowałaś mnie do napisania poradnika, jak zbudować szablon :) Asiu, strasznie się cieszę, że dałaś się natchnąć :) Jolu, w Chinach jeszcze nie kupowałam :) Chmurko, banki nie mają nic do tego, to jakby dodatkowe konto bankowe :) Korespondentko, super :) AnBi - trzeba w tajnym notesiku szyfrem zanotować :) Albo niewidzialnym długopisem, takim jak dodają do jakichś witamin dla dzieci ;) Haan, no nie - wszystkiego to nie :) Ale co wiem, czym mogę się podzielić, to wrzucam :) Aniu, to nie był wpis sponsorowany ;)))
Jeszcze niedawno sama obawiałam się kombinacji związanych z płatnościami zagranicznymi i unikałam jak ognia systemu PayPal. Głupio, powiem wam :P
W pewnym momencie odkryłam świetną księgarnię internetową w Wielkiej Brytanii, zapałałam żądzą wobec The Knitter's Almanac Elizabety Zimmermann i musiałam się przełamać.
Założyłam darmowe konto PayPal i zaczęłam płacić wszędzie, podając jedynie mój adres e-mail. Proste, szybkie, bez ujawniania danych - super :) No i można płacić w dowolnej walucie, nie trzeba mieć ani karty kredytowej ani konta walutowego :)
Miałam zamiar napisać dla Was tutorial, jak założyć konto PayPal, ale znalazłam w necie idealny kurs- zakładanie PayPala nie różni się znacząco od zakładania maila czy płatności bankowej - dacie radę!
UWAGA! PayPal to jakby dodatkowe konto bankowe, na które przelewacie sobie pieniądze i potem je wydajecie. Banki nie mają tu nic do rzeczy i nie ponosicie dodatkowych kosztów.
Kasiu J. - no to świetnie :) Koniecznie podziel się zdjęciem swojej pracy :) Minimyszo, widziałam, że skończyłaś golfik - czyżby kolej na kapuzę? :) Katiuszku, zawsze możesz się nauczyć dziergać :) Leno, czyżbym powinna zrobić w sumie 9 takich? ;) Okko, sweterek wyszedł rzeczywiście mięciutki. Jeśli idzie o niskobudżetową włóczkę, Chainette jest idealna. Poszeweczko, Emilko, dziękuję :) Jolu, wzór na sweterek daje sie łatwo dostosować, ja to zwykle od góry robione :) Dehaef, dziękuję :) Pelasiu, coś dziwnego stało się z linkiem, ale już poprawiłam, dziękuję :) Włóczkoteko, model też tak uważa ;) Asiu, instrukcję dedykuję Tobie i tym wszystkim, którzy piszą do mnie maile, żebym pośredniczyła w płatności ;) Pisząc o dogadywaniu się miałam raczej na myśli własnych przyjaciół, nie obcą w gruncie rzeczy bloggerkę ;)) A PayPal przydaje się częściej, niż wam się wydaje :)
Ponieważ ostatnio kilka osób zgłaszało, że nie mogą znaleźć sposobu na skontaktowanie się ze mną, dorzuciłam w prawej kolumnie plakietkę, zawierającą adres mailowy. Niby nic nadzwyczajnego, ale ciekawie robi się, gdy się w nią kliknie.
W zależności od ustawień komputera otwiera się okienko wyboru poczty, z jakiej chce się wysłać maila lub okienko tworzenia maila w programie pocztowym. I można od razu, bez kopiowania czy przepisywania, wysłać wiadomość do adresata.
Po pierwsze, potrzebny jest jakiś obrazek. Ja zrobiłam zwykły napis, ale można wykorzystać dowolną grafikę, udostępnioną w sieci za darmo. Na przykład takiego misiaczka:
Znalazłam ją na stronie PicGifs.com. Jest tam mnóstwo gotowych obrazków.
Osobiście uważam, że lepiej jest oprócz obrazka pokazać maila na piśmie, nie każdy może zawsze skorzystać z takiej formy wysyłania wiadomości. Ponieważ zaś sieć pełna jest botów sczytujących adresy mailowe podane pisemnie, lepiej jest nadrukować odpowiedni napis na obrazku.
I teraz zaczyna się magia ;)
Wejdź w ustawienia strony w bloggerze, a następnie w układ:
Dodaj gadżet typu Obraz.
W poszczególne pola wpisz, co następuje:
1. Kontakt / Napisz do mnie / E-mail - do wyboru, to twój tytuł ;)
2. Właściwy kod: W tym polu od razu wpisany jest początek adresu www, czyli http:// - te znaki trzeba skasować i wpisać zamiast nich mailto:mojadres@domena.pl Uwaga, nie ma tu żadnych spacji! Po dwukropku podaj swój adres :)
3. Własny obrazek.
4. Zaznaczcie okienko zmniejszania, dzięki temu obrazek dopasuje się do szerokości paska bocznego :)
I już - wystarczy zapisać i plakietka z mailem jest gotowa :)
Dehaef, nawet nie wiedziałam, że modne ;) Uwalniam włóczki po prostu ;) Kasiu, Bevo, nadrobiłam zaniedbanie :) Katiuszku, mnie też :)) Ewo, super, że się podzieliłaś :) Basiu, mam nadzieję, że to nic poważnego. Zdrowia życzę! Kasiudj, trzymam kciuki za skończenie i zadowolenie ze swojego dzieła :) Olaboga, cieszę się, że ci się spodobała akcja - może do kolejnej sama dołączysz? Ennaven, hurrrraaaa! ;) Urszulko, Ludwiko, dziękuję :)
Zgodnie z wczorajszą zapowiedzią - dzisiaj kod umożliwiający rozdzielenie gadżetów / widgetów (jakkolwiek by ich nie nazwać) graficznymi wstawkami.
Czego potrzebujemy?
1. Musicie znać szerokość swojego paska bocznego - u mnie to 290 pikseli (z 1060 całej szerokości bloga). Grafika, której użyjecie musi być o jakieś 30 pikseli węższa od paska.
2. Teraz trzeba znaleźć grafikę. Ja swoje różyczki wzięłam z bloga, na którym są darmowe elementy na strony internetowe. W Google najlepiej wpisać "dividers freebies" i przerzucić wyszukiwarkę na grafikę. Pamiętajcie, by nie wykorzystywać niczego, co nie jest oznaczone jako "free for personal use" (darmowe do użytku prywatnego), to kradzież!
3. Grafika prawdopodobnie będzie w rozmiarze nieodpowiednim do bloga - możecie ją zmniejszyć w dowolnym edytorze graficznym - GIMPie czy PicMonkey. Pamiętajcie, by była nieco węższa, niż wasz pasek boczny - o około 30 pikseli.
4. Teraz trzeba wgrać grafikę online - na Picasę, Imageshack, Fotosik czy gdziekolwiek, gdzie dostaniemy bezpośredni link do obrazka.
5. Czas na kod :) .sidebar .widget { border-bottom:0px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 80px; background-image: url(TU WKLEJ BEZPOŚREDNI LINK DO OBRAZKA); background-position: bottom; background-repeat: no-repeat; }
Liczba 80 w atrybucie "padding" oznacza odsunięcie obrazka od treści widgetu, pod którym się znajduje. Możecie przy niej pomajstrować w celu uzyskania najlepszego efektu :)
Wrzucamy wiecie, gdzie :)
Urso, dziękuję. To jeszcze nie koniec, muszę zrobić trochę miejsca w szafie. Tylko na razie szukam pomysłów na praktyczne i fajne rzeczy :) Milu, Panicz kończy za miesiąc trzy lata, to już Poważny Wiek - i bardzo rozgadany i pomysłowy ;) Przebojem ostatniego tygodna jest pytanie "A co jest w śjotku?", dzięki któremu nieco rozmontowałam i wyczyściłam maszynę do szycia ;) Anium, uwielbiam przeróbki i ponowne wykorzystanie materiałów :) Urszulko, obawiam się, że na razie tylko się uczę. Z utrudnieniami w dodatku. Bardzo trudno jest jednocześnie ćwiczyć i wyciągać małe paluszki spod stopki czy pedała. Ale Panicz nauczył się już nawijania nitek na szpulki, wie, gdzie co przestawić, jak owinąć nitkę... Mały pomagier :) Katrinko kochana, komputer, z tego co zauważyłam, nie gryzie (nie dotyczy współwłaścicieli komputera, zwłaszcza tych płci męskiej) - z większością moich instrukcji ciężko cokolwiek zepsuć (jedyna wymagająca większych zmian to ta na banner z klikalnymi linkami). A dziewczyny mogą poświadczyć, że ozdabianie bloga nie wymaga zbyt wiele czasu i wysiłku :) Będę zaglądać do Ciebie uważnie i czekać na Twoje szycie, co masz w planach?
Zgodnie z prośbą - ramka i cień, czyli jak w szablonach w nie niewyposażonych dodać efekt fotografii.
Kod: .post img {
margin: 0px;
padding: 0px;
background: #ffffff;
border: 9px solid #ffffff;
-webkit-box-shadow: 0 15px 10px -12px black;
-moz-box-shadow: 0 15px 5px 2px black;
box-shadow: 0 5px 5px -2px black;
}
Wrzucamy wiecie gdzie ;)
Polecam podłubanie przy cyferkach w kodzie, można osiągnąć fajne efekty. Podłubanie włącznie z usunięciem minusa przed 12 :) Pamiętajcie jednak, by pochopnie nie zapisywac pracy - albo twórzcie kopie zapasowe kodu :)
Drutefko, Nutinko, mnie na początku te ramki bardzo bawiły, ale teraz, gdy używam grafiki z napisem zamiast kombinować z czcionkami, wolę jednak bez :) Dziergam Sobie - mówisz - masz :)))
Tym razem minilekcja. Bo i wiele zachodu nie potrzeba.
Jeśli chcecie pozbyć się ramek i cieniowania, użyjcie poniższego kodu:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Oczywiście, podobnie jak poprzednie, dodajemy go w zaawansowanych ustawieniach projektanta szablonów:
Najlepsze w tej metodzie jest to, że gdy ramkę chcecie przywołać ponownie, kasujecie odpowiedni kawałek kodu - i wszystko wraca do ustawień pierwotnych.
PS Co Wam jeszcze sprawia trudność, co opisać? Podsuwajcie mi pomysły :)
Molly Mel, gratulacje :) Teraz czas wypróbować pozostałe lekcje :)
Ostatnio znów bawię się wyglądem swojego bloga (to w sumie dopiero początek, muszę tylko znaleźć chwilę...) i pomyślałam, że podzielę się z Wami swoją wiedzą - tym razem na temat wyśrodkowywania różnych elementów bloga.
1. Nagłówek bloga
a) jeśli obrazek w nagłówku wgrany jest jako "zamiast tytułu i opisu". #header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;}
b) jeśli obrazek w nagłówku wgrany jest jako "za tytułem i opisem". #header-inner {background-position: center !important; width: 100% !important;}
c) wyrównanie tekstu z obrazkiem: #header-inner {text-align: center ;}
d) i jeszcze taki fikołek: po lewej tekst, po prawej obrazek (tu trzeba pamiętać, by obrazek wstawiany w nagłówku miał mniejszą szerokość, niż blog): #header-inner {background-position: right !important; width: 100% !important;} .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}
2. Data umieszczenia posta: .date-header {text-align:center;}
Tym razem nie każę Wam jednak grzebać po kodzie HTML i nic kasować ;) Teraz wystarczy wejść w projektanta szablonów (Ustawienia->szablon->dostosuj), a tam zaawansowane->dodaj arkusz css (na samym dole listy). W okienko wystarczy wrzucić wybrane kody, oddzielając je enterem. I już.
DHF, rumienię się @^^@ Leno, Barbaro, żyrafa w środku, zebra na wierzchu :D Katrinko, w imieniu Panicza dziękuję :) Bryzeido, nie da się zaprzeczyć :) Gabrielo, to już prawie 3 lata. Co prawda nadal jest rozmiaru dwulatka, ale śmiga za trzech ;) A_psik - cieszę się, że kurs się przydaje. Mam nadzieję, że i dzisiejszy odcinek Ci w czymś pomoże :) Thebestthing - dziękuję za zaproszenie, jednak programowo nie biorę udziału w candy :) Unusual, Anno K, zapraszam częściej - staram się co jakiś czas wrzucić jakieś sekrety blogowe ;)
Jak zapewne widzicie, widgety w bocznym pasku mojego bloga mają podłożoną grafikę w postaci naciętej w ząbek wstążki - tak samo jest z linkami pod tytułem bloga. W różnych miejscach blogosfery widać rozmaite przykłady takiej ozdoby. Poniżej kilka linków do blogów/szablonów z dekoracją tego rodzaju.
Jak widać, można to zrobić w wersji minimalistyczno-eleganckiej i spontaniczno-szalonej. Wszystko zależy od tego, jaki szablon chcecie stworzyć.
Pierwszym krokiem musi być stworzenie odpowiedniej grafiki. Podejrzewam, że Wasze paski boczne mają około 200-300 pikseli - można to sprawdzić w projektancie szablonów bloggera. U mnie jest to właśnie 300px. Wasza grafika powinna być odrobinę węższa, np. 280px, a jej wysokość - można zaszaleć, ale ja osobiście preferuję blogi, w których wyglądzie "dzieje się" umiarkowanie dużo - zbyt intensywne dekoracje utrudniają skupienie na tekście i zdjęciach - tak więc wysokość proponuję zamknąć między 30 a 100px.
Grafikę można zrobić oczywiście w PicMonkey.
Prosta grafika - tło w postaci tkaniny i guziczek. Jeśli macie ochotę, możecie ją wykorzystać, albo wykombinować coś własnego.
Grafikę trzeba wgrać na jakiś serwer, jak poprzednio i mieć pod ręką bezpośredni link do niej (czyli od HTTP po PNG lub JPG).
Wejdźcie teraz w ustawienia HTML i wyszukajcie (Ctrl+F) taki ciąg znaków: .sidebar h2 {
W tym miejscu znajdują się ustawienia paska bocznego. Postawcie kursor po otwartym nawiasie klamerkowym, wciśnijcie enter i wklejcie (Ctrl+V) następujący kod: background:url(URL OBRAZKA)no-repeat; Zamiast niebieskiego, podkreślonego napisu wklejcie link do swojej grafiki i zapiszcie szablon. Taki sposób powoduje, że gdy dodajecie nowy widget w pasku bocznym, nie musicie robić do niego nowego nagłówka - tło podłoży się samo pod napis będący tytułem. Teraz pozostało jeszcze sprawdzić, czy tytuł jest widoczny na grafice - i ewentualnie zmienić czcionkę lub jej kolor. Jeśli grafika wyszła wam za duża, możecie zrobić ją od nowa, zmniejszyć (scale) w picmonkey czy innym edytorze graficznym (MS Paint, Gimp, KPaint). Pochwalcie się sukcesami w komentarzach :) Jeśli coś jest niejasne, także zapraszam do pytania, zwykle odpowiadam na priv albo aktualizuję wpis.
Pani Truskawko, zawsze możesz użyć tylko kawałków rzepa :) Ja miałam akurat sporo ścinków, więc chętnie je wykorzystałam. Postaram się uruchomić maszynę w tych dniach i dokończyć dzieło, jeszcze parę ładowarek ma za dużo swobody ;) Kasiu, ja tak mam zawsze. Ale to się mści na skuteczności działań, niestety. Tak więc - więcej prucia, więcej czytania kawałków jeszcze raz... Tyle, że się człowiek nie nudzi ;)
Danusiu, nie mam czasu siąść do maszyny, chciałam koniecznie wziąć udział w Kids Clothes Week, jak Ty, ale - cóż... Lexi, cieszę się, że kurs się przydał :)
Jadziu, dziękuję :) Czy próbowałaś już robienia skarpetek z mojego kursu? Udało się? :) Deilephilo, dzięki :) Najlepsze jest to, że mają różne wzorki i kolory, wystarczy zapamiętać, które są moje i bardzo łatwo szuka się w koszyczku :) Tonko, super - pochwal się koniecznie sukcesami :) Facenoface, zajrzałam na twój blog i nagłówek wyszedł ci prześliczny! Super! Pigmejko kochana, napisz dokładnie, jaki kurs byś chciała, bo nie wiem, co konkretnie miałaś na myśli :) Cieszę się bardzo, że ci się udało zrobić nagłówek :)) Bożydarze, nie kasowałam twojego komentarza, choć leciuchno trąci spamem, bo wydaje mi się, że informacja w nim zawarta może się komuś przydać. Trick polega na tym jednak, że program, którego dotyczy linkowany kurs, nie jest wieloplatformowy i wymaga sporo nauki - a mój kurs jest - jak mi się zdaje - łatwiejszy.
Kochane i Kochani - jeśli potrzebujecie innych kursów obsługi bloggera, dajcie znać, postaram się umieszczać kolejne :)
Oto część trzecia kursu, myślę, że ostatnia. No, chyba że czegoś nowego się nauczę ;)
Jeśli przyjrzycie się moim pozostałym blogom, zapewne spostrzeżecie, że nagłówki mają w sobie klikalne menu, czyli rózne skróty. Jak takie coś zrobić i u siebie?
Najpierw musisz przygotować banner w dowolnym edytorze graficznym.
Na Design Seeds znalazłam taki schemat kolorystyczny. Gdybym robiła prawdziwego bloga, linkom, czcionkom, nagłówkom i tak dalej nadałabym kolory w nim zestawione.
Banner z linkami powinien być nieco wyższy niż taki zwykły. Ja proponuję wielkość 900x450, dzięki czemu jest dużo miejsca na umieszczanie wszystkiego, co potrzebne. A gdy już skończysz i zostaną puste miejsca przy brzegach, możesz użyć polecenia Crop do przycięcia obrazka.
Tak mniej więcej wygląda banner w wersji jak w poprzednich kursach - jest tytuł, podtytuł jakaś ozdoba.
A tu dodałam menu - oczywiście tylko od ciebie zależy, co się w nim znajdzie.
Dorzuciłam też trzy kółeczka na skróty do takich stron, jak Pinterest, Facebook i Ravelry (wszelkie inne social media też są mile widziane ;))
Ja zrobiłam po prostu literki, stylizowane na oryginalne loga, ale możesz poszukać w necie "social media silhouettes" - a potem wkleić je w odpowiednie miejsca.
Zapisz swoją pracę na dysku komputera. Teraz musisz wgrać ją na jakiś serwis przechowujący zdjęcia: Picasę, Imageshack, Photobucket... Skopiuj bezpośredni link do zdjęcia.
I tu zaczyna się magia HTML i mapowanie obrazka ;)
Zacznij od wejścia na stronę Image Map Tool i we wskazane niżej okienko wklej adres obrazka, a następnie kliknij Start Mapping Your Image.
Pojawi się okienko z odliczaniem sekund, więc cierpliwości ;)
O, jest link :)
Interesuje cię narzędzie Rectangle (prostokąt). Kiedy klikniesz ten klawisz, pojawi się pole mapowania.
Oznaczenia:
1 - pole mapowania, kwadraciki na rogach służą do zmiany kształtu i rozmiaru.
2 - tytuł strony - tego pola nie trzeba uzupełniać.
3 - zapisz - po kliknięciu dane pole będzie zapamiętane, aby utworzyć nowe pole, znów kliknij Rectangle.
W polu "Link for this map" wpisz/wklej odpowiedni adres internetowy.
Postępuj tak ze wszystkimi miejscami, które mają być klikalne, które mają prowadzić do innych adresów.
Kiedy skończysz, poszukaj po prawej klawisza Get your code poniżej przycisku Rectangle.
Na kolejnej stronie kliknij HTML Code.
W ramce jest kod, ale nie będziesz potrzebować całego. Nie zamykaj strony, tak na wszelki wypadek.
Teraz zaczyna się Czarna Magia ;)))
Wejdź do ustawień bloga, tam, gdzie uruchamia się edytor szablonu. Zamiast wchodzić do niego, wybierz opcję "Edytuj HTML". Wstaw kursor w okno z kodem i za pomocą Ctrl+F znajdź <header>
i skasuj kod znajdujący się pomiędzy znacznikami <header>
i </header> wraz z nimi samymi.
(kliknij obrazek, by go powiększyć)
Zapisz szablon. Od tego momentu twój blog nie ma nagłówka [wstawić szatański chichot].
Przejdź do sekcji Układ w menu i w miejscu, gdzie poinien być na główek, nad postami, utwórz nowy gadżet HTML. Wklej do niego kod z mapą obrazka, na końcu dodaj
i zapisz.I już :)
Mam nadzieję, że kurs się przyda i że nie będziecie bać się pogrzebać w głębi swojego blogu. Blogger nie oferuje zbyt ciekawych opcji edycji szablonu, ale jak widać, można obejść standardowe rozwiązania i zrobić to po swojemu.
Jeśli wykorzystacie kurs, miło mi będzie, jeśli dacie mi znać :) A po prawej możecie wziąć bannerek z linkiem do kursów, jeśli chcecie je podlinkować u siebie :)
MarioG, cieszę się, że mój tutek (och, jak ja lubię to słówko) okazuje się przydatny :)