ANIMATED SCROLLING MESSAGE BOX

ANIMATED SCROLLING MESSAGE BOX

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα animated scrolling message box με ένα μήνυμα και κάποιο link που να παραπέμπει σε κάποιο άρθρο ή οπουδήποτε αλλού. Καλό θα ήταν ο κώδικας να μπέι στο τέλος του κώδικα HTML της ανάρτησής σας και αφού έχετε βάλει στην ανάρτηση αυτή απαραιτήτως read more για να μην εκτελείται ο κώδικας στην αρχική σελίδα σας αλλά μόνο όταν ανοίγει ο αναγνώστης την συγκεκριμένη ανάρτηση. Ο 1^ος κώδικας είναι για ανοιχτόχρωμα blog και ο 2^ος για σκουρόχρωμα blog. Δείτε πως φαίνεται το animated scrolling message box στο κάτω μέρος αυτής της ανάρτησης.

1^ος κώδικας για ανοιχτόχρωμα blog.

<style>

#mesbox1 {width:315px;height:40px;background:#FFFFFC;position:fixed;animation:anim1 20s 10;animation-direction: alternate;z-index:99;}

@keyframes anim1 {

  0%   {background:#fffffc; left: 0px; bottom: 0px;}

  10%  {background:#ffff00; left: 100px; bottom: 0px;}

  20%  {background:#ffbb22; left: 200px; bottom: 0px;}

  30%  {background:#ff9999; left: 300px; bottom: 0px;}

  40%  {background:#00ff00; left: 400px; bottom: 0px;}

  50%  {background:#33ffff; left: 500px; bottom: 0px;}

  60%  {background:#fffffc; left: 600px; bottom: 0px;}

  70%  {background:#ffff00; left: 700px; bottom: 0px;}

  80%  {background:#ffbb22; left: 800px; bottom: 0px;}

  90%  {background:#ff9999; left: 900px; bottom: 0px;}

  100% {background:#00ff00; left: 1000px; bottom: 0px;}}

</style>

<div id="mesbox1">

<a style="font:16px arial;color:#000;">▼ ΔΙΑΒΑΣΤΕ ΚΑΙ ΤΟ ΠΑΡΑΚΑΤΩ ΑΡΘΡΟ.</a><br>

<a href="https://my-posts-1.blogspot.com/2015/10/blog-seo.html" target="_new">ΣΥΜΒΟΥΛΕΣ ΓΙΑ ΚΑΛΥΤΕΡΟ SEO ►</a>

</div>

2^ος κώδικας για σκουρόχρωμα blog.

<style>

#mesbox1 {width:315px;height:40px;background:#000;position:fixed;animation:anim2 20s 10;animation-direction: alternate;z-index:99;}

@keyframes anim2 {

  0%   {background:#333333; left: 0px; bottom: 0px;}

  10%  {background:#400030; left: 100px; bottom: 0px;}

  20%  {background:#740777; left: 200px; bottom: 0px;}

  30%  {background:#661111; left: 300px; bottom: 0px;}

  40%  {background:#ff0000; left: 400px; bottom: 0px;}

  50%  {background:#ff4500; left: 500px; bottom: 0px;}

  60%  {background:#115599; left: 600px; bottom: 0px;}

  70%  {background:#173377; left: 700px; bottom: 0px;}

  80%  {background:#0000ff; left: 800px; bottom: 0px;}

  90%  {background:#000040; left: 900px; bottom: 0px;}

  100% {background:#105105; left: 1000px; bottom: 0px;}}

</style>

<div id="mesbox1">

<a style="font:16px arial;color:#FFF;">▼ ΔΙΑΒΑΣΤΕ ΚΑΙ ΤΟ ΠΑΡΑΚΑΤΩ ΑΡΘΡΟ.</a><br>

<a href="https://my-posts-1.blogspot.com/2015/10/blog-seo.html" target="_new">ΣΥΜΒΟΥΛΕΣ ΓΙΑ ΚΑΛΥΤΕΡΟ SEO ►</a>

</div>

▼ ΔΙΑΒΑΣΤΕ ΚΑΙ ΤΟ ΠΑΡΑΚΑΤΩ ΑΡΘΡΟ.
ΣΥΜΒΟΥΛΕΣ ΓΙΑ ΚΑΛΥΤΕΡΟ SEO ►