Mogę Was zapewnić, że cykl blogowych poniedziałków, który prowadzę od ponad pół roku szybko się nie skończy. Lista tematów do realizacji się tylko wydłuża, ale to chyba dobrze?:) Dzisiaj przygotowałam dla Was instrukcję jak przygotować rozwijane menu na bloga. I wiecie co w tym jest najfajniesze? Nie musicie przy tym znać HTML czy CSS! Chcę polecić Wam bezpłatne narzędzie, które pozwoli niemal intuicyjnie wszystko zrobić, a na końcu pomoże dodać menu na blog. To jak, zaczynamy?
TWORZENIE I INSTALACJA ROZWIJANEGO MENU
KROK 1: PROJEKT. Zacznij od rozpisania swojego menu na kartce. Zastanów się jak mają nazywać się kategorie i podkategorie. Dzięki temu unikniesz poprawiania wielokrotnie menu w trakcie jego tworzenia.
KROK 2: STRUKTURA MENU. Mając już projekt udajemy się na stronę
profilki.pl/dodatki/menu-rozwijane i zaczynamy od stworzenia struktury menu. Klikamy w plusik. Pojawi się nam okno w którym wpisujemy nazwę pierwszej komórki menu i wybieramy czy ma ona prowadzić pod konkretny adres (np. stronę „O MNIE”) czy po najechaniu kursorem ma się rozwijać dalsza lista. W ten sposób tworzymy całe menu. W tym momencie nie jest ważne, że nie wygląda tak jak chcemy – tworzymy szkielet.
KROK 3: WYGLĄD. Możemy wybrać jeden z predefiniowanych wyglądów menu. Osobiście polecam kliknąć na „Zaawansowane” i samodzielnie go dostosować. Znajdziemy tam kilka sekcji odpowiedzialnych za wygląd poszczególnych elementów menu. Na początku możemy być oszołomione ilością zmiennych, ale jeśli poświęcicie chwilę i posprawdzacie co jest do czego to zobaczycie sens w tym „chaosie” 🙂
STAŁA CZĘŚĆ MENU + ELEMENTY STAŁEJ CZĘŚCI MENU- definiujemy jak wygląda menu, gdy nic z nim nie robimy – elementy cały czas widoczne na blogu
ELEMENTY STAŁEJ CZĘŚCI MENU PO NAJECHANIU – tu ustawiamy jak ma zmieniać się stała część menu, gdy użytkownik najedzie na nie kursorem myszy.
ROZWIJANA CZĘŚĆ MENU +ELEMENTY ROZWIJANEJ CZĘŚCI MENU – w tych sekcjach określamy jak mają wyglądać komórki menu, które rozwiną się ze stałej części menu.
ELEMENTY ROZWIJANEJ CZĘŚCI MENU PO NAJECHANIU – analogicznie jak wcześniej tutaj definiujemy jak mają wyglądać komórki rozwiniętej części menu, gdy najedziemy na nie kursorem myszy.
KROK 4: INSTALACJA. Usuwamy „ptaszka” przy polu „Pozostawić podpis?”, ale zostawiamy go przy polu „Dodać dane pozwalające edytować menu zachowując styl?”. Te informacje będą potrzebne, gdybyśmy chciały kiedyś edytować menu. Klikamy „Zrobione”, a następnie „Dodaj na blogspot”. Zostaniemy przekierowane na stronę, na której należy z listy wybrać nazwę bloga do którego chcemy wgrać menu. Nasze menu pojawi się prawdopodobnie jako pierwszy gadżet w bocznej kolumnie. Wystarczy przeciągnąć go pod baner i zapisać. Po tym nasze menu powinno pięknie śmigać na blogu!:)
EDYCJA ROZWIJANEGO MENU
Jeśli po jakimś czasie chcemy zmienić wygląd menu, bądź jego strukturę to możemy to zrobić ponownie przy użyciu wspomnianej strony. W pierwszej kolejności jednak otwieramy bloggera i wybieramy „UKŁAD”. Otwieramy gadżet z naszym menu i kopiujemy jego zawartość. Wklejamy ją na stronie w dwóch miejscach „Importuj kod menu” i „Importu styl menu”. To wystarczy, aby nasze menu było gotowe do edycji.
LINKI DO POSTÓW OZNACZONYCH DANĄ ETYKIETĄ
Robiąc rozwijane menu zapewne będzie chciały podpiąć do niego posty oznaczone daną etykietą. Wówczas czytelnikowi klikając np. na kategorię „DIY” wyświetlą się wszystkie posty o tej tematyce (tutaj przeczytasz o dodawaniu etykiet do postów). W celu uzyskania linku to postów oznaczonych konkretną etykietą wystarczy kliknąć na nią (znajdziesz ją np. pod wpisem). Teraz kopiujemy adres z przeglądarki i gotowe.
CZY WARTO MIEĆ ROZWIJANE MENU?
To zależy. Jeśli masz mało kategorii wpisów wystarczy zwykłe menu oferowane przez bloggera. Jednak zwykle po dłuższym czasie blogowania, kategorie się mnożą nawet jeśli piszemy teoretycznie na jeden temat. Na przykład, blog kulinarny może mieć menu z rodzajami potraw, aby czytelnik mógł szybko znaleźć interesujący go przepis. Sama zdecydowałam się na rozwijane menu, ponieważ drażniło mnie, że ważne informacje mam rozsiane w różnych miejscach, a i wszystkich kategorii wpisów nie mogłam pokazać bez robienia bałaganu. Teraz na jednym pasku mam kategorie wpisów, linki do portali społecznościowych, strony statyczne dotyczące POMOCY BLOGOWEJ oraz KONTAKT itp. Wszystko jest przejrzyste i łatwe do znalezienia.
***
Jeśli w trakcie tworzenia menu natraficie na jakieś trudności piszcie śmiało w komentarzach.
***
Kochane, zapewne nie umknęło Wam, że postanowiłam spróbować swoich sił w tegorocznej edycji Bloga Roku. Nie ukrywam, że liczę na Wasze wsparcie w tej materii. To właśnie od czytelników zależy czy dany blog przejdzie do dalszego etapu. Jeśli lubicie tu zaglądać, a to co to tu znajdujecie jest dla Was interesujące lub przydatne potraktujcie to jako dobrowolną, symboliczną opłatę za te treści i moją pracę w to włożoną – to jak zakup ulubionego czasopisma:) Głosowanie rozpoczyna się jutro i jak tylko otrzymam numer telefonu niezwłocznie się nim z Wami podzielę. Koszt wiadomości sms to 1,23 zł. Co istotne, dochód z smsów nie napełnia kieszeni organizatorów, a jest przekazywany na fundację „Dzieci Niczyje”. Z jednego numeru można oddać jeden głos. Czy mogę na Was liczyć? Stańcie się moimi dobrymi wróżkami!:)
PS. Wpadajcie jutro po listę tematów na wpisy blogowe w lutym!:)PS2. Przypominam grzecznie o trwającym
konkursie i możliwości zgłaszania się do mojego
projektu blogowego.
Jesteś genialna!!! Od tygodnia myślę nad tym rozwijanym menu u siebie na blogu, znalazłam kod css i wczoraj chciałam go pozmieniać, ale jednak obejrzałam film. Dzisiaj proszę – taka niespodzianka 🙂 Super! Dziękuję bardzo!
Fajnie, że się tym linkiem z nami podzieliłaś 🙂 Ja co prawda coś tam wiem o CSS i HTML, jednak nic na mnie presji nie kładło z tym menu i tak sobie poczekałam tydzień, aż się doczekałam idealnej odpowiedzi :))) Miłego dnia!
Dobra kobieto, nawet mąż nie potrafił mi pomóc, więc zmieniłam bloga jak umiałam, ale teraz mam rozwiązanie dzięki Tobie!!!
Jak ustawić jednakowy rozmiar zdjęć tak żeby były równo z tekstem? Używałam do tego kodu do wpisania w arkusz css wg instukcji z internetu ale wyszło to tak, że u mnie się wyświetlało dobrze i na większości komputerów też ale na niektórych zdjęcia całkiem sie rozjeżdżały 🙁
Super! Wygląda, że to łatwizna 😀 Mi póki co nie potrzebne, ale mam nadzieję, że kiedyś się przyda! Dzięki
O rany! Jakiś czast temu chciałam zrobić, ale nie znalazłam żadnej instrukcji dla laika, więc teraz spróbuję, a co! 🙂
Super wpis, jak po sesji w końcu wezmę się za wygląd swojego bloga to na pewno skorzystam! 😀
Nie próbuj tylko zrób 😛 Napisz jak już będziesz miała, chętnie zobaczę jak wyszło.
Aby zrobić menu idealnie dopasowane do bloga trochę trzeba się „napisać” :). Dla kogoś bez doświadczenia to czasochłonne, dlatego podskakiwałam na krześle jak znalazłam tą stronę bo wiedziałam, że muszę się tym z Wami jak najszybciej podzielić:)
Najpewniejszą wersją jest nadawanie zdjęciom jednakowej szerokości podczas obróbki. Zdjęcia u mnie wszystkie mają szerokość 800 px. Optymalna szerokość zależy od szerokości głównej kolumny bloga.
Cieszę się, że trafiłam na Twojego bloga. Mój jest dopiero raczkujący i na pewno muszę mocno zapoznać się z Twoimi radami. Nie miałam pojęcia jak zrobić zwykłe, nierozwijane MENU i zrobiłam na zasadzie etykiet? Możesz doradzić czy dobrze?
Menu rozwijane na pewno przyda mi się jak rozkręcę się z wpisami.
Pozdrawiam!
No prosty i fajny pomysł – musiałabym zrobić więc porządki na blogu!
ojojoj zaraz się zagłębie w temat i może później coś sknocę u mnie 🙂
A ja raptem kilka dni temu spędziłam godziny na grzebaniu w HTML, żeby zrobić menu rozwijane. Jestem pewna, że Twój wpis pomoże wielu osobom 🙂
super post..właśnie na coś takiego czekałam… Musze uporządkować bloga ..Dzięki Karolina! Pozdrawiam
Przydatny post 🙂
Jak zobaczyłam u Ciebie menu rozwijalne, to czułam w kościach, że popełnisz o nim wpis 😉 sama się nad nim zastanawiam, ale ciągle jestem niezdecydowana w wyborze głównych kategorii, które miałyby się pojawić w menu.
To było bardziej niż pewne:)
FAJNE musze przy tym pogrzebac. Trzymam kciuki za Twoj udzial w Blogu Roku i pozdrawiam serdecznie Beata
O jeeej, jesteś kochana!!!
Jak ja na to czekałam!
Dziękuję :*
Dziękuję Ci za ten wpis. Będę kombinować w weekend, od dawna chciałam mieć rozwijane menu!
Wspaniale!
Boskie! Ja osobiście zrobiłam swoje menu na gotowym kodzie HTML i nie będę go na pewno zmieniać, ale nawet przy gotowych kodach trzeba mieć choć minimalne pojęcie na temat HTML.
Ty chyba czytasz w moich myślach!!! Miałam do Ciebie pisać z zapytaniem jak to zrobiłaś u siebie 🙂
Oczywiście wspieram i trzymam kciuki za Blog Roku! Pozdrawiam!
Ty chyba czytasz w moich myślach!!! Miałam do Ciebie pisać z zapytaniem jak to zrobiłaś u siebie 🙂
Oczywiście wspieram i trzymam kciuki za Blog Roku! Pozdrawiam!
Jeju, spadłaś mi z nieba! Znałam już wcześniej tą stronkę, ale ogrom tego wszystkiego mnie przerażał, ale dzięki Tobie wzięłam się za stworzenie tego i jest super 😀 Powiedz mi tylko czy wiesz co zrobić, żeby to menu było trochę niżej, bo mi bardzo wchodzi na nagłówek, a chciałabym, żeby było trochę niżej 🙂
Hahah, jacie ! 😀 Cud, miód, orzeszki i nutella :DD Dzięki wielkie, wszystko działa, tego mi było trzeba 😀 Jesteś cud, nie człowiek 😀 Obserwuję! 😀
momento-de-aliento.blogspot.com
Spróbuj tego, ale nie daję gwarancji, że da dokładnie ten efekt. Prawdopodobnie będzie potrzebna wartość ujemna w px
.post {margin-left: -20px;}
PS. jeśli usuniesz różowe tło po bokach to nie będzie widać marginesu 😉
Ojejuniu działa 😀
No to jeszcze jedno pytanie:
Wiesz co zrobić, żeby nie było tego jakby marginesu z lewej strony posta na blogerze? Chodzi mi o to jak usunąć tą część:
Polecam się na przyszlość 😀
A jeszcze dwie rzeczy się muszę zapytać 😀 :
1. Jest tu gdzieś wyszukiwarka?
2. Pisałaś może posta o Google Analitycs, albo masz jakąś instrukcję jak to uruchomić, bo nigdzie nie mogę znaleźć, jak to dokładnie włączyć 🙁 Jeśli czegoś takiego nie było, to może napiszesz o tym posta :DD?
Jeśli pytasz o wyszukiwarkę na moim blogu to nie ma, ale wszystkie posty o zmianach w blogu znajdziesz wchodząc przez górną belkę Pomoc blogowa>strefa blogerek. O GA jeszcze nie pisałam. Swój włączałam w oparciu o instrukcje dostępne po założeniu tam konta.
Coś próbowałam robić, ale nie wiem czy dobrze to zrobiłam :p W każdym razie dzięki za pomoc we wszystkim 🙂
A jeśli napisałabyś o GA tobyłoby supery 😀
Czekam na numer do wysłania smsa 🙂 Trzymam za Ciebie kciuki!
http://stylishtherapy.blogspot.com/
Hej, numer już jest 😀
treść H11234 na numer 7122
Z góry baaardzo dziękuję:)
Bardzo pięknie mi to menu zrobiłaś 😉
Tak
Obecnie jestem na etapie tworzenia podstawowego menu, ale pewnie za jakiś czas będę też musiała stworzyć coś więcej. Za to podczas czytania tego postu przyszedł mi w końcu pomysł na nazwanie moich stron i za to dziękuję 🙂
Karolina, czytasz w moich myślach 🙂 Właśnie miałam pytać wujka Googla co i jak, ale przecież u Ciebie wszystko jest! Dzięki. Pozdrawiam 🙂
Zapraszam do siebie – http://chocolatestoptempting.blogspot.co.uk/ 🙂 Menu już zrobione! 😀 Pozdrawiam i jeszcze raz dziękuję za link! 🙂
Bardzo przydatne! Na pewno w przyszłości wykorzystam, a już teraz ślicznie dziękuję! 🙂
ma wygrać Matka na wakacjach i basta.
Nie mam nic przeciwko, mi wystarczy 10-te miejsce:)
Witam. Zupełnie przez przypadek trafiłam na tego bloga! Jest na prawdę wspaniały.
Mam pytanie odnośnie paru rzeczy, bo na prawdę mi się spodobały. 🙂
Dodam zdjęcia, a później do nich opis o co konkretnie mi chodzi.
Zdjęcie 1: Chciałabym się dowiedzieć, jak Pani zrobiła, jakie parametry wzięła, żeby to menu właśnie tak wyglądała, ale za to kolor bordowy(?) mógł być inny? I jak zrobić linię nad menu?
Zdjęcie 2: Jak zrobić tą małą przerwę pomiędzy napisem, a linią?
I inny problem mam. Otóż na swoim blogu mam Linkwithin, ale pokazują mi się same linki, a nie obrazki tak, jak u Pani. Jak to zmienić?
Ciężko opisać tu wszystkie parametry menu, których użyłam – zbyt wiele ich jest. Możesz użyć dowolnych kolorów. Linię nad menu zrobiłam dodając .header { border-bottom: 2px #000000 solid; } do arkuszów CSS szablonu (SZABLON>DOSTOSUJ>ZAAWANSOWANE>ARKUSZ CSS). Linkwithin proponuję usunąć i spróbować dodać jeszcze raz.
Rewelacja, zobaczę czy uda mi się to zrobić u siebie 🙂
O i ja bardzo dziękuję. Spróbuję coś pokombinować u siebie, może się uda 🙂
trafiłam tutaj przypadkiem i zostaje na dłużej – jestem pod wrażeniem 🙂 mam jedno pytanie dotyczące stron na blogu: na moim niestety nie wyświetla się w ogóle zawartość strony „parę słów o mnie”, którą dodałam i opublikowałam (w trybie edycji jest wszystko ok, czarna czcionka itp., ale jak dam „podgląd” to już jest biało, zobaczyć dokładnie można na http://www.daywithcoffee.blogspot.com jest na to może jakieś rozwiązanie ? 🙁
Hej, mam pytanie. 🙂
Jak zrobić taką linię, którą masz pod menu, ale żeby dodatkowa była też i nad nim?
Pozdrawiam!
I wiesz może jak zrobić np. dwa dodatkowe linki z prawej i ikonki społecznościowe z lewej strony, ale by były w jednej linii?
Chyba już udało Ci się rozwiązać problem bo z tego co widzę to tekst na tej stronie jest widoczny.
tak, zmieniłam ostatecznie szablon na stworzony przez siebie. W końcu mam to czego mi brakowało! 🙂
dziękuję za odpowiedź 🙂
Dziękuję za to, że w tak przystępny sposób dzielisz się swoją wiedzą. Dziś miałam trochę czasu i pobawiłam się tworząc rozwijane menu 🙂
Na pewno będę miała jeszcze parę pytań odnośnie dodawania kategorii po zapisaniu szkieletu menu, ale to już innym razem 😉
Proszę powiedz mi jak to usunąć! Nie wyszło i teraz mam problem…
Menu dodaje się w formie gadżetu widocznego w zakładce układ. Wystarczy usunąć nowy gadżet z menu.
Nie działa mi to. Menu zrobił kreator ekstra 🙂 ale po wstawieniu na bloga przyciski nachodzą na siebie. Jak sprawić by trzymały szerokość ustawioną w kreatorze???
W zasadzie nie trzeba do tego nic specjalnego robić. Może szerokość menu jest większa niż ustawiona całkowita szerokość bloga?
Wszystko okej, ale nie mogę zrobić aby te strony były całkiem u góry i nieruchome. Jest może na to jakiś kod (mam bloga na blogspocie)
Dziękuje 🙂 Bardzo mi się to przydało 😀
http://alekczyta.blogspot.com
Świetny, konkretny poradnik, pomogło! czekam na więcej, dzięki!
Polecam: Szablony Blogspot
Witam 🙂 Ja mam pytanie z trochę innej beczki aczkolwiek jesteśmy w temacie zakładek. Otóż, sprawa jest taka, że zakładam nowego bloga i mam problem z kartami/ zakładkami otóż 2 ostatnie karty nie reagują po najechaniu myszką..nie można się do nich „dostać”. Co to może być? Nie mam pomysłu jak sobie z tym poradzić 🙁
Daj proszę linka do siebie.
http://zadbajopieknowdomowymzaciszu.blogspot.com/
jest zupełnie tak, jakby prawa strona paska kart była sparaliżowana:D obojętnie czy zakładek jest 3 czy 10.
Pierwszy raz się z czymś takim spotykam, nigdy nie miałam z tym problemów :/
Piszesz o tym menu, które obecnie masz czy już tamto usunęłaś? Pytam bo zajrzałam i wygląda normalnie.
O tym, nic nie zmieniałam od wczoraj 🙂
Naprawdę wszystko się ładnie wyświetla? Skoro tak, to świetnie 😀
Jeszcze raz sprawdziłam i tak, chyba, że jakaś zakładka ma się rozwijać.
Nie nie, to zwykłe proste menu 🙂
Dziękuję serdecznie i pozdrawiam:)
Miłego dnia!
Od niedawna mam bloga i mam pytanko : Gdybym chciała coś dodać do tych podkategorii to jak mam to zrobić ?
Też mam z tym problem ludzie mówią, że jakoś etykietami ale ja nie wiem
musicie wejść na tę stronę i tam gdzie pisze „importuj kod menu” i „importuj styl menu” wkleić kod z widgetu menu.
Dziękuję, jestem o krok bliżej do gotowego bloga! 😀
Mój Blog – klik!
wlaśnie zainstalowałam menu, dzięki za instrukację. Mogę prosić o info jak teraz podpiąć danego posta pod określona przeze mnie kategorie (powyższy opis jest dla mnie zbyt ogólny). Wiem jak to zrobić w przypadku tworzenia menu na bloggerze – uzywajac gadzetu strony ( wpisujac linki etykiet ) jednak męczę się z pół dnia nad tym I nie wiem jak podpiąć posty pod zrobione na profilkach menu 🙁 będę wdzięczna za pomoc. Dodam że u mnie to menu jest gadzetem html a nie gadzetem strony więc nie mogę podpiąć pod niego etykiet bo jak wchodzę w edycję to mam tylko skopiowany z profilek kod html 🙁
Jak się cieszę, że trafiłam na tego bloga! Jest tu tyle rzeczy, których akurat szukałam, że nic tylko działać! Z całą pewnością jestem od dziś stałą i wierną czytelniczką. Pierwsza rzecz już zrobiona czyli rozwijane menu. Kilka miesięcy się nad tym głowiłam a to takie proste! Mam jeszcze tylko pytanie bo nigdzie nie mogę tego znaleźć. Jak to zrobić, żeby całe rozwijane menu było nad nagłówkiem, zupełnie u góry strony? Oraz żeby było stałe czyli razem z przewijaniem strony to menu cały czas widać tak samo jak na tym blogu. Bardzo bym chciała tak mieć u siebie a jestem w tym wszystkim zielona 🙁 I jest możliwość żeby to tło paska było innego koloru np. czarnego? Tak jak w przypadku darmowych szablonów do pobrania blokotka Pozdrawiam ciepło 🙂
Hej a jak ustawic zeby nazwa pierwszej komórki menu mogła się rozwijac ale była jednocześnie linkiem?
Tak jak to jest u Ciebie? Pozdrawiam
super latwe i bez problemu
Jejuu 😀 Dziękuję <3
Zapraszam na mojego NOWEGO bloga 🙂
http://czasdziewczyn.blogspot.com/
Ehhh zrobiłam wszystko tak jak napisałaś i nie działa… ;( na blogu pojawił się gadżet, menu ładnie sie rozwija, ale nie przenosi mnie do konkretnych kategorii ;( pewnie robię jakiś szkolny błąd, ale kompletnie nie wiem jaki.
Witam, bardzo pomocny post, właściwie ze wszystkim sobie poradziłam tylko pasek menu wskakuje mi nad baner, mimo, że umieszczam go pod nim. Proszę o pomoc. Będę bardzo wdzięczna.
Ostatnio pół dnia się męczyłam żeby zrobić menu za pośrednictwem tej strony właśnie, a kiedy mi się udało, zorientowałam się, że za nic w świecie nie potrafię podpiąć do danej kategorii postów, które znajdują się na stronie głównej. Mam ładne, rozwijane menu a nie mogę z niego korzystać, bo nie wiem jak. Nie mam pojęcia, w jaki sposób mogłabym to ogarnąć etykietami, bo tego menu nie da się w żaden sposób edytować, kiedy klikam na edycję, wyświetla mi się jedynie kod html… Pomocy!
Hej, mam pytanie! Jakiś czas temu zrobiłam z Twoją pomocą rozwijane menu. Nie pomyślałam wtedy, że w przyszłości będę chciała dodać jeszcze parę kategorii… Jak mogę dodać kolejne kategorie nie zaczynając wszystkiego od początku? Jest taka opcja?
Udało się 🙂 Dziękuję bardzo za ten post 🙂 Niezmiernie mi pomógł:)
Udało się! A już myślałam, że będę musiała szukać kogoś kto zna się na html 😀
Dziękuję 🙂
Tworzenie linku do rozwijanego memu piszesz zeby skopiowac adres ale nie piszesz gdzie go wkleic. Mecze sie i glowie. Nie wiem jal zrobic by po najechaniu na rozwoniete menu przenioslo czytelnika dalej. Pomoz prosze.
Wybierz profesjonalizm i doświadczenie. Nasza agencja marketingowa w Krakowie to klucz do osiągnięcia sukcesu biznesowego. Skontaktuj się już dziś!
Nasza oferta pozycjonowania stron to klucz do sukcesu online. Dzięki naszym zaawansowanym strategiom SEO Twoja witryna będzie na pierwszych miejscach w wynikach wyszukiwania, przyciągając uwagę potencjalnych klientów i zwiększając zyski.