Αυτό το body slider μπορεί να μπεί μέσα σε ένα HTML / JAVASCRIPT gadget κουτάκι που υπάρχει στην διάταξη
του blog σας
είτε σε πλευρική μπάρα είτε στο υποσέλιδο, αλλά μπορεί επίσης να μπεί και μέσα
στον κώδικα HTML του blog σας πρίν την
ετικέτα </head>. Απλά αντιγράψτε και επικολλήστε τον παρακάτω
κώδικα σε όποιοδήποτε gadget
θέλετε ή μέσα στον κυρίως κώδικα του blog σας
αλλάζοντας αν θέλετε τα πράσινα links των εικόνων με τα links των εικόνων της αρεσκείας σας. Αν θέλετε να προσθέσετε περισσότερες είκόνες πρέπει να βάλετε πρώτα τα link τους
εντός του <script>.
▼ ΚΩΔΙΚΑΣ ΜΕ 10 ΕΙΚΟΝΕΣ
<style>
@keyframes slidy {
0% { left: 0%; }
10% { left: 0%; }
20% { left: -100%; }
30% { left: -100%; }
40% { left: -200%; }
50% { left: -200%; }
60% { left: -300%; }
70% { left: -300%; }
90% { left: -400%; }
100% { left: -400%; }}
body {margin:0;padding:0;background:#173377;}
div#slider {overflow: hidden;}
div#slider figure img { width:20%;float:
left;}
div#slider figure {
position: relative;
width:500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;}
</style>
<div id="slider">
<figure>
<img src="https://i.imgur.com/phbIVY1.jpg"/>
<img src="https://i.imgur.com/Jrw6vMy.jpg"/>
<img src="https://i.imgur.com/KGh0xkb.jpg"/>
<img src="https://i.imgur.com/kmCowJw.jpg"/>
<img src="https://i.imgur.com/QDoQ4pG.jpg"/>
<img src="https://i.imgur.com/6W5A1Bg.jpg"/>
<img src="https://i.imgur.com/XYTN2eD.jpg"/>
<img src="https://i.imgur.com/OLZZEyp.jpg"/>
<img src="https://i.imgur.com/LXa5y1y.jpg"/>
<img src="https://i.imgur.com/LzQtV55.jpg"/>
</figure>
</div>