10/17/2015

JAK EDYTUJĘ KOLUMNĘ BOCZNĄ W BLOGGERZE?


Design jest bardzo ważną częścią bloga. Jest odzwierciedleniem naszej duszy, poglądów, czy zainteresowań. Jest naszą wizytówką. To on jako pierwszy przykuwa uwagę czytelnika przeglądającego naszą stronkę.  Powinien być przejrzysty, estetyczny, oryginalny i wpadający w oko. Wielu bloggerów ma problem ze zrozumieniem i panowaniem kodów HTML, CSS i innych trików grafiki internetowej.
Ja nie jestem ekspertem w tej dziedzinie, ale przez niepełny rok mojej kadencji bloggerki nauczyłam się kilku podstaw, które całkiem fajnie wyglądają. Swój design staram się zawsze robić sama, ponieważ daje mi to większą satysfakcję, niż gdybym oddała tę robotę komuś innemu. Coraz częściej pytacie mnie, czy wykonam design dla Was, niestety z powodu braku czasu zawsze Wam odmawiam. Mimo wszystko, nie chcę pozostać wobec Was obojętna. Właśnie dlatego dzisiaj pokażę Wam 6 kroków na to, by kolumna boczna Waszego bloga wyglądała jak z bajki. Zapraszam do dalszej części postu!



JAK ZROBIĆ WŁASNE TYTUŁY GADŻETÓW?
1. W wyszukiwarkę wpisujemy adres: picmonkey.com, klikamy kolejno "Design"  ---> "Custom". Wpisujemy wymiary, jakie ma mieć napis (można to sprawdzić w szerokości kolumny bocznej), klikamy: "Make it!"

2. W bocznym pasku nawigacyjnym strony wybieramy kolor tła tekstu i klikamy: "Apply".
3. Wybieramy narzędzie tekstu oraz czcionkę, klikamy: "Add text" i wpisujemy tytuł gadżetu.
4. Możemy dowolnie zmieniać wielkość, pochylenie, grubość oraz kolor.
5. Jeśli chcemy dodać do tekstu obrazek, klikamy na ikonkę motylka pod którym kryje się bardzo dużo ciekawych grafik.
6. Na końcu obcinamy zbędną część tła i zapisujemy klikając: "Save" oraz wybierając jakość. png.
7. Aby dodać napis na bloga wystarczy wgrać go w układzie jako "obraz".



JAK ZROBIĆ DUŻE/ OKRĄGŁE ZDJĘCIE W OPISIE "O MNIE"?

1. Wybieramy swoje najładniejsze zdjęcie z galerii oraz wgrywamy je do programu GIMP (wystarczy zrobić kopij- wklej).
2. Zaznaczeniem eliptycznym rysujemy obszar, który chcemy, by znalazł się w naszej kolumnie bocznej.
3. Prawym przyciskiem myszy klikamy kolejno: edycja ---> skopiuj. Otwieramy nowy plik i wklejamy.
4. Wklejone zdjęcie powinno być okrągłe i mieć transparentalne tło (tzn. czarno- szare kratki). Jednak, jeśli nie ma z górnego paska menu programu wybieramy: warstwa ---> przeźroczystość ---> dodaj kanał alfa.
5. Z przybornika wybieramy narzędzie różdżki i klikamy nią w białe tło wokół zdjęcia. Następnie prawym przyciskiem myszy wybieramy: edycja ---> wytnij.
6. Aby zapisać zdjęcie należy wybrać: plik ---> wyeksportuj oraz wybrać rozszerzenie .png .
7. Aby dodać zdjęcie na bloga należy wgrać je w układzie jako "obraz".
JAK DODAĆ IKONKI SPOŁECZNOŚCIOWE?
1. W wyszukiwarce wpisujemy adres: www.iconfinder.com.
2. Na podanej wyżej stronie wyszukujemy ikonki, które nam są potrzebne wpisując np. Facebook.
3. W opcjach strony po lewej stronie wybieramy: "free", czyli darmowe oraz dowolny rozmiar.
4. Wybieramy ikonkę, która najbardziej nam się spodoba klikając na nią.
5. Prawym przyciskiem myszy wybieramy "kopij adres URL grafiki" oraz wklejamy go do notatnika.
6. Aby dodać ikonkę do kolumny bocznej wystarczy wybrać w układzie gadżet: "HTML/ JavaScript" oraz w puste miejsce wkleić kod:
<a href="ADRES STRONYTARGET="_blank"><img src="LINK DO IKONKI"border="0" alt="Photobucket" /></a>
7. W miejscu "ADRES STRONY" wklejamy link do platformy społecznościowej (np. Facebook), a w miejscu "LINK DO IKONKI" link, który wcześniej zapisaliśmy w notatniku.

