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.
1. Ozdobna pionowa kreska z lewej strony
.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
.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
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
.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ą :)
Kolejny dobry tutorial. Dzięki!
OdpowiedzUsuńZawsze mnie to zastanawiało :D
OdpowiedzUsuńOooo na pewno skorzystam ;d
OdpowiedzUsuńTwoje rady zawszę są pomocne :)
OdpowiedzUsuńskorzystam na pewno - dzięki! :)
OdpowiedzUsuńSuper pomocne rady.
OdpowiedzUsuńdzięki za tutorial... postaram się jak najszybciej sprawdzić, czy to działa... pozdrawiam
OdpowiedzUsuńTy to jesteś zdolna :) dziękuję, przyda się :****
OdpowiedzUsuńja sobie jakiś czas temu zrobiłam z pionową kreską :) ale z tłem graficznym to też świetna opcja :)
OdpowiedzUsuńDobrze wiedziec ;)
OdpowiedzUsuńJa prosiłam ;) Dziękuję, na pewno się bardzo przyda :*
OdpowiedzUsuńw takim razie to specjalnie dla Ciebie :)
Usuńmam nadzieję,że w przyszłości wykorzystam twoją instrukcję :)
OdpowiedzUsuńmoże kiedyś dam sobie z tym rade :D
OdpowiedzUsuńJaki świetny pomysł! Bardzo możliwe, że kiedyś sobie wykorzystam. Dziękuję już teraz ;)
OdpowiedzUsuńkolejna ciekawość rozwiana :D dzięki!
OdpowiedzUsuńja lepiej sie tego dotykac nei bede bo mgoe wszytsko zepsuc xD
OdpowiedzUsuńw arkuszu CSS to raczej niemożliwe :) zawsze najpierw można zapisać szablon, tak na wszelki wypadek :)
UsuńAaa dziękuje! Kiedyś tego szukałam No i proszę <3
OdpowiedzUsuńSuper ;) na pewno się przyda ;)
OdpowiedzUsuń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ńoj.. specem nie jestem - raczej samoukiem...
Usuń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
Dziękuję bardzo :)
UsuńSuper, oby wiecej takich przydatnych informacji do bloga!! ;-)
OdpowiedzUsuńNa pewno wykorzystam. Dzieki :)
OdpowiedzUsuńKocham Cię ! A właśnie miałam się Ciebie pytać :D
OdpowiedzUsuńDziękuję :)