Postagens Recentes

30 de nov. de 2011

Postagens populares em forma de slide com efeito accordeon

7 comentários:

Mais um modelo de slide para usar nas postagens mais vistas em seu blog. adaptada por Abu Farhan.


O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.








Clique em Adicionar um Gadegt



Ao abrir, clique em  HTML/Javascript



Cole então o próximo código fazendo as modificações necessárias.


<style type="text/css" media="screen">
/*Popular post---------------------------------------------------------------------*/
.poppost{
margin: 10px 0px 20px -23px;
}
.popular-posts {
  margin: 0px 0px 30px 0px;
  padding: 0 0 0px 0px;
  position: relative;
  width: 910px;/*comprimento do slide*/
  height: 283px;/*largura do slide*/
  overflow: hidden;

}
.popular-posts  {
    /* recommended styles for kwicks ul container */
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
}
.popular-posts  li{
text-shadow: 0.1em 0.1em 0.2em #000;
    /* these are required, but the values are up to you (must be pixel) */
    width: 160px;/*comprimento de cada item do slide fechado*/
    height: 263px;
    /*do not change these */
    display: block;
    overflow: hidden;
    padding: 0px;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */
}
.fadeout {
  display: block;
  position: absolute;
  right: 0px;
  width: 160px;
  height: 265px;
  z-index: 4;
  background: url(overlay.png) repeat-y scroll top right;
}
.popular-posts  li {
    /* This is optional and will be disregarded by the script.  However, it should be provided for non-JS enabled browsers. */
    margin-right: -4px; /*Set to same as spacing option. */
    float: left;
}
.popular-posts .item-title {
  background: #182424   !important;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 60px;
}

.popular-posts .item-title a:visited{
  color: #fff;
  font-size:16px;
  text-transform:uppercase;

}

.popular-posts  .item-snippet{
  background: #182424;
  color: #fff;
  opacity: 0.77;
  filter:alpha(opacity=77);
  position: absolute;
  padding: 10px;
  top: 215px;
  height:127px;

}
.popular-posts  img {
  margin: 0  !important;
  padding:0  !important;
  width:600px; /*Tamanho da imagem quando abre o item do slide*/
  height:363px;
}

.popular-posts  li a {
  margin: 0  !important;
  padding:0  !important;
  background-color:#182424 !important;

}
.popular-posts  .item-title a {
 opacity: 0.77;
  filter:alpha(opacity=77);
} </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[

/*
    Kwicks for jQuery (version 1.5.1)
    Copyright (c) 2008 Jeremy Martin
    http://www.jeremymartin.name/projects.php?project=kwicks
  
    Licensed under the MIT license:
        http://www.opensource.org/licenses/mit-license.php

    Any and all use of this script must be accompanied by this copyright/license notice in its present form.
*/
(function($){$.fn.kwicks=function(n){var p={isVertical:false,sticky:false,defaultKwick:0,event:'mouseover',spacing:0,duration:500};var o=$.extend(p,n);var q=(o.isVertical?'height':'width');var r=(o.isVertical?'top':'left');return this.each(function(){container=$(this);var k=container.children('li');var l=k.eq(0).css(q).replace(/px/,'');if(!o.max){o.max=(l*k.size())-(o.min*(k.size()-1))}else{o.min=((l*k.size())-o.max)/(k.size()-1)}if(o.isVertical){container.css({width:k.eq(0).css('width'),height:(l*k.size())+(o.spacing*(k.size()-1))+'px'})}else{container.css({width:(l*k.size())+(o.spacing*(k.size()-1))+'px',height:k.eq(0).css('height')})}var m=[];for(i=0;i<k.size();i++){m[i]=[];for(j=1;j<k.size()-1;j++){if(i==j){m[i][j]=o.isVertical?j*o.min+(j*o.spacing):j*o.min+(j*o.spacing)}else{m[i][j]=(j<=i?(j*o.min):(j-1)*o.min+o.max)+(j*o.spacing)}}}k.each(function(i){var h=$(this);if(i===0){h.css(r,'0px')}else if(i==k.size()-1){h.css(o.isVertical?'bottom':'right','0px')}else{if(o.sticky){h.css(r,m[o.defaultKwick][i])}else{h.css(r,(i*l)+(i*o.spacing))}}if(o.sticky){if(o.defaultKwick==i){h.css(q,o.max+'px');h.addClass('active')}else{h.css(q,o.min+'px')}}h.css({margin:0,position:'absolute'});h.bind(o.event,function(){var c=[];var d=[];k.stop().removeClass('active');for(j=0;j<k.size();j++){c[j]=k.eq(j).css(q).replace(/px/,'');d[j]=k.eq(j).css(r).replace(/px/,'')}var e={};e[q]=o.max;var f=o.max-c[i];var g=c[i]/f;h.addClass('active').animate(e,{step:function(a){var b=f!=0?a/f-g:1;k.each(function(j){if(j!=i){k.eq(j).css(q,c[j]-((c[j]-o.min)*b)+'px')}if(j>0&&j<k.size()-1){k.eq(j).css(r,d[j]-((d[j]-m[i][j])*b)+'px')}})},duration:o.duration,easing:o.easing})})});if(!o.sticky){container.bind("mouseleave",function(){var c=[];var d=[];k.removeClass('active').stop();for(i=0;i<k.size();i++){c[i]=k.eq(i).css(q).replace(/px/,'');d[i]=k.eq(i).css(r).replace(/px/,'')}var e={};e[q]=l;var f=l-c[0];k.eq(0).animate(e,{step:function(a){var b=f!=0?(a-c[0])/f:1;for(i=1;i<k.size();i++){k.eq(i).css(q,c[i]-((c[i]-l)*b)+'px');if(i<k.size()-1){k.eq(i).css(r,d[i]-((d[i]-((i*l)+(i*o.spacing)))*b)+'px')}}},duration:o.duration,easing:o.easing})})}})}})(jQuery);
$(document).ready(function() {$('.popular-posts').find("img").attr('src', function (i, e) {return e.replace("s72-c", "s1600")})
                    $('<span class="fadeout"></span>').insertBefore('.item-content');
});

//]]>
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
                    max : 600,
                    min : 300,
                    spacing : -4,
                    duration: 200
                  });
});
/*]]>*/
</script>

Postagens populares em forma de slide com setas

12 comentários:

Há um tempo devendo essa postagem, onde é possível colocar os posts mais vistos de seu blog em forma slide com setas, trago agora para vocês. Quem  adaptou para o Blogger foi Abu Farhan, portanto, todos os aplausos e agradecimentos a ele.


O que é necessário é que você tenha em seu blog o widget com as postagens populares e que cole o código em um widget HTML/Javascript. Estando implementado, deixe como mostra o exemplo.








Clique em Adicionar um Gadegt



Ao abrir, clique em  HTML/Javascript



Cole então o próximo código fazendo as modificações necessárias.


<style type="text/css" media="screen">
<!--
#PopularPosts1{
height:300px;
margin-bottom: 50px;
}

.item-content {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/
position:relative;
}

.slider {
width:900px;/*Comprimento do slide*/
height:300px;/*Largura do slide*/;
margin: 10px auto;
overflow:hidden;
margin-top:5px;
padding:0px 0px;
}

.item-snippet {
background: #647A8C;
width:900px;/*comprimento da faxixa da inscrição*/
font-size:12px;/*Tamanho da fonte da inscrição*/
color:#fff;/*Cor da letra*/
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
font-style:italic;
}

.item-title{
font-size:20px;/*Tamanho da fonte do título*/
color:#fff;/*Cor do título*/
font-weight:bold;
font-style:normal;
margin-bottom:5px;
}

.item-title a:link,.item-title a:visited{
color:#fff;
text-decoration:none;
border:none !important;
padding:0 !important;
}

.item-thumbnail img{
padding:0 !important;
}

.item-thumbnail a{
padding:0 !important;
}
.crosscol .widget-content {position:relative;}
.slider ul, .slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}

#slider2{margin-top:1em;}
.slider li, #slider2 li{
width:900px;
height:300px;
overflow:hidden;
}

.item-thumbnail img{
width:900px;/*Comprimento da imagem*/
height:300px; /*Largura da imagem*/
}

#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
text-indent:-9999px;
top:140px;
z-index:900;
}

#nextBtn, #slider1next{
left:870px !important;/*Posição seta direita*/
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
left:0;
position:absolute;
top:200px; /*posição seta quanto a altura*/
width:30px;
z-index:800;
}

#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:70px;
height:127px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4v79sjadwYxQbguc9WBtAe1Xkzr8iYt4Er0pkZ6YsA3a4Em7bmP5gd7kQPRbp-AdUz1CR8eLQ2eSY5X5tX6Mwb8OOo_3GK9UFxTAg8aLcP0KjRxfOcZCpm5In6j1-UJn8fnuLGUpPJ2w/s1600/8395_64x64.png) no-repeat 0 0;/*imagem seta ESQUERDA*/
}

#nextBtn a, #slider1next a{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YAH3oQPX-6jFa-21071VruMn2Z_ctF0JyKHYfO_ErvS9JlWE_BIecbwrGeQG8uaGq3f9Fb9T8xUrz6DXrYUruA4UNuLk_9CLKToBkkmAGsX9MfVBvLPfVX9iny03EKwfRTH_I6DxHHM/s1600/8415_64x64.png) no-repeat 0 0;/*imagem seta DIREITA*/
}

ol#controls{
margin:1em 0;
padding:0;
height:38px;
}

ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}

ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}

ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
.test{margin:30px;}
-->
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-for-blogger.googlecode.com/svn/trunk/easysliderpopular.js' type='text/javascript'></script>

Colocar o novo Blogger com fundo transparente

5 comentários:

Esta dica é baseada em cima do template Simple, um dos templates do novo modelo, implementado a partir de agosto de 2010, portanto, observe se há este código em seu blog para implementar a dica :-)

Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por:  

.main-outer {




 
Coloque então o código abaixo depois dele


 opacity:0.8;


Para o antigo blog, teste ESTE código

15 de nov. de 2011

Visitante troca imagem de fundo do seu blog

2 comentários:
DEMO

Mude o back do blog clicando nas imagens


Me pediram este script através do Twitter. Serve para que o visitante de seu blog tenha o poder de modificar a imagem de fundo (background) de seu blog. Já aproveitei que é Natal, estão todos no clima de Papai Noel, vendo vitrines, enfeitando suas casas e fiz o script com imagens para a ocasião.
Para você, que usa o novo Blogger, com templates disponibilizados a partir de julho de 2010, a primeira coisa a fazer é trocar, todo este código abaixo.





Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011



/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
  background: $(body.background);
  $(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background-color: $(content.background.color);
}

 


Substitua-o então por este:


/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;

}
.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

