GADGETS FOR BLOGS

Facebook Google plus YouTube Pinterest Tumblr DIIGO Start.me feedburner

POST SLIDER FOR BLOGGER No 2

POST SLIDER
POST SLIDER FOR BLOGGER No 2
Αυτό είναι ένα πολύ πρακτικό post slider για blogger διαστάσεων 640px Χ 400px που εμφανίζει  σε κάθε slide μία ανάρτηση με εικόνα, περιγραφή και κουμπιά πλοήγησης. Το πλάτος μπορείτε να το ρυθμίσετε αλλάζοντας το width:580px που βρίστεται στην τελευταία γραμμή πρίν το </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.

ΔΕΙΤΕ ΤΟ ΕΔΩ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΕΝΑ DEMO BLOG

<style>
#carousel{width:640px;height:400px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:30px;width:570px;height:400px;overflow:hidden;background: #333333}
#carousel #previous_button{position:absolute;width:30px;height:400px;
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 #ccc; background-color:#848990;}
#carousel #previous_button:hover{background-color:#A4D6C9;}
#carousel #next_button{position:absolute;right:0;width:30px;height:400px;
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 #ccc; background-color:#848990;}
#carousel #next_button:hover{background-color:#A4D6C9;}
#carousel ul{width:100000px;position:relative;margin-top:2px}
#carousel ul li{display:inline;float:left;text-align:left;font:16px arial;line-height:18px;border:
1px solid #FFF;width:570px;height:380px;margin:2px 2px 2px 2px;padding:4px 4px 4px 4px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; position:relative;}
#carousel ul li:hover{background-color:#000000;}
#carousel ul li a.slider_title{color:#FFF;display:block;position:absolute;bottom:0px;left:0px;right:0px;padding-top:4px;padding-left:14px;padding-right:4px;background-color:#333333;color:#FFFFFF;width:100%;height:40px;}
#carousel ul li a.slider_title:hover{color:#FFFFFF;background-color:#000000;}
#carousel img{display:block;background:#333333;margin:0px;padding:0px;}
#carousel a img{display:block;background:#333333;margin:0px;padding:0px;}
.container {width:580px !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 = 100;
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="570" height="380" 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: 5000,
scroll: 1,
speed: 800,
visible: 1,
start: 1,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button"});
})})(jQuery)
// ]]>
</script>

11 σχόλια:

  1. ΟΤΑΝ ΒΑΖΩ OΠOIOΔHΠOTE GADGET ΓIA POST SLIDER ΣΤΗΝ ΘΕΣΗ ΤΗΣ ΕΙΚΟΝΑΣ ΤΗΣ ΑΝΑΡΤΗΣΗΣ ΜΟΥ ΕΜΦΑΝΙΖΕΙ ΜΙΑ ΧΡΩΜΑΤΙΣΤΗ ΕΠΙΦΑΝΕΙΑ .ΤΙ ΜΠΟΡΩ ΝΑ ΚΑΝΩ

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

    ΑπάντησηΔιαγραφή
  3. δεν λειτουργει!! σαν gadget μπαινει σωστα?

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Εφόσον λειτουργεί στο demo πρέπει να λειτουργήσει και σε εσένα. Μήπως έχεις 2 φορες τον κώδικα jquery?

      Διαγραφή
  4. το εβαλα! ειναι αυτο που ηθελα αλλα δεν βγαινει σωστα!!....http://www.creteonair.eu/
    αν μπορεις ριξε μια ματια!!Ευχαριστω!!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Διόρθωσε σε 30px αυτα που σου έχω υπογραμμίσει στο screenshout. http://prnt.sc/eel1ma

      Διαγραφή
  5. Καλημερα!!! Το εκανα αλλα οπως θα δεις και συ δυστυχως παλι δεν ειναι οπως πρεπει...Θα επρεπε οι τιτλοι να ερθουν λιγο πιο δεξια για να φαινονται ολοκληροι..αλλα αυτο δεν γινεται παρολες τις αλλαγες!

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Αλλαξε και αυτά που σου έχω επισημάνει στο παρακάτω screenshout και θα φτιάξει. http://prnt.sc/ef90m5

      Διαγραφή
  6. το αλλαξα δεν ειχε διαφορα .πειραματιστικα και το κατεβασα και αλλο αλλα παλι τιποτα...ισως δεν κανει για μενα? δεν υπαρχει αυτο που βλεπουμε στα sites μεγαλη κεντρικη εικονα και μικροτερες απο κατω με τις αναρτησεις?

    ΑπάντησηΔιαγραφή
  7. καλησπερα. πως μπορω να μεταφερω το next button δεξια στην ακρη? ευχαριστω πολυ

    ΑπάντησηΔιαγραφή
    Απαντήσεις
    1. Αλλάζεις το right:0 στην 8η γραμμή του κώδικα και μετακινεις το button δεξιότερα ή αριστερότερα αναλόγως τις τιμές που θα του βάλεις μπορείς να βάλεις και αρνητικές τιμές π.χ -50px.

      Διαγραφή

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