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 szablon. Rozpakowujemy 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 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

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.

Przewijam teraz w dół, aby zobaczyć kod całego menu.

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ć.

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

Zapisujemy  szablon.

Menu po zmianach:

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: