Template Sóbrio

Este template foi feito no Paint Shop Pro. Possui menu horizontal, slide, marcadores em forma de menu suspenso, e só.

Demo|Pegar código

O slide deverá ser colocado no HTML/Javascript. Copie o código abaixo, cole. Depois cole o endereço de seu blog no local indicado.

<style>

#slideshow {

width: 335px;

height:235px;

margin: 10px 5px;

padding:0;

background:#fff;

overflow:hidden;

border:3px solid #fff;

}

#slideshow ul {

background:transparent;

margin: 0;

padding: 0;

list-style-type: none;

}

#slideshow .slides {

width: 335px;

overflow: hidden;

float:left;

color:#fff;

}

#slideshow .slides ul {

float:left;

overflow: hidden;

width:34px;

height:235px;

}

#slideshow .slides li {

display:none;

left:-99999em;

width: 335px;

height:235px;

display:block;

overflow: hidden;

background:#fff;

position:relative;

z-index:1;

}

#slideshow img {width:320px; height:235px;}

.js #slideshow .slides li {

margin: 0;

padding: 0;

list-style-type: none;

width: 335px;

height:235px;

display:block;

overflow: hidden;

background:#fff;

position:relative;

z-index:1;

}

.js #slideshow .slides li .entry {

width: 335px;

height: 30px;

padding: 5px;

overflow: hidden;

position:absolute;

bottom:0;

left:0;

background:#3A3B4C;

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 ,

#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: 12px;

line-height: 1.1em;

margin:0;

color:#fff !important;

margin: 0;

letter-spacing:0;

border:none !important;

}

#slideshow  ul.slides-nav {

height:215px;

width:335px;

margin:0;

padding: 0;

float:right;

overflow:hidden;

}

#slideshow .slides-nav li {

display:block;

margin:0;

padding:0;

list-style-type:none;

display:block;

border-bottom: 1px solid #3A3B4C;

border-left: 1px solid #3A3B4C;

}

#slideshow .slides-nav li a {

width:335px;

font-family:arial,helvetica,sans-serif;

display:block;

margin:0;

padding:10px;

list-style-type:none;

display:block;

height:22px;

color:#aaa;

font-size:10pt;

overflow:hidden;

background: #fff;

line-height:1.35em;

}

slides.ul li {

background-attachment:scroll;

background-color:transparent;

background-position:center top;

background-repeat:no-repeat;

display:block;

height:205px;

left:0;

opacity:1;

position:absolute;

top:0;

width:335px;

z-index:6;

}

.js #slideshow .slides-nav li.on a {

background: #3A3B4C;

filter:alpha(opacity=70);

-moz-opacity:0.7;

-khtml-opacity: 0.7;

opacity: 0.7;

color:#aaa;

}

.js #slideshow .slides-nav li a:hover,

.js #slideshow .slides-nav li a:active {

color:#000;

}

#slideshow .slides-nav li a img.post-thum,

#slideshow .slides-nav li a img.thumbnail {

float:left;

margin: -2px 10px 0 0;

padding:2px;

border: 1px solid #aaa;

width:70px;

height:30px;

}

.js #slideshow .slides-nav li.on a img.post-thum,

.js #slideshow .slides-nav li.on a img.thumbnail {

background:#fff !important;

} </style> <script language="JavaScript"> //<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijy85fGDnnK9hY2tMQ14JKiwduEWec9evLW3K3gR3gbpcvu-AwtYWsGWotJRILJ6ert7qTeT2VYlK8S5z8GLk5rQu-UpMgbtkVq6ejpG1You7sQLcdBapzjFVVUiT-jumbdy1_Z-iolqbO/s1600/simles.png";

showRandomImg = true;

aBold = true;

summaryPost = 00; // 

summaryTitle = 25; // 

numposts = 10; // 

home_page = "AQUI O ENDEREÇO DE SEU BLOG/";

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 class="slides-nav">');

for (var i = 0; i < numposts; 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>' : '';

posttitle = (aBold) ? ""+posttitle+"" : posttitle;

var trtd = ' <li id="post-'+i+'" class="clearfix"> <a href="#main-post-'+i+'" class=""><img height="150px" width="150px" class="post_thumbnail thumbnail thumbnail post_thumbnail" alt="" src="'+img[i]+'"/>'+posttitle+'</a> </li> ';

document.write(trtd);

j++;

}

document.write('</ul>');

}

function showrecentposts1(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

document.write('<ul class="clearfix" style="position: relative;">');

for (var i = 0; i < numposts; 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>' : '';

posttitle = (aBold) ? ""+posttitle+"" : posttitle;

var trtd = '<li style="background: transparent url('+img[i]+')" id="main-post-'+i+'"><div class="entry"><h2 class="post-title"><a href="'+posturl+'">'+posttitle+'</a></h2> <p>'+removeHtmlTag(postcontent,summaryPost)+'</p></div></li> ';

document.write(trtd);

j++;

}

document.write('</ul>');

}

//]]>

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script src="http://sites.google.com/site/slide2334/slide234/jquery.cycle.js" type="text/javascript"></script> 

<script type="text/javascript">

//<![CDATA[

$slideshow = {

context: false,

tabs: false,

timeout: 7000, 

slideSpeed: 1000, 

tabSpeed: 1000, 

fx: 'toss',

init: function() {

this.context = $('#slideshow');

this.tabs = $('ul.slides-nav li', this.context);

this.prepareSlideshow();

},

prepareSlideshow: function() {

$('div.slides > ul', $slideshow.context).cycle({

fx: $slideshow.fx,

timeout: $slideshow.timeout,

speed: $slideshow.slideSpeed,

fastOnEvent: $slideshow.tabSpeed,

pager: $('ul.slides-nav', $slideshow.context),

pagerAnchorBuilder: $slideshow.prepareTabs,

before: $slideshow.activateTab,

pauseOnPagerHover: true,

pause: true

}); 

},

prepareTabs: function(i, slide) {

return $slideshow.tabs.eq(i);

},

activateTab: function(currentSlide, nextSlide) {

var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);

if(activeTab.length) {

$slideshow.tabs.removeClass('on');

activeTab.parent().addClass('on');

} 

} 

};

$(function() {

$('body').addClass('js');

$slideshow.init();

});

//]]> 

</script>

<div id="slideshow" class="clearfix">

<div class="slides">

<script language="JavaScript">

document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");

</script></div></div>