sobota, 28 lutego 2015

Blogger w krzaczorach


Prowadzę trzy blogi więc jestem blogerem, a nawet blogerką. Jednym z nich jest fotoblog, sensem którego jest prezentowanie zdjęć. By mieć co pokazywać na fotoblogu, wpierw owe zdjęcia muszę zrobić. Gdy przyjeżdżamy do Mojego Lasu, zwykle zaczynamy od powitalnej kawki z obowiązkowym ciachem. Następnie zbieram manatki (torba na ramię, a w niej aparat, butelka wody, telefon itp.itd.) i odmeldowuję z obozowiska się mówiąc: "To idę w krzaczory" i... przepadam na jakieś dwie lub trzy godziny.
Dziś jednak nie o takich krzakach będzie mowa.
    Jeśli prowadzisz blog i masz (miewasz) następujące problemy z wyglądem swoich postów (wpisów) na blogu, jak:
  1. Niepożądane odstępy w tekście czy między zdjęciami, które "normalnie" nie dają się usunąć,
  2. Zbyt duży odstęp w tekście lub między zdjęciami po wstawieniu opcji zwijania tekstu,
to czytaj dalej.

Oba problemy mają swoje źródło (i ratunek!) w HTML. Przeciętny bloger zwykle coś tam słyszał o języku HTML, ale ogólnie bardziej interesuje się tym, co ma do zaprezentowania, niż jak to się robi. Ja również, więc proszę się nie spodziewać, że jestem jakimkolwiek znawcą tudzież guru tego ustrojstwa. Pojmuję, że HTML (ang. HyperText Markup Language) to "hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.
HTML pozwala opisać strukturę informacji zawartych wewnątrz strony internetowej, nadając znaczenie poszczególnym fragmentom tekstu – formując hiperłącza, akapity, nagłówki, listy - oraz osadza w tekście dokumentu obiekty plikowe.
HTML umożliwia określenie wyglądu dokumentu w przeglądarce internetowej".

Bez wnikania w szczegóły omówię kwestie niepożądanych odstępów w tekście lub między zdjęciami (lub tekstem). Jako przykład posłuży jeden z moich starych postów, który wymaga poprawek.
Odstępy między zdjęciami są nierówne i nie udawało się ich usunąć w normalnym widoku.


Należy przejść do widoku HTML. Zaznaczyłam na żółto niepotrzebne "kwiatki", czyli frazy:
<div class="separator" style="clear: both; text-align: center;">
</div>

które spokojnie można usunąć (zaznaczyć dokładnie właściwy fragment i użyć klawisza "Delete").
Skąd biorą się te "kwiatki"?
W moim przypadku najczęstsze powody to: zmiana kolejności zdjęć, wymiana zdjęć na inne, przeredagowanie tekstu, wstawianie fragmentów ze stron źródłowych (przy opisie gatunków), czyli teoretycznie - nic takiego. A jednak...


Po usunięciu fragmentów kod HTML prezentuje się znacznie przejrzyściej:


Po "żniwach", czyli usunięciu niepotrzebnych fragmentów kodu, należy wrócić do normalnej edycji (Nowy post), spojrzeć na podgląd, jeśli OK, to zapisać zmiany.
Teraz w poprawionym poście (wpisie) odległości między zdjęciami są równe - czyli tak, jak powinno być.



Jeśli w widoku HTML są duże odstępy między wierszami tekstu (wiele pustych wierszy), to także można je usunąć, choć dla bezpieczeństwa lepiej zostawić po jednym pustym wierszu.

 ***************

Gdy zdjęcia mają dodane podpisy, a post ma mieć zwinięty tekst, to z jakiegoś dziwnego powodu w miejscu przedzielenia tekstu czy zdjęć i tak powstaje większy odstęp niż pomiędzy innymi akapitami.
By się go pozbyć, radzę sobie następująco:

W widoku HTML miejsce zwijanie tekstu wyrażone jest jako:   <!--more-->
W przypadku dzielenia posta między zdjęciami, kod HTML wygląda tak:
  
<!--more-->
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
[i dalsza część kodu]

Aby usunąć niechciany, zbyt duży odstęp przenoszę kod zdjęcia do linii zwijania tekstu, czyli:

<!--more--><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>[i dalsza część kodu]

W przypadku dzielenia tekstu, kod HTML wygląda tak:

Jakiś tekst posta, jakiś tekst posta, a tutaj ma być zwinięcie tekstu. Kto chce czytać dalej musi kliknąć na link "Czytaj więcej"
<!--more-->
A tutaj jest dalszy ciąg tekstu jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst

W celu zlikwidowania odstępu w tekście wystarczy zrobić tak:

Jakiś tekst posta, jakiś tekst posta, a tutaj ma być zwinięcie tekstu. Kto chce czytać dalej musi kliknąć na link "Czytaj więcej"
<!--more-->A tutaj jest dalszy ciąg tekstu jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst jakiś tekst

Żeby niczego nie zepsuć, najprościej jest ustawić kursor tuż za  <!--more-->  a następnie użyć klawisza "Delete" i wiersz sam wskoczy.


Następne "krzaki" w postaci następujących problemów:
  1. Zdjęcia (lub ich część) nie wyświetlają się w widoku Lightbox, chociaż wybrałaś/eś tę opcję
  2. Dostajesz szału, gdy opublikowany post pojawia się na Liście czytelniczej Twoich obserwatorów oraz na (ewentualnych) innych blogach z wielogodzinnym opóźnieniem
omówiłam TUTAJ.

Oczywiście, cały post można napisać w widoku HTML, ale trzeba znać parę literek i zasad :-)
Dla zainteresowanych link - HTML dla zielonych


1 075 050









11 komentarzy:

  1. Właśnie usunęłam 3 komentarze-spamy. Proszę sobie darować wysiłku, gdyż będę konsekwentnie kontynuować ;-]

    OdpowiedzUsuń
    Odpowiedzi
    1. Spamowe komentarze to plaga, ale co tej sztuczki to bardzo fajne nie znałam tego z tym kodem dzięki.

      Usuń
  2. Hahaha, ale mnie rozbawił początek! :D

    OdpowiedzUsuń
  3. Aniko, to jest dobry namiar do skorzystania z HTML. Ja czasem mam parę żeby w to wnikać, ale przeważnie opadam z sił. Zapisałam sobie Twoją ściągawkę, bardzo mi przypomina czasy walki z "wpisz kod na bocznej belce". To była przygoda :-)

    OdpowiedzUsuń
    Odpowiedzi
    1. Almetyno, nie mam pojęcia czy moje rady przydadzą się na Twojej platformie, ale w końcu HTML jest jeden :-)

      Usuń
  4. Fajnie, że dodałaś taki post :) U mnie czasem tak się właśnie dzieje, chociaż zwykle wystarczy usunąć/dodać jeden wiersz czy coś tam poprzestawiać i jakoś to się normuje :) Z HTML-u najlepsza nie jestem i jeśli już coś w nim grzebię, to wspieram się tutorialami :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się, że informacje się przydały. Od pewnego czasu jestem wręcz zmuszona zaglądać do HTML, bo inaczej wszystko mi się rozjeżdża. Pozdrawiam

      Usuń
  5. W podsumowaniu jest:

    "Zdjęcia (lub ich część) nie wyświetlają się w widoku Lightbox, chociaż wybrałaś/eś tę opcję"

    Kiedy można się spodziewać poruszenia tego tematu? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Wkrótce :-) Czekałam na jakiś objaw zainteresowania tematem. Pozdrawiam

      Usuń
  6. bardzo pomocne! dzięki za ten post :)

    OdpowiedzUsuń