Beauty

Adnotacje na bloga


Chciałbyś dodać jakąś wiadomość na bloga , a męczy cię tworzenie nowego posta lub gadżetu dla krótkiego tekstu ? Właśnie ten dodatek pomoże zwięźle zamieszczać informacje na stronie.Przede wszystkim jest przejrzysty i ładny , nie spowalnia bloga , szybko się go instaluje oraz nie przeszkadza w oglądaniu treści , ponieważ wyświetla się przez dziesięć sekund ,a potem znika.
<span>
<h3><b>Przykładowy komunikat</b> </h3>
<p>Nulla at dignissim tellus. Vivamus ligula orci, ornare vel quam eu, mollis vestibulum mauris. Sed aliquet posuere dolor. Pellentesque consectetur enim id accumsan mollis. Quisque sodales tempus lorem. Maecenas risus mi, fermentum sed lectus sit amet, auctor porttitor quam. Quisque at nisi ipsum.</p>

</span>
</div>

Instalacja 

1. Skopiuj kod, który umieściłem powyżej.
2. Wejdź w menu nawigacyjne bloggera , klikając na swój blog. Potem przejdź w podstronę układ.
3. Utwórz dodatek HTML/Javascript i wklej tam kod.
4. Wpisz własne informacje pomiędzy elementy <b> i </b> oraz <p> i </p> zamiast moich.
5. Zapisz
6. Teraz skopiuj ten kod CSS
7. Umieść go w edytorze kodu HTML (podstrona szablon) powyżej elementu ]]</b:skin>
8. Zapisz
#notifjo {
right: 10px; /* odległość od prawej strony bloga */
top: 10px; /* odległość od góry bloga */
width: 320px; /* szerokość komunikatu */
height: auto; /* wysokość (zalecana auto) */
overflow: hidden;
background: rgba(250,255,255,0.9); /* kolor tła */
border-radius: 10px; /* zaokrąglenie ramki */
border: 1px solid #ddd; /* grubość ramki */
z-index: 999999;
position: fixed; 
-webkit-animation: fadeOutnotif 10s linear forwards; /* ilość czasu przez który adnotacja się wyświetla */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifjo a {
display:block;
text-decoration:none;}
#notifjo span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifjo span h3 {
font-size: 22px; /* wielkość nagłówka */
line-height: 21px;
color: #222; /* kolor tekstu */
font-weight: normal;
letter-spacing: 0px;
}

@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
Demo

Instagram