Βάλτε Slider με τις τελευταίες αναρτήσεις σας στο Blog

Αρκετός κόσμος θέλει να βάλει κάποιο Slider στο blog του, αλλά δεν βρίσκει κάτι.

Έτσι, βάλαμε εδώ στην σελίδα ένα Slider και ελπίζω να σας αρέσει και να σας κάνει.

Πάμε να δούμε πως θα το προσθέσουμε στο blog μας

Ο Τρόπος είναι απλός.

Όπως βάζουμε τα Gadget, έτσι θα βάλουμε και αυτό.

Πηγαίνουμε Διάταξη

Προσθήκη gadget / HTML/JavaScript

Και ανοίγει το παράθυρο που έχουμε από κάτω για να προσθέσουμε τον κώδικα

Ο Κώδικας για το Slider είναι από κάτω

<!--   begin post slider  -->

<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://helpblogwidget.blogspot.gr/", <!--ΕΔΩ ΒΑΖΕΤΕ ΤΟ BLOG ΣΑΣ-->

 MaxPost: 8, <!--ΕΔΩ Ο ΑΡΙΘΜΟΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ-->

 cmtext: "comments",

 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 : "comment number",

 imageSize :600, <!-- ΙΔΙΟ ΜΕ ΤΟ WIDTH ΠΙΟ ΚΑΤΩ-->

 SumChars : 100,

 tagName:false,

 width: 600, <!--ΕΔΩ ΤΟ ΠΛΑΤΟΣ ΤΟΥ SLIDER - ΙΔΙΟ ΜΕ ΤΟ imageSize  3 ΓΡΑΜΜΕΣ ΠΙΟ ΠΑΝΩ-->

 height: 300, <!--ΕΔΩ ΤΟ ΥΨΩΣ ΤΟΥ SLIDER -->

 spw: 7,

 sph: 5,

 delay: 5000,

 sDelay: 30,

 opacity: 0.7,

 titleSpeed: 500,

 effect: '',

 navigation: true,

 links : true,

 hoverPause: true,

 prevText: 'prev', <!-- ΕΔΩ ΒΑΖΟΥΜΕ ΠΙΣΩ-ΠΡΟΗΓΟΥΜΕΝΩ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ -->

 nextText: 'next'  <!-- ΕΔΩ ΒΑΖΟΥΜΕ ΜΠΡΟΣΤΑ-ΕΠΟΜΕΝΟ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ -->

};

</script>

<script src="http://users.otenet.gr/~otetanis/helpblogwidget/jsfiles/slider.js" type="text/javascript"></script>

<!--  end post slider  -->

Αφού βάλουμε τον κώδικα πατάμε αποθήκευση και βάζουμε το gadget εκεί που δείχνει η φωτογραφία που έχουμε από κάτω, στην θέση που λέει Σε όλες τις στήλες

Τώρα οι ρυθμίσεις είναι πολλές, θα πούμε της βασικές.

Τις γράφουμε και πάνω στον κώδικα, δεν χρειάζετε να τις σβήσετε, έτσι κάντε copy/paste και θα παίξει κανονικά.

url_blog: "http://helpblogwidget.blogspot.gr/", ΕΔΩ ΒΑΖΕΤΕ ΤΟ BLOG ΣΑΣ

MaxPost: 8, ΕΔΩ Ο ΑΡΙΘΜΟΣ ΤΩΝ ΑΝΑΡΤΗΣΕΩΝ

imageSize :600, ΙΔΙΟ ΜΕ ΤΟ WIDTH ΠΙΟ ΚΑΤΩ

width: 600, ΕΔΩ ΤΟ ΠΛΑΤΟΣ ΤΟΥ SLIDER - ΙΔΙΟ ΜΕ ΤΟ imageSize  3 ΓΡΑΜΜΕΣ ΠΙΟ ΠΑΝΩ

height: 300, ΕΔΩ ΤΟ ΥΨΩΣ ΤΟΥ SLIDER 

prevText: 'prev', ΕΔΩ ΒΑΖΟΥΜΕ ΠΙΣΩ-ΠΡΟΗΓΟΥΜΕΝΩ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ

nextText: 'next'  ΕΔΩ ΒΑΖΟΥΜΕ ΜΠΡΟΣΤΑ-ΕΠΟΜΕΝΟ ΣΤΑ ΕΛΛΗΝΙΚΑ ΑΜΑ ΘΕΛΟΥΜΕ