quinta-feira, 29 de setembro de 2011

Slide de últimas postagens com efeito de transição

O slide tem um papel fundamental em seu blog, por incrível que pareça, ele tem o poder de deixar seu blog mais profissional e moderno. Então se está a procura  de um slide bonito, moderno, com CSS3 e com efeitos de transição, entrou no artigo certo. Além de todas essas qualidades, o slide é totalmente automático, captura suas últimas postagens e ainda exibe imagens. Veja um,a prévia:

Prévia do slide
(Clique aqui para ver uma demostração) <- Role até o fundo do blog par ver

Na verdade achei o código do slide no blog “"Template e Acessórios”, e dei uma grande modificada até ficar do jeito como você pode ver na imagem acima.

Legal não é? Então vamos aplica-lo em seu blog. Fazer isso é muito fácil, apenas entre no painel principal do seu blog, acesse a guia “Layout” –> “Adicionar um gadget” e escolha a opção “HTML/Javascript”. Agora cole o código abaixo:

<div class="widget-content">

<style>
#slideshow {
width: 900px; /*aqui o comprimento do slide*/
margin: 5px 5px 5px 0;
padding:0;
background:#292929;/*cor de fundo slide*/
height:310px;/*altura do slide*/
overflow:hidden;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow: 0px 0px 1em #3A3B4C;
-webkit-box-shadow: 0px 0px 1em #3A3B4C;
-moz-box-shadow: 0px 0px 1em #3A3B4C;
padding: 1px 2px 1px 2px;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
#slideshow .slides {/*maior*/
width:600px;/*slide do lado esquerdo*/
overflow: hidden;
float:left;
color: #fff;
}
#slideshow .slides ul {/*maior*/
float:left;
overflow: hidden;
width:600px;
height:310px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:600px;
height:200px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li {/*maior*/
margin: 0;
padding: 0;
list-style-type: none;
width:700px;/*area maior*/
height:310px;
display:block;
overflow: hidden;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {/*area maior*/
width: 557px;
color: white;
padding-top: 17px;
height: 127px;
padding: 6px 35px 10px 10px;
font-size: 14px;
overflow: hidden;
position: absolute;
bottom: 0;
left: 0;
background: black;
filter: alpha(opacity=70);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}

#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 {
text-decoration: none;
}
#slideshow .slides li .entry h2 a {
font-size: 18px
text-decoration: none;
color: #fff;
}
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover {
text-decoration: none;
font-size: 14px;
}
#slideshow .slides li .entry h2 a:active  {
line-height: 1.1em;
margin:0;
text-decoration: none;
color: #808080;
margin: 0;
letter-spacing:0;
border:none !important;
}
#slideshow  ul.slides-nav {/*Menor*/
height:310px;
width:300px;/*area menor*/
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 {/*area slide menor*/
width:300px;/*area tarja menor*/
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:7px;
text-align: left;
list-style-type:none;
display:block;
height:60px;
color: #ccc;
font-size:14px;/*tamanho letra menu menor*/
overflow:hidden;
background: transparent;
line-height:1.35em;
text-decoration: none;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:310px;
left:0;
opacity:1;
position:absolute;
top:0;
width:500px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {/*area tarja menor*/
border-radius: 10px;
padding-bottom: 15px;
background: #f2f9fe; /* Old browsers */
background: -moz-linear-gradient(top, #f2f9fe 0%, #d6f0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f9fe), color-stop(100%,#d6f0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f9fe', endColorstr='#d6f0fd',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #f2f9fe 0%,#d6f0fd 100%); /* W3C */
color: #000;
}
.js #slideshow .slides-nav li a:hover {
color:#555;
}

.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: 1px 10px 2px 18px;
padding:2px;
border-radius: 10px;
width:75px;
height:60px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
1px;/*area imagens pequenas slecionadas*/
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_BaCxSD9NFn8/TFImJ3xTRpI/AAAAAAAABpQ/CM1uyut9_R0/s320/templatesww.png";
showRandomImg = true;
aBold = true;
summaryPost = 300; //
summaryTitle = 250; //
numposts = 4; //
home_page = "http://ENDERECODOBLOG/";
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="100px" width="100px" 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://sites.google.com/site/menuhorizontal2/slidefeed/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$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 class="slides-nav">
<script language="JavaScript">
document.write("<script src=\""+home_page+"feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

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

<script src='http://sites.google.com/site/menuhorizontal2/slidefeed/jquery.cycle.js' type='text/javascript'/></script>

Feito isso, aperte CTRL + F, procure por ENDERECODOBLOG e substitua pela URL do seu blog, depois Salve. Agora é só mover este novo gadget para o topo da sua página e ver como ficou!

Marcadores: , , ,

Barra com frases de amor aleatórias fixo na tela

Elaborei um pequeno utilitário para blogs femininos, trata-se de um menu que ficará localizado na parte inferior do seu blog. Por sua vez, o menu exibe frases com o tema AMOR. Encontrei o código no site “Pensador.info” e adaptei-o para que ele fosse exibido através de uma barra rosa fixa na tela. Confira a imagem abaixo:

image(Clique aqui para ver uma demonstração)

Para colocar essa barra no seu blog, acesse o painel principal do seu blog, clique na guia “Modelo” e em seguida “Editar HTML”.

Agora aperte CTRL + F e procure por:

<body>

Abaixo dessa tag cole o seguinte código:

<style type='text/css'>

#barraestilo {
width: 100%;
height: 30px;
padding: 5px;
position: fixed;
background: #e81bc9; /* Old browsers */
background: -moz-linear-gradient(top, #e81bc9 0%, #fba6e1 5%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e81bc9), color-stop(5%,#fba6e1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e81bc9 0%,#fba6e1 5%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e81bc9 0%,#fba6e1 5%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e81bc9 0%,#fba6e1 5%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#e81bc9&#39;, endColorstr=&#39;#fba6e1&#39;,GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #e81bc9 0%,#fba6e1 5%); /* W3C */
bottom: 0;
border-top: 1px dotted #febbbb;
z-index: 999999999;
}

#barraestilo a {
color: #fff;
font: bold 14px &#39;Arial&#39;;
}

</style>

<div id='barraestilo'><center>
<script language="javascript" src="http://pensador.uol.com.br/blog.php?t=fa"></script>
<br/><a href="http://pensador.uol.com.br/" style="font-size:0.76em; color: gray;">pensador.info</a>
</center>
</div>

Agora clique em “Visualizar”, se estiver tudo ok e não apresentar nenhum erro, salve!
E meninas, se gostaram deixem um comentário!

Marcadores: , , , ,