8/05/2016

DESIGN BLOGA DIY








Poradników ciąg dalszy! Jak zrobić informację o autorze w stopce wpisu z ikonkami? Jak zmienić wygląd gadżetu 'szukaj'? Jak spersonalizować wygląd menu archiwum? Jak zmienić informację o plikach cookies? Jak dodać pop-up Faceobook na bloga? Na wszystkie te pytania odpowiem w tym poście. Zapraszam!


JAK ZROBIĆ INFORMACJĘ O AUTORZE W STOPCE WPISU Z IKONKAMI?
Wchodzimy kolejno SZABLON > EDYTUJ KOD HTML, klikamy w dowolne miejsce w kodzie i wywołujemy okno wyszukiwania za pomocą CTRL+ F. W okno wpisujemy authorAboutMe i klikamy enter. Wyszukana zostanie taka część: <b:if cond='data:post.authorAboutMe'> nad nią wklejamy uzupełniony wg własnych potrzeb kod:
<article class='about-author'><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='about-author-inner'><h2><span> </span></h2><img alt='author' src='LINK DO ZDJĘCIA'/> <a href='LINK DO STRONY O MNIE'>TUTAJ WPISZ SWOJE IMIĘ</a><p>MIEJSCE NA TEKST</p><span class='author-share'><div class='social'><a href='LINK DO STRONY'><img alt='facebook' src='LINK DO IKONKI'/></a></div><div class='social'><a href='LINK DO STRONY'><img alt='instagram' src='LINK DO IKONKI'/></a></div><div class='social'><a href='LINK DO STRONY'><img alt='ask' src='LINK DO IKONKI'/></a></div><div class='social'><a href='LINK DO STRONY'><img alt='pinterest' src='LINK DO IKONKI'/></a></div><div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div></span></div></b:if></article>
Jeśli chcemy mieć więcej ikonek społecznościowych to po ostatnim </a><</div> przed </span> wklejamy:
<div class='social'><a href='LINK DO STRONY'><img alt='youtube' src='LINK DO IKONKI'/></a></div>
Zapisujemy szablon.
Przechodzimy do SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ GADŻET CSS i wklejamy kod:
.about-author-inner {text-align:justify; width:80%; height:150px;}.about-author {color:#000; background: transparent; width:100%; margin-top:-20px;}.about-author-inner {background:transparent; padding:20px;}.about-author img{float:left; margin-right:2.828854%}.about-author a{font-size:14px; color:#ff8d8e; margin-bottom:5px; text-transform:uppercase;}.about-author a:hover{color:#000;}.about-author p {font-size:14px;width:115%;}.post-author .author-share {float: left;line-height:32px;display:inline-block;}.social:hover {opacity : 0.70;filter : alpha(opacity=70);}.social {float: left;margin: -4px 10px 15px 10px;}.social img {width: 32px;height: 32px;}
Wszystkie pogrubione i kolorowe wartości są zmienne:
 ●Wyrównanie tekstu
●  Kolor tekstu 
●  Wielkość linków
●  Kolor linków 
Kolor po najechaniu myszą
● Wielkość tekstu 


JAK ZMIENIĆ WYGLĄD GADŻETU 'SZUKAJ'?
Klikamy kolejno: SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS, wklejamy i modyfikujemy odpowiednio kod:
#CustomSearch1_form {margin: 10px -2px -25px -5px;}input.gsc-search-button {background:#000;border-width: 1px;letter-spacing:1px;border-radius: 3px;border-color: #000;border-style: solid;color: #444;margin: 0 0 0 0 !important;width: 75px !important;font-family: 15px Verdana;height: 35px !important;}input.gsc-search-button:hover {background: #eee;border-color: #eee;letter-spacing: 2px;color: #000;cursor: pointer;}input.gsc-input {height: 33px !important;padding: 0 !important;max-width: 500px !important;}td.gsc-search-button {width: 25% !important;}table.gsc-search-box td.gsc-input {padding: 0px !important;width: 75% !important;}table.gsc-search-box {margin: 0 0 10px 0 !important;}
Analiza kodu:
#CustomSearch1_form {margin: 10px -2px -25px -5px;}
margines górny
● margines prawy
● margines dolny
● margines lewy

input.gsc-search-button {background:#000;border-width: 1px;letter-spacing:1px;border-radius: 3px;border-color: #000;border-style: solid;color: #444;margin: 0 0 0 0 !important;width: 75px !important;font: 15px Verdana;height: 35px !important;
● Tło przycisku wyszukiwania
● grubość ramki przycisku wyszukiwania
● odstęp między literami przycisku wyszukiwania
● zaokrąglone narożniki przycisku wyszukiwania
● kolor ramkistyl ramki przycisku wyszukiwania
● kolor tekstu przycisku wyszukiwania
● marginesy przycisku wyszukiwania
● szerokość przycisku wyszukiwania 
● wielkość czcionki i rodzaj przycisku wyszukiwania
● wysokość przycisku wyszukiwania

input.gsc-search-button:hover {

background: #eee;

border-color: #eee;

letter-spacing: 2px;
color: #000;
cursor: pointer;
}
● tło przycisku wyszukiwania po najechaniu kursorem 
● kolor ramki przycisku wyszukiwania po najechaniu kursorem 
● odstęp między literami przycisku wyszukiwania po najechaniu kursorem 
● kolor tekstu przycisku wyszukiwania po najechaniu kursorem 

input.gsc-input {height: 33px !important;padding: 0 !important;max-width: 500px !important;}
● Wysokość pola wyszukiwania


JAK SPERSONALIZOWAĆ WYGLĄD MENU ARCHIWUM?
Przechodzimy do UKŁADU, szukamy w nim archiwum i zmieniamy styl na menu, zapisujemy.
Następnie klikamy kolejno SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS, wklejamy i modyfikujemy kod, zapisujemy:
#BlogArchive1_ArchiveMenu {width: 340px; font: 15px Arial; color: #fff; backround: #222; border-style: solid; border-width: 4px; border-color: #ccc; padding: 10px;}

Wszystkie wartości są zmienne. Możemy również sami dopisać coś do kodu, aby stworzyć wymarzone archiwum.
Szerokość archiwum
 ●Rozmiar, rodzaj i kolor czcionki
 ●Kolor tła
● Rodzaj ramki
● Szerokość ramki 
 ●Kolor ramki
 ●Wewnętrzne marginesy
JAK SPERSONALIZOWAĆ INFORMACJĘ O PLIKACH COOKIES?
Klikamy: SZABLON > DOSTOSUJ > ZAAWANSOWANE > DODAJ ARKUSZ CSS i wklejamy kod odpowiednio go modyfikując:
div#cookieChoiceInfo {  - selektor paska informacyjnego
background-color: #fff !important; - kolor tła
color:#000!important; - kolor fonta
font-size:14px;  - rozmiar czcionki
font-family:sans-serif;  - rodzaj czcionki
border-bottom:1px solid #ddd; - podkreślenie
}
 #cookieChoiceInfo a{ - selektor linka "dowiedz się więcej"
    background-color:#555!important; - kolor tła
    font-size:12px; - rozmiar czcionki
    border-radius:6px;  - zaokrąglenie boków
    color:#585858;  - kolor czcionki
}
#cookieChoiceInfo > a:nth-child(2),a#cookieChoiceDismiss {  - selektor przycisku "Rozumiem"
color:#fff;  - kolor czcionki
border-radius:6px;  - zaokrąglenie boków
font-family:sans-serif; - rodzaj czcionki
font-size:14px;  - rozmiar czcionki
font-weight:bold;  - grubość czcionki
}
#cookieChoiceInfo > a:nth-child(2):hover, a#cookieChoiceDismiss:hover { - selektor przycisku "Rozumiem po najechaniu myszką
color:#ddd!important; - kolor tekstu
}

JAK DODAĆ POP-UP FACEBOOK NA BLOGA?
Wchodzimy na stronę Webfrik.pl i generujemy kod naszego gadżetu. 
Klikamy kolejno: UKŁAD > DODAJ NOWY GADŻET > HTML/JavaScript. W treści gadżetu wpisujemy pobrany ze stronki kod. Zapisujemy i gotowe!


32 comments:

  1. Zawsze mam problemy z wywyglądem, ale nie tylko. Przeczytałam i będę zaglądać, jak tylko najdzie mnie ochota na zmiany.
    Dorisssblog.blogspot.com

    ReplyDelete
  2. Fajnie, ze dodajesz te porady u siebie. Znalazłam juz u Ciebie pare przydatnych porad dotyczących designu bloga. ;)
    Piszesz w naprawde prosty sposob i dlatego ciagle czekam na najnowsze wpisy z tej serii! ;)

    ReplyDelete
  3. Uwielbiam poradniki tego typu i często z nich korzystam. Przy okazji kiedy będę chciała popracować nad designem, na pewno wykorzystam do tego Twój post! <3
    Mój blog - klik!

    ReplyDelete
  4. Chyba najbardziej przyda mi się informacja o szukaj, ale reszta na pewno też przydatna
    Pozdrawiam,Madda
    blog ->klik

    ReplyDelete
  5. Super poradnik! Gdy kiedys zmienię design napewno z niego skorzystam!

    By-Aleksandraa.blogspot.com

    ReplyDelete
  6. Super poradnik i super piszesz :D pozdrawiam :D

    ReplyDelete
  7. Zapraszam do siebie ponieważ jesteś nominowana do LBA
    Www.szerily.blogspot.com

    ReplyDelete
    Replies
    1. Dziękuję, ale nie odpowiadam na nominacje.

      Delete
  8. Bardzo starannie wszystko opisałaś napewno będą osby, które wykorzystają wszystko co opisałaś. :)
    Pozdrawiam serdecznie i zapraszam:
    Mój blog-KLIK!
    Moja strona na fb
    Mój instagram

    ReplyDelete
  9. Bardzo fajny poradnik, ale z tego co zauważyłam w archiwum jest błąd. Zamiast "archove" powinno być "archive". Właśnie to zmieniałam na drugim blogu i znalazłam tę literówkę. Ale bardzo fajny poradnik :>
    Pozdrawiam, Natalia

    ReplyDelete
    Replies
    1. Ooo, rzeczywiście!
      Dziękuję bardzo, już zmieniam :D

      Delete
  10. Dziękuję za poradnik napewno się przyda!

    ReplyDelete
  11. Świetne rady, naprawdę dobre kody na pewno nie jednej osobie pomożesz :)

    ReplyDelete
  12. Bardzo pomocny post :) Pozdrawiam!

    lublins.blogspot.com

    ReplyDelete
  13. Nie korzystam, bo mam gotowy szablon (tylko lekko przerabiałam), ale pewnie wielu osobom twój post pomoże. :D

    Pozdrawiam! murasakiiroanu.blogspot.com

    ReplyDelete
  14. Bardzo pomocny wpis :) Z pewnoscia przyda sie wielu osobom :)

    Zapraszam do mnie na nowy post: https://z-igly-widly.blogspot.com/

    Pozdrawiam!

    ReplyDelete
  15. Na pewno wielu z nas to pomoże. Bo ja jeśli chodzi o wygląd bloga dopiero się uczę haha
    http://hellomisskorabel.blogspot.com/

    ReplyDelete
  16. Pomocny post, na pewno coś wykorzystam!
    -------
    http://styluliczny.blogspot.com

    ReplyDelete
  17. Bardzo przydatny post:)
    pelnapasji.blogspot.com
    Zachęcam do obserwacji:)

    ReplyDelete
  18. Dziękuje. Na pewno skorzystam z niektórych kodów.

    Pozdrawiam

    ReplyDelete
  19. Moim wyglądem zajmuje sie graficzka, ale pewnie gdybym jej nie miała to skorzystałabym z tego postu. Mega pomocny!

    W wolnej chwili zapraszam do siebie
    http://the-fight-for-a-dream.blogspot.com

    ReplyDelete
  20. Myślę, że wiele osób skorzysta, gdyż bardzo dobrze wszystko wyjaśniłaś.

    ReplyDelete
  21. Spadłaś mi z nieba! Ostatnio szukałam takich rzeczy! :) Dzięki za pomoc :)
    zofiakuca.online

    ReplyDelete
  22. ja kiedyś kody HTML znałam na pamięc, a teraz nie potrafie najprostszych rzeczy -.-

    ReplyDelete
  23. Dziękuję <3 Na pewno mi się przydadzą!

    ReplyDelete
  24. Jejku, zawsze podziwiam tego typu rzeczy, sama chciałabym się znać na tych kodach html. Poza tym, fajnie, bo można skorzystać. Ja pomyślę nad archiwum. :D CUDO! Arleta

    ReplyDelete
  25. Świetny poradnik!
    Na pewno przyda się początkującym blogerom
    Pozdrawiam
    Love-styl.blogspot.com

    ReplyDelete
  26. Wow, naprawdę przydatne instrukcje :) Teraz akurat nie mam potrzeby ich używać, ale przydadzą się na przyszłość.

    natalianowotna.blogspot.com <- zapraszam ^^

    ReplyDelete
  27. Świetny poradnik :)
    Mój blog
    Odwdzięczam się za obserwacje :)

    ReplyDelete
  28. Spadałaś mi z nieba, hhaha! Wyobraź sobie, że dokładnie przed chwilą szukałam poradników jak zrobić właśnie te rzeczy. Wchodzę na twojego bloga, a tu taki post hahah!
    Trzymaj się ciepltuko <33
    Zapraszam do mnie!

    ReplyDelete
    Replies
    1. Hahhah, w takim razie bardzo się cieszę :)

      Delete
  29. Post na pewno bardzo mi się przyda, kiedy znów będę coś kombinowała z designem ;*
    http://written-by-loony.blogspot.com/

    ReplyDelete

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