GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr Delicius DIIGO Start.me NETVIBES feedburner

CAROUSEL POST SLIDER FOR BLOGGER No 1

CAROUSEL SLIDER
CAROUSEL POST SLIDER FOR BLOGGER No 1
Αυτό είναι ένα πολύ πρακτικό carousel post slider διαστάσεων 960px Χ 210px και μπορεί να εμφανίζει 5 αναρτήσεις σε κάθε πέρασμα του slider. Το πλάτος μπορείτε να το ρυθμίσετε αλλάζοντας το width:910px που βρίστεται στην τελευταία γραμμή πρίν το </style>. Για να ρυθμίσετε τα χρώματα του background και του κειμένου του slider αλλάξτε τους κωδικούς των χρωμάτων που προηγήται το σύμβολο της δίεσης #. Το πόσες αναρτήσεις θα εμφανίζονται μπορείτε να το ρυθμίσετε αλλάζοντας το numposts1 = 100;
Αν θέλετε να εμφανίσετε τις αναρτήσεις μίας μόνο συγκεκριμένης ετικέτας τότε προσθέσετε την ετικέτα αυτή στο παρακάτω script που βρίστεται σχεδόν 15 γραμμές πρίν το τέλος αυτού του κώδικα. Μετά την προσθήκη της ετικέτας ο κώδικας θα γίνει έτσι. 

<script>
document.write("<script src=\"http://the-best-widgets.blogspot.gr//feeds/posts/default/-/YOUR-LABEL?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>

Εκεί που γράφει YOUR-LABEL Θα βάλετε την ετικέτα σας. Αν θέλετε να εμφανίζονται όλες αφήστε τον κώδικα όπως ήταν αλλά μην ξεχάσετε να αλλάξετε το link του δικού μου blog που είναι με πορτοκαλί γράμματα με το link του δικού σας blog.


ΔΕΙΤΕ ΤΟ ΕΔΩ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ► ΔΕΙΤΕ ΕΔΩ ΣΕ ΑΛΛΗ ΔΙΑΣΤΑΣΗ (1480X210) ►

Αντιγράψτε και επικολλήστε μέσα σε ένα gadget τον παρακάτω κώδικα.

<style>
#carousel{width:auto;height:210px;margin-bottom:0px;position:relative;display:block} 
#carousel .container {
position:absolute;
left:30px;
width:960px;
height:210px;
overflow:hidden;
background:#255720}
#carousel #previous_button{
position:absolute;
width:30px;
height:210px;
background:url(https://lh5.googleusercontent.com/-j28HsFjcG30/VV3dCV-DpdI/AAAAAAAARdA/TgQMuUyFkpE/s64-no/arrowleft.png) center; background-repeat:no-repeat; z-index:100;cursor:pointer;border-right:1px solid #FFFFFF; background-color:#E19797;} 
#carousel #previous_button:hover{background-color:#EE6969;} 
#carousel #next_button{
position:absolute;
right:0;
width:30px;
height:210px;
background:url(https://lh3.googleusercontent.com/-pyCcEr7m8OU/VV3dCYWdUKI/AAAAAAAARdE/nkwTgozDdYg/s64-no/arrowright.png) center;background-repeat:no-repeat; z-index:100;cursor:pointer;border-left:1px solid #FFFFFF; background-color:#51E286;} 
#carousel #next_button:hover{background-color:#4EFF44;}
#carousel ul{width:100000px;position:relative;margin-top:2px}
#carousel ul li{
display:inline;
float:left;
text-align:left;
font-family: Arial;
font-size: 12px;
line-height:14px;
width:167px;
height:190px;
margin:2px 2px 2px 2px;
padding:4px 4px 4px 4px;
border:1px solid #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
position:relative;}
#carousel ul li:hover{background-color:#FF6600;}
#carousel ul li a.slider_title{
color: #FFFFFF;
display:block;
margin-top:0px;
left:0px;
bottom:-10px;
position:absolute;
padding:4px 4px 4px 4px;
background-color: #173374;
color:#FFFFFF;
width:100%;
height:80px;}
#carousel ul li a.slider_title:hover{color:#000000;background-color:#FBBB22;}
#carousel img{display:block;padding:4px;}
#carousel a img{display:block;background:#115595; padding:0px;margin-top:0px; margin-bottom:0px;}
.container {width:910px !important;}
</style>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='https://rawgit.com/github-codes/9fe55ad953e564f6a6255c4c6c362869/raw/4d54bc53da569698c47e10d31c4c96b51bfd1ae7/carousel-slider-1.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/-8l2FSaeBlsI/VVzGIIi_wpI/AAAAAAAARbU/eSn8ctuXaec/s300-no/no%2Bimage.jpg";
showRandomImg = false;
aBold = false;
summaryPost = 150;
summaryTitle = 75;
numposts1 = 150;
label1 = "YOUR-LABEL";
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}
s = s.join("");
s = s.substring(0,chop-1);
return s;}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;}}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="165" height="106" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';
document.write(trtd);
j++;}
document.write('</ul>');}
//]]>
</script>

