O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Batonik nad kategoriami

PLATON czekoladowy baton - www.twozywo.art.plKilkukrotnie zetknęłam się z zapotrzebowaniem na możliwość umieszczenia jakiegoś banerku w dobrze widocznym miejscu nad kategoriami. Najprostsza instrukcja: zrób miejsce i umieść tam baner korzystając z pozycjonowania względnie bezwzględnego. Jestem przekonana, że spora część z was nie cierpi gdy wyjaśniam coś odsyłając do pozycjonowania względnie bezwzględnego. Wydaje się to zbyt skomplikowane i może rzeczywiście nie jest to zabawa dla zielonych ale nie jest też trudna. Gdy raz zrozumie się o co chodzi bez problemu można wykorzystać pozycjonowanie na wiele różnych sposobów. Dzisiaj dzięki niemu umieścimy banerek pod tytułem a nad kategoriami.

Potrzebne będą:

  • 1 banerek
  • niewielki kod html
  • arkusz stylów

Dla przykładu pozioma belka wisi sobie na blogu laboratorium.blox.pl i dla wygody na jej przykładzie dzisiaj pracować będziemy. Nowy banerek umieszczę natomiast na moim blogu towarzyszącym.

1. Baner, 470x50px

Przygotuj sobie banerek. Powinien być w postaci poziomej belki (nad kategoriami taki najprawdopodobniej najlepiej będzie wyglądać).

Wysokość takiego banerka w zasadzie może być dowolna – możemy później się dostosować do tej wysokości. Szerokość jest już większym problemem. Jeżeli banerek ma być umieszczony tylko nad kategoriami to nie powinien być od nich sporo szerszy. Musimy sprawdzić ile miejsca potencjalnie mamy w tym miejscu. Upraszczając, jeżeli oprzemy się na maksymalnej szerokości ilustracji w notkach to nie będzie to zła liczba.

Ja zdecydowałam się na niewielki banerek, który zmieści się niemal we wszystkich szablonach. Jego wymiary to 470x50px i do tych wymiarów dostosowałam opis w arkuszu. Jeżeli zdecydujesz się na obrazek o innych parametrach pamiętaj aby uwzględnić zmiany w css.

przykładowy banerek

Gotowy banerek umieść w zasobach bloga.

2. Kod HTML

Umieszczając często takie małe obrazki-banerki zazwyczaj pamiętam co mam zapisać i kiedy jakich znakó użyć ale dla pewności zawsze warto mieć pod ręką małą ściągawkę w postaci kursu html dla zielonych.

Obrazek w html zapisujemy w następującej postaci:

<img src="/resource/przykladowy_baner.png" alt="Przykład" />

Do tego musimy dodać jeszcze link. Otaczamy więc nasz obrazek linkiem:

<a href="http://szablonykatemac.blox.pl/html"><img src="/resource/przykladowy_baner.png" alt="Przykład" /></a>

Należy pamiętać, że obrazek musi być otoczony linkiem. Przed kodem ilustracji powinien być tag otwierający z adresem i innymi informacjami a po kodzie obrazka koniecznie musi być tag zamykający link. Jedną z najczęstszych poprawek jakie u kogoś robię to właśnie porządek w polu na kod html: sprawdzam czy wszystkie otwarte tagi mają zamknięcia bo bez tego blog często się sypie i nie ma to nic wspólnego z szablonem.

Mamy już obrazek z linkiem ale aby móc nim swobodnie dysponować będziemy musieli jeszcze go nazwać. Tutaj też jest kilka różnych sposobów, począwszy od dodania identyfikatora bezpośrednio do linku. Najprostsze wydaje mi się umieszczenie naszego kodu w elemencie blokowym o konkretnym identyfikatorze. Znów więc otaczamy to co do tej pory napisaliśmy dodatkowym kodem:

<div id="sBaner"><a href="http://szablonykatemac.blox.pl/html"><img src="/resource/przykladowy_baner.png" alt="Przykład" /></a></div>

Znów pamiętamy, że skoro coś otworzyliśmy to musimy to także zamknąć. Naszemu elementowi dodaliśmy identyfikator. Będziemy go pozycjonować absolutnie więc chodzi nam o pojedynczy element i dlatego użyłam identyfikatora. Jeżeli dany kod będziemy chcieli dodać na stronie kilkukrotnie to należy pamiętać aby zamiast identyfikatora użyć klasy.

Pogrubione fragmenty kodu html to elementy które należy zmienić. Jeżeli banerek ma się wyświetlać w innym miejscu niż blog w zasobach którego jest obrazek to konieczne jest podanie poełnego adresu grafiki.

3. Pozycjonowanie elementu przy pomocy CSS

  • najpierw musimy zrobić miejsce na banerek

Ta część instrukcji zależna jest od html szablonu jaki używasz. Jeżeli interesuje cię dlaczego to zachęcam do zapoznania się z notką dotyczącą układów. Tym razem interesuje nas czy kategorie sa pierwszym elementem umieszczonym w szerokiej szpalcie.

