Zmiany na blogu- dodawanie mapowanego nagłówka

Jak widzicie mam nowy nagłówek i mam nadzieję, że Wam podoba się równie mocno jak mnie:) Przy okazji chciałam z Wami podzielić się użytecznymi wiadomościami, dzięki którym bez znajomości HTML i CSS można wykonać w miarę przyzwoicie wyglądający nagłówek na bloga, na którym to nagłówku będziemy mieć klikalne pola wyboru.

Jeśli chcemy, aby nagłówek składał się z jednego obrazka, na który można klikać w wielu miejscach i zostać przeniesionym po kliknięciu w różne miejsca na naszym blogu, to w tym przypadku sięgniemy po mapowanie obrazu.

Mapowanie obrazu pozwoli nam stworzyć na jednym obrazku różne pola. Jeśli więc na przykład na naszym obrazku narysujemy sobie buttony, to aby były one użyteczne i by można było klikać je, należy nałożyć na nie mapy.

Możecie skorzystać z różnych programów, które mapowanie ułatwiają. Ja polecam Wam darmowy program online: IMAGE MAPS. Z nim wstawicie klikalne elementy na swoim obrazku w kilka sekund i nie musicie dosłownie na niczym się znać.

Kiedy już mamy zmapowany obrazek i kod HTML, wygenerowany do niego, to kod ten będzie trzeba umieścić zamiast nagłówka na naszym blogu.

Musimy więc dodać sobie na blogu dodatkowe pole 'Dodaj gadżet'.

To pole pojawi się nad polem nagłówka w widoku 'Układ'.

W nie  wkleimy nasz kod HTML.



Jak dodać dodatkowe pole nad nagłówkiem?

Edytujemy nasz szablon i wyszukujemy w nim:


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TYTUŁ BLOGA (Nagłówek)' type='Header'/>

Zmieniamy wartości na:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='TYTUŁ BLOGA (Nagłówek)' type='Header'/>

Zapisujemy i gotowe:)

Teraz po wejściu w 'Układ' mamy od góry: 'Dodaj gadżet' | 'Nagłówek'| 'Dodaj Gadżet'

Klikamy w najbardziej na górze umiejscowiony 'Dodaj gadżet'  i dodajemy 'HTML/JavaScript'. Wklejamy nasz kod HTML zmapowanego obrazka i zapisujemy.

Pola nagłówka nie musimy całkiem usuwać. Wystarczy je przenieść gdzieś, gdzie nie będzie przeszkadzało. Możemy je także opróżnić, aby nic się nam w nim nie pokazywało. Naszym nagłówkiem będzie od tej pory zmapowany obrazek.


Teraz możemy chcieć naszą mapę obrazu, czyli nasz nowy nagłówek jakoś ładniej sobie poprzesuwać na blogu.
W tym celu dodamy nowy arkusz CSS.

'Układ'>'Projektant szablonów'>'Zaawansowane'>'Dodaj arkusz CSS'

Ruszanie w górę i w dół:

#'Twoja nazwa gadżetu'{
position:relative;

top: 'ilość pikseli'px;
}

Ruszanie w prawo i w lewo:

#Twoja nazwa gadżetu'{right: 'ilość pikseli' !important;}

wartości pikseli i nazwę wpisujemy bez '...'

Kiedy jesteśmy zadowoleni z pozycji naszego nowego nagłówka, zapisujemy zmiany.

Sam obrazek do mapowania stworzyć można w programach graficznych takich jak darmowy Gimp lub Photoshop.


PS. Moje zmiany zrobiłam na szablonie Rewelacja.


PEACE