JAK ZMIENIĆ WYGLĄD ARCHIWUM?

1. Wchodzimy w układ---> dodaj gadżet "tekst".
2.Wpisujemy rok i miesiące.
3. Zaznaczamy jeden z miesięcy i dodajemy do niego link, klikając na czwartą ikonkę (licząc od lewej strony).
4. W okienko, które wyskoczy wklejamy następujący kod:
https://written-by-life.blogspot.com/2014_01_01_archive.html
Kolor różowy- rok
Kolor szary- miesiąc
(Najpierw wklejamy adres swojego bloga, a następnie zmieniamy pogrubione liczby w zależności od tego pod jaki miesiąc i rok dodajemy link. Takie archiwum trzeba samemu uzupełniać!)
JAK ZROBIĆ ROZWIJANY GADŻET?
1. Wchodzimy w układ---> dodaj gadżet "HTML/JavaScript".
2. W puste pole wklejamy następujący kod:

#id .widget-content { height:
0px; /*schowanie widżetu*/overflow: hidden;transition: height .7s ease; /*animacja*/-webkit-transition: height .7s ease;-moz-transition: height .7s ease;-o-transition: height .7s ease; -ms-transition: height .7s ease;#id:hover .widget-content {
height: 50px; /*wysokość docelowa widżetu*/}

