Templates e Acessórios: novembro 2011

Postagens Recentes

30 de nov. de 2011

Postagens populares em forma de slide com efeito accordeon

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.

»»Leia mais...

Postagens populares em forma de slide com setas

. Elke di Barros | 04:06 12 comentários:

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.

»»Leia mais...

Colocar o novo Blogger com fundo transparente

. Elke di Barros | 03:12 5 comentários:

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 {

Coloque então o código abaixo depois dele

opacity:0.8;

Para o antigo blog, teste ESTE código

»»Leia mais...

15 de nov. de 2011

Visitante troca imagem de fundo do seu blog

. Elke di Barros | 20:41 Um comentário:

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.

»»Leia mais...

7 de nov. de 2011

Menu social embutido com efeito j.query

. Elke di Barros | 02:33 3 comentários:

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://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 !

»»Leia mais...

3 de nov. de 2011

Colocar apresentação de power point no Blogger

. Elke di Barros | 09:37 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

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.