New Slidshow Blogger Template 2013

Template based on Simple. 3 columns, sidebar-shaped accordion menu, slide to the latest automatic updates, social menu, summarized posts on the homepage, breadcrumb, related posts.




DEMO                   DOWNLOAD


enable menu


To enable the social menu, after installing a template, look for:

<a class='icomenu' href='ENDEREÇO DO SEU BLOG' style='position: fixed; left: 22px; top: 140px;' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNYuvtjuTvAQ4IoPek5PAq6bMAQajhbZB33gjTb5TB79TLKHuR9yO5bQOuCZxdWMshZDfvUTdzgav9WYWQL6MnIvLmPEX7pNRUUL3hZUjUvqExhjef73Ga1lSZzWsksDvSXnhzWzv28dg/s1600/blogger-webtreatsetc.png' title='Home' width='60'/></a>

<a class='icomenu' href='ENDEREÇO DO GOOGLE BUZZ' style='position: fixed; left: 22px; top: 190px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6s6vvI9g7imNz_kaLl1_J10WUR4DXD1zJIWV3DmJIjWUI1bqwiqatH11McKz942LSxWwsfndIAL15cCdt9TpKdy3ecMWs7lbZFWTednnVzaE_T5_zTy36vdA3C5VyPYFMBIl-gFY4PQ/s1600/google-g-logo-webtreatsetc.png' title='Google' width='60'/></a>

<a class='icomenu' href='ENDEREÇO DO FLICKER' style='position: fixed; left: 22px; top: 240px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjByJZDvmnf3Akc_CrqeQEzTHiS9B9tN6f6uAMkHVvjlO1C-zLa8mDo3c1NNdXYyP7foSBYuB1bdgNu25A4FBhn8seE_sB5XPuPg-Gy0szRqM6xt0YYIOHCq-wUixQ25tsloZT500kv5o/s1600/flickr-webtreatsetc.png' title='Flicker' width='60'/></a>

<a class='icomenu' href='ENDEREÇO DO FACEBOOK' style='position: fixed; left:22px; top: 290px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx9aDG8l_ogw2oNJ1IxAX1d1BdabZcfWu-aBkl73NpWbfnmEgkizo8hVngx1AqpSqGcjgt-n6yDeKRLf09_S4y1dkB2N6ivRkF_wYxEMdi60hu9R53kxFaFwZeIhmR1UOnyBLuOHKXa2Q/s1600/facebook-logo-webtreatsetc.png' title='BlogBlogs' width='60'/></a>

<a class='icomenu' href='ENDEREÇO TWITTER' style='position: fixed; left: 22px; top: 340px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHDa2Sl9CyuxCoSBdT4hXClK1FJ4XVdV1itmIs8LmWC0xKv-AElcZCiubTg9q3ae32C1Ifmy9h8Q_7GxFx1ciMk1zbY3W_bRmO22opicICE4kZYPTwrqQ621dc-fWrTT7259IZX3Outbw/s1600/twitter-bird2-webtreatsetc.png' title='Siga-me' width='60'/></a>

<a class='icomenu' href='ENDEREÇO DO FEED' style='position: fixed; left: 22px; top: 390px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicOz6LrMv1gZmthLzyidVkrXfB38IsQLPBpwkV_AR3evQGCKX49FXOkMWDs7zjkCHTmKfvafobvvCtDvH65eUFCB74xXMo63iFID-yEc_JXvprm3V38xdqr-m5ZJpxp8eyuagDXP_b9ek/s1600/rss-basic-webtreatsetc.png' title='Feed' width='60'/></a>

<a class='icomenu' href='mailto:SEUEMAIL@gmail.com' style='position: fixed; left: 22px; top:440px;' target='_blank'>
<img border='0' heigth='60' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRiIdZTIcltYIxdU-2BzH3PvLXPzdDqy3ks8uYpK4CnrymKlxdwmzhieQoyEvOZ8ZHL6jePoj9Ew1Oxt41EUEcGv_fdPxPAqGBQX7O5SiGUsYLw0e7WPNDhyphenhyphenz8Ffw5jNjulrzAEaK19A/s1600/mail-webtreatsetc.png' title='Email' width='60'/></a>



Then place the addresses of your social pages where asks.




enable slide

Once installed the template, go to "layout"




Cole then put the next code and the address of your blog 

where indicated with blue color





Realize that you put the code in HTML / Javascript widget just below the title.





<div id="slider-wrap">
<script type='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal  = true;
    var showpostsummary_gal      = true;
    var random_posts               = false;
    var numchars_gal            = 150;
    var numposts_gal            = 10;
function showgalleryposts(json) {

    document.write('<div class="slider-wrap">');
    document.write('<div id="main-photo-slider" class="csw"><div class="panelContainer">');
       var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    document.write('<ul>');
    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://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';       
         var _no=i+1;
        document.write('<div class="panel" title="'+posttitle_gal+'">');
        document.write('<div class="wrapper">');           
        document.write('<a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="temp"   width="920px" height="270px"/></a>');
        document.write('<div class="photo-meta-data"><span>'+posttitle_gal+'</span><br>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
              if (postcontent_gal.length < numchars_gal) {                 
                 document.write(postcontent_gal);
                 }
              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('</div>');
        document.write('</div>');
        document.write('</div>');
        }
        document.write('</div>');
        document.write('</div>');
        for (var i = 0; i < numposts_gal; i++) {
        if (random_posts == true){
        var random_int  = Math.floor(Math.random()*json.feed.entry.length);
        var entry_gal = json.feed.entry[random_int];
        }
        else{
        var entry_gal = json.feed.entry[i];
        }

        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://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';       
 <!-- Note this caption is before the image, all others it is after -->
         var _no=i+1;
        if (_no==1){
        document.write('<a href="#'+_no+'" class="cross-link active-thumb"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="80px" height="60px" /></a>');
        document.write('<div id="movers-row">');
        }
        else{
        document.write('<div><a href="#'+_no+'" class="cross-link"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="80px" height="60px"/></a></div>');
        }
        }
        document.write('</div>');
        document.write('</div>');
        document.write('</div>');
}
//]]>
</script>
<script style="text/javascript">
 var numposts_gal = 6; //recommended
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>