Zapraszam na bloga
karta sklep

ozdobnik

Darmowy szablon blogowy – blogger/blogpost: Hipsterski (Aktualizacja – 05.2016) – zawieszony (04.2017)
Kategoria: Darmowe szablony i dodatki

UWAGA

Zawieszam ten szablon, gdyż nie mam zamiaru już go dalej wpierać. Od niedawna na Bloggerze dostępne są nowe szablony. Ładne i estetyczne. Polecam korzystanie właśnie z nich.

AKTUALIZACJE

04.05.016 – Szablon został ponownie zaktualizowany jeśli chodzi o zamazane Popularne wpisy. Problem polega na tym, że na niektórych blogach linki w gadżecie Popularne Wpisy mają poprzedni wygląd, a na innych nowy. Stąd na niektórych występuje problem, a na innych nie. Tym razem zmodyfikowałam skrypt użyty w szablonie w ten sposób, aby działał na oba. Jeśli na Twoim blogu zdjęcia popularnych wpisów są zamazane, to możesz wgrać szablon ponownie, lub skorzysta z instrukcji do samodzielnej modyfikacji kodu, który znajduje się w punkcie Problemy

19.04.2016 – Szablon został zaktualizowany jeśli chodzi o problem z Popularnymi Wpisami (Blogger zmienił wygląd linków, więc poprzedni skrypt przestał działać). Możesz pobrać poprawioną wersję lub zmienić tylko kod odpowiedzialny za tą funkcje, który jest podany w dziale Problemy

Szablon w lutym 2016 został zaktualizowany (właściwie należy go traktować jako nową wersję), usunęłam z niego zgłaszane błędy oraz dodałam „Powiązane wpisy” widoczne na stronie wpisu. Poza tym trochę go odświeżyłam :), przez co jest nieco subtelniejszy niż poprzednia wersja (aktualna wersja to ta z wersji demonstracyjnej).

Można teraz go bardziej dostosować do swoich potrzeb w Projektancie Szablonów w zakładce „Zaawansowane”  -> wszystkie dostępne tam opcje są obecnie aktywowane, np. można:
– zmienić kolor głównego obramowania (tej czarnej kreski wokół :) – jeśli zmieni się ją na biały, to po prostu nie będzie widoczna.
– zmienić kolor wszystkich linii z osobna, np. obramowania „Czytaj Dalej”
– kolor czarnego paska u góry itp.

Obramowanie strony jest teraz cieńsze, ale można je pogrubić. Instrukcja jak to zrobić znajduje się w dalszej części tego wpisu, tj. tej dotyczącej instalacji.

Problem ze zdjęciami, które są wyśrodkowane i tworzył się odstęp od lewej został usunięty.

Nastąpiły też zmiany w czcionce – zamieniłam wszystkie na tzw. bezpieczne, żeby nie było problemu z polskimi znakami – oczywiście nadal można zmienić je (np. w przypadku tekstu głównego) na inne dostępne w Projektancie Szablonów, ale generalnie nie polecam tego, ponieważ większość tamtejszych czcionek nie ma polskich znaków, więc zmieniając je na inne, sami podejmujecie decyzję, że nie będą w tej czcionce wyświetlały się poprawnie – chyba że dodacie je dodatkowo z Google Fonts jeśli akurat posiadają „polską” wersję.

Jeśli posiadacie już na swoim blogu poprzednią wersje, a chcecie zainstalować ten jako „aktualizację”, to musicie mieć na uwadze, że niektóre zmiany, które już wprowadziliście do szablonu (od strony kodu), w Projektancie Szablonów czy w zakładce Układ mogą wymagać ich ponownego wprowadzenia. Należy go traktować jako nowy szablon, który wyglądem przypomina poprzedni, więc trzeba go instalować tak jak każdy inny (aczkolwiek większość gadżetów pozostanie bez zmian, więc nie trzeba będzie ich ponownie konfigurować – co najwyżej usunąć te dublujące się, które pojawiły się w wyniku instalacji i są niepotrzebne).

Uwaga! Ważne!

