Polecane

Najnowsze


Szablon Veronica: jak dostosować pobrany szablon

Przedstawiam Wam dzisiaj bardzo fajny szablon na bloga blogspot Veronica. Szablon jest darmowy, pobrany w wersji Free.
Jeśli szukacie darmowych szablonów na bloga przeczytajcie Darmowe szablony na blogspot oraz  Jak zainstalować pobrany szablon na blogu.
W tym artykule napiszę co dalej można zrobić z szablonem wgranym na bloga, jak go dostosować. Czyli przede wszystkim jak go modyfikować, edytować i dostosować do swoich wymagań.


Na początku miał być to opis edycji szablonu MyExtraNews, który pomagałam wdrożyć jednemu z Czytelników,. Ale w trakcie wdrażania na blogu zmieniłyśmy zdanie i wybrałyśmy bardziej nowoczesny szablon o nazwie Veronica. Powiem szczerze, że podoba mi się on bardzo i właściwie to sama rozważam wdrożenie go u siebie :)

Darmowy szablon na bloga blogspot

Szablon, który będę modyfikować to bezpłatny szablon Veronica . Jest do pobrania za darmo, udostępniony na licencji Creative Commons.


Jak pobrać za darmo i wstawić szablon na bloga?

Na początku zapoznaj się z artykułem Jak wstawić (wgrać) szablon na blogspot?

W skrócie:
tworzymy blog testowy; tworzymy kopię zapasową obecnego szablonu; pobieramy szablonRozpakowujemy na dysku i wczytujemy na bloga plik xml.

W szablonie tym bardzo ważną rolę grają obrazki. Stosując go musimy pamiętać o przyporządkowaniu każdemu postowi zdjęcia.Po wczytaniu na blogu wygląda on tak:

Szablon na bloga - dostosowywanie
Szablon Veronica po dodaniu na bloga

Jak zmienić, edytować pobrany szablon?

Po wstawieniu szablonu na swojego bloga możemy być rozczarowani (czytelniczka prosząca o pomoc była). Należy zacząć teraz dostosować, czasami nieco poprawić. Pierwszym krokiem powinno być zapoznanie się z plikami, wszelkimi instrukcjami dołączonymi do szablonu.

Zmian na szablonie dokonujemy poprzez Szablon > Edytuj kod HTML. Mam nadzieję, że masz już kopię szablonu, by w razie problemów móc wrócić do działającego w pełni szablonu. Jeśli nadal jej nie zrobiłeś koniecznie zrób to teraz (tu masz Jak zrobić kopię szablonu).

Menu górne - modyfikacja

Menu górne bloga przed modyfikacją



Zaczniemy od zmiany menu górnego widocznego na niebieskim pasku. Klikamy Szablon, następnie przycisk Edytuj kod HTML. Będziemy teraz wyszukiwać odpowiedni kod. Jak to robimy? Ustawiamy kursor w pierwszej linii szablonu i wciskamy skrót Ctrl+F, czyli jednocześnie przycisk Ctrl i przycisk F. Otwarte zostanie małe okienko wyszukiwania.
 Co zawiera menu? Frazę Home, ale jest ona również w drugim menu, więc ją pominiemy. Następna fraza to About i będziemy teraz jej właśnie szukać. W okienku wyszukiwania wpisujemy słowo About i wciskamy Enter. Odnaleziona fraza została oznaczona kolorem żółtym, u mnie znajduje się na dole.
Modyfikacja kodu HTML szablonu



Zmiany w kodzie HTML bloga
Przewijam teraz w dół, aby zobaczyć kod całego menu.
Modyfikacja menu bloga
Rozpoczęłam zmiany od elementu Home zmieniając na odpowiednik polski, czyli Strona główna oraz w miejsce # wklejając odpowiedni link.

Poszczególna zakładka tworzona jest przez fragment:
<li>
   <a href='#'> Home </a>
</li>
W miejsce # należy wkleić skopiowany adres strony (może to być adres posta, etykiety, innej strony).
W miejsce Home należy wpisać treść zakładki np Strona główna itp.

Ponieważ właścicielka strony nie wie jeszcze jakie elementy chce mieć na stronie, więc pozostałe menu ujęłam w komentarz, aby nie wyświetlało się na stronie. Nie usuwam kodu, aby można było kiedyś go jeszcze wykorzystać.

Dostosowywanie menu na blogu

Komentarz rozpoczynają znaki <!-- a kończą --> To co znajduje się pomiędzy nie jest brane pod uwagę.

Zapisujemy  szablon.

Menu po zmianach:
Menu górne po modyfikacji



Główne menu - modyfikacja


Podobnie postępujemy z głównym menu. Wyszukujemy frazę Home i rozpoczynamy modyfikacje, modyfikując treść i linki zakładek.



Nagłówek

Od razu widać, że najlepiej umieścić w nagłówku swój nagłówek będącym niezbyt wysokim logo. Jeśli go nie posiadamy (jeszcze) to pozostawiamy sam tytuł strony.
A więc wchodzimy w UKŁAD, edytujemy nagłówek i ładujemy własny obrazek (lub usuwamy tylko opis).
Przy okazji usuwamy też gadżety, które pojawiły się wraz z tym szablonem, oczywiście jeśli uważacie je za zbyteczne np. Sponsor. Zmieniamy też tytuły gadżetów na polskie odpowiedniki.

 Pole wyszukiwania

Zmieniamy tekst w okienku wyszukiwania:
Klikamy Szablon, następnie przycisk Edytuj kod HTML. Będziemy teraz wyszukiwać odpowiedni kod. Jak to robimy? Ustawiamy kursor w pierwszej linii szablonu i wciskamy skrót Ctrl+F, czyli jednocześnie przycisk Ctrl i przycisk F. Otwarte zostanie małe okienko wyszukiwania. Wpisujemy w niego widoczną frazę czyli Text to Search i naciskamy Enter.


W miejsce pierwszego zaznaczonego na żółto tekstu wpisujemy jaka fraza ma zostać wyszukana na blogu jeśli użytkownik nic nie wpisze a kliknie wyszukaj. Ja wpisałam frazę lokata.
W miejsce drugiego i trzeciego wpisujemy koniecznie to samo, czyli to co ma zostać wyświetlone w okienku (pozycja druga powoduje wyczyszczenie pola gdy kliknie w nie użytkownik) np Tekst do wyszukania albo Wyszukaj:



 Zapisujemy zmiany. Jesli nie ma błędów to nie zamykając tej strony wyświetlamy bloga i obserwujemy zmiany. Jeżeli wszytko jest ok to przystępujemy do dalszej pracy. Jeśli wystąpiły błędy to cofamy zmiany wciskając Ctrl+Z.

Komentarze



Dalej modyfikujemy szablon. Szukamy teraz frazy Add comment,  powinniśmy uzyskać taki fragment:



I zmieniamy trzy elementy :
Add Comment -  Dodaj komentarz lub Komentarze 
1 Comment - 1 komentarz
Comments - komentarze


Przechodzimy do okienka wyszukiwania, gdzie mamy wpisane Add comment, i wciskamy Enter by ponownie wyszukać tę frazę. Znowu dokonujemy zmian. I znowu wyszukujemy, powinniśmy dokonać tłumaczeń 4 razy dla różnych wariantów (skrót posta, post, strona ... )
Zapisujemy szablon i obserwujemy zmiany.

Komentarze przez Facebook

Możemy teraz zmienić również na polskie odpowiedniki zakładki Blogger Comment i Facebook Comment.

Wyszukujemy frazę Blogger Comment i zmieniamy ją np na Komentarze Bloggera albo Skomentuj przez Bloggera :

Dokonujemy tych zmian dwukrotnie (czyli ponownie wyszukujemy naciskając w okienku wyszukiwania Enter i zmieniamy napisy).

 Oznaczenie autora, właściciela bloga w komentarzach

Domyślnie autor, a w zasadzie administrator bloga, zostaje oznaczony wyrazem Admin. Możemy to oczywiście zmienić. Wyszukujemy frazę Admin, uważnie przeglądamy kod szablonu szukając takiego fragmentu (tutaj już po zmianie Admin na Autorka). Jeśli znaleziony fragment nie wygląda podobnie wciśnij Enter i wyszukuj dalej:


Zapisujemy szablon.


 Powiązane (podobne) posty

Pozostajemy nadal w edycji szablonu. Zmienimy teraz gadżet i jego napis RELATED POSTS na odpowiednik polski.
Wyszukujemy frazę  related posts (czyli wciskamy Ctrl+F, wpisujemy frazę i następnie wciskamy Enter) i wpisujemy np Podobne posty albo Zainteresują Cię także:

Ponownie wyszukujemy frazę - przechodząc do okienka wyszukiwania i wciskając Enter i tłumaczymy ją na język polski.
Zapisujemy szablon i obserwujemy zmiany:



Informacje o autorze

Aby pod postem widoczne były informacje o autorze przejdż do UKŁAD i w bloku Posty w blogu kliknij Edytuj. Zaznacz opcję Pokaż profil autora pod postem:

Slider

Teraz pora zająć się sliderem. Jeśli chcemy aby pojawiły się w takiej formie jak poniżej wyróżnione przez nas posty powinniśmy je odpowiednio oznaczyć. Postom, które mają zostać wyróżnione należy nadać etykietę featured. Wyróżnione zostanie 6 najnowszych postów z tą etykietą.



Ponieważ tak samo jak ja, autorka bloga, lubi wykorzystywać na blogu Gadżet Etykiety, więc postanowiłam troszkę zmodyfikować skrypt. Gadżet Etykiety pokazałby nam wśród naszych etykiet również etykietę featured.

Myślę, że lepiej będzie jeśli posty, które chcemy wyróżnić na górze strony głównej oznaczać będziemy po swojemu np wyróżnione, przypięte ... Jak to zrobić? Wyszukujemy w kodzie strony frazę featured. Jest ich bardzo wiele, my szukamy takiego fragmentu kodu:


Podkreślony wyraz featured zmieniamy na własny np. wyroznione. Pamiętamy oczywiście, aby robić to ostrożnie i nie usuwać żadnych innych znaczków.
Jeśli etykieta ma brzmieć wyróżnione, czyli zawierać polskie znaki diakrytyczne, to należy odpowiednio ją zapisać.

wyróżnione
wyr%C3%B3%C5%BCnione



Oczywiście Zapisujemy szablon i sprawdzamy efekt.





Wydaje mi się, że to wszystkie zmiany, które powinniśmy wprowadzić w tym szablonie.

 Mam nadzieję, że powyższa instrukcja była dla Was przydatna.

SZABLONY NA BLOGA BLOGSPOT:


30 komentarzy:

  1. Super też mi się podoba ten szablon, już go pobrałam, próbuje dostosować lecz nie wiem jak dodawać posty na kolejnych stronach. Pomożesz? Będę wdzięczna :-) http://przeplatam.blogspot.com/

    OdpowiedzUsuń
  2. Suuper, komentarze zmodyfikowane, czekam z niecierpliwością na dalszy ciąg.

    OdpowiedzUsuń
  3. zainstalowałam inny szablon i mam tam ikonki do portali społecznościowych jednak nie wiem jak niektóre usunąć i jak do innych dodać odpowiednie linki ;/

    OdpowiedzUsuń
    Odpowiedzi
    1. Niestety nie pomogę Ci nie widząc kodu tego szablonu

      Usuń
  4. Witaj. Dopiero uczę się "bloggowania" i idzie mi to dość opornie:) Zrobiłam wszystkie opisane wyżej zmiany w szablonie. Czy możesz mi powiedzieć jak utworzone przeze mnie strony przypisać tym zakładkom w menu głównym. Bo narazie w każdej zakładce otwierają się wszystkie posty (mimo etykiet). Będę wdzięczna za odpowiedź:)

    OdpowiedzUsuń
    Odpowiedzi
    1. Przepraszam rzeczywiście nie do końca omówiłam modyfikację menu. Do końca przyszłego tygodnia postaram się dodać odpowiednie fragmenty

      Usuń
    2. Poradziłam sobie z tym problemem:) Niestety coś mi się narobiło i wciąż zmienia się czcionka postów (mimo, ze zapisałam w edytorze postów Arial) to gdy wyświetlam bloga- jest jeden wielki bałagan. Możesz mi pomóc?

      Usuń
    3. Jeśli chcesz zmienić czcionkę dla całego posta to nie rób tego w edytorze postów. Lepiej zrobić to w szablonie. Nadal jesteś zainteresowana tym szablonem?

      Usuń
  5. Świetnie wytłumaczone, a do tego szablon jest moim imiennikiem ;) ja własnie szukam dla siebie ciekawego szablonu. Zastanawiam sie tylko, co zrobić, jeśli pobrany szablon nie obsługuje polskich znaków? Jak zmienić czcionkę?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ze zmianą czcionki nie ma problemu, można robić to w kodzie html (tak jak powyższe modyfikacje), ale można też prościutko poprzez kod css.

      Usuń
  6. mam pytanie... Jak zrobić by nie deformowały się zdjęcia (spłaszczanie)?

    OdpowiedzUsuń
    Odpowiedzi
    1. Chodzi o ten szablon, bo ja nie zauważyłam w nim problemów ze zdjęciami ?

      Usuń
  7. skąd wziąć ikonkę twittera do tego szablonu?

    OdpowiedzUsuń
  8. Też lubię te szablony : ) a i Twoja stronka dużo mi pomogła w dostosowaniu, dzięki : ) Jedynie nie mogę sobie poradzić z czcionką, która w Firefoxie nie wyświetla poprawnie polskich znaków. W Chrome wszystko jest idealnie. To chyba jakiś większy problem, spotkałaś się z czymś takim?

    OdpowiedzUsuń
  9. Czy ktoś rozwiązał już problem deformacji zdjęć w tym szablonie?

    OdpowiedzUsuń
  10. Bardzo fajny blog , dużo pożytecznych informacji.Jestem obecnie w trakcie edytowania
    szablonu http://www.lovelytemplates.com/viewdemo/Galauness , Mam duży problem a mianowicie nie wiem jak zmienić czcionkę dla nagłówka- tytułu czytanego posta. .
    Ustawiłem wszystkie czcionki na Arial w kodzie html tez wszystko zmieniłem na arial i nic :(
    Proszę o wsparcie ,nie mogę przecież w tytule posta nie używac polskich znaków
    Przesyłam link do mojego "bloga" :) może to bardziej zobrazuje mój problem
    http://ekowystarczalny.blogspot.de/2015/03/szkieletowy-domy-drewniane-moj-wybor.html

    OdpowiedzUsuń
  11. Instrukcja pomocna i jasna, dziękuję! :) Mam jednak mały problem techniczny, po wgraniu I edycji szablonu, po wejściu na stronę główną bloga przekierowuje mnie na główna stronę z szablonami z którego pobrałam szablon. Da się coś z tym zrobić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Może został tam niewłaściwy adres. Spróbuj wyszukać go w kodzie i sprawdź. Jeśli zmiana taka nie pomoże zrezygnuj z takiego szablonu

      Usuń
  12. Ponawiam pytanie , mam szblon pobrany z internetu za free zmienilam tytuly zakladek dzieki twojej instrukcji czy zmieniajac kod html, ale jak dodawac posty do konkretnych zakladek?

    OdpowiedzUsuń
    Odpowiedzi
    1. Zakładki powinny prowadzić do etykiet. Czyli musisz skopiować i wkleić adres etykiety

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

    OdpowiedzUsuń
  14. Mnie się nic nie wyświetla... Piszę "about" i wyskakuje mi ,że takiego "słowa" nie ma tam ...

    OdpowiedzUsuń
    Odpowiedzi
    1. Musisz stanąć kursorem w kodzie szablonu czyli KLIKNĄĆ w kod i dopiero ptoem wyszukiwać

      Usuń
  15. Hej! Udało mi się zmodyfikować menu górne, ale coś poplątałam z kodowaniem i post który powinien być tylko na stronie główniej pojawia się teraz we wszystkich zakładkach. Możesz proszę poradzić jak to naprawić? Jak wrzucać konkretne posty do konkretnych zakładek? Z góry dziękuję.

    OdpowiedzUsuń
    Odpowiedzi
    1. Najpierw oznacz posty etykietami wg tego psota: Kategorie, etykiety na blogu blogspot.

      Menu w tym szablonie nie jest tworzone przez gadżet Strony, tylko poprzez kod. Musisz więc skopiować adres etykiety, podobnie jak w tym poście w kroku 4 i 5: jak zrobić menu z kategoriami postów tylo zamiast do gadżetu wkleić do kodu szablonu

      Usuń
  16. Bardzo dziękuję, świetny poradnik - nie bez problemów, ale opanowałam menu :)

    OdpowiedzUsuń
  17. Bardzo proszę o pomoc!
    Zmieniłam szablon posta na nowy, razem z powyższą instrukcją pomodyfikowałam już co nieco, ale zauważyłam, że zarówno na stronie głównej, jak i w poszczególnych postach jakość zdjęć bardzo się pogorszyła :( Po kliknięciu w zdjęcie jest ok.Co może być tego przyczyną? Zmieniłam mój szablon na szablon Insight z mybloggerthemes.com

    OdpowiedzUsuń
  18. A w jaki sposób odszukać kody które odpowiadają za te małe ikonki portali społecznościowych? Mam takie na stronie głównej pod każdym postem i nie wiem pod jaką nazwą tego szukać w kodzie HTML. Pozdrawiam

    OdpowiedzUsuń
  19. jesli chodzi o "podobne posty" to zastanawiam sie jak zmienic, zeby pokazywalo tylko 2 a nie 3? z gory dziekuje za odpowiedz :)

    OdpowiedzUsuń