$(content.background.color.selector) {
  background: #eee;/*Cor da página*/}



 (Código em rosa pode ser modificado pela cor que quiser como funda da página do blog)

Salve.


Agora clique em Layout 







Clique em Adicionar um Gadegt




Ao abrir, clique em  HTML/Javascript


Cole então o próximo código fazendo as modificações necessárias, onde estão os códigos com cores diferente. Cada imagem deve ser colocada 


ATENÇÃO: os códigos estão em cores diferentes para que você perceba que é necessário repetir cada imagem 2 vezes.

<style>
#bljjImgFond a img {border: 4px solid #ccc;text-align:center;height: 40px;width: 40px;}
</style>

<div style="text-align:center;">Mude o back do blog clicando nas imagens</div><br />
<div id="bljjImgFond">
<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBmgpqmJlDvB9pUrXKmsBT_t1Am4YoGpOTApRMMY3J6yI34T9G90wcLSnJSRDu0puByLOJZSY4f-pMCs_Nb-29jA1aHYdxRq449ygFLL78bUaWUCOxA4LfZi9RXJ9TJ4Gf04UVb6XdgFr/s1600/0bgr295zj1.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBmgpqmJlDvB9pUrXKmsBT_t1Am4YoGpOTApRMMY3J6yI34T9G90wcLSnJSRDu0puByLOJZSY4f-pMCs_Nb-29jA1aHYdxRq449ygFLL78bUaWUCOxA4LfZi9RXJ9TJ4Gf04UVb6XdgFr/s1600/0bgr295zj1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM6BrfQYewEE1Ws4qpqvR1z4LehEtoqT97yzVbdl5eMmKcz0JrYKeNRyZ86ZYE2KCwMQeTzuBnti5r28TX4o5EHvHJH2EmCG-rhiU2YmynqNwRt49C0ZuAt_UR94cCd4KvBYTPfhOys4F/s1600/2q1yo3r.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVM6BrfQYewEE1Ws4qpqvR1z4LehEtoqT97yzVbdl5eMmKcz0JrYKeNRyZ86ZYE2KCwMQeTzuBnti5r28TX4o5EHvHJH2EmCG-rhiU2YmynqNwRt49C0ZuAt_UR94cCd4KvBYTPfhOys4F/s1600/2q1yo3r.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgNyPNkwq2py1ob4HjZ6VUmJHQ0heT5shTafwN8qyjP_dFj10CUnNyowiJbcZp1w0xhCuTgRh64diwgkgb239okjhMlHWCyo8VgEAbOZ3lYGvh7hTyNIR5T3emfxEyvT_w63HokuBYRAO/s1600/34plx6f.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgNyPNkwq2py1ob4HjZ6VUmJHQ0heT5shTafwN8qyjP_dFj10CUnNyowiJbcZp1w0xhCuTgRh64diwgkgb239okjhMlHWCyo8VgEAbOZ3lYGvh7hTyNIR5T3emfxEyvT_w63HokuBYRAO/s1600/34plx6f.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SdiTEMpko738JlhQGSoh59rQ0CHgaDe-P5Z3w3uNnKvNzobsE3sD2vG5DslgWF0IF2T8jLtcupJF-zGARNLir6SkTJnVgzFBADiG2QLD4u7yWWvWvj_WK6elCaVI82Uqzbk09Xs_zRgU/s1600/gbi_freexmas05_bg1.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SdiTEMpko738JlhQGSoh59rQ0CHgaDe-P5Z3w3uNnKvNzobsE3sD2vG5DslgWF0IF2T8jLtcupJF-zGARNLir6SkTJnVgzFBADiG2QLD4u7yWWvWvj_WK6elCaVI82Uqzbk09Xs_zRgU/s1600/gbi_freexmas05_bg1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXgQP2TSB85tGo7VrC-E6fORcTQioNe3YMKNqp32aHgyBCdem8suNSnNApHlf7s775KZxLC8aOKJpKeepFMEs-StZ3OOBmEJeKOLXWoGwote86ahsrWKTJrcGLPcGtJ6T_te3AD75RuiO/s1600/8991251.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkXgQP2TSB85tGo7VrC-E6fORcTQioNe3YMKNqp32aHgyBCdem8suNSnNApHlf7s775KZxLC8aOKJpKeepFMEs-StZ3OOBmEJeKOLXWoGwote86ahsrWKTJrcGLPcGtJ6T_te3AD75RuiO/s1600/8991251.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPtcZUPAE7EZWQlYB7twxOibfmaUP4LQ7fh2_vnTOXLm2AUA66zOeWEvdLHy-yzTJn4aWjf5DZiN6m8vZx3-Ht4Dq9OJne3pGyyB6rPufvcjaRgiAJidbSWDsL5R2c-NV3mYLLtnYDcBj/s1600/bg19.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPtcZUPAE7EZWQlYB7twxOibfmaUP4LQ7fh2_vnTOXLm2AUA66zOeWEvdLHy-yzTJn4aWjf5DZiN6m8vZx3-Ht4Dq9OJne3pGyyB6rPufvcjaRgiAJidbSWDsL5R2c-NV3mYLLtnYDcBj/s1600/bg19.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZ2dRQjF0L-goNjwxVWJHbphJfzmadoZ5aW-qhPfFVoC96c09XUKXziCnvyGirF2IKcpqtFNXA5nILoeDA_Uj-EWdHXY3sQ_vPmRD1b_lvv6HOL-tkH0Se2rR1W3BP_7EVAfANPH28Ou0/s1600/fundoverm_gli.gif)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZ2dRQjF0L-goNjwxVWJHbphJfzmadoZ5aW-qhPfFVoC96c09XUKXziCnvyGirF2IKcpqtFNXA5nILoeDA_Uj-EWdHXY3sQ_vPmRD1b_lvv6HOL-tkH0Se2rR1W3BP_7EVAfANPH28Ou0/s1600/fundoverm_gli.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KM0Zj_7uCTtaueKdwhwEhJrdNhIuuxjazUWAgtxSbldUfXgCWW8L0Z6sNjUXKST3sc5YdAb9KEykBvMd0Ar-8ywWgGbo70Df9fLcVtLit-2M5h4mZn59ntpcyOHUo6dixDbw-OSasGCP/s1600/azul_flocos1.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KM0Zj_7uCTtaueKdwhwEhJrdNhIuuxjazUWAgtxSbldUfXgCWW8L0Z6sNjUXKST3sc5YdAb9KEykBvMd0Ar-8ywWgGbo70Df9fLcVtLit-2M5h4mZn59ntpcyOHUo6dixDbw-OSasGCP/s1600/azul_flocos1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZu_0FxSUqeJiiJw856HTkx0R2x5dUrZ8QWcBqK19XSzb6_j2T0cC1djq-qutbLf93az6jOSEXC8EhLUkgXMOMIOipZpzWBV69AkvTJpX6kgAaJyKkOHJiggdjqTKmi0oX8BINyFkWv2w4/s1600/xmasf19.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZu_0FxSUqeJiiJw856HTkx0R2x5dUrZ8QWcBqK19XSzb6_j2T0cC1djq-qutbLf93az6jOSEXC8EhLUkgXMOMIOipZpzWBV69AkvTJpX6kgAaJyKkOHJiggdjqTKmi0oX8BINyFkWv2w4/s1600/xmasf19.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7bWUcwCxCEkJNUio0ulGJpGbz_1OYTt9kZHWWIcUe85x0itrmHf88lQ0a0nWH_nWB5JHijyUxOfmq1IvI1AQIKFqgMScq-A6_Vobj03_J19FZLSkjWq-q24QAM0nl3QNOkTkbHnI3huw/s1600/xmastile-30a.jpg)'; document.body.style.backgroundColor='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR7bWUcwCxCEkJNUio0ulGJpGbz_1OYTt9kZHWWIcUe85x0itrmHf88lQ0a0nWH_nWB5JHijyUxOfmq1IvI1AQIKFqgMScq-A6_Vobj03_J19FZLSkjWq-q24QAM0nl3QNOkTkbHnI3huw/s1600/xmastile-30a.jpg" /></a>
</div>