<div id="carousel">
<div id="previous_button"></div>
<div class="container">
<script>
document.write("<script src=\"http://the-best-widgets.blogspot.gr//feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");</script>
<div class="clear"></div></div>
<div id="next_button"></div></div>
<script type="text/javascript">
// <![CDATA[
(function($) { $(document).ready(function(){ $("#carousel .container").jCarouselLite({
auto: 4000,
scroll: 5,
speed: 800
visible: 5,
start: 1,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"});
})})(jQuery)
// ]]>
</script>

13 σχόλια:

  1. Καλησπέρα. Πολύ χρήσιμες οι πληροφορίες και ευχαριστώ.
    Μια ερώτηση έχω για το "CAROUSEL POST SLIDER FOR BLOGGER No 1". Θα ήθελα οι πλαινές κάθετες στήλες να είναι αλλο χρώμα. Από που μπορώ να το αλλάξω?

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Θα αλλάξεις τους 4 κωδικούς χρωμάτων που σου έχω επισημαίνει με πρασινο ηλεκτρίκ κουτάκι στο παρακάτω screenshout.
      ΚΑΝΕ ΚΛΙΚ ΕΔΩ ΝΑ ΔΕΙΣ ΤΟ SCREEN SHOUT

      Διαγραφή
  2. καλησπέρα. έκανα μερικές αλλαγές στον κώδικα, όμως ενώ πατώντας refresh στην σελίδα δείχνει να τις αφομοιώνει, όταν τελικά φορτώνει η σελίδα επιστρέφει στην αρχική του εμφάνιση.
    http://www.yannidakis.net
    θα εκτιμούσα πολύ, μία συμβουλή να ξεμπλοκάρω

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Απο ότι είδα έχεις βάλει 2 φορές μέσα στο blog σου τους κώδικες του jquery και του script του carousel slider πρέπει να υπάρχουν μόνο μία φορά για να λειτουργίσει ....

      Διαγραφή
    2. δλδ ποια σειρά κώδικα πρέπει να αφαιρέσω;
      ευχαριστώ

      Διαγραφή
    3. Κάνοντας δεξί κλίκ στο blog σου και πατώντας προβολή κώδικα σελίδας αναζήτησε με Ctrl+F τη λέξη ajax και αφαίρεσε τις γραμμές 4880 και 4881

      Διαγραφή
  3. ΚΑΛΗΜΕΡΑ. ΠΟΛΥ ΧΡΗΣΙΜΕΣ ΟΛΕΣ ΟΙ ΑΝΑΡΤΗΣΕΙΣ ΣΟΥ. κατέβασα στο blob μου : https://ap-ax-aerop.blogspot.gr/ τον κώδικα για το CAROUSEL POST SLIDER FOR BLOGGER No 1 εγκαταστάθηκε αλλά δεν έχει κήλυση των εικόνων. Είμαι ερασιτέχνης αλλά το παλεύω. Θα σου ήμουν ευγνώμων αν με βοηθούσες να λύσω το πρόβλημα.

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Πρόκειται για το γνωστό λάθος που κάνουν πολλοί και έχουν ενεργοποιήσει το https. Απένεργοποίησέ το και θα λειτουργήσει κανονικά. Πήγαινε στις ρυθμίσεις και κάνε απενεργοποίηση του https. Μετά απο αυτό θα εξαφανιστεί απο το url του blog σου το https και όλα θα λειτουργούν κανονικά. Πρόσεξε να μήν έχεις ξεχάσει μέσα στο μενού κάποιους συνδέσμους με https και καθάρισε τα cookies του browser που μπάινεις στο blog σου και τέλος.

      Διαγραφή
  4. καλημερα.Σε εμένα κανει το εξής...Ενω δουλευε κανονικα εδω και πολυ καιρο,τωρα ξαφνικα σταματησε την κυλιση.Δειχνει μονο τις 4 τελευταιες αναρτησεις μονο.Τι να εγινε;Ευχαριστω.

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Εσύ αν δεν κάνεις το ίδιο λάθος με το https, τότε απλώς ξανααντέγραψε το νέο script που βρίσκεται μετά τον κώδικα style, στη 2η γραμμή. Βάλτο στη θέση του παλιού script που σταματησε να δουλέυει επειδή η google έπαψε να φιλοξενει αρχεία script στο googledrive. Mετα τον κώδικα style είναι 2 γραμμές με παραπομπή σε αρχεία script αντέγραψε την 2η στην θέση της παλιάς γραμμής που είχες και θα λειτουργήσει κανονικά.

      Διαγραφή
    2. Καλησπερα.Ενταξει εφτιαξε και ολα μια χαρα τωρα.Αλλαξα και την σειρα στο τελος (btnPrev: "#previous_button",
      btnNext: "#next_button"}); ) αναποδα επειδη τα βελη λειτουργουσαν αναποδα.Ευχαριστω πολυ!

      Διαγραφή
  5. Εκεί που γράφει YOUR-LABEL Θα βάλετε την ετικέτα σας.Τι ειναι η ετικετα ρε παιδια?

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Η ετικέτα είναι αυτή που βάζουμε στη διπλανη μπάρα του editor του blogger πριν δημοσιεύσουμε την ανάρτηση. Μπορεί να είναι π.χ. ΕΙΔΗΣΕΙΣ, ΠΟΛΙΤΙΚΗ, ΟΙΚΟΝΟΜΙΑ, ΠΟΛΙΤΙΣΤΙΚΑ, ή οτιδήποτε άλλο θέμα θέλεις.

      Διαγραφή

► Γράψτε το σχόλιό σας στο λευκό κουτί και αν θέλετε να ειδοποιηθήτε για την απάντηση τσεκάρετε το κουτάκι "Να λαμβάνω ειδοποιήσεις".