Od razu też napiszę, że w kodzie zaszły zmiany – w związku z dość niemiłymi wydarzeniami, w których okazało się, że konkurencja wykorzystuje moje darmowe szablony do budowania swoich w celach komercyjnych i oczywiście usuwa z nich link do mojej strony i wstawia tam swój, postanowiłam zabezpieczyć „mój link” w stopce kodem – nie radzę go usuwać, ani nic tam zmieniać, bo wasza strona przestanie działać poprawnie– więc jeśli to się stanie, to proszę nie przychodzić do mnie z pretensjami i pytaniami jak to naprawić :) Poza tym kod został zminimalizowany, więc szablon nie nadaje się do rozbudowy od strony kodu – to też po to aby ukrócić i zniechęcić innych do przywłaszczania sobie mojej pracy jako swojej. Każdy, kto potrafi kodować, z łatwością sobie taki responsywny szablon sam zrobi, Ci którzy nie potrafią, a szukają gotowców do przywłaszczenia, zapewne też nie będę potrafili poradzić sobie ze zminimalizowanym kodem :). Nie łudźcie się, że po kodzie (nawet jeśli pozmieniacie kolejność i wymieszacie go ze swoim) nie poznam, że bazowaliście na moim – i możecie być pewni, że tak tego nie zostawię. W związku z tym, decydując się na ten szablon, bierzecie go takim jakim jest – oczywiście możecie nadal zmieniać kod jak chcecie (o ile umiecie), ale tylko na własny użytek.

Do wiadomości wszystkich: zabraniam budowania na tym szablonie swoich „własnych” szablonów, zarówno darmowych (do oferowania jako „swoje” za darmo na swoich stronach) jak i płatnych, usuwania z niego mojego linku i twierdzenia, że jest się jedynym autorem szablonu, lub co najwyżej jest oparty o Simple. Nie zrobiłam tych darmowych szablonów, po to aby ktoś na mnie żerował, a tym bardziej, aby żerowała na nich moja własna konkurencja … z tego ostatniego faktu nawet nie wiem czy mam się śmiać czy płakać … bo to jest jakiś absurd. Nigdy nie zależało mi na linkach w stopce w tych darmowych szablonach, bo są oparte o zwykłe Simple, więc nie stosowałam żadnych zabezpieczeń, ale nic tak bardzo mi nie podnosi ciśnienia jak „profesjonalistki”, które jedyne co potrafią to przywłaszczać sobie czyjąś pracę: usunąć z niej linki, wstawić swoje, dodać trochę swojego kodu i obnosić się z nią jako swoją i nigdzie nawet nie wspomną na czym tak naprawdę bazowały, więc naprawdę jestem w stanie zrobić wiele, aby im to skomplikować.

Szablon Hipsterski

Dziś z przyjemnością prezentuję wszystkim koleżankom po fachu, czyli blogerkom, nowy darmowy szablon blogowy na platformę Blogger /Blogspot. Jest minimalistyczny, elegancki, a jednocześnie wyrazisty. Po prostu piękny!

UWAGA: Szablon tylko do użytku osobistego, tj.  nie można na jego podstawie budować innych szablonów (darmowych czy płatnych ) i udostępniać ich na swoich stronach (bezpłatnie lub do sprzedaży) oraz usuwać z nich link do mojej strony ze stopki i wstawić tam swojej, nawet jeśli przebudujesz pół szablonu. Link do mojej strony jest zabezpieczony kodem – po jego usunięciu lub jakiejkolwiek zmianie w tym obszarze, blog przestanie się wyświetlać poprawnie.

———————————————————————————————————–

Dla kogo – przede wszystkim dla kobiet, którą cenią nowoczesność i najnowsze trendy. Szablon posiada szeroki pasek boczny, który jest takim małym hitem w blogowym designie. Jeśli nie masz ochoty na taką dawkę ekstrawagancji :), możesz go z łatwością zwęzić (lub poszerzyć!). Nieważne jednak co tam umieścimy, zawsze będzie prezentował się wspaniale. Z racji tego świetnie nadaje się na blogi lifestylowe, modowe czy kosmetyczne.

Dane szczegółowe szablonu:

  •  dwukolumnowy,
  •  przejrzysty, minimalistyczny layout,
  •  responsywny mobilny – dopasowuje się do szerokości przeglądarki i pięknie wygląda na urządzeniach przenośnych,
  •  szerokość maksymalna: 1180 pikseli (kolumnę boczną można zwęzić, jak? patrz poniżej)
  •  przy każdym wpisie wyświetlane są ikony: Facebooka, Pinterest, Twitter, „Wyślij pocztą email”, przycisk „Google+”
  •  Powiązane wpisy na stronie wpisu
  •  Ładny pasek z informacją o Cookies na dole strony
  •  W łatwy sposób można:
    – zmienić wielkość i rozmiar czcionki głównej,
    – dodać własny nagłówek
    – dodać nowe gadżety (Instagrama, Ikony itp)
    – usunąć obramowania
    – zmienić kolorystykę
  •  Szablon jest oparty na domyślnym szablonie Simple