7 de nov. de 2011

Menu social embutido com efeito j.query

3 comentários:

Que tal ter em seu blog os links em forma de botão para suas páginas sociais, mas de uma forma bem discreta, sem tomar espaço em seu blog e ainda, com um efeito deslizante ? Esse menu social existe, foi projetado pelo blog Codrops, e trago agora para vocês. Basta seguir o exemplo, ter bastante atenção e em 2 simples passos, instala-lo em seu blog.

Vá até o Modelo de seu blog, clique em Editar modelo
  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. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Agora procure por: ]]></b:skin>  

 
 
Substitua então pelo código abaixo:

/*Menu List----------------------------------------*/
.rp_list {
    position:fixed;
    right:136px;
    bottom:-50px;
    margin:0;
    padding:0;
}
.rp_list a img{
    width:40px;
    border:none;
    -moz-box-shadow:0px 0px 4px #ccc;
    -webkit-box-shadow:0px 0px 4px #ccc;
    box-shadow:0px 0px 4px #ccc;
    margin-left:8px;
    line-height:40px;
}
h3#relatedPosts{
    position:fixed;
    right:0px;
    bottom:23px;
    cursor:pointer;
    font-size:13px;
    background:#000;
    color:#fff;
    padding:3px 10px 5px 10px;
    margin:0;
    font-weight:normal;
    text-transform:uppercase;
    text-shadow:0px 0px 1px #fff;
    opacity:0.8;}
