środa, 17 lipca 2013

Jak zrobić tło graficzne tytułów w pasku bocznym

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 :)

9 komentarzy :

facenoface pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Hej!
Wchodzę na PicMonkey i co wybieram?

Truscaveczka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Facenoface, zerknij do wcześniejszych kursów nagłówkowych, tam jest opisane, jak zrobić grafikę, która nam odpowiada :)

facenoface pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ok! Dzięki!:-*

klaudyna pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

dzięki za fajny kursik! mam tylko problem z kodem HTML, bo u mnie nie ma takiego miejsca z tym sidebar...
Możliwe to?

Pigmejka pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Ja też nie mogę znaleźć tego .sidebar ...

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Nie wiem, czy autorka się zgodzi na linkowanie, ale naszukałam się, bo u mnie też nie było tego sidebar. Tu jest wyjaśnienie (w niektórych szablonach jest inaczej i trzeba coś dokleić):
http://www.blogbulk.com/2008/11/blogger-sidebar-titles-customization.html

dom za końcem świata pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

ps. niestety na razie nie udało mi się dopasować grafiki tak, żeby to dobrze wyglądało. Warto skorzystać z funkcji "podgląd szablonu", zanim się coś zmieni ;))

© Roxanne pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Nie wiem czy to odczytasz, ale mam problem to dodaniu, bo wyjeżdża mi obrazek na posta po dodaniu . ;x

::MaGic Lov:: pisze... Best Blogger Tips Odpowiedz Best Blogger Templates

Czy mogłabys mi powiedzieć jak zrobiłaś że te ikonki sa obok siebie? odpisz prosze u mnie, będe bardzo wdzięczna za pomoc :*

Step 7: Then click on the save template.