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.
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!
OdpowiedzUsuń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!
OdpowiedzUsuń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!!!
OdpowiedzUsuń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 :(
OdpowiedzUsuńSuper! Wygląda, że to łatwizna :D Mi póki co nie potrzebne, ale mam nadzieję, że kiedyś się przyda! Dzięki
OdpowiedzUsuńO rany! Jakiś czast temu chciałam zrobić, ale nie znalazłam żadnej instrukcji dla laika, więc teraz spróbuję, a co! :)
OdpowiedzUsuńSuper wpis, jak po sesji w końcu wezmę się za wygląd swojego bloga to na pewno skorzystam! :D
OdpowiedzUsuńNie próbuj tylko zrób :P Napisz jak już będziesz miała, chętnie zobaczę jak wyszło.
OdpowiedzUsuń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ć:)
OdpowiedzUsuń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.
OdpowiedzUsuń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?
OdpowiedzUsuń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!
OdpowiedzUsuńojojoj zaraz się zagłębie w temat i może później coś sknocę u mnie :)
OdpowiedzUsuń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 :)
OdpowiedzUsuńsuper post..właśnie na coś takiego czekałam... Musze uporządkować bloga ..Dzięki Karolina! Pozdrawiam
OdpowiedzUsuńPrzydatny post :)
OdpowiedzUsuń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.
OdpowiedzUsuńTo było bardziej niż pewne:)
OdpowiedzUsuńFAJNE musze przy tym pogrzebac. Trzymam kciuki za Twoj udzial w Blogu Roku i pozdrawiam serdecznie Beata
OdpowiedzUsuńO jeeej, jesteś kochana!!!
OdpowiedzUsuń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!
OdpowiedzUsuńWspaniale!
OdpowiedzUsuń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.
OdpowiedzUsuńTy chyba czytasz w moich myślach!!! Miałam do Ciebie pisać z zapytaniem jak to zrobiłaś u siebie :-)
OdpowiedzUsuń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 :-)
OdpowiedzUsuń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 :D 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 :)
OdpowiedzUsuńHahah, jacie ! :D Cud, miód, orzeszki i nutella :DD Dzięki wielkie, wszystko działa, tego mi było trzeba :D Jesteś cud, nie człowiek :D Obserwuję! :D
OdpowiedzUsuń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
OdpowiedzUsuń.post {margin-left: -20px;}
PS. jeśli usuniesz różowe tło po bokach to nie będzie widać marginesu ;)
Ojejuniu działa :D
OdpowiedzUsuń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ść :D
OdpowiedzUsuńA jeszcze dwie rzeczy się muszę zapytać :D :
OdpowiedzUsuń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.
OdpowiedzUsuńCoś próbowałam robić, ale nie wiem czy dobrze to zrobiłam :p W każdym razie dzięki za pomoc we wszystkim :)
OdpowiedzUsuńA jeśli napisałabyś o GA tobyłoby supery :D
OdpowiedzUsuńCzekam na numer do wysłania smsa :) Trzymam za Ciebie kciuki!
OdpowiedzUsuńhttp://stylishtherapy.blogspot.com/
Hej, numer już jest :D
OdpowiedzUsuńtreść H11234 na numer 7122
Z góry baaardzo dziękuję:)
Bardzo pięknie mi to menu zrobiłaś ;-)
OdpowiedzUsuńTak
OdpowiedzUsuń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ę :)
OdpowiedzUsuń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 :)
OdpowiedzUsuńZapraszam do siebie - http://chocolatestoptempting.blogspot.co.uk/ :) Menu już zrobione! :D Pozdrawiam i jeszcze raz dziękuję za link! :)
OdpowiedzUsuńBardzo przydatne! Na pewno w przyszłości wykorzystam, a już teraz ślicznie dziękuję! :)
OdpowiedzUsuńma wygrać Matka na wakacjach i basta.
OdpowiedzUsuńNie mam nic przeciwko, mi wystarczy 10-te miejsce:)
OdpowiedzUsuńWitam. Zupełnie przez przypadek trafiłam na tego bloga! Jest na prawdę wspaniały.
OdpowiedzUsuń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.
OdpowiedzUsuńRewelacja, zobaczę czy uda mi się to zrobić u siebie :)
OdpowiedzUsuńO i ja bardzo dziękuję. Spróbuję coś pokombinować u siebie, może się uda :)
OdpowiedzUsuń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 www.daywithcoffee.blogspot.com jest na to może jakieś rozwiązanie ? :(
OdpowiedzUsuńHej, mam pytanie. :)
OdpowiedzUsuń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?
OdpowiedzUsuńChyba już udało Ci się rozwiązać problem bo z tego co widzę to tekst na tej stronie jest widoczny.
OdpowiedzUsuńtak, zmieniłam ostatecznie szablon na stworzony przez siebie. W końcu mam to czego mi brakowało! :)
OdpowiedzUsuń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 :)
OdpowiedzUsuń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...
OdpowiedzUsuńMenu dodaje się w formie gadżetu widocznego w zakładce układ. Wystarczy usunąć nowy gadżet z menu.
OdpowiedzUsuń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???
OdpowiedzUsuńW zasadzie nie trzeba do tego nic specjalnego robić. Może szerokość menu jest większa niż ustawiona całkowita szerokość bloga?
OdpowiedzUsuń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)
OdpowiedzUsuńDziękuje :) Bardzo mi się to przydało :D
OdpowiedzUsuńhttp://alekczyta.blogspot.com
Świetny, konkretny poradnik, pomogło! czekam na więcej, dzięki!
OdpowiedzUsuń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ć :(
OdpowiedzUsuńDaj proszę linka do siebie.
OdpowiedzUsuńhttp://zadbajopieknowdomowymzaciszu.blogspot.com/
OdpowiedzUsuńjest zupełnie tak, jakby prawa strona paska kart była sparaliżowana:D obojętnie czy zakładek jest 3 czy 10.
OdpowiedzUsuń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.
OdpowiedzUsuńO tym, nic nie zmieniałam od wczoraj :)
OdpowiedzUsuńNaprawdę wszystko się ładnie wyświetla? Skoro tak, to świetnie :D
Jeszcze raz sprawdziłam i tak, chyba, że jakaś zakładka ma się rozwijać.
OdpowiedzUsuńNie nie, to zwykłe proste menu :)
OdpowiedzUsuń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ć ?
OdpowiedzUsuń