O szablonach, ich projektowaniu i moich z tym zmaganiach...

Ikonkowe górne menu

Od dłuższego czasu dodaję do swoich szablonów kolejny element. Jest nim ikonkowe menu. Cel do jakiego będzie takie menu służyć może być dowolny i jest zależny od wybranych ikon. Nie każdy szablon będzie je miał opisane, w niektórych przypadkach nie ma na takie menu wygodnego miejsca.

Jest to niewielkie obrazkowe menu i raczej nie będzie mogło służyć do czegoś innego bo za mało w nim miejsca ale zmieniłam sposób opisania takiego menu więc teraz nie są to już narzucone przeze mnie trzy czy cztery ikony ale wygodne rozwiązanie zapewniające szerszy wybór.

Jeżeli w Twoim szablonie nie ma takiego menu to bardzo łatwo je sobie zrobić i nie trzeba stosować tak skomplikowanych rozwiązań jak moje. Ja zdecydowałam się na taki sposób aby w szablonach, w których zaplanuję takie miejsce wszystko co jest potrzebne do stworzenia obrazkowego menu było od razu gotowe i idealnie wpasowane w szablon.

Aby powstało takie menu potrzebne są trzy rzeczy:

  • kod HTML, który tworzy element (sprawia, że linki działają, etc.)
    odpowiednie niewielkie obrazki (najwygodniej wykorzystać ikonki w postaci zwykłych
  • graficznych plików: png, jpg czy gif)
  • opis w szablonie (CSS), który umiejscowi ikonki we właściwym miejscu

Wszystkie te rzeczy są zależne od siebie i występują w związku ze sobą. W najprostszej wersji wystarczy pliki graficzne dodać do zasobów bloga. Przygotować kody dla poszczególnych ikonek: wystarczy bardzo prosty kod ilustracji otoczony kodem linku. Następnie należy ustawić kody ikonek w wybranej przez siebie kolejności i całość otoczyć divem o identyfikatorze menuIkon. Takiemu właśnie identyfikatorowi w szablonie przypisałam położenie w górnej części bloga. Jeżeli cokolwiek chcesz przenieść to musisz to nazwać i następnie opisać. Opis już jest więc wystarczy wpisać właściwą nazwę. I gotowe.

Teraz pora na nieco dłuższą instrukcję uwzględniającą ilustracje.

Kiedyś nieco inaczej opisywałam te ikonki. Może się zdawać, że teraz jest to nieco bardziej skomplikowane ale wcale tak nie jest. Dodałam tylko więcej ikonek dopasowanych do szablonu ale to przecież nie znaczy, że nie możesz po staremu skorzystać tylko z trzech.

Kod podzieliłam na dwie zasadnicze i niezależne od siebie części

Położenie elementu

Pierwsza odpowiedzialna jest za przeniesienie elementu w wybrane przeze mnie miejsce. Jest to właśnie div o identyfikatorze menuIkon. Pamiętaj, że znacznik musi mieć zarówno część otwierającą jak i zamykającą więc nie zapomnij o tym końcowym /div. W środku (tam gdzie napisałam dowolna zawartość) wstawiasz kod ikonek.

id menuIkon


Kod ikonek to właśnie ta druga część. Nie ma nic wspólnego z położeniem elementu a kolejność zależna jest od kolejności w jakiej sobie ustawisz kody. Masz tutaj kilka możliwości:

  1. Możesz skorzystać z zewnętrznego srwisu
  2. Możesz skorzystać z własnych ikonek. Internet jest ich pełen więc możesz sobie znaleźć takie, które będą najlepiej ci odpowiadały stylem czy tematem.
  3. Możesz skorzystać z dopasowanych do szablonu, wybranych przeze mnie ikon. Wadą tego rozwiązania jest fakt iż jest ich tylko kilka i niekoniecznie trafiać będą w wybrane przez ciebie tematy.

1. Zewnętrzny serwis do śledzenia (typu follow us)

Zapewne jest ich wiele ale całkiem spora popularnością cieszy się przykładowo AdThis.

AddThis

2. Własne ikonki

