Jak korzystać w Bloggerze z pliku CSS hostowanego na Google Drive i dlaczego nie powinieneś tego robić.

Każdy kto korzysta z Bloggera wie, że kod dowolnego szablonu jest dość mocno zaśmiecony. Sporo czasu zajęło mi czyszczenie HTML'a, żeby doprowadzić go do jako tako zadowalającej formy.
Pozostaje kwestia kodu CSS...

Kod CSS w serwisie Blogger umieszczony jest standardowo w tagach:
<b:skin></b:skin>
W tych tagach znajdziemy znaczniki <![CDATA[ nasz kod CSS ]]>
W pewien sposób jest to schemat dość nieoptymalny pod względem wyglądu samego kodu strony.

Możemy jednak użyć pliku styli .css umieszczonego w zewnętrznym źródle, np. na Dysku Google, ale... no właśnie, ale. Nie polecam tego robić.

U mnie po wykonaniu takiego zabiegu, blog zaczął się wczytywać ponad 2x dłużej, a przechodzenie między podstronami było bardzo denerwujące, ze względu na długie ładowanie zawartości.

Jeżeli jednak zależy Ci na przetestowaniu takiego rozwiązania u Ciebie na stronie - oto co należy zrobić.

Uwaga! Ze względu na to, że szukasz tak "zaawansowanego" rozwiązania, zakładam, że znasz się na podstawach obsługi edycji kodu HTML swojego bloga. Z tego powodu nie tłumaczę wszystkiego na "jabłuszkach i gruszkach", czyli bez zbędnego wskazywania gdzie znajdują się najprostsze funkcje. Aczkolwiek odpowiem na każde pytanie zadane w komentarzach  :)

  1. Wejdź w edycję szablonu HTML bloga
  2. Wytnij zawartość kodu CSS ze znaczników CDATA (otwierającego i zamykającego)
  3. Wklej wyciętą treść do nowego pliku tekstowego i zapisz go z rozszerzeniem .css np. na pulpicie
  4. Wróć do edytora kodu i zamień znaczniki <b:skin><![CDATA[   ]]></b:skin> na <b:skin/>
  5. Wcześniej stworzony plik .css wgraj do głównego (najlepiej) katalogu swojego dysku Google
  6. Po wgraniu pliku, kliknij na niego Prawym Przyciskiem Myszy -> Udostępnij...
  7. W nowym okienku doprowadź do takiego stanu jak na obrazku:
  8. Plik musi być publicznie dostępny do wyszukania i wyświetlenia w internecie 
  9. Skopiuj id pliku:
  10. Dodaj id pliku do poniższego adresu URL (na sam koniec jak w przykładzie poniżej):
    https://drive.google.com/uc?export=view&amp;id=0BxxTcuKLy5MiV3BnVlp4d3R1aHc
  11. Skopiuj cały adres, wróć do edytora HTML bloga i wklej w sekcji <head> następujący kod:
    <link rel="stylesheet" href="https://drive.google.com/uc?export=view&amp;id=0BxxTcuKLy5MiV3BnVlp4d3R1aHc" type="text/css">
  12. Zapisz motyw i gotowe :)

6 komentarzy

  1. W jaki sposób to obecnie działa? Sprawdzałeś jako niezalogowany lub na innym komputerze? Wywołując URL z Twojego posta dostaję błąd 400. Wydawało mi się, że google wycofało opcję "webhostingu" z drive w 2016 ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Generalnie Google wycofało możliwość korzystania z linków typu googledrive.com/host
      Sposób opisany w moim poście działa, sprawdzałem w pracy i w domu z różnych przeglądarek.
      Aczkolwiek jest to kompletnie nieoptymalne, ponieważ blog wczytywał się zdecydowanie za długo w porównaniu do kodu umieszczonego bezpośrednio w HTML strony :)

      Usuń
    2. Dlaczego zatem nie mogę zobaczyć zawartości tego pliku i dostaję błąd 400? Podobnie mam z innymi URLami z wyników wyszukiwania, zbudowanych według tego schematu, który masz w treści posta. Tam również Bad Request.

      Usuń
    3. Ten komentarz został usunięty przez autora.

      Usuń
    4. Chyba znalazłem przyczynę. Kod edytora bloggera wymaga zapisu & amp;, ale jak wywołuję URL w oknie przeglądarki, to muszę mieć tylko & i wtedy plik CSS chce się pobrać na dysk.

      Tak czy inaczej nie warto a jednym z powodów jest to co napisałeś. Każdy zewnętrzny plik wydłuża ładowanie się witryny. Prędkość działania jest bardzo ważna, szczególnie na komórkach.

      Usuń
    5. No dokładanie :) dlatego właśnie u mnie w poradniku zmieniłem zapis z & na & amp; żeby było przystosowane do bloggera, ponieważ tego dotyczy post w sumie ^^

      Usuń