3.Kod uzupełniamy według własnych potrzeb:
id-id gadżetu, który chcemy schować (instrukcja ---> TUTAJ <--- )
7s-czas w sekundach, w jakim gadżet ma się wyrobić z pełnym rozwinięciem (mniejsza
wartość- rozwijanie szybkie, większa wartość- rozwijanie wolne.
ease- określa w jakim stylu gadżet będzie się rozwijał ( linear- szybkość rozwijania
jest stała / ease- gadżet wystartuje powoli, potem przyspieszy, a na końcu
zwolni / ease-in - powolny start / ease-out - hamowanie na końcu / ease-in-out
- powolne hamowanie i start).

JAK ZROBIĆ RUCHOME BANERY?
1. Wgrywamy baner na stronę hostującą obrazki i kopiujemy adres URL baneru (intrukcja- na początku jest krótkie wyjaśnienie <klik>).
2. Wchodzimy w Bloggerze kolejno: układ ---> dodaj gadżet "HTTP/JavaScript" i w puste  miejsce wklejamy poniższy kod oraz uzupełniamy go według własnych potrzeb:
<marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3"><a href="LINK 1" target="_blank"><img alt="LINK 2" border="0" height="134" src="LINK 2"/></a></marquee>

left- kierunek przesuwania banerów (left- do lewej, right- do prawej, up- w górę, down- w dół)  

3- szybkość poruszania się baneru (im większa liczba, tym szybciej się porusza) 
LINK 1 - link do strony, na którą po kliknięciu ma przenosić nasz baner
LINK 2 - tutaj wklejamy link URL obrazu 
134- wysokość banerów

3. To jest kod na jeden baner. Aby dodać kolejne, musimy wkleić pomiędzy </a>  a  </marquee>  ten fragment: 
<a href="LINK 1" target="_blank"><img alt="LINK 2" border="0" height="134" src="LINK 2"/></a>
 
Mam nadzieję, że poradnik okaże się dla Was przydatny. Jeśli macie jeszcze jakieś pytania to śmiało zadawajcie je w komentarzach, a ja postaram się jak najlepiej pomóc!

Wyniki rozdania pojawią się dzisiaj lub jutro na moim Fapage <klik>, więc śledźcie go!



66 comments:

  1. Fajny post, myślę że pomoże mi w poprawie wyglądu bloga :)
    dodam do obserwowanych żeby mieć się na "wierzchu"

    ReplyDelete
  2. Świetny post, bardzo przydatny, szczególnie gdy ktos dopiero zaczyna swoją przygodę z blogowaniem jak ja :D

    ReplyDelete
  3. Bardzo przydatny post. Następnym razem jak będę zmieniać design - wpadnę i wezmę pod uwagę Twoje wskazówki.
    Piękny design ! *,*
    Pozdrawiam
    cherryandclaudia.blogspot.com

    ReplyDelete
  4. Świetne rady, bardzo przydatny post :*
    http://byloony.blogspot.com/

    ReplyDelete
  5. Bardzo przydatne rady w poście!
    www.najkablog99.blogspot.com

    ReplyDelete
  6. Bardzo pomocny post :)
    http://roksanablogg.blogspot.com/2015/10/w-kregu-monotonnej-codziennosci.html

    ReplyDelete
  7. Napewno skorzystam z twoich rad jak będę robiła nowy design bloga :).
    Trzymaj się!.
    free-style-for-you-and-me.blogspot.com

    ReplyDelete
  8. Bardzo przydatny i ciekawy post!! :D :)

    ReplyDelete
  9. Dzięki za pomoc z tymi ikonkami! Bardzo mi się przyda :)

    http://odcenzurowane.blogspot.com/

    ReplyDelete
  10. Bardzo mi pomogłaś. A twój design jest przecudny! :)

    Pozdrawiam Cię serdecznie, jesteś ciekawą osobą!
    all-pastel-world.blogspot.com ○• klik •○

    ReplyDelete
  11. Bardzo pomocny post! To świetnie, że robisz takie posty dla swoich czytelników pomimo braku czasu. Twoje porady na pewno mi się przydadzą, gdy będę chciała spróbować zrobić samemu design ;)

    http://neverstopdreaminggg.blogspot.com/

    ReplyDelete
  12. Super przydatny post!
    Dziekuję za komentarz u mnie :*
    Pozdrawiam.

    ReplyDelete
  13. Super, ja np. nie widziałam jak zmienić archiwum i urozmaicić ikonki :) Super!! :*
    Pozdrawiam berrythere.blogspot.com

    ReplyDelete
  14. Naprawde przydatny post! Podkradne kilka trikow :D Bo moj blog potrzebuje odswiezenia! :D

    Versjada

    ReplyDelete
  15. Fajny post, na pewno kiedyś się przyda :D

    ReplyDelete
  16. Bardzo fajny post.
    Przydatny, ładnie wszystko wyjaśnione.
    Sama się tego nauczyłaś?

    -

    Nie mogę się doczekać wyników ^^

    ReplyDelete
  17. Bardzo fajny i przydatny post. Na pewno skorzystam.
    Pozdrawiam!
    http://xmixola.blogspot.co.uk/?m=1

    ReplyDelete
  18. Przydatny post!Jak będę zmieniać wygląd to skorzystam, więc dodaję ten post do zakładek w chrome. :3
    Mogłabyś poklikać u mnie w linki pod stylizacjami w najnowszym poście? ♥ BLOG

    ReplyDelete
  19. Naprawdę bardzo przydatny post!
    Ostatnio postanowiłam, że sama ogarnę trochę design, więc na pewno przyda mi się Twój poradnik :D

    justsayhei.blogspot.com

    ReplyDelete
  20. Bardzo przydatny post dla początkujących :) Fajnie,że jest on taki rozbudowany :)
    Zapraszam do Natalie Forever : http://natalie-forever.blogspot.com/2015/10/mineral-black-mud-and-savon-noir-lorient.html

    ReplyDelete
  21. Super post, może zastosuje cos do mojego bloga. Dopiero zaczynam więc takie rady mi się przydadza :)
    +obserwuje i zapraszam do siebie

    http://160wkapeluszu.blogspot.com/2015/10/drugie-zycie-czyli-jak-wykorzystac-zy.html?m=1

    ReplyDelete
  22. Bardzo przydatny post! :) Dobrze, że jesteś w tych internetach, bo naprawdę dzięki Tobie ta tzw. "blogosfera" staje się jaśniejsza. Gratuluję Kinga! :)

    ReplyDelete
  23. Post bardzo przydatny :-) na pewno się kiedyś przyda w przyszłości :-)

    http://kolejnylevel.blogspot.com/

    ReplyDelete
  24. Fajny pomysł, żeby się podzielić z innymi tym, bo takich poradników jest niewiele.
    oczymakibica.blogspot.com

    ReplyDelete
  25. Ja mam strasznie wysokie wymagania dotyczące wyglądu i nad nowym pracuję już bardzo długo. Twoje rady mogą się przydać ;)

    toofussy.blogspot.com

    ReplyDelete
  26. Świetny post, na pewno kiedyś skorzystam z tych porad :)

    hmuoyevol.blgospot.com

    ReplyDelete
  27. Większość rzeczy wiedziałam, ale i tak bardzo mi pomogłaś z tymi ruchomymi banerami. Już wkrótce to wykorzystam, dziękuje :)
    http://frazeologizmastrall.blogspot.com/

    ReplyDelete
  28. Świetny post ! :)
    Pozdrawiam ;)

    youngpolishboy.blogspot.com

    ReplyDelete
  29. Super post :)
    Muszę pomyśleć nad zmianą czegoś u siebie :)
    Pozdrawiam

    ReplyDelete
  30. bardzo fajny i przydatny post
    fashionstreetinspiration

    ReplyDelete
  31. prosto i na temat, dzięki za pomoc :)
    pozdrawiam!

    ReplyDelete
  32. Świetny i pomocny post :)

    http://virutite.blogspot.com/

    ReplyDelete
  33. Widzę, że znasz się na tym. Ja zawsze o pomoc proszę brata :)

    www.nieobliczalna.pl

    ReplyDelete
  34. Nie było mnie tu trochę, a tu nowy, przejrzysty i jakże zapadający w pamięci szablon. Podoba mi się ten domek symbolizujący stronę główną, nigdy się z czymś takim nie spotkałam. Rady z pewnością przydatne, trochę poczytałam. Dla mnie takie rzeczy to istna czarna magia, ale przyjaciółka zajmuje się kodowaniem, robieniem szablonów i tak dalej, nawet idzie na studia w tym kierunku, więc mam szczęście.
    Trzymaj się, powodzenia.
    upadly-marzyciel.blogspot.com

    ReplyDelete
  35. mega przydatny post, widać, że włożyłaś w to dużo pracy więc duży szacunek za to, uwielbiam takie dopracowane blogi jak twój :) ja zastanawiałem się właśnie nad dodaniem swojego zdjęcia na bloga takiego na avek, bo cały czas starałem się być anonimowy :D i chciałem właśnie takie kółko, a z moimi zdolnościami graficznymi byłoby to trochę niemożliwe, ale dobrze,że o tym napisałaś :)
    introverted-journal.blogspot.com

    ReplyDelete
  36. a byłam ciekawa jak się te kreski przy np. 'archiwum' robi :(

    ReplyDelete
  37. jestem jeszcze zielona jeśli chodzi o design i kody, więc w tym momencie bardzo mi pomogłaś, bo zamierzam zrobić metamorfozę bloga na zimę :) Bardzo podoba mi się pomysł na okrągłe zdjęcie. Wykorzystam w najbliższym czasie także ikonki społecznościowe :)

    ReplyDelete
  38. Świetny tutorial, będę wpadać :-)

    ReplyDelete
  39. fajna instrukcja

    http://iamemilia.blogspot.com

    ReplyDelete
  40. Dokładnie pokazane, a wygląd jest przepiękny.

    ReplyDelete
  41. Bardzo ciekawie piszesz, na pewno wejdę tu nie raz :)

    http://swiat-oczami-nastolatki.blogspot.com

    ReplyDelete
  42. Dzięki za ten poradnik - good job :)
    Dobrej Nocy!
    http://fridayp.blogspot.com/

    ReplyDelete
  43. Koniecznie muszę poczytać to na spokojnie i coś zastosować do swojego bloga <333
    Świetne porady!

    http://bywikkis.blogspot.com/

    ReplyDelete
  44. bardzo przydatny post a przede wszystkim świetnie wytłumaczone :)
    http://eunikovakinga.blogspot.com/2015/10/burgundy-color-beige.html

    ReplyDelete
  45. z pewnością informacje przydadzą się :)

    ReplyDelete
  46. Super przydatny post, na pewno skorzystam :)

    ReplyDelete
  47. Bardzo przydatny post, podstawy wypada znać :) Pozdrawiam i zapraszam do mnie - http://190415.blogspot.com/2015/10/maski-na-twarzach-zasony-na-sumieniach.html
    A sam design Twojego bloga jest przeuroczy :)

    ReplyDelete
  48. Przydał mi się twój post! Na moim blogu już są za pomocą twojego wpisu! Dziękuję <3

    ReplyDelete
  49. Świetny post! Bardzo przydatne rady, zwłaszcza dla początkujących :)
    Zapraszam :) http://artisanima.blogspot.com/

    ReplyDelete
  50. bardzo fajny i pomocny post :)) evelciovelove.blogspot.com

    ReplyDelete
  51. Jeju jesteś niesamowita *O*
    Post jest bardzo pomocny i na pewno skorzystam ^^

    http://asaminach.blogspot.com/

    ReplyDelete
  52. Bardzo przydatny post dla początkujących! Też używam iconfinder ;)

    Nowy Post!- Klik!

    ReplyDelete
  53. Nareszcie ktoś napisał to jak dla komputerowego beztalencia, czyli mnie :) Dziękuję :)

    Pozdrawiam i zapraszam do siebie :) Jeśli możesz polajkuj mnie na fb :)
    cakesbykejt.blogspot.com

    ReplyDelete
  54. Bardzo pomocny post . Myslę , że z czegoś skorzystam :)
    http://anonimoowax.blogspot.com/

    ReplyDelete
  55. Świetne porady,na pewno wypróbuje :)
    fashion--twins.blogspot.com

    ReplyDelete
  56. Dzięki, bardzo mi pomogłaś z tymi ikonkami :)
    Mój blog - klik <- nowy adres bloga :)

    ReplyDelete
  57. Może nie mi lecz na pewno wielu innym osobom bardzo pomogłaś.

    Buziak
    alexamariani.blogspot.com

    ReplyDelete
  58. Myślę, że bardzo przydatny post :) I na pewno skorzystam z rad, jakie dałaś :) A przy okazji zapraszam też do siebie >MÓJ BLOG - KLIIK<

    ReplyDelete
  59. Post jest mega przydatny! :D Dodałam już go sobie do ulubionych bo bardzo zainteresowała mnie m.in strona jakiej używasz do pobierania ikonek. Jest na prawdę genialna i chyba sama z niej skorzystam przy zmianach technicznych na mojej stronie : D.


    Zapraszam na nowy post i pozdrawiam :)
    http://mademoiselleviki.blogspot.com/2015/10/the-essence-of-autumn.html

    ReplyDelete
  60. bardzo mi się podobają te porady :) wypróbuję je :D
    ZAPRASZAM http://cytrynka08.blogspot.com/?m=0

    ReplyDelete
  61. Super przydatny blog. Trzyzmaj taki poziom! Pozdrawiam cieplo z Sycylii

    ReplyDelete
  62. Świetny poradnik! Postanowiłam z niego skorzystać ale nie do końca rozumiem jak wgrać napis w układzie jako obraz:) Mogłabyś mi wytłumaczyć? :p

    ReplyDelete

Dziękuję za każdy komentarz i obserwację.