Postagens populares em forma de slide com efeito accordeon

 DEMO

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" src="http://accordion-template.googlecode.com/svn/trunk/jquerykwick.js"></script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
$(document).ready(function() {
                    $('.popular-posts ul').kwicks({
                    max : 600,
                    min : 300,
                    spacing : -4,
                    duration: 200
                  });
});
/*]]>*/
</script>

Leia Mais ►

Postagens populares em forma de slide com setas

 DEMO

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 {
width:900px;/*comprimento da faxixa da inscrição*/
font-size:16px;/*Tamanho da fonte da inscrição*/
color:#fff;/*Cor da letra*/
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
padding:5px 5px 10px 5px;
position:absolute;
bottom:0;
text-align:left;
font-style:italic;
}

.item-title{
font-size:16px;/*Tamanho da fonte do título*/
color:#cc0000;/*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:1000;
}

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

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

#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

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

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>

Os números do código em cor vermelha correspondem ao comprimento do slide. Ao trocar um, troque todos pelo menos número (valor). 

Em azul correspondem a largura, ao trocar um, troque todos pelo mesmo número (valor) 

O número em rosa corresponde a seta direita, ela deve ter um valor (número) maior que os demais para não ficar dentro do slide.

Leia Mais ►

Colocar o novo Blogger com fundo transparente

 DEMO

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 {

 

Substitua então pelo código abaixo, trocando a cor de fundo onde está destacado na cor rosa.:

.content-outer{
 background: #fff;
  opacity:0.7;
  margin:0 auto;
  padding:10px;
}

.main-outer {

Para o antigo blog, teste ESTE código

Leia Mais ►

Votar no bebê hipoglós com ajuda do Imacro

A primeira coisa que quero deixar bem claro é que, o Imacro NÃO vota sozinho, não é colocar o código e ir ao shopping passear, você precisa votar, o que ele faz é adiantar o serviço, fazendo com que não seja preciso dar refresh a página, mas a captcha tem que ser digitada. Então, é isso, estamos entendidos ?

.

A primeira coisa a fazer é abrir o Mozilla Firefox.

Se você não tem, clique AQUI e baixe o navegador pois o Imacro só pode ser baixado no Mozzila Firefox.

Agora com o Firefox aberto, clique AQUIe baixe o programinha Imacro.

Vai abrir uma janela como esta abaixo, clique em "Instalar agora"

 

Agora clique em "Reiniciar o sistema"

Pronto, o programa já está instalado

Agora reinicie o Firefox e vá até a página de votação do Bebê Hipoglós e abra na página de seu bebê.









Com a página de votação aberta, clique na tecla F8 em seu teclado. 






Note que abriu uma janela do lado esquerdo.
 
1-Clique então em "Favoritos"
 

 2-Ao abrir o menu procure por: Demo-ArchivePage.iim

3-Clique então sobre ele com o botão direito do mouse.

  4-Ao abrir uma pequena janela, clique em "Editar Macro"

 

Nessa janela que abriu, apague tudo que la estiver e cole o código que está em destaque.

 

Clique então em "Save e close" 
 
Perceba que há neste código abaixo, um número na cor vermelha.  
 Ele representa o número correspondente ao bebê,  o que vc tem a fazer é mudar o número "281967" pelo número correspondente ao seu bebê antes de colar no Imacro.












Copie este código abaixo, troque o número em vermelho pelo número de seu bebê e cole no local indicado.

VERSION BUILD=7401004 RECORDER=FX
TAB T=1
URL GOTO=http://bebehipoglos2011.com.br/281967
URL GOTO=bebehipoglos2011.com.br/281967
TAG POS=1 TYPE=IMG ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/voter-btnNEW.jpg
FRAME F=2
PROMPT digiteaimagemaqui: !VAR1 
TAG POS=1 TYPE=INPUT:TEXT FORM=ACTION:# ATTR=ID:recaptcha_response_field CONTENT={{!VAR1}}
TAG POS=1 TYPE=INPUT:IMAGE FORM=ACTION:# ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/voter.jpg
TAG POS=1 TYPE=IMG ATTR=SRC:http://media.bebehipoglos2011.com.br/templates/images/ok.gif
URL GOTO=bebehipoglos2011.com.br/281967

 























Para conseguir o número de seu bebê, abra a página de votação e copie o número que estiver na barra do navegador

1- Clique em "usar" 

2- Coloque um número onde está "MAX",  coloque por exemplo o número 100, é a quantidade de votos

3- Clique em "Usar Loop"

 

Veja que abrirá uma janela.  Copie então o código (Captcha) que o site da Globo fornece e escreva aí.  Clique em "Enter" no seu teclado e bom divertimento.

Leia Mais ►

Visitante troca imagem de fundo do seu blog

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(http://4.bp.blogspot.com/-P48WXQwtbFo/TsLt7vbbehI/AAAAAAAAA4Q/wln2IA3EToA/s1600/0bgr295zj1.gif)'; document.body.style.backgroundColor='none';"><img src="http://4.bp.blogspot.com/-P48WXQwtbFo/TsLt7vbbehI/AAAAAAAAA4Q/wln2IA3EToA/s1600/0bgr295zj1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-KPvNZRUjGw4/TsLt70dwn8I/AAAAAAAAA4Y/E1Mcgvewr_Q/s1600/2q1yo3r.gif)'; document.body.style.backgroundColor='none';"><img src="http://1.bp.blogspot.com/-KPvNZRUjGw4/TsLt70dwn8I/AAAAAAAAA4Y/E1Mcgvewr_Q/s1600/2q1yo3r.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://1.bp.blogspot.com/-MnKzjDJmYqQ/TsLt8LxnQ_I/AAAAAAAAA4g/0fnmLyMEThI/s1600/34plx6f.gif)'; document.body.style.backgroundColor='none';"><img src="http://1.bp.blogspot.com/-MnKzjDJmYqQ/TsLt8LxnQ_I/AAAAAAAAA4g/0fnmLyMEThI/s1600/34plx6f.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-aEdHtQc5pIs/TsLuBV4py9I/AAAAAAAAA5o/bMRynYGzGZo/s1600/gbi_freexmas05_bg1.gif)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-aEdHtQc5pIs/TsLuBV4py9I/AAAAAAAAA5o/bMRynYGzGZo/s1600/gbi_freexmas05_bg1.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-ebjkgnW0uY0/TsLt-uYBYeI/AAAAAAAAA4o/0bFxij1NuVQ/s1600/8991251.gif)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-ebjkgnW0uY0/TsLt-uYBYeI/AAAAAAAAA4o/0bFxij1NuVQ/s1600/8991251.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://4.bp.blogspot.com/-TxsosyVbDfg/TsLt_kaPgQI/AAAAAAAAA5A/A4jhrnsFeSU/s1600/bg19.gif)'; document.body.style.backgroundColor='none';"><img src="http://4.bp.blogspot.com/-TxsosyVbDfg/TsLt_kaPgQI/AAAAAAAAA5A/A4jhrnsFeSU/s1600/bg19.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-ObO2QSuugng/TsLuBMuc1nI/AAAAAAAAA5g/a6yMAlSzCaA/s1600/fundoverm_gli.gif)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-ObO2QSuugng/TsLuBMuc1nI/AAAAAAAAA5g/a6yMAlSzCaA/s1600/fundoverm_gli.gif" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://2.bp.blogspot.com/-c14kMKCVigA/TsLvZUZouhI/AAAAAAAAA5w/T67hhdzMcGg/s1600/azul_flocos1.jpg)'; document.body.style.backgroundColor='none';"><img src="http://2.bp.blogspot.com/-c14kMKCVigA/TsLvZUZouhI/AAAAAAAAA5w/T67hhdzMcGg/s1600/azul_flocos1.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-0NoHUWEDhZk/TsLwdHMWLII/AAAAAAAAA6A/qZVkl-hnyiA/s1600/xmasf19.jpg)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-0NoHUWEDhZk/TsLwdHMWLII/AAAAAAAAA6A/qZVkl-hnyiA/s1600/xmasf19.jpg" /></a>

<a href="javascript:void(0)" onclick="javascript:document.body.style.backgroundImage='url(http://3.bp.blogspot.com/-OhLuGkuF410/TsLwdVaNUbI/AAAAAAAAA6I/JgCKpu2lKyI/s1600/xmastile-30a.jpg)'; document.body.style.backgroundColor='none';"><img src="http://3.bp.blogspot.com/-OhLuGkuF410/TsLwdVaNUbI/AAAAAAAAA6I/JgCKpu2lKyI/s1600/xmastile-30a.jpg" /></a>
</div>

Leia Mais ►

Menu social embutido com efeito j.query

 

 DEMO

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://lh4.googleusercontent.com/-PzPYn4AJVFE/TXMWwfNf8XI/AAAAAAAAAEk/l0cfAZxi1wQ/s1600/blogger.png'/></a>

<a href='ENDEREÇO FLICKER' target='_blank' title='Flickr Galeria'>
<img alt='' src='https://lh6.googleusercontent.com/-BAp0PG1aj-k/TXMXC7azhHI/AAAAAAAAAEw/niDawt-cHeU/s1600/flickr.png'/></a>

<a href='ENDEREÇO YOUTUBE' target='_blank' title='Meu canal '>
<img alt='' src='https://lh4.googleusercontent.com/-OZwEYt1C6cc/TXMXQqK67oI/AAAAAAAAAE4/r3Q-PRUND2Y/s1600/youtube.png'/></a>

<a href='ENDEREÇO FACEBOOK' target='_blank' title='Encontre-me no Facebook'>
<img alt='' src='https://lh3.googleusercontent.com/-ZjccS-wE7cs/TXMWxee6j8I/AAAAAAAAAEo/gLevgnoUF5Q/s1600/facebook.png'/></a>

<a href='ENDEREÇO TWITTER' target='_blank' title='Siga-me Twitter'>
<img alt='' src='https://lh4.googleusercontent.com/-kIAJTQLDmok/TXMXGPBwGBI/AAAAAAAAAE0/bGwKwxRgcA0/s1600/twitter.png'/></a>
          
<a href='ENDEREÇO DO FEED' target='_blank' title='Leia-me Feed'><img alt='' src='https://lh5.googleusercontent.com/-9IY_gttQI_o/TXMXB_sGcBI/AAAAAAAAAEs/rZRunztQ-Kk/s1600/rss.png'/></a>

      
</div>

Prontino. Está feito !

Leia Mais ►

Campanha Teima Lula, em solidariedade ao nosso eterno presidente

SOMOS 80% #TEIMALULA

Para quem como eu, reconhece os avanços deste país durante a gestão do companheiro Lula, há na net uma campanha, encabeçada pelo ator Bemvindo Sequeira,  em apoio ao ex-presidente que neste momento está passando por um momento delicado. Se quer participar, basta gravar um vídeo em apoio a  Lula com o tema "Teima Lula" Faça seu vídeo em solidariedade, e envie-me para que eu o integre a campanha Teima Lula através do You Tube e da Rede Liberdade.

#TeimaLula. no Twitter

Você pode também, caso prefira, fazer uma foto com um cartaz, como o exemplo e postar em seu blog ou usa-lo como avatar em uma de suas páginas sociais. Vamos apoiar o barba.

Leia Mais ►

Colocar apresentação de power point no Blogger

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

O melhor presente

View more presentations from elainebucci

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.

Leia Mais ►