Doctor blogger : Πώς να κάνει ένα αυτόματο slider Carousel

Σε αυτό το σεμινάριο θα συζητήσουμε για το πώς να δημιουργήσετε αυτόματη slider Carousel με βάση τις ετικέτες σας στο blogger. Το μόνο που έχετε να κάνετε μόνο αντικαταστήσετε με το δικό της σήμα σας και το ρυθμιστικό θα λειτουργήσει με βάση την ετικέτα που θα προσθέσετε στο Edit HTML πρότυπο. Έκανα αυτό το καρουσέλ slider ήταν πολύ απλή και χρησιμοποιούνται μόνο jCarousellite σενάριο χωρίς την προσθήκη χαλάρωση επιδράσεις ή τροχό κύλισης του ποντικιού.

Πρέπει να συνδεθείτε για blogger με το λογαριασμό σας
Μετά από αυτό επιλέξτε το blog που θέλετε να προσθέσετε slider.
Πηγαίνετε στο πρότυπο >> Aλλαγες στην επεξεργασία HTML στο blogger
ctrl F λειτουργεί μόνον όταν ο κέρσορας είναι μέσα στο πρότυπο, και ανοίγει ένα κουτάκι, οπου γράφετε τη λέξη κλειδί η τη φράση που ψάχνετε, και αμέσως χρωματίζονται οι αντίστοιχες φράσεις
]]></b:skin>:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVI_gjgkEN2WaUDaWYQAXLmKK0C5ks5ptD8iL2pfohgzSmdMGO1YC4yfa2g1NkDaqRjBOtylbCNYwoW9ELP5emr8qEWDMtZZwk_Qy_BD1cVqCcqVxAX7gGMdMTcIEy_o1U4PdH7p6ANE/s1600/scroller-bg.png) repeat center}#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNc6Dfjzj_itlFfGzZamdiK2I6AQ3ztNmbMj3PQUXIvx4tDmPnWDg46DFu17OkkH3h-5nFnmtkm7Fw3ao1zaorfm2is9LyR6FJgcxIcFHYeyBtHDb2gmu_l_ooXKprGqAwGdQuqQPdPgw/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7Z-ZiauyAojmsS6AcQef1nfpL15OemtEmVOps-RZ0kCifQUfKViLjJsmoRuyp909SidcBr1yayJh_JrRAXxc_M0S4Q2vfS_mxz5YM8rjDHrc-nc_tgOVn_s1Pz5ZIpMqJft7A17LRFlk/s1600/prev.png) center}#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3TErPSW7sfEqW7pgfMlAlm64xKysTTbS-avgVZM3rduGBlBgcALPN4RrSj8k-1ObfG9rcCFpatmekR031xDRKLClVURVMtSS2ESaKaNCZYtXX07F7UlSLfQiAlOlbx5VDtlfCGbB0Iw/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXSGPU8-Gx7KhDMHMkP-ANJ2TDPAiJSPdWaQusOX5sg9eASLiLrvD5O7K9MdQBcrIiAmedjAhdB-Fa2W2NDGIi-ECIyAB9Or00LtkqWhCjNVQOHCzs8PVgbOS-XrsmoQ31PwbA4XHaA0/s1600/next.png) center}#carousel ul{width:100000px;position:relative;margin-top:10px}#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31l3UO0oCs-_vo4hbGvL8B4ceVZn8YeOpoO8N8tSsCTEGWWinu_iAkGbu3sctJ8XFnhtBk6ioOXxJJL0ayAH7HCC21Ssth5Q10z6vmzUwibbJj2OVUv2sDHlWoJ5I248JYpxNI-mlWH4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}#carousel ul li a.slider_title:hover{color:#cd1713}#carousel a img{display:block;background:#fff;margin-top:0}
1. Κοιτάξτε ορισμένων κωδικών με το μπλε χρώμα πάνω, αυτό είναι το πλάτος και το ύψος του slider στο demo που έκανα, να αλλάξει με το μέγεθός σας εξαρτώνται από το πλάτος πρότυπό σας.
2. Ακόμα στο Edit HTML, προσθέστε το παρακάτω κώδικα παραπάνω
</head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyw53QEeAtk9jRUe7LMa2e7aAdDNU6luR1QAyTPEU_25XehRrjvMuBHz3u4hJzvOGmHRXWvOvLoIQI5z2NObAMs5PCVv1T4Adt36ZafKWQO3GwuxBtmxjHZOxSCxlJESlIQxYAOXMy3k/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 15;
label1 = "news";
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="145" height="100" 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>
1. Σημειώσεις:
  Δείτε το κόκκινο δέσμης ενεργειών URL παραπάνω, αυτό είναι το πιο πρόσφατο κώδικα jQuery.min.js script σειρά που χρησιμοποιώ για να γίνει αυτό το slider. Και αν έχετε βρεθεί jQuery.min.js αν και με τις διάφορες σειρές του προτύπου σας, τα κόκκινα κωδικούς δεν χρειάζεται πλέον να εισάγετε. Πρέπει να υπάρχει μόνο ένα jQuery.min.js στο πρότυπό σας, είναι μέχρι τον αύξοντα αριθμό, εάν είναι δυνατόν η τελευταία έκδοση.
  
  Μπλε κώδικα (15). το ποσό της θέσης σας, ότι η οθόνη στο ρυθμιστικό ειδήσεις ήταν μια ετικέτα που έχω επιλέξει να εμφανίζονται στην μπάρα.
2. Το επόμενο βήμα θα πρέπει να καλέσετε το ρυθμιστικό για να εμφανιστεί στο blog σας. Τοποθετήστε το παρακάτω κώδικα παραπάνω
<div id='main-wrapper'>:
<b:if cond='data:blog.pageType != "item"'><div id='carousel'><div id='previous_button'/><div class='container'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script> <div class='clear'/></div><div id='next_button'/></div><script type='text/javascript'>(function($) { $(document).ready(function(){$("#carousel .container").jCarouselLite({ auto:4000, scroll: 1, speed: 800, visible: 5, start: 0, circular: true, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script></b:if>
1. Μπορείτε επίσης να βάλετε τα παρακάτω κωδικούς στο κάτω μέρος του μενού πλοήγησης σας ή μπορείτε επίσης να τοποθετηθεί στο footer πλευρά σας, που εξαρτώνται από τις ανάγκες σας.
2. Το τελικό βήμα, να αποθηκεύσετε πρότυπα και να δούμε τα αποτελέσματα.