span.reference{font-family:Arial;position:fixed;left:10px;bottom:10px;font-size:14px;}
span.reference a{color:#aaa;text-decoration:none;margin-right:20px;}
span.reference a:hover{color:#ddd;}

]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
            $(function() {
                //the loading image
                var $loader        = $('#st_loading');
                //the ul element
                var $list        = $('#st_nav');
                //the current image being shown
                var $currImage     = $('#st_main').children('img:first');
              
                //let's load the current image
                //and just then display the navigation menu
                $('<img>').load(function(){
                    $loader.hide();
                    $currImage.fadeIn(3000);
                    //slide out the menu
                    setTimeout(function(){
                        $list.animate({'left':'0px'},500);
                    },
                    1000);
                }).attr('src',$currImage.attr('src'));
              
                //calculates the width of the div element
                //where the thumbs are going to be displayed
                buildThumbs();
              
                function buildThumbs(){
                    $list.children('li.album').each(function(){
                        var $elem             = $(this);
                        var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
                        var $thumbs         = $thumbs_wrapper.children(':first');
                        //each thumb has 180px and we add 3 of margin
                        var finalW             = $thumbs.find('img').length * 183;
                        $thumbs.css('width',finalW + 'px');
                        //make this element scrollable
                        makeScrollable($thumbs_wrapper,$thumbs);
                    });
                }
              
                //clicking on the menu items (up and down arrow)
                //makes the thumbs div appear, and hides the current
                //opened menu (if any)
                $list.find('.st_arrow_down').live('click',function(){
                    var $this = $(this);
                    hideThumbs();
                    $this.addClass('st_arrow_up').removeClass('st_arrow_down');
                    var $elem = $this.closest('li');
                    $elem.addClass('current').animate({'height':'170px'},200);
                    var $thumbs_wrapper = $this.parent().next();
                    $thumbs_wrapper.show(200);
                });
                $list.find('.st_arrow_up').live('click',function(){
                    var $this = $(this);
                    $this.addClass('st_arrow_down').removeClass('st_arrow_up');
                    hideThumbs();
                });
              
                //clicking on a thumb, replaces the large image
                $list.find('.st_thumbs img').bind('click',function(){
                    var $this = $(this);
                    $loader.show();
                    $('<img class="st_preview"/>').load(function(){
                        var $this = $(this);
                        var $currImage = $('#st_main').children('img:first');
                        $this.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){
                            $(this).remove();
                        });
                    }).attr('src',$this.attr('alt'));
                }).bind('mouseenter',function(){
                    $(this).stop().animate({'opacity':'1'});
                }).bind('mouseleave',function(){
                    $(this).stop().animate({'opacity':'0.7'});
                });
              
                //function to hide the current opened menu
                function hideThumbs(){
                    $list.find('li.current')
                    .animate({'height':'50px'},400,function(){
                        $(this).removeClass('current');
                    })
                    .find('.st_thumbs_wrapper')
                    .hide(200)
                    .andSelf()
                    .find('.st_link span')
                    .addClass('st_arrow_down')
                    .removeClass('st_arrow_up');
                }

                //makes the thumbs div scrollable
                //on mouse move the div scrolls automatically
                function makeScrollable($outer, $inner){
                    var extra             = 800;
                    //Get menu width
                    var divWidth = $outer.width();
                    //Remove scrollbars
                    $outer.css({
                        overflow: 'hidden'
                    });
                    //Find last image in container
                    var lastElem = $inner.find('img:last');
                    $outer.scrollLeft(0);
                    //When user move mouse over menu
                    $outer.unbind('mousemove').bind('mousemove',function(e){
                        var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
                        var left = (e.pageX - $outer.offset().left) * (containerWidth-divWidth) / divWidth - extra;
                        $outer.scrollLeft(left);
                    });
                }
                $('#relatedPosts').toggle(
                    function(){
                        $('#rp_list').animate({'bottom':'10px'},500);
                    },
                    function(){
                        $('#rp_list').animate({'bottom':'-50px'},500);
                    }
                );
                $('#rp_list a').tipsy({gravity: 's'});
            });
        //]]>
