Blogger slider πολύ απλά στο blog σας
Γεια σε όλους τους 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 για να το προσαρμόσετε στα μέτρα σας.