Παρασκευή 20 Σεπτεμβρίου 2013

Blogger slider.

Ενα πολύ ωραίο και απλό στη χρήση slidershow για το blog σας για να βλέπουν οι επισκέπτες σας τις τελευταίες αναρτήσεις που δημοσιεύσατε. Μπορείτε να ρυθμίσετε το slider για το πόσα άρθρα θα εμφανίζει. Επίσης στο slideshow εκτός από την εικόνα θα σας εμφανίζει αυτόματα από κάτω τον τίτλο και την περιγραφή του κάθε άρθρου.

Το slider μπορείτε να το προσθέσετε στο δικό σας blog .

  • Σύνδεση στο λογαριασμό σας στο 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: "TO ΔΙΚΟ ΣΑΣ",
  •  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: "" βάζετε στη θέση του url το δικό σας.
    Μπορείτε να παίξετε με τις ρυθμίσεις css του slider για να το προσαρμόσετε στα μέτρα σας.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου