28.02.2015

Jak zbudować ładny i funkcjonalny szablon bloga ?

Witajcie!
Co u Was? U mnie dobrze. Muszę Wam powiedzieć, że ostatnio poświęcam czas wolny przemyśleniom na temat przyszłości. Może to wydawać się dziwne, ale tak! Myślę o sprawdzianie szóstoklasisty, a także, jak wiecie ze wstępu do poprzedniego posta - o gimnazjum. Natomiast zdaję sobie sprawę, że też nie można się zapomnieć wrócić do rzeczywistości, jednak czasem miło tak podumać, co będzie lub co by było gdyby. 
Zresztą muszę skupiać się na nauce - mamy ostatnio dużo sprawdzianów z różnych przedmiotów. Jutro jest matematyka, wczoraj była przyroda, a dzisiaj był polski i również przyroda.

Jednak zacznijmy już dzisiejszy post :)

1. Kolorystyka
 
Na początku wspomnę może o czarnym tle szpalty głównej i białym tekście.
Na pierwszy rzut oka może to wyglądać elegancko i schludnie, jednak, gdy czytamy dłuższy, obszerniejszy tekst, oczy najzwyczajniej nam się męczą. To zniechęca do czytania każdego, kto chce zapoznać się z treścią naszego posta. 
Ponadto, nie możemy umieszczać zbyt wielu kolorów w blogu. Tak, design powinien być ciekawy, ładny, jednak właśnie za duża liczba barw właśnie to uniemożliwia.  




2. Tło obrazek

Jest jednym z elementów ozdobnych bloga. Jednak, przy jego wyborze, uwzględnijmy kolor i wzór. Tło powinno pasować do kolorystyki bloga i nie może być jaskrawe, neonowe, bardzo przyciągające wzrok. Nie ma odwracać uwagi czytelnika od naszych postów, prac, bo jakby nie patrzeć, to one są tym najważniejszym elementem na blogu.
Osobiście polecam tła z białym marmurkiem, białym drewnem, delikatnymi kropkami, a także kwiatami vintage.


Tło od Julii z Don't Be Normal 
Dzięki :)



3. Pasek boczny

Kilka spraw jego dotyczących:

  • tekst powinien być wyśrodkowany - wtedy będzie oddzielał się od szpalty głównej,
  • granica między nim a szpaltą główną może być zaznaczona delikatnym akcentem (możemy go ustawić w Projektancie Szablonów Bloggera)
  • powinno się podać info o sobie, aby czytelnicy wiedzieli z kim mają do czynienia :)
  • inne gadżety też są niezbędne, np. Archiwum bloga czy Obserwatorzy
  • nie powinno się dodawać zbyt dużej liczby banerów reklamowych
  • tak jak tło, nie może za bardzo przyciągać uwagi czytelnika
  • o jego położeniu warto już jednak zdecydować samemu






 
4. Czcionki

Wbrew pozorem jej dobór jest też ważny! Do treści posta najlepiej wybrać prostą, klasyczną - Times New Roman, Arial, Georgia czy Verdana. Najlepszymi kolorami będzie czerń bądź ciemna szarość. 
Na tytuł posta zaś możemy wziąć bardziej wymyślną czcionkę - na przykład Dancing Script bądź Coming Soon. Kolor czcionki jest dopasowany oczywiście do barw bloga.
W przypadku tytułów gadżetów, mamy tą są sytuację, co w tytule posta. Istnieje także jeszcze jedna opcja - zrobić je jako obrazki w edytorze grafiki, np. PicMonkey.

Tytuł posta i treść

 

Przykładowy tytuł gadżetu zrobiony w PicMonkey



5. Nagłówek

Będzie on czynił bloga bardziej profesjonalnym i ładniejszym. Jego kolorystyka dobrana do barw bloga.
Sama postawiłam na czerń, szarość i zwykły napis, jednak Wy możecie bardziej "zaszaleć" co do kolorów, naturalnie. W nagłówkach ładnie prezentują się też różne grafiki (tak, też dopasowane do kolorów bloga :D).

Teraz, może przejdźmy do bardziej szczegółowych spraw.

Nagłówek zrobiony kiedyś - przeze mnie.












6. Ikonki społecznościowe

Są one dobrym rozwiązaniem, gdy macie konta na różnych portalach, typu FB, Instagram, Tumblr, Twitter, YT. Możecie dokładnie ustalić ich wymiar, kolor, efekt po najechaniu na nie kursorem. W tym poście pisałam właśnie jak takie wykonać na profilki.pl: link. 

Przykładowe ikonki społecznościowe zrobione przeze mnie.



7. Zakładki - strony

Gdy macie dużo informacji do pogrupowania, naprawdę się przydają. Jak zwykle, mamy pełną gamę kolorystyczną, wybór czcionki, a także obramowania. Na przykład w stronie "O mnie" można napisać trochę więcej o swojej osobie niż w pasku bocznym ;)


