Jak zmienić wygląd cytatów w bloggerze? 4 gotowe kody!

Pod jednym z postów, któraś z Was mnie prosiła o instrukcję, jak zmienić wygląd cytatów na blogu. Postanowiłam napisać mały, prosty tutorial i podać 4 gotowe kody... Przy okazji napiszę Ci jak można je edytować, żebyś mogła ten wygląd dopasować do swojego bloga.

Jak zmienić wygląd cytatów w bloggerze?

1. Ozdobna pionowa kreska z lewej strony

wygląd cytatu nr 1 - blogger
KOD:
.post blockquote {
  border-left:10px solid #d2a6d5;padding-left:20px;}

MOŻESZ ZMIENIĆ:

10px -szerokość ozdobnego paska
#d2a6d5 - kolor ozdobnego paska
20px- lewy margines

2. Ozdobna pionowa kreska z lewej strony + tło

wygląd cytatu nr 2 - blogger
KOD:
.post blockquote {
  border-left:10px solid #d2a6d5;padding-left:20px;background:#eee;}

MOŻESZ ZMIENIĆ:

10px -szerokość ozdobnego paska
#d2a6d5 - kolor ozdobnego paska
20px- lewy margines
#eee - kolor tła

3. Tło + zaokrąglone rogi

wygląd cytatu nr 3 - blogger KOD:

.post blockquote {
  padding:20px;background:#eee;border-radius: 0 15px 15px 15px;}

MOŻESZ ZMIENIĆ:

20px - margines
#eee - kolor tła
0 15px 15px 15px - zaokrąglenie rogów

4. Graficzne tło + ozdobny pasek z lewej strony

wygląd cytatu nr 4 - blogger
KOD:
.post blockquote {
  padding:20px;border-left:10px solid #ddd;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86is6wP9_lk4ClOHSt6d3bRcqpQn7aGMMeIa-I5J1lO_P5EyEGltZBW9pvpLz-gN3UHOGx4SiAg4_kOtZmBVJIYExpfrj6dUjvldBOZerZXqGFiBY7rE4kaJIQ5ybFAJj6GoJjuUOtmy7/s1600/szare+zygzaki50.png);}

MOŻESZ ZMIENIĆ:

10px - lewy margines
#ddd - kolor ozdobnego paska
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86is6wP9_lk4ClOHSt6d3bRcqpQn7aGMMeIa-I5J1lO_P5EyEGltZBW9pvpLz-gN3UHOGx4SiAg4_kOtZmBVJIYExpfrj6dUjvldBOZerZXqGFiBY7rE4kaJIQ5ybFAJj6GoJjuUOtmy7/s1600/szare+zygzaki50.png - adres obrazka, który służy jako tło

---

Oczywiście, żeby ozdobniki były widoczne, musisz dany fragment tekstu zaznaczyć jako cytat (w edycji posta wystarczy wybrać znaczek "cudzysłowu" )

Mam nadzieję, że kod Ci się przydał. Daj znać czy działają :)

Komentarze

  1. Kolejny dobry tutorial. Dzięki!

    OdpowiedzUsuń
  2. Zawsze mnie to zastanawiało :D

    OdpowiedzUsuń
  3. Oooo na pewno skorzystam ;d

    OdpowiedzUsuń
  4. Twoje rady zawszę są pomocne :)

    OdpowiedzUsuń
  5. skorzystam na pewno - dzięki! :)

    OdpowiedzUsuń
  6. dzięki za tutorial... postaram się jak najszybciej sprawdzić, czy to działa... pozdrawiam

    OdpowiedzUsuń
  7. Ty to jesteś zdolna :) dziękuję, przyda się :****

    OdpowiedzUsuń
  8. ja sobie jakiś czas temu zrobiłam z pionową kreską :) ale z tłem graficznym to też świetna opcja :)

    OdpowiedzUsuń
  9. Ja prosiłam ;) Dziękuję, na pewno się bardzo przyda :*

    OdpowiedzUsuń
  10. mam nadzieję,że w przyszłości wykorzystam twoją instrukcję :)

    OdpowiedzUsuń
  11. może kiedyś dam sobie z tym rade :D

    OdpowiedzUsuń
  12. Jaki świetny pomysł! Bardzo możliwe, że kiedyś sobie wykorzystam. Dziękuję już teraz ;)

    OdpowiedzUsuń
  13. kolejna ciekawość rozwiana :D dzięki!

    OdpowiedzUsuń
  14. ja lepiej sie tego dotykac nei bede bo mgoe wszytsko zepsuc xD

    OdpowiedzUsuń
    Odpowiedzi
    1. w arkuszu CSS to raczej niemożliwe :) zawsze najpierw można zapisać szablon, tak na wszelki wypadek :)

      Usuń
  15. Aaa dziękuje! Kiedyś tego szukałam No i proszę <3

    OdpowiedzUsuń
  16. Super ;) na pewno się przyda ;)

    OdpowiedzUsuń
  17. Cześć, ponieważ jesteś specem od html'a chciałabym Cię zapytać jak można zamienić gadżet "starsze posty, nowsze posty" na wyświetlającą się ilość stron?

    OdpowiedzUsuń
    Odpowiedzi
    1. oj.. specem nie jestem - raczej samoukiem...
      Nigdy tego nie robiłam, ale na samym kodzie CSS tu się nie skończy - trzeba pogrzebać trochę w HTML
      Tutaj jest instrukcja: http://blogger-porady.blogspot.com/2012/10/numeracja-stron-paginacja-w-blogger.html

      Usuń
  18. Super, oby wiecej takich przydatnych informacji do bloga!! ;-)

    OdpowiedzUsuń
  19. Na pewno wykorzystam. Dzieki :)

    OdpowiedzUsuń
  20. Kocham Cię ! A właśnie miałam się Ciebie pytać :D
    Dziękuję :)

    OdpowiedzUsuń

Prześlij komentarz

Jestem wdzięczna za każdy pozostawiony komentarz - to niezwykle motywuje do dalszego pisania!