Tutaj rzecz jest bardzo prosta. W szablonie opisuję jakiej wielkości powinny być takie ikonki. Sprawdź to ale jest duże prawdopodobieństwo, że będzie to 32px. Wystarczy więc, że w ramach kodu menuIkon wpiszesz kody linków z ilustracjami wybranych rzez ciebie ikon. Oczywiście pliki graficzne powinny znaleźć się najpierw w zasobach bloga. Kod dla pojedynczej ikonki wyglądać będzie mniej więcej tak:

ilustracja z linkiem

Możesz więc wybrać sobie dowolne miejsca do linkowania i ilustracje je reprezentujące. Możesz linkować do serwisów społecznościowych, innych stron internetowych, blogów czy nawet do podstron na własnym blogu. Co sobie wymyślisz.

Icon Archive

3. Obrazki dopasowane do szablonu

Tutaj wybór jest z góry określony i ograniczony więc wszystko zależy od pomysłu na to menu. W każdym szablonie, w którym umieszczam takie menu opisuję też ikonki w stylu dopasowanym do szablonu. Rzecz powstaje przez zastąpienie zwykłego tekstu obrazkiem. Najpierw przypisuję elementowi tło w postaci obrazku z ikonką a następnie chowam napis. Tyle jeżeli chodzi o sekrety od kuchni.

Przykładowo kod dla elementu kontaktowego wyglądał będzie tak:

mMail kod dla kontaktu

Jak widać nie ma tu adresu żadnej ilustracji. Jest normalny link, taki jaki umieściłbyś także w poprzedniej wersji ale elementem linkującym nie jest ilustracja (img) a zwykły tekst (w tym przypadku słowo kontakt). Najważniejsza część to ta na czerwono. Link otaczam divem o odpowiednim identyfikatorze. Właśnie dzięki tym identyfikatorom mogę w szablonie powiedzieć, że link kontaktowy ma wyglądać tak a nie inaczej.