Takie sobie przykładowe strony :D





8. Drobne dodatki z pomocą kodów CSS i HTML

Podświetlenie zdjęcia na biało po najechaniu kursorem, wyjustowanie tekstu posta, podkreślenie tytułu posta, strzałka przenosząca w górę, okrągłe avatary osób komentujących, usunięcie napisu "Technologia Blogger".... - takich efektów do wykorzystania jest baardzo dużo :)
Zresztą tutorialom jak właśnie takie dodatki umieścić na blogu, poświęcam większość moich postów.
Takie małe detale dodają blogowi urody i uroku. Są super w przypadku, gdy chcemy na naszym blogu coś zmienić, ale tylko troszeczkę!



A więc to już koniec mojego "monologu" :)
Piszcie, czy Wam pomógł.
Do zobaczenia w następnym poście!
Karolina
PS Tak, post miał być w tą środę. Strasznie Was przepraszam, ale jestem strasznie zabiegana!


18.02.2015

Jak wykonać niestandardowe archiwum bloga? - Blogger

Cześć!
Jak zwykle na początku przychodzę z pytaniem: co u Was? U mnie nawet dobrze.
Szczerze mówiąc, nie wiem nawet, co tu napisać. Nie zdarzyło się u mnie ostatnio nic ciekawego. Najzwyklejsza codzienna rutyna, przy której szkoła w ciągu dnia zajmuje najwięcej czasu, a na odpoczynek, wyluzowanie się  i odstresowanie zostaje godzina i pół, godzina, czy nawet czasami tylko jakieś trzydzieści minut. Jednak kiedy już mam wolny czas, oglądam filmiki na YT, sprawdzam FB, Bezużyteczną, Besty, pocztę i Bloggera, czatuję, rozmawiam i przeglądam sieć w poszukiwaniu wielu, wielu rzeczy, choć ostatnio najczęściej czytam o tematach związanymi z gimnazjum, tj. przybory, jak być lubianym itp. W sumie, może tak wczesne "zajmowanie się" nową szkołą jest trochę dziwne, ale już to robię ;)

Hmm, ja tu już się rozpisałam o moim wolnym czasie, a co z postem?

A więc, rozpocznijmy już dzisiejszy tutorial.


Krok 1.
Wchodzimy na naszego Bloggera. Najlepiej otworzyć także drugą kartę w naszej przeglądarce i wpisać adres naszego bloga. Ja osobiście tak zrobiłam ;)


Krok 2.
Następnie wybieramy Układ.
Klikamy dodaj gadżet i wybieramy Tekst.



Krok 3.
Tytuł naszego gadżetu może być oczywiście dowolny, np. "Archiwum bloga", czy po prostu "Archiwum", jak mam ja.

Krok 4.
Pierwszą czynnością, jaką teraz wykonujemy to wypisanie lat i nazw miesięcy, takich z jakich mamy posty (ja np. prowadzę tego bloga od listopada, więc mam tak 2015 - luty - styczeń i jeszcze 2014 - grudzień - listopad).
Nazwy miesięcy będą hiperłączami, gdy w nie klikniemy, przeniesiemy się do strony z postami z danego miesiąca.
 Możemy dodać także pomiędzy nazwy różne, różniste znaczki, do wyboru do koloru :) Polecam Wam ten link.


Krok 5.
Gdy już wszystko wypisaliśmy, wchodzimy w drugiej karcie na naszego bloga i klikamy w naszym jeszcze nie zmienionym archiwum dany miesiąc. Kopiujemy adres url.






Krok 6.
Teraz przenosimy się znowu do naszej karty z Bloggerem  i zaznaczamy tą nazwę miesiąca, który kliknęliśmy będąc jeszcze w drugiej karcie. Klikamy przycisk Utwórz link i usuwamy "http://", gdyż w skopiowanym adresie url "http://" już występuje. Klikamy OK.
Tak robimy z pozostałymi miesiącami.






Krok 7.
Gdy już wszystko zrobimy, klikamy Zapisz, a następnie Zapisz Rozmieszczenie.



Gotowe!
Mam nadzieję, że post był zrozumiały i przydatny.

 Karolina

PS 1 Przypominam o moim e - mailu, gdzie możecie ze mną korespondować. Bardzo chętnie przeczytam też Wasze pomysły na posty, czy zmiany na blogu :)
PS 2 Tak, jeszcze jedno! :) Co myślicie o poście pt. "Jak zbudować ładny i funkcjonalny szablon bloga?"? Wydaje mi się, że to dobry pomysł. A co Wy o tym sądzicie? Czekam na Wasze odpowiedzi w komentarzach.

11.02.2015

Jak dodać podkreślenie pod tytułem posta? - Blogger

