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(http://4.bp.blogspot.com/-I7XvY5FUhYA/U7-Hp1S1ucI/AAAAAAAAB3Y/vE-VP7oCza0/s1600/szare+zygzaki50.png);}

MOŻESZ ZMIENIĆ:

10px - lewy margines
#ddd - kolor ozdobnego paska
http://4.bp.blogspot.com/-I7XvY5FUhYA/U7-Hp1S1ucI/AAAAAAAAB3Y/vE-VP7oCza0/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ą :)

Serdecznie dziękuję za wszystkie komentarze - to one najbardziej motywują mnie do pisania.
Jeśli dołączyłaś do obserwatorów daj mi o tym znać, z chęcią odwiedzę Twojego bloga ❤

26 komentarzy:

  1. Kolejny dobry tutorial. Dzięki!

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

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

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

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

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

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

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

    OdpowiedzUsuń
    Odpowiedzi
    1. w takim razie to specjalnie dla Ciebie :)

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

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

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

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

    OdpowiedzUsuń
  13. 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ń
  14. Aaa dziękuje! Kiedyś tego szukałam No i proszę <3

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

    OdpowiedzUsuń
  16. 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ń
  17. Super, oby wiecej takich przydatnych informacji do bloga!! ;-)

    OdpowiedzUsuń
  18. Na pewno wykorzystam. Dzieki :)

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

    OdpowiedzUsuń

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

Zobacz najnowsze posty

ulubione sklepy

ZNIŻKI DLA CIEBIE: -10% do Tołpa: 48CQ7SYP

Piękny dom