21 de out de 2009

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] = "http://1.bp.blogspot.com/_FXIne2ZDJII/TKPwX12YqGI/AAAAAAAADg0/zsvrz5A5zlc/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>


Um comentário:

  1. como vc colocou aquele negócio em java sobre o limão,balão...

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube