Slide com links para postagens

Para ter um slide como este AQUI, coipe os códigos e va colocando-os como explicado no post.

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

Copie este código abaixo e cole acima de:
]]></b:skin>

body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}
/* ---------[ Slideshow ]--------- */
#home-top {
width:950px;
background:#fff;
margin:0 auto;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}

#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}

#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
/* ---------[ Slideshow Slides ]--------- */
#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}
#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}

#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}
.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}
/* ---------[ Slideshow Navigation ]--------- */
#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}
#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {
background: #000000;
color:#fff;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}

Estes scripts abaixo devem salvos em seu computador e depois hospedados em algum servidor. Clique AQUI e conheça este site que é muito fácil de hospedar os scripts.

Depois que eles estiverem hospedados, cole-os depois de:

]]></b:skin> 

<script src='http://www.yourjavascript.com/13180120880/jquery.idTabs.min.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/28183182081/jquery.min.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/81178201133/jquery.cycle.js' type='text/javascript'/>
<script src='http://www.yourjavascript.com/11381320281/slideshow.js' type='text/javascript'/>
<script type='text/javascript'>
$slideshow = {
context: false,
tabs: false,
timeout: 7000,      // time before next slide appears (in ms)
slideSpeed: 1000,   // time it takes to slide in each slide (in ms)
tabSpeed: 1000,      // time it takes to slide in each slide (in ms)
fx: &#39;fade&#39;,   // the slide effect to use

init: function() {
 // set the context to help speed up selectors/improve performance
 this.context = $(&#39;#slideshow&#39;);

 // set tabs to current hard coded navigation items
 this.tabs = $(&#39;ul.slides-nav li&#39;, this.context);

 // remove hard coded navigation items from DOM
 // because they aren&#39;t hooked up to jQuery cycle
 this.tabs.remove();

 // prepare slideshow and jQuery cycle tabs
 this.prepareSlideshow();
},

prepareSlideshow: function() {
 // initialise the jquery cycle plugin -
 // for information on the options set below go to:
 // http://malsup.com/jquery/cycle/options.html
 $(&#39;div.slides &gt; ul&#39;, $slideshow.context).cycle({
     fx: $slideshow.fx,
     timeout: $slideshow.timeout,
     speed: $slideshow.slideSpeed,
     fastOnEvent: $slideshow.tabSpeed,
     pager: $(&#39;ul.slides-nav&#39;, $slideshow.context),
     pagerAnchorBuilder: $slideshow.prepareTabs,
     before: $slideshow.activateTab,
     pauseOnPagerHover: true,
     pause: true
 });  
},

prepareTabs: function(i, slide) {
 // return markup from hardcoded tabs for use as jQuery cycle tabs
 // (attaches necessary jQuery cycle events to tabs)
 return $slideshow.tabs.eq(i);
},

activateTab: function(currentSlide, nextSlide) {
 // get the active tab
 var activeTab = $(&#39;a[href=&quot;#&#39; + nextSlide.id + &#39;&quot;]&#39;, $slideshow.context);

 // if there is an active tab
 if(activeTab.length) {
     // remove active styling from all other tabs
     $slideshow.tabs.removeClass(&#39;on&#39;);

     // add active styling to active button
     activeTab.parent().addClass(&#39;on&#39;);
 }  
}  
};


$(function() {
Encontrei este slide // add a &#39;js&#39; class to the body
$(&#39;body&#39;).addClass(&#39;js&#39;);

// initialise the slideshow when the DOM is ready
$slideshow.init();
});

</script>

Agora este próximo código deverá ser colado acima de:
<div id='header-wrapper'>

<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">
<!--code of the left part : image ,title and post summary -->
<div class="slides">
<ul class="clearfix" style="position: relative;">
<li id="main-post-1" style="background: transparent url(ENDEREÇO DA IMAGEM 1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">TÍTULO DA IMAGEM 1</a></h2>
<p>RESUMO 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(ENDEREÇO DA IMAGEM 2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">TÍTULO DA IMAGEM 2</a></h2>
<p>RESUMO 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(ENDEREÇO DA IMAGEM 3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">TÍTULO DA IMAGEM 3</a></h2>
<p>RESUMO 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(ENDEREÇO DA IMAGEM 4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">TÍTULO DA IMAGEM 4</a></h2>
<p>RESUMO 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(ENDEREÇO DA IMAGEM 5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">TÍTULO DA IMAGEM 5</a></h2>
<p>RESUMO 5</p></div>
</li>
</ul>
</div>

<ul class="slides-nav">
<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="ENDEREÇO DA IMAGEM 1" class="thumbnail" />TÍTULO DA IMAGEM 1</a></li>
<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="ENDEREÇO DA IMAGEM 2" class="thumbnail" />TÍTULO DA IMAGEM 2</a></li>
<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="ENDEREÇO DA IMAGEM 3" class="thumbnail" />TÍTULO DA IMAGEM 3</a></li>
<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="ENDEREÇO DA IMAGEM 4" class="thumbnail" />TÍTULO DA IMAGEM 4</a></li>
<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="ENDEREÇO DA IMAGEM 5" class="thumbnail" />TÍTULO DA IMAGEM 5</a></li>
</ul>
</div>
</div>