sobota, 6 lutego 2016

#1 Pomysł na ferie..? + Kody.

Witajcie! Remont przenosi się na inne pokoje, a powoli opuszcza mój. Co oznacza..? Że znalazłam swojego laptopa! Tak od tych kilku dni namiętnie szukałam go w swoim pokoju. A uwierzcie mi trudno znaleźć coś w pokoju do którego nawet nie da się wejść przez meble wywleczone na sam środek pokoju. Nie dość że narobiłam sobie siniaków, skacząc jak ta małpa po cholernych meblach które najwidoczniej mnie nie lubią. Oprócz tego by podłączyć internet o mało się nie zabiłam. Kiedy robią wam kontakty i całą tą izolację nigdy ale to prze nigdy nie tykajcie się kontaktów! I nawet nie próbujcie sprawdzić dlaczego. 
Okay, wracając do notki, dziś pokażę wam instrukcję na.. 

Nową schludniejszą wersję dla Profilu dodawanego przez bloggera czy Plus Google. 

Jak każdy wie (zwłaszcza graficy) Profile typu Blogger czy Plus Google nie są zbyt schludnym widgetem, który fajnie wygląda przy nowym szablonie. Dość często nawet pojawiają się problemy z dostosowaniem go do nowej szerokości kolumny. Ja dość często odradzałam dodawanie tego widgetu, bo po prostu moje oczy płaczą gdy widzę to małe gówienko na szablonie. Dlatego też wymyśliłam kilka pięknych wersji dla naszych Profili. Nie są one dość ciężkie i każdy może je zmienić i ustawić. 

(A teraz mały konkursik, zróbcie swoje remake'i tych kodów, jedna osoba nie musi robić wszystkich może zrobić dwa, albo jeden. I pokażcie mi je w komentarzach. -Wyślijcie linka do nich- a najlepsze 3 z nich zostaną pokazane w następnej notce oraz użyte za waszą zgodą w szablonach wolnych. Jeśli nie wiecie gdzie można robić takie kody to zapraszam na te stronki, na których ja najczęściej tworze: dabblet.com / codepen.io / cssdeck.com)



Wersja 1

-Jest to wersja podstawowa- 
Mogłabym nawet rzec że to jest nasz taki szkielet, profilu.


1. A więc wchodzimy sobie w Układ > Dodajemy sobie widget HTML/JavaScript a do niego wklejamy sobie taki kodzik.

  1. <div class="about">
  2.   <div class="cover">
  3.     <img src="http://funkyimg.com/i/25rFK.png" />
  4.   </div>
  5.   <img src="http://funkyimg.com/i/25rF4.jpg" class="photo" />
  6.   <nazwa>Luna || 1998</nazwa>
  7.   <tresc>"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur. </tresc>
  8.   <ul></ul></div>



2. Objaśnienia:
Pierwszy link: http://funkyimg.com/i/25rFK.png -Jest to tło za zdjęciem profilowym. Zamiast niego wklejasz jakiś inny link z zdjęciem twojego tła.
Drugi link: http://funkyimg.com/i/25rF4.jpg -Jest to zdjęcie profilowe. Zamiast niego wklejasz jakiś inny link z twoim zdjęciem profilowym.
Słowa: Luna || 1998 ; Możesz je zmienić na swoje imię i swój rocznik lub twoją pracę..co tylko chcesz.
Słowa:
"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur.
Możesz również zamienić na co chcesz, może to być opis ciebie, bloga, lub treści jaką publikujesz..


3. Teraz wejdź w Układ > Projektant Szablonów > Następnie Dostosuj arkusz CSS i wklej tam ten kod:

  1. /*TU WPISUJESZ WYSOKOŚCI CAŁEGO WIDGETU ORAZ OBRAMOWANIA KOLORY TŁA*/
  2. .about
  3. {
  4.   top:auto;
  5.   left:auto;
  6.   position: relative;
  7.   margin: 0px;
  8.   border:1px solid #aaa;
  9. }
  10. /*TU WPISUJESZ WYSOKOŚCI ZDJĘCIA TŁA*/
  11. .about > .cover
  12. {
  13.   height: 160px;
  14.   overflow: hidden;
  15. }
  16. /*JEST TO EFEKT WYŚWIETLANIA ZDJĘCIA TŁA*/
  17. .about > .cover > img
  18. {
  19.   width: 100%;
  20.   height: auto;
  21.   min-height: 160px;
  22. }
  23. /*TU DOSTOSOWUJESZ WYGLĄD UKŁAD ZDJĘCIA PROFILOWEGO*/
  24. .about > .photo
  25. {
  26.   position: absolute;
  27.   top: 85px;
  28.   left: 50%;
  29.   width: 100px;
  30.   height: 100px;
  31.   margin: 0 0 0 -55px;
  32.   border: 5px solid #eee;
  33.   border-radius: 50%;
  34. }
  35. /*PODSTAWOWE WIADOMOŚCIU DO UTRZYMANIA WIDGETU W KUPIE*/
  36. .about > tresc, .about > nazwa
  37. {
  38.   display: block;
  39.   margin: -15px 0;
  40.   text-align: center;
  41.   font-weight: 300;
  42.   padding:10px;
  43.   color: #333;
  44. }
  45. /*ZMIANY WPROWADZANE W TREŚCI TEKSTU*/
  46.  .about > tresc{
  47.    font-weight:100;
  48.    font-family:Oswald;
  49.    line-height:25px;
  50.    font-size:16px;
  51.    text-align:justify;
  52. }
  53. /*ZMIANY WPROWADZANE W TREŚCI NAGŁÓWKA*/
  54. .about > nazwa
  55. {
  56.   font-family:Oswald;
  57.   margin: 36px 0 2px;
  58.   font-size: 30px;
  59.   color:  #24b1b7;
  60. }

4.Oczywiście zmiany są dozwolone. Bawcie się, kreujcie a przede wszystkim zakredytujcie tą wersję.

Wersja 2

-Jest to wersja podstawowa z ikonkami społecznościowymi- 


1. (c) Na samym początku wchodzimy w kokpicie w Szablon > Edytuj kod HTML > Wyszukujemy przez CTRL + F: </head> a następnie nad tym kodem wklejamy sobie to:

  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"></link>

2. Zapisujemy szablon i wchodzimy w układ > Dodajemy widget HTML/JavaScript i dodajemy sobie następujący kodzik:



  1. <div class="about">
  2.   <div class="cover">
  3.     <img src="http://funkyimg.com/i/25rFK.png" />
  4.   </div>
  5.   <img src="http://funkyimg.com/i/25rF4.jpg" class="photo" />
  6.   <nazwa>Luna || 1998</nazwa>
  7.   <tresc>"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur. </tresc>
  8.   <div id='ikony'><div class='strony'>
  9. <a href='link1'><i class="fa fa-facebook-square"></i>
  10. <a href='link2'><i class="fa fa-instagram"></i>
  11. <a href='link3'><i class="fa fa-twitter-square"></i>
  12.  <a href='link4'><i class="fa fa-google-plus-square"></i>
  13. <a href='link5'><i class="fa fa-tumblr-square"></i>
  14. </a></a></a></a></a></div></div>
  15.   <ul></ul></div>



3. Objaśnienia:
Pierwszy link: http://funkyimg.com/i/25rFK.png -Jest to tło za zdjęciem profilowym. Zamiast niego wklejasz jakiś inny link z zdjęciem twojego tła.
Drugi link: http://funkyimg.com/i/25rF4.jpg -Jest to zdjęcie profilowe. Zamiast niego wklejasz jakiś inny link z twoim zdjęciem profilowym.
Słowa: Luna || 1998 ; Możesz je zmienić na swoje imię i swój rocznik lub twoją pracę..co tylko chcesz.
Słowa:
"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur.
Możesz również zamienić na co chcesz, może to być opis ciebie, bloga, lub treści jaką publikujesz..
Tam gdzie pisze:
link1 -wklejasz link swojego facebooka
link2 -wklejasz link swojego instagrama
link3 -wklejasz link swojego twittera
link4 -wklejasz link swojego google plus
link5 -wklejasz link swojego tumblr'a

4. Teraz wejdź w Układ > Projektant Szablonów > Następnie Dostosuj arkusz CSS i wklej tam ten kod (jest to ten sam kod co w -Wersji 1- tylko zostały do niego dodane kody do ikonek)




  1. .about
  2. {
  3.   top:auto;
  4.   left:auto;
  5.   position: relative;
  6.   margin: 0px;
  7.   border:1px solid #aaa;
  8. }
  9. .about > .cover
  10. {
  11.   height: 160px;
  12.   overflow: hidden;
  13.   width: 100%;}
  14. .about > .cover > img
  15. {
  16.   width: 100%;
  17.   height: auto;
  18.   min-height: 160px;
  19. }
  20. .about > .photo
  21. {
  22.   position: absolute;
  23.   top: 85px;
  24.   left: 50%;
  25.   width: 100px;
  26.   height: 100px;
  27.   margin: 0 0 0 -55px;
  28.   border: 5px solid #eee;
  29.   border-radius: 50%;
  30. }
  31.  .about > tresc, .about > nazwa
  32. {
  33.   display: block;
  34.   margin: -15px 0;
  35.   text-align: center;
  36.   font-weight: 300;
  37.   padding:10px;
  38.   color: #333;
  39. }
  40.  .about > tresc{
  41.    font-weight:100;
  42.    font-family:Oswald;
  43.    line-height:25px;
  44.    font-size:16px;
  45.    text-align:justify;
  46. }
  47. .about > nazwa
  48. {
  49.   font-family:Oswald;
  50.   margin: 36px 0 2px;
  51.   font-size: 30px;
  52.   color:  #24b1b7;
  53. }
  54. /*ZMIANY WPROWADZANE W LINKACH IKONEK*/
  55. #ikony a{
  56.   padding:10px;
  57.   text-decoration:none;
  58.   font-size:25px; ;}
  59. /*ZMIANY WPROWADZANE CAŁYM KAWAŁKU IKONEK*/
  60. #ikony {
  61.   z-index:411;
  62.   text-align:center;
  63.  margin: 15px 0 0px; }
  64. /*TU ZMIENIAMY TYLKO KOLOR IKONEK*/
  65. #ikony i{color:#24b1b7;}
  66. /*ZMIANY WPROWADZANE W HOVERZE IKONEK*/
  67. #ikony i:hover{color:#555;
  68.  -moz-transition:all 2s;
  69.  -webkit-transition:all 2s;
  70.  -o-transition:all 2s;}

