Γεια σε όλους τους bloggers, σήμερα σας έχω ένα πολύ ωραίο και απλό στη
χρήση slidershow για το blog σας για να βλέπουν οι επισκέπτες σας τις
τελευταίες αναρτήσεις που δημοσιεύσατε.
Μπορείτε να ρυθμίσετε το
slider για το πόσα άρθρα θα εμφανίζει. Επίσης στο slideshow εκτός από
την εικόνα θα σας εμφανίζει αυτόματα από κάτω τον τίτλο και την
περιγραφή του κάθε άρθρου.
Το slider μπορείτε να το προσθέσετε στο δικό σας blog με το απλούστατο τρόπο που μάθαμε για να προσθέτουμε gadget στο blogger.
- Σύνδεση στο λογαριασμό σας στο blogger.com
- Διάταξη
- Προσθήκη gadget
- HTML/JavaScript
- Επικόλληση και Αποθήκευση του πιο κάτω κώδικα
<style scoped="" type="text/css">
#coinautoslide{margin:0 auto;border:4px solid
white;border-radius:2px;font:normal normal 11px
Verdana,Geneva,sans-serif;line-height:1.6em}
.coin-slider{overflow:hidden;zoom:1;position:relative}
.coin-slider a{text-decoration:none;outline:none;border:none}
.cs-buttons{font-size:0;padding:10px;float:left}
.cs-buttons
a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid
#B8C4CF;color:#B8C4CF;text-indent:-1000px}
.cs-active{background-color:#B8C4CF;color:#FFFFFF}
.cs-buttons
a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)}
a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0
0 3px #518CC6;border:1px solid #3072B3!important}
.cs-title{width:100%;padding:5px
0;background-color:#000000;color:#FFFFFF}
.cs-title strong{display:block;font-size:120%}
.cs-title p{margin:0}
.cs-title cite{font-size:90%}
.cs-title strong,.cs-title cite,.cs-title p{padding:0 10px}
.cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script type='text/javascript'>
var AutoCoinConfig = {
url_blog: "http://lefta4klik.blogspot.gr/",
MaxPost: 8,
cmtext: "Komentar",
MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
NoCmtext : "Belum Ada Komentar",
imageSize :500,
SumChars : 100,
tagName:false,
width: 500,
height: 250,
spw: 7,
sph: 5,
delay: 3000,
sDelay: 30,
opacity: 0.7,
titleSpeed: 500,
effect: '',
navigation: true,
links : true,
hoverPause: true,
prevText: 'prev',
nextText: 'next'
};
</script>
<script src="https://googledrive.com/host/0B3fIJ7nZFI9iSnJweDBXVUsydG8/" type="text/javascript"></script>
Εκεί που γράφει =>
url_blog: "http://lefta4klik.blogspot.gr/"(το έχω με κόκκινα γράμματα) βάζετε στη θέση του url του blog μου το δικό σας.
Μπορείτε να παίξετε με τις ρυθμίσεις css του slider για να το προσαρμόσετε στα μέτρα σας.
πηγη
