{"id":14170,"date":"2016-11-01T02:29:00","date_gmt":"2016-11-01T01:29:00","guid":{"rendered":"http:\/\/www.numlock.edu.pl\/blog\/2016\/11\/01\/blogger-jak-wykorzystac-klasy-stylow\/"},"modified":"2018-07-15T07:17:13","modified_gmt":"2018-07-15T05:17:13","slug":"blogger-jak-wykorzystac-klasy-stylow","status":"publish","type":"post","link":"http:\/\/www.numlock.edu.pl\/blog\/2016\/11\/01\/blogger-jak-wykorzystac-klasy-stylow\/","title":{"rendered":"Blogger – jak wykorzysta\u0107 klasy styl\u00f3w"},"content":{"rendered":"

Ods\u0142ony: 48<\/p>

Ka\u017cdy webmaster doceni pot\u0119g\u0119 styl\u00f3w, za pomoc\u0105 kt\u00f3rych tworzy wizualn\u0105 stron\u0119 budowanej przez siebie witryny. Nie mam jednak pewno\u015bci, czy w dobie powszechnie stosowanych CMS-\u00f3w (Content Management System), jak WordPress, Joomla, Blogger czy Witryny Google nie zapominamy, jak style mog\u0105 u\u0142atwi\u0107 \u017cycie.<\/p>\n

Narz\u0119dzie<\/b>: Us\u0142uga Blogger
Kategoria:<\/b> blogi
Temat<\/b>: Zastosowanie klasy styl\u00f3w w Bloggerze
Poziom trudno\u015bci:<\/b> 2\/3
Wielko\u015b\u0107 dokumentu:<\/b> ok. 2400 znak\u00f3w, 1 ilustracja<\/div>\n

Widoczn\u0105 w moich wpisach ramk\u0119 z informacjami o tre\u015bci wpisu tworz\u0119 za pomoc\u0105 wydzielonych blok\u00f3w sformatowanych za pomoc\u0105 styl\u00f3w (CSS \u2013 kaskadowe arkusze styl\u00f3w) \u2013 st\u0105d to odmienne t\u0142o, fiku\u015bne cieniowanie czy przyjemne zaokr\u0105glenia naro\u017cnik\u00f3w. Jednak nie style s\u0105 przedmiotem mojego wpisu, a spos\u00f3b, w jaki te ramki wprowadzam do wpis\u00f3w w Bloggerze. A jest on bajecznie prosty – naturalnie kod wstawiamy w widoku HTML, czyli w kodzie \u017ar\u00f3d\u0142owym wpisu:
<\/a><\/p>\n

<div class=\u201dmetryczka\u201d>tre\u015b\u0107 ramki<\/div><\/pre>\n
Div to HTML-owy znacznik do tworzenia bloku, ale tutaj najbardziej interesuj\u0105cy jest fragment, kt\u00f3ry ma posta\u0107 class=\u201dmetryczka\u201d. Ot\u00f3\u017c class<\/em> to klasa styl\u00f3w dla blok\u00f3w, za\u015b metryczka<\/em> to nazwa, jak\u0105 nada\u0142em tej klasie, chc\u0105c wyr\u00f3\u017cni\u0107 w\u0142a\u015bnie metryczk\u0119 z informacjami.<\/p>\n
I teraz, zamiast za ka\u017cdym razem formatowa\u0107 pracowicie ten blok (formatowanie jest do\u015b\u0107 skomplikowane, cho\u0107 ka\u017cdy webmaster doskonale rozumie t\u0119 sk\u0142adni\u0119: background-color: whitesmoke; border-radius: 10px; box-shadow: 4px 4px 7px #182019; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 500px; font-size: 12px<\/span>), podaj\u0119 we wpisie jedynie podany wy\u017cej kod bloku.  <\/p>\n
A gdzie si\u0119 podzia\u0142 zatem kod z formatowaniem?<\/p>\n
Gdy przejdziesz do zaplecza administracyjnego blogu i klikniesz kolejno kart\u0119 Szablon<\/strong>, potem przycisk Dostosuj<\/strong>, a w wy\u015bwietlonym Projektancie szablon\u00f3w Zaawansowane<\/strong>, na dole listy polece\u0144 znajdziesz Dodaj arkusz CSS<\/strong>. Ot\u00f3\u017c w tym miejscu trzeba poda\u0107 kod klasy. <\/p>\n
W moim konkretnym przypadku wygl\u0105da to nast\u0119puj\u0105co:<\/p>\n
\"BloggerKlasyStylow\"<\/a><\/p>\n
Wystarczy jeszcze klikn\u0105\u0107 Zastosuj do bloga<\/b> i kod zacznie dzia\u0142a\u0107.<\/p>\n
Od momentu wprowadzenia tam definicji klasy, mog\u0119 j\u0105 swobodnie wykorzystywa\u0107 w dowolnych wpisach, przywo\u0142uj\u0105c j\u0105 jedynie za pomoc\u0105 nazwy \u2013 kod umieszczony w arkuszu styl\u00f3w w Projektancie dba o poprawne wy\u015bwietlanie ka\u017cdego elementu obj\u0119tego tym kodem.<\/p>\n
My\u015bl\u0119, \u017ce wielu u\u017cytkownikom Bloggera przyda si\u0119 znajomo\u015b\u0107 tej techniki, a niekt\u00f3rzy blogerzy by\u0107 mo\u017ce doceni\u0105 nawet przydatno\u015b\u0107 samodzielnie definiowanych styl\u00f3w i zechc\u0105 je nieco postudiowa\u0107.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ods\u0142ony: 48Ka\u017cdy webmaster doceni pot\u0119g\u0119 styl\u00f3w, za pomoc\u0105 kt\u00f3rych tworzy wizualn\u0105 stron\u0119 budowanej przez siebie witryny. Nie mam jednak pewno\u015bci, czy w dobie powszechnie stosowanych CMS-\u00f3w (Content Management System), jak WordPress, Joomla, Blogger czy Witryny Google nie zapominamy, jak style mog\u0105 u\u0142atwi\u0107 \u017cycie. Narz\u0119dzie: Us\u0142uga Blogger Kategoria: blogi Temat: Zastosowanie …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[65,97,54],"tags":[236,215],"_links":{"self":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14170"}],"collection":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/comments?post=14170"}],"version-history":[{"count":1,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14170\/revisions"}],"predecessor-version":[{"id":14892,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/posts\/14170\/revisions\/14892"}],"wp:attachment":[{"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/media?parent=14170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/categories?post=14170"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.numlock.edu.pl\/blog\/wp-json\/wp\/v2\/tags?post=14170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}