{"id":4452,"date":"2017-10-19T20:01:43","date_gmt":"2017-10-19T20:01:43","guid":{"rendered":"https:\/\/musilda.cz\/?p=4452"},"modified":"2017-10-19T20:01:43","modified_gmt":"2017-10-19T20:01:43","slug":"vytvorit-notifikacni-listu-snadno-rychle-bez-pluginu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/vytvorit-notifikacni-listu-snadno-rychle-bez-pluginu\/","title":{"rendered":"Jak vytvo\u0159it notifika\u010dn\u00ed li\u0161tu snadno, rychle a bez pluginu?"},"content":{"rendered":"<p>Prost\u0159ednictv\u00edm notifika\u010dn\u00ed li\u0161ty m\u016f\u017eete efektivn\u011b sd\u011blit d\u016fle\u017eit\u00e9 informace, kter\u00e9 by n\u00e1v\u0161t\u011bvn\u00edci va\u0161eho webu rozhodn\u011b nem\u011bli p\u0159ehl\u00e9dnout. Zp\u016fsob\u016f vyu\u017eit\u00ed a v\u00fdhod tohoto prvku je mnoho, ale o tom t\u0159eba n\u011bkdy jindy. V tomto \u010dl\u00e1nku se do\u010dtete, jak vytvo\u0159it notifika\u010dn\u00ed li\u0161tu tak, aby nem\u011bla negativn\u00ed dopad na v\u00fdkon webu. Co\u017e m\u016f\u017ee b\u00fdt probl\u00e9m, pokud pou\u017eijete n\u011bkter\u00fd z mnoha plugin\u016f \u010di slu\u017eeb t\u0159et\u00edch stran.<\/p>\n<p><strong>P\u00e1r mo\u017enost\u00ed, jak vytvo\u0159it notifika\u010dn\u00ed li\u0161tu pomoc\u00ed pluginu:<\/strong><\/p>\n<p><a href=\"https:\/\/www.hellobar.com\/\" target=\"_blank\" rel=\"noopener\">Hello Bar<\/a> \u2013 z hlediska v\u00fdkonu nic moc, a nav\u00edc s odkazem<\/p>\n<p><a href=\"https:\/\/musilda.cz\/go-wp-notification\" target=\"_blank\" rel=\"noopener\">WP Notification Bar Pro<\/a> \u2013 tento plugin zpomaluje na\u010d\u00edt\u00e1n\u00ed webu o 150-200 ms<\/p>\n<p>BugMeBar \u2013 pom\u011brn\u011b rychl\u00fd plugin, ale kv\u016fli animac\u00edm vypad\u00e1 pomalej\u0161\u00ed. P\u0159esto slu\u0161n\u00e9 \u0159e\u0161en\u00ed.<\/p>\n<h2>3 kroky k vlastn\u00ed notifika\u010dn\u00ed li\u0161t\u011b<\/h2>\n<p>Vytvo\u0159it notifika\u010dn\u00ed li\u0161tu pomoc\u00ed HTML je snadn\u00e9. A proto\u017ee chyb\u00ed zav\u00edrac\u00ed tla\u010d\u00edtko, nen\u00ed ani cookie. Co\u017e je d\u016fvod, pro\u010d je dan\u00e9 \u0159e\u0161en\u00ed rychlej\u0161\u00ed.<\/p>\n<h3>Krok 1<\/h3>\n<p>Prvn\u00ed krok se m\u016f\u017ee m\u00edrn\u011b li\u0161it podle toho, jakou pou\u017e\u00edv\u00e1te \u0161ablonu. V\u011bt\u0161ina v\u0161ak umo\u017e\u0148uje editaci souboru header.php.<\/p>\n<p><a href=\"https:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/krok-1.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4453\" src=\"https:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/krok-1.png\" alt=\"\" width=\"264\" height=\"137\" \/><\/a><\/p>\n<h3>Krok 2<\/h3>\n<p>Zde je HTML k\u00f3d, kter\u00fd d\u00e1te rovnou za &lt;\/head&gt;. Nap\u00ed\u0161ete si tam, co zrovna pot\u0159ebujete sd\u011blit ostatn\u00edm.<\/p>\n<p><code>&lt;div id=\"dabar\" class=\"hide_on_mobile\"&gt;V\u00e1\u0161 vzkaz sv\u011btu.&lt;\/div&gt;<\/code><\/p>\n<p><a href=\"https:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/krok-2.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-4454\" src=\"https:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/krok-2.png\" alt=\"\" width=\"643\" height=\"228\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/krok-2.png 643w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/krok-2-300x106.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/a><\/p>\n<h3>Krok 3<\/h3>\n<p>Nyn\u00ed budete muset p\u0159idat n\u011bjak\u00e9 vlastn\u00ed CSS, aby li\u0161ta vypadala k sv\u011btu. Pokud va\u0161e \u0161ablona nem\u00e1 custom CSS panel, m\u016f\u017eete CSS p\u0159idat pomoc\u00ed n\u011bjak\u00e9ho \u0161ikovn\u00e9ho pluginu (nap\u0159. <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener\">Simple Custom CSS and JS<\/a>).<\/p>\n<p><code>#dabar{<br \/>\nbackground: #2c3644;<br \/>\ncolor: #fff;<br \/>\nfont-size:16px;<br \/>\ntop: 0px;<br \/>\nleft: 0px;<br \/>\nwidth: 100% !important;<br \/>\npadding: 10px 0px;<br \/>\ntext-align: center;}<br \/>\n#dabar a {color: #ffffff; border-bottom: 1px dotted;}<\/code><\/p>\n<p>Standardn\u011b bude li\u0161ta statick\u00e1 a zmiz\u00ed, kdy\u017e zaskrolujete sm\u011brem dol\u016f. Samoz\u0159ejm\u011b m\u016f\u017eete modifikovat CSS a p\u0159ipevnit ho navrch str\u00e1nky natrvalo. Sta\u010d\u00ed pou\u017e\u00edt n\u00e1sleduj\u00edc\u00ed k\u00f3d.<\/p>\n<p><code>#dabar{<br \/>\nbackground: #2c3644;<br \/>\ncolor: #fff;<br \/>\nfont-size:16px;<br \/>\nposition: fixed;<br \/>\nz-index:1;<br \/>\ntop: 0px;<br \/>\nleft: 0px;<br \/>\nwidth: 100% !important;<br \/>\npadding: 10px 0px;<br \/>\ntext-align: center;}<br \/>\n#dabar a {color: #ffffff; border-bottom: 1px dotted;}<\/code><\/p>\n<p>A m\u00e1te hotovo. Pr\u00e1v\u011b jste vytvo\u0159ili kr\u00e1snou notifika\u010dn\u00ed li\u0161tu \ud83d\ude42<\/p>\n<h2>Jak li\u0161tu skr\u00fdt na mobiln\u00edm za\u0159\u00edzen\u00ed?<\/h2>\n<p>Asi jste si v\u0161imli t\u0159\u00eddy zvan\u00e9 hide_on_mobile. Ta umo\u017e\u0148uje skryt\u00ed li\u0161ty na mobiln\u00edm za\u0159\u00edzen\u00ed. Jednodu\u0161e p\u0159idejte n\u00e1sleduj\u00edc\u00ed CSS.<\/p>\n<p><code>@media only screen and (max-width:480px) {<br \/>\n.hide_on_mobile {<br \/>\ndisplay: none !important;}<br \/>\n}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Prost\u0159ednictv\u00edm notifika\u010dn\u00ed li\u0161ty m\u016f\u017eete efektivn\u011b sd\u011blit d\u016fle\u017eit\u00e9 informace, kter\u00e9 by n\u00e1v\u0161t\u011bvn\u00edci va\u0161eho webu rozhodn\u011b nem\u011bli p\u0159ehl\u00e9dnout. Zp\u016fsob\u016f vyu\u017eit\u00ed a v\u00fdhod tohoto prvku je mnoho, ale o tom t\u0159eba n\u011bkdy jindy. V tomto \u010dl\u00e1nku se do\u010dtete, jak vytvo\u0159it notifika\u010dn\u00ed li\u0161tu tak, aby nem\u011bla negativn\u00ed dopad na v\u00fdkon webu. Co\u017e m\u016f\u017ee b\u00fdt probl\u00e9m, pokud pou\u017eijete n\u011bkter\u00fd z<\/p>\n","protected":false},"author":1,"featured_media":4455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[],"class_list":["post-4452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-zacatecnici"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/4452"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=4452"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/4452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/4455"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=4452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=4452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=4452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}