Dzisiaj przedstawię wam jak zrobić prosty śnieg na bloga stronę za pomocą CSS.
Wydaje się on szczególnie atrakcyjny, ponieważ nie wymaga skryptów, tylko CSS oraz trzech małych obrazków. Zaletą tej metody jest to, że nie przeciążać bloga używając skryptów, wadą jest to, że użytkownicy nie tak nowoczesnych przeglądarek, nie będą w stanie go zobaczyć (w Internet Explorer w wersji 10 działa i do góry).
Śnieg spada w tle bloga, który dodatkowo zapobiega kolizji z linkami lub treściami (bo płatki są zdjęciami), a także zapobiega blokowaniu widoczność zawartości bloga.
Jak dodać spadający śnieg na bloga
Krok 1. Wejdź w szablon - edytuj kod HTML
Krok 2. Teraz odnajdź <b:skin> ... </b:skin> tak jak poniżej na obrazku i kliknij w widoczne kropki, aż rozwinie się lista.
Krok 3. dodaj kod powyżej ]]></b:skin>
/* Snow falling for Blogger
----------------------------------------------- */
@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
#falling-snow {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLe4QhXCN9bgBK4zOmeYTmDk4bbDadL2CQGg0_N3fhUU60Fe2RWCabDkFmCsXiDck-zPr_uIgThmNWOhJQBCRQRPCWnjHoOESbXo2b9F924RFq6F1mhEg51p8GQgDlBwQrJe7lr3jQaNLc/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDBrKUSSZc7jAVbve1HkqNsCTmcfY2AL46h45Cxwcdw9qmtbXV-ZwHGmwsm2fGXWa5_Xl-nQkCiVfJbnx0MUt4ACFlKj8fdqzSE8t69wkAHCrff_Y_0-OT-sRW7RBtM5mmNyTHs-8oDzj/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8D-ikkDnwJznifAsrscwdW_MZBf03DuGu7B7ruf7OrwIXcEVcvIJPEjWdWLnuK-EIZvi6JwbrEkDC9mYLy2WuRpPF2jGiCTtRguWHzKI9f071Sm4mcrqltPWqTfYm-FK6SD7S0i26EGM/s1600/snow2.png);-webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}
Krok 4. Znajdź w polu wyszukiwania search blogger <body> tag, jeśli nie możesz go znaleźć użyj poniższego tagu:
<body expr:class='"loading" + data:blog.mobileClass'>
i dodaj ten kod poniżej:
<div id='falling-snow'>
Krok 5. Teraz wyszukaj </body> tag i wklej tuż nad nim kod:
</div>
Krok 6. Zapisz szablon i ciesz się śniegiem ! :)
>>> click below for THANKS <<<
Jakby jakieś komentarze były to było by bardzo dobrze.
OdpowiedzUsuńFajny efekt śniegu, testuje!
OdpowiedzUsuńBardzo fajny efekt. Chętnie z niego skorzystam.
OdpowiedzUsuńKlimatyczny efekt.
OdpowiedzUsuńWizualnie robi wrażenie.
OdpowiedzUsuńW sam raz na święta :)
OdpowiedzUsuńBardzo podoba mi się ten pomysł z wprowadzeniem śniegu na bloga, szczególnie teraz, gdy zbliżają się Święta. Tworzy to niesamowity, zimowy klimat. Zastanawiam się tylko, jak to będzie wyglądać na urządzeniach mobilnych, ale na pewno wypróbuję. Dziękuję za szczegółowy poradnik!
OdpowiedzUsuńRzeczywiście, taki element może dodać niepowtarzalnego klimatu, szczególnie w okresie świątecznym. Co do wyglądu na urządzeniach mobilnych, zazwyczaj takie efekty są responsywne i dostosowują się do różnych rozdzielczości ekranów, ale zawsze warto to przetestować. Mam nadzieję, że efekt śniegu przypadnie Ci do gustu i stworzy przyjemną atmosferę dla czytelników Twojego bloga!
OdpowiedzUsuń