jQuery Recent Posts Easy Slider

Σύνδεση στον Blogger
Σχεδίαση / Επεξεργασία HTML
Βρείτε την ετικέτα ]]></b:skin>
Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

DEMO

Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:300px;
position:relative;
width:940px;
overflow:hidden;
}
#slider {
width: 940px;
height: 300px;
margin: 0 0 5px;
padding:0px;
background:#f4f3d7;
border:10px solid #aade81;
left:0px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;

}
.slide-desc {
padding:0 10px 10px;
margin:0;
position:absolute;
top:0px;
right:0;
text-align:left;
z-index:0;
width:270px;
height: 300px;
border-left:10px solid #aade81;
overflow:hidden;
line-height:24px;
}
.slide-desc h2{display:block; color:#52a013;border:none;padding:0;margin:0;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
width:940px;
height:300px;
overflow:hidden;
}

#nextBtn, #slider1next{
left:600px !important;
}
#prevBtn, #slider1prev {
left:20px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
position:absolute;
top:120px;
width:30px;
z-index:0;
text-indent:-9999px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
opacity: 0.2;
display:block;
position:relative;
width:50px;
height:77px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLggxmhi5iUTip1xQP3TfZ0aCcaDGqWwy5P2IxZEEAzcSwykXN9Q28zf5JXlFG-R3F2cphiggj-mX2rMrUrEhdazZCW1B1ePeRZZRAtPFBKhSg7PBbibV4lxAmag9cN8IJXYJrZwlLLQ/s1600/fleche1.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzH2LX1KZOKjo9cUJpHaV5TSri-N9zU9_R1UztqPpv9DPrjDnMg_6GqH3izpr9AkvDI4sOra7QOEwR6bQuu0Go-xYuC7nhPpsDNL0ilcpy3IfLhmXqwhHD-Jc-5o-UGSKkgLejD5Gostg/s1600/fleche2.png) no-repeat 0 0;
}
#prevBtn a:hover, #nextBtn a:hover,
#slider1next a:hover, #slider1prev a:hover {
opacity: 0.8;
}

Βρείτε τώρα την ετικέτα </head>
Επικολλήστε πριν από αυτήν τον παρακάτω κώδικα:

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://fbtemplate.googlecode.com/files/easySlider1.7.5s.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

Αποθηκεύστε το πρότυπό σας.
Πηγαίνετε τώρα στα "Στοιχεία Σελίδας"
Προσθήκη gadget και επιλέξτε HTML/JavaScript
Επικολλήστε τον παρακάτω κώδικα:

<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOteN4Qbi7L932MrEa4_2UfLG2B0FwKvG_PCSCNMpfS_TehSzI-ZQCiyMvyPZEkSduwRYxR2EO9_0BF8OhyphenhyphenJNEJtLcU_yaFHnjsjXWOjvjdmauyAR_b0TDOXKVPwje6-Sv0CjMWLhDPE/s1600/39130-bigthumbnail.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="610px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 400;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Η εικόνα https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKOteN4Qbi7L932MrEa4_2UfLG2B0FwKvG_PCSCNMpfS_TehSzI-ZQCiyMvyPZEkSduwRYxR2EO9_0BF8OhyphenhyphenJNEJtLcU_yaFHnjsjXWOjvjdmauyAR_b0TDOXKVPwje6-Sv0CjMWLhDPE/s1600/39130-bigthumbnail.jpg είναι η εικόνα που θα εμφανίζεται όταν στην ανάρτησή σας δεν υπάρχει καμιά εικόνα. Αν θέλετε αντικαταστήστε την με μια που θα αντιπροσωπεύει τη δική σας Σελίδα. Ο αριθμός 6 στο κομμάτι

var numposts_gal = 6 είναι οι αναρτήσεις που θα φαίνονται στον Slider. Αν θέλετε μπορείτε να τον μεγαλώσετε ή να τον μικρύνετε, ανάλογα με το τι θέλετε να δείξετε στους αναγνώστες σας.

Πατήστε αποθήκευση και έχετε ένα υπέροχο gadget στη Σελίδα σας.

Blogger Tips and Tricks