Instalacja i konfiguracja szablonu

Instalacja i konfiguracja szablonu wymaga posiadania podstawowych umiejętności obsługi panelu administracyjnego Bloggera, tj. np. dodawania gadżetów

Jak zainstalować szablon
Przed zainstalowaniem szablonu, zrób kopię zapasową swojego obecnego. Przejdź do zakładki Szablon -> Utwórz/przywróć kopię zapasową -> Pobierz pełny szablon.

Następnie pobierz plik Hipsterski.zip. Rozpakuj go. Uzyskasz w ten sposób plik Hipsterski.xml

Przejdź do Szablon -> Utwórz/przywróć kopię zapasową -> Prześlij szablon z pliku na dysku twardym. -> Wybierz Plik Hipsterski.xml -> Przekaż.

Pamiętaj, że jeśli masz zainstalowane inne gadżety być może będziesz musiał poprzestawiać je na nowe miejsca (według Twojego uznania)  lub usunąć te zbędne w zakładce Układ – po zainstalowaniu szablonu w kolumnie bocznej pojawią się następujące gadżety: Witam na moim blogu, Ikony, Etykiety (wyświetlane w formie listy), Lista Linków, Archiwum bloga, Popularne posty, Szukaj w tym blogu, Instagram, Informacje o źródle.
Pod nagłówkiem pojawi się także gadżet: Strony – gdzie możesz dodać swoje strony (wcześniej utworzone w zakładce Strony).

Usuń Pasek nawigacyjny
Przejdź do zakładki Układ -> gadżet Pasek nawigacyjny -> Edytuj -> Wyłączone -> Zapisz
Co zmienić, aby Archiwum było rozwijane?
Przejdź do zakładki Układ -> Znajdź gadżet: Archiwum bloga -> Edytuj -> Styl: Lista -> Zapisz
Jak dodać strony do menu pod nagłówkiem
Aby je tam dodać, należy je najpierw utworzyć w zakładce Strony. Następnie w zakładce Układ -> znajdź gadżet Strony. Zaznacz, które strony mają się tam pojawić, a następnie kliknij Zapisz.
Jak dodać ikony, typu Facebook, Twitter do kolumny bocznej

Szablon wymaga samodzielnego dodania ikon, takich jak Facebook, Twitter, Pinterest, Google+, YouTube, Instagram, Bloglovin. Aby tego dokonać przejdź do zakładki Układ. Znajdź gadżet w kolumnie bocznej Ikony,  następnie wklej tam następujący kod:

<div id="icons">
<a href="http://facebook.com"><i class="fa fa-facebook fa-2x"></i></a>
<a href="http://twitter.com"><i class="fa fa-twitter fa-2x"></i></a>
<a href="http://instagram.com"><i class="fa fa-instagram fa-2x"></i></a>
<a href="http://google.com"><i class="fa fa-google-plus fa-2x"></i></a>
<a href="http://pinterest.com"><i class="fa fa-pinterest fa-2x"></i></a>
<a href="http://youtube.com"><i class="fa fa-youtube fa-2x"></i></a>
<a href="http://tumblr.com"><i class="fa fa-tumblr fa-2x"></i></a>
<a href="http://bloglovin.com"><i class="fa fa-heart fa-2x"></i></a>
</div>

Jak łatwo zauważyć każda linijka to jedna ikona. Jeśli, którejś nie potrzebujesz to po prostu usuń zbędny wiersz. Jeśli chcesz dodać inną ikonę (niestety nie wszystkie są dostępne), skorzystaj z kodów na tej stronie. Oczywiście zamień linki typu http://facebook.com na link do twojego fejsbukowego profilu lub fanpage’a itd.

Jeśli chcesz, aby gadżet wyglądał tak samo jak w wersji demonstracyjnej, usuń tytuł gadżetu.

Jak dodać zdjęcie i tekst Witam na moim blogu

Przejdź do zakładki Układ, znajdź gadżet Witam na moim blogu. Dodaj dowolne zdjęcie. W polu Tytuł wpisz dowolny tekst typu „Cześć!” a w polu Podpis kilka zdań o sobie lub blogu. Możesz też dodać link do dowolnej strony, np. O Mnie (jeśli taką wcześniej utworzyłeś w zakładce Strony)

Jak dodać gadżet/wtyczkę Instagram na bloga