</script>




Salve. Procure por:

 <div class='main-cap-bottom cap-bottom'>

Se não encontrar, procure por:

<div id='content-wrapper'>


 E acima do código cole este trecho abaixo, inserindo onde se pede o endereço de suas páginas.

<h3 id='relatedPosts'>Rede social</h3>
<div class='rp_list' id='rp_list'>
<a href='#' target='_blank' title='Blogger'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUu0_xEEE1RkfGP2tLZ9lai8Cv0Aemzuc3lORS7kjMBd-ADca0-qDyvDMVb9PHDXwZ3BH_twzvXoaZqBC0QVbve5L6xrLc913T_mbYy2IpF06LFqhY-cCejfEcWX17iQVq1BrIlHtzwe0/s1600/blogger.png'/></a>

<a href='ENDEREÇO FLICKER' target='_blank' title='Flickr Galeria'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEHcO8dluwchG-qOqKeGvO05pIDfl1dwjshz4SC49ZMZ10n5X2eJET5GXymofwMGN7q-mlm4jterRLp-t3Rt7s0KXL_YMcLSSw09TwqZSsBZuMF4ClXnU58KQwt6Z15vmaXVWUy9VlLUY/s1600/flickr.png'/></a>

<a href='ENDEREÇO YOUTUBE' target='_blank' title='Meu canal '>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOzWkdHbKGHkV_9WTn2kZQBzLt1Lk4tsbVLmcTLBU5h5kWTr-7j22K37iR_6LHhDbRjOFhrzuxo2HQNRs5Vc6UcMjIqrIU2yRsJl0rprbMewbov9qTMHQiEH2XHa5uukAZzO01gQ5lXWU/s1600/youtube.png'/></a>

<a href='ENDEREÇO FACEBOOK' target='_blank' title='Encontre-me no Facebook'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHaC7sF_2qyr8GBaJTHCg7GVvOCtDCwzFV60W8ELt2Hj-6vOFv3sd5zAhX7K3nSROtDX8FWQktopZUEPzZ9E-dCVxjSG6aI6OGAKSmaqXJhv2ztpTKfBuoduvjXDaPj4mykSeVaiTjxzY/s1600/facebook.png'/></a>

<a href='ENDEREÇO TWITTER' target='_blank' title='Siga-me Twitter'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVX8PCvFVogKfE8KKXMT_aCJW7ZwF25evgPUu79ON3Y5-QkXnVoHAeHapwzZXcgSl0j6uaLrJsXgePFYhple9wd3I3nCbVqe3uNXPx1DNIvYZau7vwwZhlXhSSBf-BfIKkVPgcYwTjUg4/s1600/twitter.png'/></a>
          
<a href='ENDEREÇO DO FEED' target='_blank' title='Leia-me Feed'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPk9nslUTJe3Bc8ZDGZrQwd7H_SV-TOhf6Bs58XjV_AGc2uia5rHX6nTHWUluE9-Kb5JVsfMEo0C5bbOHsz0C6YrpjUVDSI7n2D07CP3kpnjDJm1m73D3TsqdIWlRTViOzv22aFQwK-4/s1600/rss.png'/></a>

      
</div>

Prontino. Está feito !

3 de nov. de 2011

Colocar apresentação de power point no Blogger

16 comentários:
Hoje vou ensinar como colocar uma apresentação de Power Point nas páginas do Blogger. É necessário que hospede o dito cujo em um site que aceite esse formato. Indico o site Slide Share

A aparência será como esta abaixo
A primeira coisa a fazer, é obvio, é entrar no site. Clique AQUI para entrar.
Agor é necessário fazer um cadastro, gratuito.



Preencha o formulário conforme o modelo abaixo.



Clique agora em UPLOAD

Abrirá uma janela com o browser de seu computador. Procure onde está seu arquivo PPS




Agora aguarde até fazer o upload


Pronto ! Agora clique no botão SHARE, copie o código e...



Cole em seu editor de postagem no modo HTML. Dê um título e publique.




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