12 Δεκ 2014

Auto post slider widget for Blogger


Ένα πανέμορφο και χρήσιμο Widget για το Βlogger. Είναι εύκολο στην εγκατάσταση και σας εξοικονομεί πολύτιμο χώρο στη σελίδα σας προβάλλοντας σε slider τις ''Δημοφιλείς αναρτήσεις'' σας...



Τοποθετείστε σαν Gadget τον παρακάτω κώδικα:
<!--   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://thema-theama.blogspot.gr/",

 
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 :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="http://dr-blogger.com/files/scripts/coinslider.js" type="text/javascript"></script>

<!--  end post slider  -->

Η διαδικασία είναι απλή και για τους περισσότερους γνωστή:
Αντιγραφή κώδικα  --  Πίνακας Ελέγχου  --  επιλέγουμε το Blogger  μας  --  Διάταξη  -- Προσθήκη gadget  --  HTML/JavaScript  --  Επικόλληση κώδικα  --  Αποθήκευση. ΤΕΛΟΣ.

Ρυμίσεις


1) Αντικαταστήστε με το URL της σελίδα σας
2) Ο αριθμός των αναρτήσεων που θα προβάλλονται
3) Μέγεθος εικόνας
4) Χρόνος εναλλαγής ανάρτησης
5) Ρύθμιση διαφάνειας τίτλου ανάρτησης

To αποτέλεσμα ανάλογα με τις ρυθμίσεις και τις φωτογραφίες που έχετε στις αναρτήσεις σας (καλύτερα να είναι μεσαίου μεγέθους) θα είναι κάτι σαν αυτό:


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

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