Cała trudność i tajemnica polega teraz na tym, że aby pojawiły się moje ikonki trzeba wpisać właściwe identyfikatory. Staram się być konsekwentna więc zestaw zazwyczaj wygląda tak:

  • mRSS - ikona kanału RSS
  • mNews - ikona newslettera, najczęściej pędząca koperta
  • mMail - ikona strony kontaktowej, najczęściej znak małpy (@)
  • mFejs - logo facebooka (biała, bądź niebieska litera f na białym bądź niebieskim tle)
  • mBlip - logo blipa (pisankowa litera b, biała bądź pomarańczowa na odpowiednio białym bądź pomarańczowym tle
  • mTwit - logo twittera (biało cyjanowa kolorystyka, geometrycznie zaokrąglona litera t bądź ptaszek
  • mTumb - logo tumblra (ciemno niebieska kolorystyka, litera t pisana egipcjanką)
  • mSoup - logo strony soup.io (napis soup)
  • mPin - logo strony pinterest (czerwona kolorystyka, litera P stylizowana na szpilkę)

Nie zawsze jednak wszystkie te ikonki opisałam więc jeżeli zależy ci na jakimś konkretnym serwisie zdecyduj się na własne ikonki.

Kod dla wspomnianych wyżej elementów wyglądał będzie analogicznie jak dla kontaktu. Jeżeli ktoś ma jakieś wątpliwości czy nie ma pewności że zrozumiał to poniżej dokładniejszy opis jak skorzystać z poszczególnych ikonek.

Ikonka newslettera - identyfikator mNews

mNews kod dla newslettera

Oczywiście adres służący do zapisywania się na newsletter to nie będzie blox.pl Aby poznać adres newslettera trzeba go najpierw włączyć w edycji bloga w części:

edycja blogu -> USTAWIENIA -> BOCZNA SZPALTA -> Włączyć newslettery na blogu? - Link

Na starym kodzie działa tylko opcja link albo nie. Po włączeniu funkcji można przejść na bloga i na końcu kolumny z treścią poboczną znajdzie się opcja zapisania się na newsletter. Wystarczy skopiować adres znajdującego się tam linku i wstawić go w odpowiednim miejscu w kodzie HTML.

Ikonka subskrypcji RSS - identyfikator mRSS

mRSS kod dla kanału RSS

Kanał RSS jest dostępny na każdym bloksie. W lipcu 2012 nastąpiło małe zamieszanie ale to w żaden sposób nie wpłynęło na fakt, że adresy subskrypcji RSS dostępne są na każdym blogu na blox.pl Normalnie link do RSS wpisów wyświetlany jest w starym kodzie obok kategorii i stamtąd można go skopiować. Kanałów jest jednak więcej: można subskrybować wszystkie komentarze albo wpisy z tylko jednej kategorii... Aby poznać te adresy trzeba jednak zerknąć do źródła strony (Ctrl+U) i odszukać je w nagłówku (head). Będą gdzieś około 85 linijki, zaraz po adresie arkusza.

Jeżeli zdecydujesz się na adres RSS wszystkich wpisów to możesz ukryć tek, który wyświetla się obok kategorii:

#BlogRss {display:none;}

Ikonka kontaktu - identyfikator mMail

mMail kod dla kontaktu

Kontakt z autorem bloga zawsze się przyda. Polecam adres mailowy ale w gruncie rzeczy jakakolwiek możliwości zostawienia wiadomości dla właściciela bloga będzie mile widziana. Jeżeli nie chcesz udostępniać swojego adresu mailowego to może wpisz tutaj adres strony w serwisie z którego często korzystasz. Jeżeli chodzi o adres mailowy to polecam stworzenie strony kontaktowej (jako jednej ze stron statycznych na blogu) i tam umieszczenie adresu wraz z zasadami kontaktu.

Istnieje też możliwość wpisania polecenia automatycznego otwierania systemu pocztowego użytkownika. Wtedy po kliknięciu w link użytkownik będzie mógł od razu przejść do pisania maila. W takim przypadku zamiast adresu zaczynającego się od protokołu http:// należy wpisać polecenie mailto:adres@mailowy - gdzie oczywiście zamiast adres@mailowy wpisujesz wybrany przez siebie adres. Pamiętaj że pomiędzy mailto, dwukropkiem a adresem nie ma żadnej spacji.

Ikonka facebookowego fanpege'u - identyfikator mFejs

mFejs kod dla facebookowego fanpege'u

Facebook to jeden z najpopularniejszych serwisów społecznościowych. Wcale nie trzeba być jego wielkim miłośnikiem aby móc wykorzystać jego możliwości. Fanpage na facebooku może ułatwić też komunikację z czytelnikami. Najczęściej jednak służy do promowania bloga i wpisów na nim umieszczonych.

Ikonka blipa (serwis miroblogowy) - identyfikator mBlip

mBlip kod dla mikrobloga na blipie

Blip to serwis społecznościowy łączący w sobie funkcje mikrobloga i komunikatora. Można czatować ze znajomymi, śledzić ciekawych ludzi i publikować statusy do 160 znaków. Jedną z zalet serwisu są tagi, które pozwalają śledzić dyskusje na dany temat, np. #blox. Serwis należy do spółki gadu-gadu.

Ikonka mikrobloga w serwisie twitter - identyfikator mTwit

mTwit kod dla twittera

Twitter to serwis społecznościowy oferujący możliwość mikroblogowania (140 znaków) i śledzenia wpisów ciekawych osób. Serwis można wykorzystać zarówno do promowania własnych wpisów jak i do utrzymywania kontaktu z czytelnikami.

Ikonka mikrobloga w serwisie tumblr - identyfikator mTumb

mTumb kod dla tumblra

Tumblr to platforma mikroblogowa, jeden z najpopularniejszych na świecie serwisów do blogowania. Możesz w bardzo prosty sposób publikować teksty, zdjęcia, cytaty, linki, muzykę i klipy wideo...

Ikonka soup.io - identyfikator mSoup

mSoup kod dla soup.io

Soup to serwis mikroblogowy umożliwiający bardzo łatwe publikowanie multimediów: linków, cytatów, video, plików dwiękowych ilustracji etc.

Ikonka pinterest - identyfikator mPin

mPin kod dla pinterest

Kolejna platforma blogowa do dzielenia się treścią. Przybiera formę tablicy na której użytkownik przypina swoje ilustracje.

Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...