Jak za pomocą FIREBUG zaprojektować blogger

Dla większości blogerów, grzebanie w szablonie bloggera lub jego dodatkach jest kłopotliwe i dla początkującego użytkownika jest to katorga. HTML5, CSS i inne elementy kodowania są ich własnym językiem dla przeciętnego użytkownika Blogger który chce zaktualizować sobie prywatnie bloga, z automatycznymi ustawieniami są tak dobre, że nie wie jak to się robi. Co zrobić, jeśli nie ma lepszego sposobu, aby zakodować bloga, czy jesteś początkującym lub pro użytkownikiem blogger, wszystko możesz wykonać w tej samej przeglądarce?

Jeśli używasz przeglądarki Firefox lub Chrome, to powinno być łatwe z pomocą Firebug. To pozwala kodować swoją stronę w czasie rzeczywistym, dzięki czemu można zmaksymalizować UX bloga.

Już nie musisz Edytować Przez Bloggera!

Jeśli kiedykolwiek próbowałeś zaktualizować temat Bloggera przez funkcje edycji na stronie internetowej, to wiesz, jak trudne może to być. Możesz obejrzeć swoje projekty, ale nie możesz zapisać zmiany, aby zobaczyć, co oficjalnie stanie się z witryną, aż publikujesz zmiany. Jeśli brakowało tylko jednej linii kodu lub zapomniany został jedynie niewielki element, będziesz musiał wrócić do matrycy edycji, znaleźć błąd, zaktualizować go ponownie, i powtarzać wykonywane czynności od początku.

 Co Firebug pozwala zrobić, to zobaczyć wszystkie z tych elementów, które składają się na strone internetową w czasie rzeczywistym. Zamiast edycji i publikacji, można edytować w czasie rzeczywistym i zobaczyć aktualizacje na bieżąco, a wszystko to bez wpływu na doświadczenie użytkowników odwiedzających, którzy odwiedzają witrynę, podczas edytowania. Szybko można zmienić czcionki, kolory, lub projekt witryny i zobaczyć wyniki swojej pracy. Nie podoba ci się? Wystarczy cofnąć zmiany. 

To naprawdę takie proste.

Korzystanie z Firebug Dostosowując CSS w Bloggerze

Ten poradnik pokaże Ci, jak zmodyfikować kod CSS szablonu Blogger. Zazwyczaj, deklaracje stylów CSS Blogger Template są edytowalne przez plik style.css, czyli to co możesz znaleźć między tagami <b: skin> i </ b: skin> . 

Aby pobrać Firebug i uzyskać więcej szczegółów dotyczących zaawansowanych funkcji, odwiedź: Firebug dla Firefoksa lub jeśli używasz Chrome, pobierz aplikację Firebug Lite. Polecam używać Firefox, który jest bardziej kompletny i szybki, ale jednak, oba działają tak samo. 

Po zainstalowaniu Firebug, dostępna będzie mała ikona w prawym górnym rogu paska adresu przeglądarki internetowej. Kliknięcie na nią podzieli poziomo ekran, pojawi się na dole okna przeglądarki. Strona nadal będzie pokazywała się w górnej połowie, a dolna połowa pokaże HTML bieżącej strony internetowej.

Aby dostosować każdy element z szablonu Blogger, wystarczy kliknąć albo na ikonę Firebug na pasku narzędzi lub "Sprawdź Element z Firebug" pozycji w menu kontekstowym. Następnie kliknij niebieski przycisk kursora do wglądu i umieścić kursor nad elementem, aby dostosować. 

Na przykład, powiedzmy, że chcemy zmienić tytuł "Blog Archive" gadżetu. Po kliknięciu na przycisk myszy da nam wgląd na tytuł "Blog Archive" , który zostanie podświetlony, jak pokazano na poniższym zrzucie ekranu. Aby zmienić ten element, kliknij na niego:

Teraz, zdecydowaliśmy, który element chcemy zmienić, kliknij prawym przyciskiem na panelu "Style" i wybrać opcję "add rule":

To daje klasę lub identyfikator elementu wyróżnionego - w naszym przypadku, nagłówek blogu Archiwum (# BlogArchive1> h2). Aby edytować tę regułę, kliknij w dowolnym miejscu w pobliżu nawiasu klamrowego, w którym zostanie otwarte pole tekstowe, także możemy wpisać nową deklarację CSS:

I tu zaczyna się zabawa. Powiedzmy, że chcemy, aby był czerwony tytułu. Wpisz kolor i naciśnij klawisz Enter, a następnie wpisz wartość koloru lub czerwony tekst i naciśnij Enter. Możesz również ustawiać rozmiar czcionki na 20 pikseli, wyrównanie tekstu do centrum (text-align: center) i zrobić tekst podkreślony (text-decoration: underline):

Świetną rzeczą jest to, że nigdy Firebug modyfikuje żadnych właściwości CSS, można zobaczyć wyniki bezpośrednio stosowane na stronie. Tak więc, po dodaniu tych deklaracji, zobaczymy duży czerwony podkreślnik dla tytułu naszego Blog Archive (zobacz na zrzucie ekranu powyżej). Aby zastosować tę regułę CSS szablonu Blogger, wystarczy ją wybrać począwszy od prawego wspornika i kręcone do # (id) lub (class) symbol, a następnie kliknij prawym przyciskiem myszy i skopiować kod CSS.

Przed dokonaniem jakichkolwiek zmian, zaleca się, aby zrobić kopię zapasową bieżącego szablonu bloggera. Przejdź do "ustawienia > inne" i kliknij przycisk "eksportuj bloga".

 W tym samym miejscu "Szablon", kliknij na przycisk "Dostosuj" i przejdź do "Zaawansowane"> "Dodaj CSS". Wklej regułę CSS, który właśnie został skopiowana w polu CSS:

Kliknij przycisk "Zastosuj do bloga" w prawym górnym rogu, aby zapisać zmiany i zobaczyć swój blog.

Firebug daje także wyraźną przewagę ...

Jednym z najlepszych powodów, aby zainstalować Firebug do przeglądarki Chrome lub Firefox jest to, że pozwala naśladować niektóre wzory szybko i łatwo z Twoich ulubionych stron . Zamiast zatrudniania projektanta witryn internetowych do pracy, które mogą kosztować tysiące, można po prostu uruchomić Firebug i zobaczyć, co są style CSS dla ulubionej witryny. Pozwala to na stworzenie podobnego widget. Stamtąd, można zobaczyć wszystko co masz zrobić, aby zmienić kodowanie, aby elementy konstrukcyjne pracowały zgodnie z przepisami własnego custom.css. Oznacza to, że można dokonać prostych zmian w projekcie na swoim blogu Blogger, bez konieczności przechodzenia przez wszystkie menu i funkcje edycji, że szablon może naprawdę może być własny wg własnego upodobania. Czy masz coś do zrobienia? Pewnie - ale Firebug to wszystko dla pierwotnej pracy w sam raz dla Ciebie. Wszystko co musisz zrobić, to mieć twórczy umysł i kilka minut do wprowadzania zmian w konstrukcji kodującej. Czy kodujesz od lat czy dopiero zaczynasz swojego pierwszego bloga, jest to zdecydowanie najlepszy sposób, aby upewnić się, że użytkownicy firebug mają najlepsze doświadczenia !