4.Oczywiście zmiany są dozwolone. Bawcie się, kreujcie a przede wszystkim zakredytujcie tą wersję.

Wersja 3

-Jest to wersja podstawowa z linkami do profili oraz stron- 


1.Wchodzimy w układ > Dodajemy widget HTML/JavaScript i dodajemy sobie następujący kodzik:

  1. <div class="about">
  2.   <div class="cover">
  3.     <img src="http://funkyimg.com/i/25rFK.png" />
  4.   </div>
  5.   <img src="http://funkyimg.com/i/25rF4.jpg" class="photo" />
  6.   <nazwa>Luna || 1998</nazwa>
  7.   <tresc>"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur. </tresc>
  8.      <div id='linki'><div class='strony'>
  9. <a href='link 1'>Blogger</a>
  10. <a href='link 2'>Google Plus</a>
  11. </div></div>
  12.   <ul></ul></div>

3. Objaśnienia:

Pierwszy link: http://funkyimg.com/i/25rFK.png -Jest to tło za zdjęciem profilowym. Zamiast niego wklejasz jakiś inny link z zdjęciem twojego tła.
Drugi link: http://funkyimg.com/i/25rF4.jpg -Jest to zdjęcie profilowe. Zamiast niego wklejasz jakiś inny link z twoim zdjęciem profilowym.
Słowa: Luna || 1998 ; Możesz je zmienić na swoje imię i swój rocznik lub twoją pracę..co tylko chcesz.
Słowa:
"Nasze istnienia nie należą do nas, od łona do grobu jesteśmy złączeni z innymi - z tymi co byli (są) i będą. O naturze naszego życia świadczą nasze słowa i uczynki." -Atlas Chmur.
Możesz również zamienić na co chcesz, może to być opis ciebie, bloga, lub treści jaką publikujesz..
Tam gdzie pisze:
link1 -wklejasz link swojego bloggera
link2 -wklejasz link swojego google plus
Oczywiście:
Blogger
Google Plus
Możecie zmienić na cokolwiek innego c:


4.Teraz wejdź w Układ > Projektant Szablonów > Następnie Dostosuj arkusz CSS i wklej tam ten kod (jest to ten sam kod co w -Wersji 1- tylko zostały do niego dodane kody do linków)


  1. .about
  2. {
  3.   top:auto;
  4.   left:auto;
  5.   position: relative;
  6.   margin: 0px;
  7.   border:1px solid #aaa;
  8. }
  9. .about > .cover
  10. {
  11.   height: 160px;
  12.   overflow: hidden;
  13.   width: 100%;}
  14. .about > .cover > img
  15. {
  16.   width: 100%;
  17.   height: auto;
  18.   min-height: 160px;
  19. }
  20. .about > .photo
  21. {
  22.   position: absolute;
  23.   top: 85px;
  24.   left: 50%;
  25.   width: 100px;
  26.   height: 100px;
  27.   margin: 0 0 0 -55px;
  28.   border: 5px solid #eee;
  29.   border-radius: 50%;
  30. }
  31.  .about > tresc, .about > nazwa
  32. {
  33.   display: block;
  34.   margin: -15px 0;
  35.   text-align: center;
  36.   font-weight: 300;
  37.   padding:10px;
  38.   color: #333;
  39. }
  40.  .about > tresc{
  41.    font-weight:100;
  42.    font-family:Oswald;
  43.    line-height:25px;
  44.    font-size:16px;
  45.    text-align:justify;
  46. }
  47. .about > nazwa
  48. {
  49.   font-family:Oswald;
  50.   margin: 30px 0 2px;
  51.   font-size: 30px;
  52.   color:  #24b1b7;
  53. }
  54. /*ZMIANY WPROWADZANE W CAŁEJ POWIERZCHNI LINKÓW*/
  55. #linki{
  56.   text-align:center;
  57.  margin: 15px 0 0px;}
  58. /*ZMIANY WPROWADZANE W POJEDYNCZYCH LINKACH*/
  59. #linki a:link{
  60. font-family:oswald;
  61.   font-weight:600;
  62.   display: inline-block !important;
  63.   border: 1px solid #aaa;
  64.   color: #24b1b7;
  65.   font-size: 10pt;
  66.   width: 120px;
  67.   height: 25px;
  68.   line-height: 25px;
  69.   text-align: center;
  70.   padding: 0px;
  71.   text-decoration: none;
  72.   letter-spacing: 2px;
  73.  text-transform: uppercase;
  74. transition-property: (all);
  75.   transition-duration:2s;
  76. transition-timing-function:(ease-in);}
  77. /*ZMIANY WPROWADZANE W HOVERZE LINKÓW*/
  78. #linki a:hover{
  79.   color:#eee;
  80.   background:#24b1b7;
  81. transition-property: (all);
  82.   transition-duration:2s;
  83. transition-timing-function:(ease-in);}

4.Oczywiście zmiany są dozwolone. Bawcie się, kreujcie a przede wszystkim zakredytujcie tą wersję. 

__________________________________________
W razie jakichkolwiek problemów zapraszam do napisania w komentarzu lub na mailu: 
a.krekora98@gmail.com
Do zobaczenia za 2 dni! 
xx



6 komentarzy:

  1. Świetnie wyjaśniona instrukcja, na pewno przyda się całej masie osób, mi najbardziej podoba się 2 wersja tego profilu :D A co do remontu, to jak zmienił się twój pokój ? :P Nwm może kolor ścian lub meble ... opowiadaj xDDDD Pozdrawiam cieplutko ! :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Ooo Jane! Jak ja dawno ciebie nie widziałam tutaj! U mnie izolację zmieniali, pruli mi ściany i teraz będę miała zakładaną tapetę na ścianę *u* Szara ściany + na jednej z nich tapeta niecałkowicie biała z gałęźmi w kolorze #222 xDD Nie wiem jaki to kolor ale będzie wyglądać to pięknie *--*
      Również pozdrawiam słońce xx

      Usuń
    2. Ejjjj ja mam w pokoju tapetę z gałęziami w tym kolorze tylko o wiele jaśniejszym odcieniu XDDDDDD W Castoramie kupiłam XD Boska jest i tw pewnie też bd *.*

      Usuń
  2. Dla mnie wszystko, co związane z informatyką, jest czarną magią, ale naprawdę nieźle tłumaczysz i przydadzą się z pewnością te informacje grafikom.
    Pozdrawiam. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Haha, też tak kiedyś sądziłam xDD dopóki nie założyłam bloga i szata graficzna mi się znudziła xDDD (Początki były dość (czytaj> bardzo bardzo) ciężkie. xD

      Usuń
    2. Dzisiaj mieliśmy z doradcą zawodowym i przy ,,Rzeczy'' (były jeszcze ,,Ludzie'' 21 i ,,Dane'' - 4), czyli też informatyka itd., miałam - 18.xdxdxd

      Usuń

Graphic Luna
Dawniej graphic-catchers-illusion
Blog wraca już za niedługo!