Szablon na starym kodzie, dla blogów na blox.pl. -500px-

Menu z ikonkami społecznościowymi

W pierwszej kolejności odsyłam na stronę zbiorczą dotyczącą dodawania takiego obrazkowego menu. Polecam też notki z bloga szablonykatemac.blox.pl na temat takiego menu. Najlepiej spojrzeć na chmurkę tagów i skorzystać z notek otagowanych: ikonkowe menu. Jakaś bardziej szczegółowa notka powinna się tam znaleźć, tak dla bardzo zielonych.

Położenie ikonek u góry

Aby ikonki (albo cokolwiek innego) pojawiły się w górnej części bloga (w tym przypadku nad topem) trzeba kod ikonek-linków ubrać w div o identyfikatorze menuIkon i wstawić w polu na kod HTML.

id menuIkon

Jako tą dowolną zawartość należy wpisać kod poszczególnych ikonek.


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. Możesz też skorzystać z tych, które przygotowałam i już umieściłam w szablonie. Wadą tego rozwiązania jest fakt iż jest ich tylko kilka i niekoniecznie trafiać będą w wybrane przez ciebie tematy.

1. Własne ikonki

Tutaj rzecz jest bardzo prosta. Wybierasz strony do których chcesz linkować, szukasz obrazków, które najlepiej będą je reprezentowały (np. na IconArchive.com pamiętaj tylko o przeczytaniu licencji) i po dodaniu obrazków do zasobów bloga tworzysz odpowiedni kod. W tym szablonie ikonki umieszczone nad topem nie powinny być wyższe niż 32px.

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.

Wystarczy, że na koniec całość otoczysz divem o identyfikatorze menuIkon i po sprawie.

Icon Archive

 

2. Obrazki wstawione przeze mnie do szablonu

Tutaj wybór jest z góry określony i ograniczony więc wszystko zależy od pomysłu na to menu, od tego do jakich stron chcesz w tym miejscu linkować. 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 dla elementu kontaktowego kod będzie wyglądał  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 jest nie 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 samo ale aby nie było watpliwości oto lista dla tego szablonu:

  • mRSS - ikona kanału RSS
  • mNews - ikona newslettera, najczęściej pędząca koperta
  • mMail - ikona strony kontaktowej, najczęściej znak małpy (@)
  • mHome - ikonka domku, symbol powrotu na stronę główną
  • 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)
  • mTwit - logo twittera (biało cyjanowa kolorystyka, 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ę)
  • mInst - logo strony związanej z Instagram (symbol aparatu fotograficznego)

Czasami mogą się też pojawić niektóre z tych ikon:

  • mTube - logo YouTube
  • mVime - logo vimeo
  • mGoog - logo google (mała szeryfowa litera g)
  • mBlgg - logo bloggera (duże B, pomarańczowa kolorystyka)
  • mWord - logo wordpress.com
  • mOnet - logo blog.pl (mała litera b albo inne logo związane z onet.pl)
  • mBlox - logo blox.pl (otwarte pudełko)

--- przykładowy kod w wersji tekstowej ---

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 graficzne podpowiedzi.

Ikonka newslettera - identyfikator mNews

mNews kod dla newslettera

Ikonka subskrypcji RSS - identyfikator mRSS

mRSS kod dla kanału RSS

Ikonka kontaktu - identyfikator mMail

mMail kod dla kontaktu

Ikonka powrotu na stronę główną - identyfikator mHome

mHome kod dla powrotu na stronę głowną

 


Ikonka facebookowego fanpege'u - identyfikator mFejs

mFejs kod dla facebookowego fanpege'u

Ikonka blipa (serwis miroblogowy) - identyfikator mBlip

mBlip kod dla mikrobloga na blipie

Ikonka mikrobloga w serwisie twitter - identyfikator mTwit

mTwit kod dla twittera

Ikonka mikrobloga w serwisie tumblr - identyfikator mTumb

mTumb kod dla tumblra

Ikonka soup.io - identyfikator mSoup

mSoup kod dla soup.io

Ikonka pinterest - identyfikator mPin

mPin kod dla pinterest

Ikonka instagram - identyfikator mInst

mInst kod dla pinterest


 Ikonka YouTube - identyfikator mTube

mTube kod dla YouTube

 Ikonka Vimeo - identyfikator mVime

mVime kod dla vimeo

 Ikonka serwisu google - identyfikator mGoog

mGoog kod dla serwisów google

Ikonka serwisu blogger - identyfikator mBlgg

mBlgg kod dla blogów w domenie blogspot.com (Blogger)

Ikonka blogowego serwisu onet.pl - identyfikator mOnet

mOnet kod dla blogów w domentach blog.pl o blog.onet.pl

Ikonka wordpress.com - identyfikator mWord

mWord kod dla wordpress

Ikonka blox - identyfikator mBlox

mBlox kod dla blox

 


Na koniec moja ikonka. Czasami pytacie się jak wstawić banerek odsyłający do mojej strony z szablonami. Taki banerek nie jest czymś wymaganym przeze mnie. Nawet zwykły tekstowy link nie jest konieczny (tylko mile widziany jak nie wiesz jak go dodać albo nie chcesz linkować do mojego bloga to nie ma problemu - jedyny warunek korzystania to komentarz na blogu z pobieranym szablonem). Co sprytniejsi wykorzystują różne obrazki z nazwą mojego bloga i sami robią sobie banerki.

Pomyślałam więc, że może ktoś będzie wolał dodać moją ikonkę w takim małym menu (co nie zawsze będzie najlepszym pomysłem ale co tam...).

Ikonka mojego bloga z szablonami - identyfikator mStyl

mStyl kod dla ikonki z odnośnikiem do strony z szablonami




Follow Me on Pinterest

Spis treści - przykładowy tytuł
Tytuł boksu - przykład

Do uporządkowania elementów w bocznej szpalcie używam dwóch klas: boks i tyt. Boks to klasa pojedynczego pudełka do którego pakuję przeróżną zawartość. Jeżeli potrzebuję zatytułować element to dodaję pudełko opisane klasą tyt, którą opisałam w szablonie na wzór innych etykiet. Przykładowy kod będzie wyglądał mniej więcej tak:

Jeżeli potrzebujesz dokładniejszych informacji zapraszam do przejrzenia notek na blogu szablonykatemac.blox.pl

Szczególnie przydatne w dodawaniu takiego boksu mogą okazać się te notki: