Blogger widoki dynamiczne obrazek w nagłówku

Google jakiś czas temu wprowadziło do swojej platformy blogowej Blogger nowe szablony opierające się na widokach dynamicznych. Szablony wyglądają naprawdę fajnie jednak nadal zostały niedopracowane i niemożliwe jest wstawienie własnego obrazka jako logo. Jednak dzięki temu poradnikowi będziemy mogli zmodyfikować nasz blog aby wyświetlał obrazek jako logo. Jako przykład postanowiłem wykorzystać blog z adresu: http://wom3ns.blogspot.com/ prawda, że fajnie wygląda? No to przejdźmy do sedna jak uzyskałem taki efekt.

1. Przechodzimy w menu Bloga do sekcji "Szablon".
2. Klikamy "Dostosuj".
3. W nowym menu wybieramy opcję: "Zaawansowane".
4. Klikamy na "Dodaj arkusz CSS".

W arkuszu CSS wpisujemy:

body{
background-image: url("http://i59.tinypic.com/idf32v.png");
background-size: cover;
}
h1
{
display:none;
}
#header .header-bar .title h1{display:none;}
#header .header-bar {background:transparent;}
#header .header-drawer{background:transparent;}
#header-container
{
background-image: url("http://i59.tinypic.com/6s6o0i.png");
background-repeat:no-repeat;
background-position:280px 5px;
}


Teraz krótkie objaśnienie. Pierwsza sekcja body w arkuszu CSS odpowiada za wyświetlenie tła. Jest to obrazek garderoby w przykładzie bloga. W drugiej sekcji h1 ukrywamy nagłówek tekstowy aby nie był widoczny, podobnie robimy w następnej sekcji ukrywając aktywnego linka do strony głównej, którą funkcję spełnia właśnie tekstowy nagłówek.

Z punktu widzenia SEO nie jest to zbyt etyczne rozwiązanie, jeżeli chodzi o ukrywanie nagłówka h1. No ale jeżeli mamy stałą rzeszę czytelników i zależy nam na atrakcyjnym wyglądzie to czemu nie.

Następnie dodajemy przeźroczystość do górnej belki menu, tak aby było widać tło aby obrazek wypełniał całkowicie przestrzeń bloga. No i przechodzimy do dodania nagłówka. Za dodanie obrazka jako nagłówka odpowiada sekcja "#header-container" w powyższym kodzie i jest to pierwsza linijka. Gdzie podajemy jako wartość link do naszego obrazka na nagłówek. Ustawiamy wartość "no-repeat" aby obrazek nie był powtarzany i ustawiamy położenie nagłówka.

Ważne jest to, że w obrazku nagłówka została użyta alfa czyli przeźroczystość dlatego możemy ustawić jego pozycję jak nam się podoba. Oczywiście idzie też wykonać nagłówek z obrazka bez przezroczystości jednak musimy się wtedy trochę bardziej napracować z dopasowaniem wymiarów. To by było na tyle i mam nadzieję, że ten artykuł był pomocny.

1. 
   
   Strona Główna
   
   
›
2. 
   
   Internet
   
   
›
3. 
   
   Blogger