28.01.2015

Jak dodać datę opublikowania posta w kółku? - Blogger

Hej!
Witajcie znowu po (niestety) dłuższej przerwie. Została ona spowodowana moim wyjazdem na ferie. Naprawdę Was przepraszam, ale nie miałam na nim czasu, aby poświęcić się blogowi, a gdy już wróciłam byłam zbyt zajęta na pisanie postów. Dziś jednak przychodzę do Was z postem związanym z designem bloga - tutorialem, jak dodać datę opublikowania posta w kółku.

Więc zaczynajmy!

Krok 1.

Wchodzimy na naszego Bloggera, a następnie w Szablon.



Krok 2.

Wybieramy Dostosuj.

























Krok 3.

Pojawia nam się menu Projektant szablonów Bloggera.
Wybieramy Zaawansowane.


























Krok 4.

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
























Krok 5.

W pole wklejamy nasz kod (kody 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 (każdą część wklejamy część pod częścią):


.date-header span {width: 60px; height: 60px; border-radius: 100% ;}

Pogrubiona czcionka to liczba pikseli, którą można dowolnie zmieniać, a czcionka kursywa to procenty. 
Należy pamiętać, że tylko liczba 100 daje nam całkowicie zaokrąglone rogi.

date-header span {background-color:  #ffffff ;}  

Można również zmienić kolor czcionki daty, wpisując kod koloru. Ten najlepiej wybrać z palety kolorów w HTML: Klik!

.date-header span {text-align: center ;}

Ten kod służy do umiejscowienia daty w kółku. W pogrubionym miejscu można wpisać:
center - wyśrodkowanie, left - do lewej, right- do prawej.

.date-header span {margin: -0px -100px -90px -97px;}

Ostatni kod, jest na dokładne ustawienie położenia daty, zmieniając pogrubione liczby.

Więc cały kod może wyglądać tak:

.date-header span {width: 60px; height: 60px; border-radius: 100% ;}
.date-header span {background-color:  #F0EDE6 ;}
.date-header span {text-align: center ;}
.date-header span {margin: -0px -100px -90px -97px;}

Gotowe!

PS1 Jeszcze raz przepraszam Was za dłuższą nieobecność na blogu :(
PS2  Jeżeli macie swoje pomysły na posty, piszcie je w komentarzach lub w mailach. Są bardzo mile widziane!

Karolina




34 komentarze:

  1. świetny pomysł na to, żeby pomagać innym blogerom! ;] jeśli będę szukała pomocy - z pewnością tu wpadnę! :*

    http://you-always-be.blogspot.com/

    OdpowiedzUsuń
  2. Bardzo fajnie,że pomagasz tym postem początkującym/a nawet i nie początkującym bloggerką
    http://my-little-world-blog.blogspot.com/

    OdpowiedzUsuń
  3. Świetny poradnik! Na pewno kiedyś skorzystam :)

    NOWY POST NA FABRYCE MIĘTY KLIK! :))

    OdpowiedzUsuń
  4. bardzo przydatny post, na pewno niedługo z niego skorzystam ;)
    zaobserwowałam, milo by było gdybyś się odwdzięczyła ;)
    donutworrybehappy.blogspot.com - zapraszam do mnie, nowy post z kilkoma informacjami, nową porcją samojebek i genialną piosenką! ♥

    OdpowiedzUsuń
  5. spk post zapraszam na mojego bloga
    http://poradykailey.blogspot.com/

    Bardzo zapraszam fajne rzeczy są na nim.
    Zresztą ona ma mnie w jej ulubionych blogach.

    OdpowiedzUsuń
  6. Dzięki trochę mi pomogłaś :D

    Pozdrawiam :)
    http://alittle-me.blogspot.com/

    OdpowiedzUsuń
  7. ja dopiero od jutra mam ferie <3
    fajny post, ;)

    ann--blog.blogspot.com

    OdpowiedzUsuń
  8. przydatne! :)

    http://feel-that-moments.blogspot.com/

    OdpowiedzUsuń
  9. Bardzo przydatny post i z chęcią przejrzę też inne:)
    http://xsomething-positivex.blogspot.com

    OdpowiedzUsuń
  10. Bardzo przydatne:0
    Obs/obs??? Ja już teraz twoja kolej:)
    Pozdrawiam!!!
    http://kossmmoslife.blogspot.com/

    OdpowiedzUsuń
  11. Świetne! Nigdy nie wiedziałam, jak to zrobić:-)
    Mój blog - kliknij

    OdpowiedzUsuń
  12. świetny post :)

    mbmalie.blogspot.com

    OdpowiedzUsuń
  13. Great post
    Would you like to follow each other ? I'll follow back after it

    Www.miharujulie.com

    OdpowiedzUsuń
  14. przydatny post
    obserwujemy?
    http://paolciapolcia16.blogspot.com/

    OdpowiedzUsuń
  15. Na pewno niedługo przyda mi się ten post :)
    karilleyn- KLIK

    OdpowiedzUsuń
  16. Przy następnym remoncie na pewno skorzystam, fajna alternatywa
    Pozdrawiam i zapraszam, ▪ milkimary.blogspot.com▪ :)

    OdpowiedzUsuń
  17. Strasznie przydatne! :)

    http://jozley.blogspot.com/

    OdpowiedzUsuń
  18. megaa świetne :)
    obserwujemy ? :)

    http://mylife-tasia.blogspot.com

    OdpowiedzUsuń
  19. Bardzo przydatne! ;)

    alqxx.blogspot.com

    OdpowiedzUsuń
  20. Przydatny wpis, pomoże z pewnością wielu osobom :)

    Dziękuję za odwiedziny, a wolnej chwili zapraszam na nowy wpis: ♥♥♥BLOG♥♥♥

    OdpowiedzUsuń
  21. ooo dziękuje Ci za ten wpis, na pewno wykorzystam ;)
    Obserwuje i zapraszam
    http://jtere.blogspot.com/

    OdpowiedzUsuń
  22. Bardzo pomocne :)

    Buziaki!♥

    http://dilshion.blogspot.com/

    OdpowiedzUsuń
  23. swietna instrukcja. uwielbiam dodawac te kody na bloga, wtedy wyglada o niebo lepiej:D
    moze obs/obs?:)
    nickyjxo.blogspot.com Mój blog!KLIK

    OdpowiedzUsuń
  24. na pewno osobom, które na blogspocie są od niedawna przydadzą się twoje rady♥

    Pozdrawiam, Obserwuję i Zapraszam do mnie♥
    ♥alexa-moments.blogspot.com♥

    OdpowiedzUsuń
  25. Bardzo przydatny post! Napewno z tych pomysłów skorzystam.
    twopinkdreams.blogspot.com

    OdpowiedzUsuń
  26. Szkoda , że w szablonie simple nie działa .. Są jakieś inne kody ?

    OdpowiedzUsuń
  27. Bardzo przydatny post:)

    http://itismytimee.blogspot.com/

    OdpowiedzUsuń

♥ Weryfikacja obrazkowa wyłączona
♥ Za wszystkie komentarze z góry dziękuję
♥ Jeżeli w komentarzu pozostawicie link do swojego bloga, na pewno go odwiedzę!
♥ Obraźliwe komentarze będą usuwane