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 🙂

Wejdź w edycję szablonu HTML bloga
Wytnij zawartość kodu CSS ze znaczników CDATA (otwierającego i zamykającego)
Wklej wyciętą treść do nowego pliku tekstowego i zapisz go z rozszerzeniem .css np. na pulpicie
Wróć do edytora kodu i zamień znaczniki <b:skin><![CDATA[ ]]></b:skin> na <b:skin/>
Wcześniej stworzony plik .css wgraj do głównego (najlepiej) katalogu swojego dysku Google
Po wgraniu pliku, kliknij na niego Prawym Przyciskiem Myszy -> Udostępnij…
W nowym okienku doprowadź do takiego stanu jak na obrazku:
Plik musi być publicznie dostępny do wyszukania i wyświetlenia w internecie
Skopiuj id pliku:
Dodaj id pliku do poniższego adresu URL (na sam koniec jak w przykładzie poniżej):

https://drive.google.com/uc?export=view&id=0BxxTcuKLy5MiV3BnVlp4d3R1aHc
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&id=0BxxTcuKLy5MiV3BnVlp4d3R1aHc” type=”text/css”>
Zapisz motyw i gotowe 🙂