SIMPLE POSTS SLIDER

SIMPLE POSTS SLIDER

Με τον παρακάτω κώδικα μπορείτε να βάλετε ένα απλό post slider στο blog σας. Αντικαταστήστε τα links των posts με τα πράσινα γράμματα την εικόνα του post με τα ελαφρώς πράσινα γράμματα τον τίτλο της ανάρτησης με τα κίτρινα γράματα και την περίληψη της ανάρτησης με τα ελαφρώς κίτρινα γράμματα. Μπορείτε να επαναλάβετε το μέρος του κώδικα από το tickercontents[1] μέχρι το </a> για να συμπεριλάβετε περισσότερες αναρτήσεις στο post slider. Δείτε το demo ακριβώς κάτω από εδώ. ▼

<script>

var tickercontents=new Array()

tickercontents[0]='<a href="https://the-best-widgets.blogspot.gr/2015/03/background.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKAWhvjM9FtRsY7k-MUjoUSEm_N2kUWf78Nq-RtEeO55kE5vJKbFdSOSt9gxpN2WJ7dV6PfM9yn1iOBiVQf1ATwoyAfxnsg421SpXQ9SjdyQcTY3O7AVcGfR452srZJuTu2cbmohti57ek/w90-h68-no/wood-colors.jpg" style="float:left;margin:3px;" width="80" height="60"/></a><a style="font:bold 14px Arial;background:#FFFFCC;color:#000080;">ΕΙΚΟΝΕΣ ΓΙΑ BACKGROUND ΣΕ ΑΠΟΧΡΩΣΕΙΣ ΤΟΥ ΞΥΛΟΥ</a><br><a style="font:14px Arial;background:#FFFFCC;color:#000;">Παρακάτω έχω συγκεντρώσει πάνω από 30 εικόνες για να βάλετε για background ανάρτησης ή υποσέλιδου. Για να βάλετε την εικόνα σε μία μεμονομένη ανάρτηση βάλτε τoν παρακάτω κώδικα στο τέλος της ανάρτησης…</a>'

tickercontents[1]='<a href="https://the-best-widgets.blogspot.gr/2015/02/blog-post_16.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhru1seBQl6Kwr7S2bHYK4qGzbTD9oTHNzgUqSMqVR1hM1eW9UaCOgoDnIa0A0ouvR2jQSYf0L_8yfqgo61u9yIdfgq3awftCDtj9LgEM_93u4Men3Iqa6O7tbu5FtoNn1en1fzcLuKxDN/w100-h75-no/colorful_wood-100.jpg" style="float:left;margin:3px;" width="80" height="60"/></a><a style="font:bold 14px Arial;background:#FFFFCC;color:#000080;">ΠΩΣ ΒΑΖΩ ΔΙΑΦΟΡΕΤΙΚΟ ΦΟΝΤΟ ΣΕ ΚΑΘΕ ΑΝΑΡΤΗΣΗ</a><br><a style="font:14px Arial;background:#FFFFCC;color:#000;">Για να βάλουμε διαφορετικό φόντο ή εικόνα φόντου σε κάθε ανάρτηση θα χρειαστεί να προσθέσουμε 3-4 γραμμές κώδικα στο τέλος της ανάρτησης αυτής που θέλουμε να εμφανίζεται με διαφορετικό χρώμα φόντου αλλά ακόμα και με διαφορετική εικόνα φόντου.</a>'

tickercontents[2]='<a href="https://the-best-widgets.blogspot.gr/2015/05/widget.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_GMd6CTXModad6GfKyNzuOwlNsooaADUFgVE50lHkU1KkBjQdU5Rj-CI4jUY5-IbPCu5J_ks7ImEvi5ABcLSN5t1gL8PyzxsN_yz8-fV4P7-A1AEDrvRyyZ5LGqeY4zJfRirVimNz_0A9/w90-h60-no/FLOATING-WIDGET.jpg" style="float:left;margin:3px;" width="80" height="60"/></a><a style="font:bold 14px Arial;background:#FFFFCC;color:#000080;">ΠΩΣ ΒΑΖΩ ΑΝΑΔΥΟΜΕΝΟ WIDGET</a><a style="font:14px Arial;background:#FFFFCC;color:#000;"><br>Με τον παρακάτω κώδικα μπορούμε να ενσωματώσουμε ένα widget το οποίο θα αναδύεται μετά το πάτημα ενός στατικού κουμπιού. Είναι αυτό που έχω βάλει πάνω αριστερά και περιέχει την λίστα με τα widgets.</a>'

var tickerwidth="240px"

var tickerheight="auto"

var fontcss="font:14px Arial; color:#000000"

var tickdelay=3000

var highlightspeed=10

var highlightcolor="#FFFFCC"

var backdroptextcolor="#000080"

document.write('<style>#highlighterbg a{color:'+backdroptextcolor+'}</style>')

document.write('<div style="position:relative;left:0px;top:0px; width:'+tickerwidth+'; height:'+tickerheight+';'+fontcss+'">')

document.write('<span id="highlighterbg" style="position:absolute;left:0;top:0;color:'+backdroptextcolor+'; width:'+tickerwidth+'; height:'+tickerheight+';padding: 4px"></span><span id="highlighter" style="position:absolute;left:0;top:0;clip:rect(auto auto auto 0px); background-color:'+highlightcolor+'; width:'+tickerwidth+';height:'+tickerheight+';padding: 4px"></span>')

document.write('</div>')

var currentmessage=0

var clipbottom=1

function changetickercontent(){

msgheight=clipbottom=crosstick.offsetHeight

crosstick.style.clip="rect("+msgheight+"px auto auto 0px)"

crosstickbg.innerHTML=tickercontents[currentmessage]

crosstick.innerHTML=tickercontents[currentmessage]

highlightmsg()}

function highlightmsg(){

if (clipbottom>0){

clipbottom-=highlightspeed

crosstick.style.clip="rect("+clipbottom+"px auto auto 0px)"

beginclip=setTimeout("highlightmsg()",1)}

else{

clipbottom=msgheight

clearTimeout(beginclip)

if (currentmessage==tickercontents.length-1) currentmessage=0

else currentmessage++

setTimeout("changetickercontent()",tickdelay)}}

function start_ticking(){

crosstickbg=document.getElementById? document.getElementById("highlighterbg") : document.all.highlighterbg

crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter

crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement

if (parseInt(crosstick.offsetHeight)>0)

crosstickParent.style.height=crosstick.offsetHeight+'px'

else

setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake

changetickercontent()}

if (document.all || document.getElementById)

window.onload=start_ticking

</script>