Cześć!
Co u Was? Mam nadzieję, że dobrze, tak jak u mnie. Ostatnio dostałam trochę dobrych ocen :) Powodem do mojego optymizmu jest jeszcze jutrzejsza dyskoteka karnawałowa. Mam już przygotowane ciuchy, i inne rzeczy. Poza tym ostatnio jakoś lepiej się zorganizowałam i mam więcej wolnego czasu. Mogę więcej czasu poświęcać blogowi, dłużej oglądać filmiki na YT, a także grać w Simsy 4 :)

Jednak zacznijmy już dzisiejszy post!


Krok 1.

Po pierwsze, wchodzimy w Szablon.

 Krok 2.

Następnie, klikamy Dostosuj.


 Krok 3.

Przenosimy się do Projektanta szablonów Bloggera. Wybieramy Zaawansowane.



Krok 4.

Zjeżdżamy na sam dół listy suwakiem i wybieramy Dodaj arkusz CSS.






















Krok 5.

W pole wklejamy nasz kod (który podam za chwilę) i wciskamy klawisz Enter.


Uwaga! Jeśli w tym polu macie już jakiś/jakieś kod/kody CSS, już Wam pokazuję, co należy zrobić.



Przy ostatnim znaku ostatniego naszego kodu CSS stawiamy kursor i wciskamy klawisz Enter.
Następnie wklejamy nasz kod i ponownie wciskamy Enter.


Kod:

h3.post-title {border-bottom: 1px #c7c7c7 dotted ;} 

1 px - grubość kreski (im większą liczbę wpiszemy, tym nasza kreska będzie grubsza)

#c7c7c7 - kolor kreski. Kolor możemy dowolnie zmieniać, wpisując odpowiedni kod koloru, a takie znajdziecie w palecie kolorów RGB: Kolory RGB

dotted - rodzaj kreski. Mamy do wyboru: dotted - linia kropkowana, solid - linia ciągła, dashed - kreskowana.

  
  Gotowe!
W komentarzach piszcie, czy post Wam się spodobał i czy Wam się przydał.
Dziękuję Wam za nawet najmniejszy!




 Karolina

4.02.2015

Jak dodać gadżet pokazujący, ile osób aktualnie przebywa na naszym blogu? - WHOS.AMUNG.US

Hej!
Jak tam u Was? Ja zaczęłam już szkołę w poniedziałek. Sama się sobie dziwie, ale te dwa dni temu wcale nie pomyślałam sobie, budząc się, słysząc dźwięk budzika: "Nie... Znowu do szkoła." Ale dobra, w końcu wypoczęłam podczas tych ferii zimowych!
Jednak teraz trzeba wrócić do szkolnych obowiązków, szczególnie, że mają być to miesiące o dużej ilości testów itp.

Jednak zacznijmy już post!


Krok 1.

Wchodzimy na stronę www.whos.amung.us.


Krok 2.

Zwracamy uwagę na część Getting started. Klikamy podkreślony wyraz "gallery".





Krok 3.

Przenosimy się go galerii. Tu możemy wybrać wygląd naszego gadżetu.
Do wyboru mamy: The classic widget, The colored widget,The small widget, The tab widget, The map widget oraz Chrome and Firefox.
COPY THIS CODE TO YOUR SITE:
1
2
3
4
5
6
<script id="_waufzs">var _wau = _wau || [];
_wau.push(["colored", "wmypane3wx2v", "fzs", "ffc20e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/colored.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>
DOUBLE CLICK ON CODE TO SELECT ALL

Pokażę Wam jak wygląda każdy z nich.
W następnym kroku zaprezentuję, jak taki dodać gadżet na przykładzie The tab widget. Wybrałam ten, ponieważ według mnie, jest najlepszy - mogę wybrać, gdzie dokładnie się znajduje, a nie zwracam uwagi na kolor. ;)































Krok 4.

Skupiamy się na miejscu pod kodem, po prawej stronie, zresztą jest ono zaznaczone na poniższym zrzucie ekranu.


Krok 5.

Więc, wybierzmy miejsce, w którym zostanie umieszczony widżet.
Ja wybiorę Right  Bottom.


Krok 6.

Gdy już wybraliśmy umiejscowienie gadżetu, kopiujemy kod.















Krok 7.

Wchodzimy na naszego Bloggera (w nowej karcie bądź nie), a następnie w Układ.



Krok 8.

Klikamy Dodaj Gadżet (na przykład w pasku bocznym) i wybieramy HTML/JavaScript.



Krok 9.

Wklejamy nasz skopiowany wcześniej kod i jeżeli chcemy, dodajemy tytuł.




Krok 10.

Klikamy Zapisz, a następnie Zapisz Rozmieszczenie.


10.1
10.2









Gotowe!

Jak oceniacie post?
Przydał Wam się? ;)

Karolina