Przejdź do zakładki Układ. Znajdź gadżet Instagram. Zaloguj się na swoje konto na Instagramie. Następnie przejdź na stronę: snapwidget.com. Na pierwszym kafelku na którym znajduje się napis „A responsive grid of Instagram photos. Supports username filtering.” kliknij „Create your Free widget”.

Kliknij na pole Username. Pojawi się tam twoja nazwa użytkownika z Instagrama oraz okienko. Kliknij zielony przycisk Authorize.

Następnie wypełnij resztę pola formularza:

Responsive: Yes

I to wszystko. Teraz wystarczy, że naciśniesz Get Widget i skopujesz kod, który pojawił się w wyskakującym oknie i wkleisz go do gadżetu, który wcześniej dodałeś. Oczywiście gadżet możesz dowolnie przemieszczać w obrębie Układu

Jak zmniejszyć lub zwiększyć czcionkę główną na blogu

Przejdź do zakładki Szablon. Przycisk Dostosuj -> Zaawansowane -> Tekst strony

Jak zmienić szerokość paska bocznego

Przejdź do zakładki Szablon -> Dostosuj -> Dostosuj Ustawienia szerokości -> Prawy pasek boczny.

Jak ustawić standardową wersję mobilną dostępną dla blogów na Bloggerze/Blogspocie

Jeśli z jakiś przyczyn wolisz domyślną wersję mobilną Bloggera. Możesz ją włączyć w zakładce Szablon -> Na komórkach -> Tak, na urządzeniach przenośnych pokazuj szablon w wersji mobilnej.

Jak ustawić wersję responsywną na urządzeniach przenośnych - jeśli się nie wyświetla

Przejdź do zakładki Szablon -> Na komórkach -> Nie, na urządzeniach mobilnych pokazuj szablon w wersji na komputery.

Jak dodać ikonki społecznościowe pod każdym wpisem

Przejdź do Układ -> Posty w blogu (Edytuj) -> Skonfiguruj posty w blogu -> Zaznacz Pokaż przyciski udostępniania, a następnie naciśnij Zapisz

Jak usunąć gadżet 'Technologia Blogger.' z kolumny bocznej

Przejdź do Układ -> Informacje o źródle (Edytuj) -> Skonfiguruj informacje o źródle -> Usuń -> OK

Jak wyświetlić Archiwum bloga w formie rozwijanej listy

Przejdź do Układ ->Archiwum bloga (Edytuj) -> Konfiguruj archiwum -> Styl: Menu -> Zapisz

Jak pogrubić obramowanie wokół strony?

