Jak zrobić pasek powiadomień/informacyjny na Bloggerze

piątek, 17 sierpnia 2018

Pewnie nie raz i nie dwa mieliście okazję do tego, aby na blogu (na górze) widzieć u niektórych okienko/pasek z jakąś informacją np. o urlopie, nowych produktach w sklepie, aktualizacjach czy jakiś zmianach na blogu itd. Jak pewnie też wiecie, nie jest to standardowy gadżet Bloggera. Dlatego w tym wpisie, pokażę Wam jak taki pasek informacyjny dodać do Bloggera.

Okej, więc aby dodać nasz pasek informacyjny, będziemy pracować na kodzie HTML szablonu oraz arkuszu CSS. Nie będzie to skomplikowany "zabieg", więc każdy powinien sobie z tym poradzić :)

1. Pierwsze co musimy zrobić to przechodzimy do motyw - edytuj kod HTML

2. Klikamy kursorem, obojętnie jakie miejsce w kodzie i wybieramy ctrl+f na klawiaturze. Pojawi nam się okno wyszukiwania. W okienku, które nam się pojawiło wpisujemy </body>

3. Pod </body> wklejamy odpowiednio uzupełniony kod:

<div id='sticky-info'> <p> TEKST INFORMACYJNY <a id='button' href='LINK' target='_blank'>TEKST BUTTONU</a></p> <div class='cross'> <a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("sticky-info"); crosstbox.style.visibility = 'hidden'; } </script>

TEKST INFORMACYJNY - wpisujemy w tym miejscu tekst, który ma informować naszych czytelników

LINK - link do strony/podstrony/ wpisu, do którego ma kierować naszych czytelników

TEKST BUTTONU - czyli tekst, który będzie się wyświetlał na naszym przycisku np. kliknij tutaj/przejdź do wpisu lub kliknij tutaj

Mój kod wygląda tak:

Zapisujemy motyw

4. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS. W arkuszu CSS wklejamy taki oto kod CSS:

/* info ---------------------*/ #sticky-info { background: #000; color:#fff; text-align: center; margin: 0 auto; height:45px; line-height: 15px; font-size:13px; font-weight: 500; font-family: Open Sans; letter-spacing: 1px; text-transform: none; position:fixed; vertical-align: baseline; overflow:hidden; z-index:9999; width:100%; display:block; top: 0; } #sticky-info p a#button { background: #78d9d3; color: #fff; padding:4px 4px; border-radius: 3px; margin-left:14px; text-transform: uppercase; } #sticky-info p a#button:hover { background:#fff; color: #000; } #sticky-info p { width:95%; float:left; } .gls-cross { display:block; position:relative; right:15px; float:right; } .cross a { font-size:13px; font-weight:bold; font-family:"Arial"; color:#fff; line-height:40px; } .cross, a:hover { color: #78d9d3; text-decoration:none; }

Efekt:

Wersja dla osób posiadających menu przyczepione na górze bloga

1. Przechodzimy do układ - dodaj gadżet - HTML/JavaScript

2. W gadżecie wklejamy taki kod:

<div id='sticky-info'> <p> TEKST INFORMACYJNY <br /> <br /> <a id='button' href='LINK' target='_blank'>TEKST BUTTONU</a></p> <div class='cross'> <a href='javascript:hide_cross();'>X</a></div> </div> <script language='JavaScript'> function hide_cross() { crosstbox = document.getElementById("sticky-info"); crosstbox.style.visibility = 'hidden'; } </script>

Zapisujemy

3. Przechodzimy do motyw - dostosuj - zaawansowane - dodaj arkusz CSS

/* info ---------------------*/ #sticky-info { background: #000; color:#fff; text-align: center; margin: 0 auto; height:95px; line-height: 15px; font-size:13px; font-weight: 500; font-family: Open Sans; letter-spacing: 1px; text-transform: none; vertical-align: baseline; overflow:hidden; width:100%; display:block; top: 0px; } #sticky-info p a#button { background: #78d9d3; color: #fff; padding:5px 5px; border-radius: 3px; text-transform: uppercase; font-size: 10px; } #sticky-info p a#button:hover { background:#fff; color: #000; } #sticky-info p { width:95%; float:left; } .cross { display:block; position:relative; right:15px; float:right; } .cross a { font-size:13px; font-weight:bold; font-family:"Arial"; color:#fff; line-height:40px; } .cross, a:hover { color: #78d9d3; text-decoration:none; }

Efekt:

Wszystkie wartości w kodzie CSS są zmienne

Jeśli masz z czymś problem - napisz na maila :) 

Jeśli spodobał Ci się wpis, przekaż go dalej :)