jQuery Recent Posts Easy Slider

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

  • Σύνδεση στον 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(http://4.bp.blogspot.com/-5s8mAlgOZs8/TdloDqSShmI/AAAAAAAABKw/myzY6ll_UUw/s1600/fleche1.png) no-repeat 0 0;
    }
    #nextBtn a, #slider1next a{
    background:url(http://4.bp.blogspot.com/-VWyZmfYADx0/TdloD6_9_LI/AAAAAAAABK4/ZIFQINBLI1g/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 = 'http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/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>
    Η εικόνα http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg είναι η εικόνα που θα εμφανίζεται όταν στην ανάρτησή σας δεν υπάρχει καμιά εικόνα. Αν θέλετε αντικαταστήστε την με μια που θα αντιπροσωπεύει τη δική σας Σελίδα. Ο αριθμός 6 στο κομμάτι
    var numposts_gal = 6 είναι οι αναρτήσεις που θα φαίνονται στον Slider. Αν θέλετε μπορείτε να τον μεγαλώσετε ή να τον μικρύνετε, ανάλογα με το τι θέλετε να δείξετε στους αναγνώστες σας.
    • Πατήστε αποθήκευση και έχετε ένα υπέροχο gadget στη Σελίδα σας.



        0 σχόλια:

        Post a Comment

         
        back to top