Przejdź do SzablonEdytuj kod HTML -> Znajdź linijkę 35. Powinien znajdować się tam kod:
.main-inner{border:1px solid $(main.border.color);.

Zamień 1 na 2 lub 4, a następnie kliknij Zapisz Szablon

Jak wyjustować wszystkie teksty?

Tworzyłam ten szablon, aby był jak najbardziej uniwersalny – tj. nie narzucał czy tekst wpisów jest wyjustowany czy nie, bo to każdy możne sobie sam ustawić podczas tworzenia każdego wpisu. Poza tym, to kwestia sporna, czy teksty powinno się justować, a w szczególności czy powinno się to robić w wersji mobilnej. Jeśli jednak z jakichś powodów chcesz, aby wszystkie teksty były wyjustowane, to przejdź do zakładki Szablon -> Edytuj kod HTML. Powyżej tego kodu (aby go znaleźć kliknij na kod, następnie wpisz w okienko, które się pojawiło: /* Custom Code i kliknij „enter”):

/* Custom Code

wstaw:

.post-body{text-align: justify}

lub jeśli chcesz, aby tekst nie był wyjustowany w wersji na komórki, użyj tego kodu:

@media(min-width: 500px){.post-body{text-align: justify}}

Oczywiście ten drugi kod zadziała tylko wtedy jeśli dodatkowo nie justujesz swoich tekstów manualnie.

Problemy

Powiązane wpisy się nie wyświetlają!

Aby powiązane wpisy się wyświetlały, trzeba dodać etykiety do wpisów. Aby dodać etykiety (inaczej czasem nazywane kategoriami lub tagami), należy przejść do zakładki Posty, otworzyć wpis do którego chcemy dodać etykiety, po prawej stronie jest kolumna Ustawienia Posta, gdzie jest dział Etykiety. Tu należy wpisać swoje lub wybrać z tych, które zostały już wcześniej dodane (wtedy wystarczy na nie kliknąć).

Jeśli na całym blogu do danej etykiety przyporządkowany jest tylko jeden wpis – to ten wpis nie będzie wyświetlał żadnych powiązanych wpisów. Jeśli do wpisu jest przyporządkowanych kilka etykiet, to etykieta z której pobrane są wpisy jest wybierana losowo – więc jeśli wpis ma dwie etykiety: moda, uroda, gdzie „moda” jest przyporządkowana do 2 wpisów na całym blogu, a uroda do 10. To raz pod wpisem może wyświetlać się 3 wpisy, a czasem tylko jeden.

Usunąłem link do Twojej strony ze stopki i blog przestał się poprawnie wyświetlać!

Jak zaznaczyłam wcześniej, używając tego szablonu zgadzasz się, aby link do mojej  strony był w stopce. Jeśli Ci to nie pasuje z różnych względów, to nie używaj tego szablonu. Polecam więc zainstalowanie innego.

W wersji mobilnej jest wielka biała 'dziura' po prawej stronie bloga

Aby wersja responsywana wyświetlała się poprawnie, należy mieć odłączony gadżet „Pasek nawigacyjny” w Zakładce Układ. Jeśli wyświetla Ci się na blogu, to go wyłącz (zakładka Układ, znajdź gadżet Pasek nawigacyjny -> Edytuj -> Wyłączone -> Zapisz)

Jak wstawić przycisk Czytaj Dalej?

Szablon ten nie skraca automatycznie wpisów, należy je skracać manualnie. Jak to zrobić pisałam w jednym z moich wpisów, czyli TUTAJ

Jak usunąć obramowanie strony?

Przejdź do zakładki Szablon -> Dostosuj -> Zaawansowane -> Obramowanie i linie -> Obramowanie główne. Wybierz kolor biały lub przeźroczysty. Zastosuj do bloga

Popularne wpisy są zamazane

Blogger zmienił ostatnio wygląd linków do zdjęć w gadżecie Popularne Posty. Na niektórych blogach po kilku dniach linki powróciły do poprzedniego wyglądu na innych już nie.

Jeśli ten problem Cię dotyczy przejdź do zakładki Szablon -> Edytuj Kod HTML -> kliknij na kod, a następnie użyj kombinacji klawiszy np. CTRL + f i w okienku, które się pojawiło wpisz: 72- i kliknij enter.

Jeśli znaleziony kod wygląda tak:

/s72-c/g

należy zamienić na ten:

/w72-h72-p-nu/g

Jeśli natomiast tak:

/w72-h72-p-nu/g

to na

/s72-c/g

a następnie kliknij: Zapisz Szablon

UWAGA: Jeśli żadne z powyższych nie działa należy zamienić kod:

/w72-h72-p-nu/g

na

/w72-h72-p-k-nu/g

UWAGA: Jeśli żadne z powyższych nie działa należy zamienić kod (w zależności co obecnie tam macie):

na

/s72-c-k-no/g

lub:

/w72-h72-p-k-no-nu/g

Problem polega na tym, że wiele blogów ma inne kody więc trzeba próbować.

Instagram nie pobiera nowych zdjęć

Instagram zmienił regulamin, przez co strony oferujące gadżety na Instagrama także musiały zmienić sposób działania swoich gadżetów. Obecnie aby dodać gadżet Instagrama na swoją stronę, trzeba potwierdzić, że jest się właścicielem konta z którego chcemy wyświetlać zdjęcia. Wszystko sprawdza się do tego, że po prostu trzeba być zalogowany na swoje konto w momencie generowania wtyczki.

Jeśli na Twoim blogu nie wyświetlają się nowe zdjęcia z wtyczki wygenerowanej na snapwidget.com, to należy ją dodać ponownie. Sposób w jaki to zrobić jest podane w punkcie „Jak dodać gadżet/wtyczkę Instagram na bloga”

Jeśli masz dodatkowe pytania na temat tego konkretnego szablonu pisz je w komentarzach. Szanuj mój czas, tj. pamiętaj, że nie udzielam darmowej pomocy blogowej poprzez e-maila. Jeśli do mnie napiszesz, wtedy twoje zapytanie zostanie wycenione lub jeśli uznam, że dajesz mi do zrozumienia, że oczekujesz pomocy za darmo, Twoja wiadomość zostanie bez odpowiedzi.

Jeśli podoba Ci się szablon zalajkuj mój Fanpage i bądź na bieżąco z instrukcjami jak go udoskonalić, np. przygotować przyciągające uwagę bannery na pasek boczny.

Share on FacebookTweet about this on TwitterGoogle+

Komentarze Wypowiedz się

UWAGA: Obecnie nie przyjmuje nowych zleceń