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 🙂