Ja najczęściej korzystam z szablonu Spokojnego, ale nie zawsze więc proponuję zerknąć w edycję bloga i dowiedzieć się który html jest tam wybrany. Jeżeli jest to Niebieski, Klasyczny, ThemeE, ThemeF, ThemeG, ThemeH czy też ThemeI to miejsca na banerek szukać musisz przy kilku selektorach. Zmiany będziesz wprowadzać w selektorach #BlogKategorieBox, #SkomentujBoxEtykieta i #StatycznaBox.

Jeżeli nie wymieniłam Twojego szablonu powyżej to wszystko jest ok. i możesz korzystać z tej instrukcji dosłownie.

Miejsce na banerek wygospodarujemy przesuwając nieco szeroką szpaltę (we wspomnianym wcześniej przypadku przesuwać będziemy trzy elementy a nie jeden). Powiedziałabym, że to nie ma znaczenia czy użyjemy w tym celu marginesu czy dopełnienia i to będzie w większości przypadków prawda. Nie zawsze jednak więc pamiętaj, że dla Twojego szablonu może być lepszy margines niż dopełnienie. Ja użyję dopełnienia. Wielkość dopełnienia zależeć będzie od wysokości banerku.

#BlogSzerokaSzpalta {
padding-top: 70px;
}

I voila mamy miejsce. Teraz musimy tylko przenieść banerek bo na chwile obecną to powinien się jeszcze wyświetlać wśród elementów pod wąską szpaltą.

  • przenosimy banerek

Najpierw upewnij się, że wśród cech przy selektorze #BlogGlownyBox znajduje się właściwość position o wartości relative. Jeżeli nie to oczywiście zadbaj o to aby była.

#BlogGlownyBox {
position: relative;
}

baner- jakie odstępyTeraz wykorzystamy nasz nowy banerek umieszczony w divie o identyfikatorze sBaner. Musimy określić sposób jego pozycjonowania (bezwzględnie) położenie (względem górnej i lewej krawędzi). Wielkość tych liczb zależeć będzie od wysokości twojego pola tytułowego i lewego odstępu od krawędzi bloga. To w zasadzie wystarczy, będziemy mieli określone minimum. Przyda się jeszcze określenie wielkości (width i height).

#sBaner {
position:absolute;
top:300px;
left:20px;
}

Przeglądarka chcąc wyróżnić linki spośród innych elementów nadaje im pewne nietypowe cechy. W przypadku linku w postaci tekstu jest to kolor niebieski i podkreślenie. To są cechy, które w większości szablonów są opisane inaczej. Linki w postaci ilustracji mają 2px ramkę. Proponuję to zmienić. Możemy to zrobić na dwa sposoby: tylko w odniesieniu do banerku lub też bardziej uniwersalnie w odniesieniu do wszystkich obrazków-linków na blogu.

#sBaner a img {
border:none;
}

a img {
border:none;
}

I gotowe.

piątek, 05 lutego 2010, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
olciaky
2010/02/06 17:41:01
Dzięki Kate, to coś o co pytałam:*
-
xdevx
2010/02/11 01:11:29
Dodajmy, że w ten sposób można przesuwać także inne elementy - np. boks z kategoriami, tak jak ja zrobiłem u siebie na Rzucie oka na świat (rzutoka.blox.pl). Bardzo przydatna sprawa, bo to jedna z niewielu możliwości zrobienia nieszablonowego - nomen omen - szablonu :)

Pozdrawiam,
Artur
-
nandas
2010/03/18 19:34:19
Ja też takie coś już dawno zrobiłem u siebie - można gdziekolwiek ustawić reklamę, button, tekst, linki i inne - padding i inne czynią cuda ale jak zawsze bardzo mało miejsca jest w polach html i na większość pomysłów już nie starcza pola :(

Zastosowałem w blogach:
obsługa.blox.pl
gameold.blox.pl (reklamy i inne)
skolioza.blox.pl (reklamy i buttony)
treningi.blox.pl (reklamy)
przydatneskrypty.blox.pl (reklamki) prawie na 50 swoich blogach wykorzystałem podobny sposób. Pozdrawiam
-
maxkubamax
2010/09/09 13:29:31
Kto ładnie ustawi bądź zaprojektuje cr9 wygląd itp.? Proszę o kontakt gg:12645695
lub pcx@wp.pl
-
cukrowawrozka
2011/08/09 14:59:34
A ja mam jakiś problem. :( Udało mi się przesunąć szeroką szpaltę w dół, ale banerek nie wyświetla się i nie mam pojęcia, co może być źle..
-
kate_mac
2011/08/09 19:10:55
@cukrowawrozka
piękny blog, ten wzorek polkadot w tle jest cudny a i kolory są słodkie :-D

ja widzę banerek więc zakładam, że sobie poradziłaś - super

przy okazji zauważyłam, że wkleiłaś kod skryptu google-analytics do arkusza css - pole na kod html jest w części ustawienia, boczna szpalta (blox zrobił tym notkę: Monitoruj ruch czyli czym jest Analitycs)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...