Roox Blogger

Efeito em imagem: Trocar a Imagem Quando Passa o Mouse

noreply@blogger.com (Jhasper) — Sun, 11 Mar 2012 15:28:00 +0000

Respondendo uma duvida deixada em um de nossos comentários sobre como colocar um efeito no banner de parceria, tamanho 120x60. Existe um código para trocar a imagem quando passamos o mouse sobre ela, é um código simples e funciona perfeitamente, passe o mouse sobre nosso banner ao lado e veja que ele muda, o código para fazer isso é:

<a href="http://jornaljd.blogspot.com"target="_blank" onMouseOver="document.images['myimage'].src='http://img410.imageshack.us/img410/6580/olho2.gif';" onMouseOut="document.images['myimage'].src='http://img22.imageshack.us/img22/7136/jornal.jpg';"><img src="http://img22.imageshack.us/img22/7136/jornal.jpg" border="0" id="myimage"/></a>

Você precisará fazer duas imagens do mesmo tamanho e hospedar a imagem, sugerimos fazer isso no ImageShack se tiver dificuldades para encontrar a url certa da imagem veja essa explicação em video depois é só colocar os endereços das imagens no código acima e pronto. Mas note que uma das imagens é repetida duas vezes no código.

Apesar de falarmos em imagens para banners de parcerias esse código serve para imagens de qualquer tamanho. Outro detalhe que precisamos esclarecer é que esse código apenas troca a imagem mas quando passar o mouse na imagem que usamos como exemplo notará que ela ficou semi transparente a explicação de como fazer isso você encontra em nossa postagem sobre imagens transparentes.

Menu vertical costumizável

noreply@blogger.com (Tcbjhasper) — Sat, 25 Feb 2012 10:36:00 +0000

poderá colocar o tipo de botão de sua preferencia, fazer efeitos diferentes, bem facinho. Você precisará de um modelo de botão, ou até dois caso queira fazer efeito em seu menu.

Vá até o HTML do seu blog e procure pelo seguinte código:

]]></b:skin>

Cole acima dele o código abaixo:

{
list-style:none;
margin:0px;
padding:0px;
}#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-width: 1px;
}
#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #FFFFFF;
display: block;
background: url('http://img341.imageshack.us/img341/4782/image1lu2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:hover {
color: #cccccc;
background: url('http://img205.imageshack.us/img205/4131/12uw2.jpg');
background-repeat:no-repeat;
padding: 8px 0 0 50px;
}
#menu li a:active {
color: #666666;
padding: 8px 0 0 50px;
}

*ATENÇÃO: o selecionado na cor verde representa o botão, caso não goste, troque por outro de sua escolha, não retire as aspas, ok ?
O selecionado na cor azul são as cores das letras que aparecerão no botão, caso precise, mude-os para a cor desejada

depois em "Elementos de página", clique em "Adicionar . Ao abrir a tabela clique em HTML/Javascript, e cole o código abaixo, depois acrescente os links que quiser nos locais indicados. ( em cor verde é o endereço do que vai linkar e em verde, é o que vc irá esscrever que aparecerá escrito no botão)

Para acrescentar mais links, é só ir acrescentando,

<li><a href="ENDEREÇO DO LINK">ESCREVA AQUI O QUE QUISER QUE APAREÇA NO BOTÃO</a></li>

antes de

</ul>
</div>

Opção nativa de favicon personalizado no Blogger

noreply@blogger.com (Tcbjhasper) — Tue, 14 Jun 2011 21:33:00 +0000

O Blogger disponibilizou recentemente uma opção nativa de personalização do favicon dos blogs. Favicon é aquela pequena imagem que fica ao lado do nome da página na aba ou janela do navegador; até o lançamento deste novo recurso o favicon padrão de todos os blogs era o logo do próprio Blogger e aqueles que quisessem altera-lo precisavam fazer uso de alguns hacks.

O novo recurso, por enquanto, pode ser acessado apenas pelo Blogger in Draft, na guia Layout em Elementos de página. Você vai ver um novo elemento chamado Favicon.

Clicando em Editar neste elemento você pode fazer o upload de uma imagem que queira usar para personalizar o favicon do seu blog.

Recomendo que vocês escolham uma imagem perfeitamente quadrada , de preferência com tamanho em pixels de 16x16 ou 32x32. A imagem escolhida como favicon deve estar em formato .ico, se a sua imagem não estiver neste formato você pode converta-la usando algum site de conversão online, recomendo neste caso oConvertICO.

Alterar texto postagens mais antigas e mais recentes

noreply@blogger.com (Tcbjhasper) — Fri, 20 May 2011 00:52:00 +0000

Modificar o texto ou usar imagens no lugar de postagens mais antigas, postagens mais recentes e inicio que aparecem no final das postagens do blog é algo fácil, porém encontrar isso na pagina editar HTML é um pouco complicado, pois quem já tentou procurar por essas palavras não conseguiu resultado algum.
A razão disso é simples o blog usa tags para fazer isso, agora vamos mostrar como modificar, retirar ou colocar esses links(texto postagens mais antigas, postagens mais recentes e inicio) no seu blog. Entre na pagina editar HTML, clique para expandir o modelo e procure por:

<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'>

Logo depois disso deve estar assim no HTML do seu blog:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>
<div class='clear'/>
</b:includable>

Se não tiver provavelmente esses links para textos mais antigos, recentes e pagina atual não devem aparecer no seu blog. Portanto se quiser remover esses links é só apagar esse trecho. Mas se a sua intenção é modificar o texto veja os trechos em negrito, basta trocá-los pelo texto que desejar, veja o que cada um deles faz no blog:

<data:olderPageTitle/> link para postagens mais antigas
<data:newerPageTitle/> link para postagens mais recentes
<data:homeMsg/> link para pagina inicial do blog, esse aparece duas vezes então modifique as duas da mesma maneira.

Se quiser usar uma imagem no lugar dos links para postagens mais antigas, postagens mais recentes e inicio, é simples de fazer em vez de escrever outro texto nos lugares indicados coloque esse código:

<img border="0" src="endereço da imagem"/>

Naturalmente cuidado para utilizar o endereço correto da imagem nos links. Depois que fizer as alterações clique para visualizar o blog e se estiver tudo certo é só salvar e já está tudo pronto.

Artisteer 2.6 + Keygen Download

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 23:48:00 +0000

Artisteer - o primeiro e único produto de automação de um web design que cria instantaneamente um tipo fantástico, modelos exclusivos para MS Joomla, Drupal, Wordpress, temas para seu blog ou uma página HTML.
O design impressionante blogs WordPress, Joomla profissional! Drupal e modelos, desenhos e arrefecer Site em Minutos.

Fácil de Usar

Não há necessidade de aprender Photoshop, CSS, HTML ou outras tecnologias
Exportar como Wordpress Theme ou CMS Template

Com Artisteer VOCÊ se tornar imediatamente um perito Web design, edição e gráfica corte, codificação XHTML e CSS, e criação de Web design templates e Joomla, Drupal e Wordpress temas - todos em minutos, sem Photoshop ou Dreamweaver, e não de competências técnicas.

Categoria: Gerenciador de Sites | Web Designer

Hospedagem: MegaUpload

Sistema: Windows XP/Vista/7

Tamanho: 136 Mb

Como colocar Regras nos comentarios!

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 03:30:00 +0000

1° abra a HTML do seu template
e expanda os modelos de wigets

e Procure por

<data:postCommentMsg/>

e Logo acima insira:

<img border='0' src='http://tutorscreate-bcreate.webs.com/mages/table.png' style='margin:0 0 0 0px;'/>

salve e pronto =D

Dúvidas? comente!:

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 03:24:00 +0000

1º vc abre o seu photoshop

faz uma imagem ou pega uma(a imagem pode ter renders tudo vlw)

2º depois vc escreve um texto que vc que e da enter

3º abra mais duas camadas, a primeira camada vc da ctrl e clica na camada onde vc escreveu sigurando o ctrl e aperta ctrl + E e soute o ctrl

4º selecione a segunda camada selecione a cor branca pegue a ferramenta gradient tool escolha a opção branca transparente no meu ta na 2ºopção e passe sobre a primeira letra da palavra

5º va em window click em animation e vai aparecer uma camada dentro da ferramenta animation

click para criar uma nova camada na mesma ferramenta (animation) e deixe selecionada a segunda camada na animation vai na imagem sigure ctrl + botão direito do mouse e puxe a iluminação para a utima letra da palavra

6º vou na ferramenta animation perceba que do lado esquerdo de criar uma camada no animation tem um botão que ta cheio de bolinhas click nele e vai aparecer uma tela ai e click em (ok) e depois é so vc arrumar a velocidade e salvar em (Salve for web) e pronto

Como Redirecionar um Blog!

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 03:21:00 +0000

Neste tutorial, quero mostra a vocês , como vocês podem redirecionar um blog. EXEMPLO: Você criou um blog mais ai desistiu dele e queria fazer um novo blog, mais já que aquele blog tem uma boa quantidade de visitas diárias você deseja que quando as pessoas entrem no blog antigo, automaticamente seja redirecionado para o novo blog. Bom , VAMOS COMEÇAR

Faça login no blog que você deseja colocar o redirecionamento, ou seja, que você quer que quando as pessoas entre vá para o outro blog.

Agora vá em DESIGN>Editar HTML

E COLE ESSE CODIGO ABAIXO ACIMA DA TAG <HEADE>

CÓDIGO

Criando uma radio com player personalizado!

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 03:04:00 +0000

Primeiro Baixe:

baixe o Shout Cast:
4shared.com /file/43008987/78809ad9/SHOUTCAST_SERVER.html?s=1

depois baixe ou shout cast ou c prefirir o simple cast:
http://www.escolhagratis.com/2008/09/sam-broadcaster-422-crack-serial.html

Sam tem o cd key dele ja é so abri e coloka
Passo

1º Instale todos os programas

2º Abra o arquivo sc_server não consegue acha-lo va em meu computador, disco local ou removivel,arquivos de programas SHOUT cast e abra o arquivo!

3º Apos abrir clike em edit config e aperte ctrl + f e digite MaxUser procure o 32 coloke o numero de usuarios que irão escutar sua rádio no meu eu coloquei 50. procure tbm password=Changename coloque sua senha por exemplo:password=123456. fexe e salve e aperte kill server. para fexar e salvar as config.

4º Abra o SAM tera varias abas acima clika na desktop B,onde estiver estiver escrito encoders clik num sinal de + abrira uma janelinha para selecione o mp3PRO

6º Apos abra a aba details,essa parte é muito importante:no server type coloke shout cast, no server ip coloke seu ip caso vc tenha uma conta no no ip coloke la,server port deixe como esta 8000, password coloke akele q vc coloko no shoutcast
password=changename no meu caso colokei 123456 ,Station name vc coloka o nome de sua programação ex:O Melhor Começa aki DJ ERICK,genre deixe various, web site url deixa como esta mas se prefirir coloque http://seuip:8000
O resto deixa como está e de OK.

7º Abra o sv_server e volte no SAM desktop B, Encordes clika o botão direito no baratinho que apareceu e de start

se aparecer encode e mais uns negocio pq esta no ar sua Rádio

Para testar a sua Rádio ponha uma musica pra toca no SAM Broadcaster espere um pokim tipo uns 10 segundos.

depois abra o media player a perta ctrl + u e digitehttp://seuip:8000

não eskece de dar ok

prontu!!!!!!!!!

Agora coloke player Personalizado

Código:

PLAYER 2

Código:

PLAYER 3

Código:: <object classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="ActiveX1" width="280" height="266"> <param name="status" value=""> <param name="openState" value="6"> <param name="versionInfo" value="9.0.0.3250"> <param name="uiMode" value="mini"> <param name="stretchToFit" value="False"> <param name="isOnline" value="True"> <param name="isRemote" value="False"> <param name="playState" value="0"> <param name="windowlessVideo" value="False"> <param name="URL" value="http://SEUIP:8000"> <param name="fullScreen" value="False"> <param name="enabled" value="True"> <param name="enableContextMenu" value="True"> </object>

Creditos By: ILIICHI D!

www.tutoriais.bcreate.net

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 02:25:00 +0000

Oii, o Tutorial de Hoje vai ser Como colocar uma Frase ou um Texto ao passar o Mouse por uma imagem ou um Link.

Para colocar link na imagem é bem fácil.A sua imagem precisa estar na internet. Você pode hospedá-lo no seu próprio blog, basta clicar na ferramenta de enviar imagens ou upload de arquivos e selecionar a sua imagem ou se preferir hospede suas imagens no ImageShack ou Photobucket. Você vai prescisar da URL das imagens.

Veja um exemplo:

Para colocar essa Mensagem nas imagens ou Links, nas Postagens, nos Gadgets, no Banner é só acrescentar title="SEU_TEXTO_AQUI" para usar nas imagens e Links. Veja alguns exemplos :

Nas imagens com Link :

<br><a href="ENDEREÇO_DO_BLOG_OU_SITE_AQUI" target="_blank"><img src="ENDEREÇO_DA_IMAGEM_AQUI" border="0" title="MENSAGEM_AO_PASSAR_O_MOUSE_AQUI"></a><br>

Nos Links :

<br /><a href="ENDEREÇO_DO_BLOG_OU_SITE_AQUI"title="MENSAGEM_AO_PASSAR_O_MOUSE_AQUI" target="_blank">NOME DO LINK</a><br />

Viu como é fácil ?? Deixe um comentário dizendo o que achou do Tutorial !! ^^

Efeito nos Parceiros com HTML

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 02:12:00 +0000

O Tutorial de hoje vai ensinar e ajudar vocês a colocar efeito nos afiliados, com Borda, sombra e Destaque quando passa o mouse. Tudo com HTML, estou avisando logo...

1. Faça a imagem do Blog Afiliado (pode ser no Photo Scape, Photo Shop...) e copie a imagem, ou seja, faça outra imagem do mesmo tamanho, porque pode ser usado para outros Blogs...

Veja um exemplo :

O Tamanho da minha imagem é 180 x 40, você pode mudar o tamanho pra 50 x 50, 30 x 30, 20 x 20 ....

2. A sua imagem precisa estar na internet. Você pode hospedá-lo no seu próprio blog, basta clicar na ferramenta de enviar imagens ou upload de arquivos e selecionar a sua imagem ou se preferir hospede suas imagens no ImageShack ou Photobucket. Você vai prescisar da URL das imagens.

3. Vá em "Design" → "Elementos da página" → "HTML/JavaScript" e adicione a imagem em HTML.

<img src="URL_DA_IMAGEM" />

Para deixar as imagens alinhadas use "   " para dar espaço e " <br /> " para pular a linha .

4. Depois adicione o Link do Blog na imagem, fazendo isso:

<a href="LINK_DO_BLOG" target="_blank"><img src="URL_DA_IMAGEM" /></a>

5. Depois, para colocar a Borda noas imagens dos afiliados, veja o seguinte Tutorial ensinando como faz :http://maariihsouza.blogspot.com/2011/03/como-colocar-borda-nas-imagens.html

6. Depois para dar efeito "destaque" quando passa o mouse, adicione o seguinte código
depois de " <img " :

onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"

O Código da imagem com o link e os efeitos deverá ficar assim :

<a href="LINK_DO_BLOG" target="_blank"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>

Lembrando que class="borderimage" é o código referente á Borda que está no Tutorial !!

7. E Por último adicione title="NOME_DO_BLOG_AQUI", Depois de target="_blank". Esse código é da Mensagem que aparece quando passa o Mouse, ou seja, o Nome do Blog que aparece quando passa o Mouse.

O Código da imagem com o link e os efeitos deverá ficar assim :

<a href="LINK_DO_BLOG" target="_blank" title="NOME_DO_BLOG_AQUI"><imgonmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 0.5;"src="URL_DA_IMAGEM" class="borderimage"/></a>

Para colocar outra imagem de outro Blog afiliado com o Link, vai fazendo a mesma coisa da Primeira imagem.
Para deixar as imagens alinhadas use "   " para dar espaço e " <br /> " para pular a linha .

Tutorial: Como colocar Borda no Gadget de Seguidores

noreply@blogger.com (Tcbjhasper) — Sat, 14 May 2011 01:48:00 +0000

1. Entre no Site, http://www.google.com/friendconnect/ , faça login com a sua conta do Google, ou do Blogger.

2. Depois clique em "Adicionar o Gadget de Membros" e personalize de acordo com o seu Gosto. Depois copie o Código HTML que está em baixo da página.

3. Depois, vá em "Design" ➜ "Elementos da página" ➜ "Adicionar um Gadget" ➜ "HTML/JavaScript".

4. Nessa página que aparecer, cole o código HTML do Gadget de Membros que você copiou .

5. Veja esse exemplo:

.... style="width:240px; border: 3px dashed #F6007B; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;"></div><script .....

O que esta em Rosa e a cor da borda se quiser troque por outra cor
Depois de "width:240px; adicione o código que está em Azul !!

Lembrando que em TODOS os Blogs, os códigos diferenciam por causa do ID do Blog.
Lembrando também que você pode mudar o Tamanhoda Borda, a cor da Borda e o tipo de Borda pelo código Azul.

Slide com menu em formas de numeros

noreply@blogger.com (Tcbjhasper) — Tue, 10 May 2011 14:48:00 +0000

Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.

Bom, Vamos Começar:

Faça o Login -> Editar Html -> Procure Por ]]></b:skin>

Antes de ]]></b:skin> Cole o Código Abaixo:

/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px; /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0CXBmCWtIn5C9LJu8YOpzVMqZckyQLEXCK4rB0k113y7cSN3MO9S7TkuMF9t3I3RV9dAgSdSuDatkx1w6ZoanGEPsjTTSM1OA6JmxqN0frpx1aP0I4dQJ9qU6zhJEUZetKu-FL-YUE2ip/s0/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}

Os Numeros que Estão em Vermelho Define o Tamanho do Slide
Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.

Agora Logo depois de ]]></b:skin> Cole o Seguinte Código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

    //Set Default State of each portfolio piece
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging + Slider Function
    rotate = function(){
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );

    };

    //Rotation + Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
            $active = $('.paging a.active').next();
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (3 seconds)
    };

    rotateSwitch(); //Run function on launch

    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation
    });

    //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });

});</script>

Agora Procure Por <div id='content-wrapper'>
E cole o próximo código abaixo dele, fazendo as modificações necessárias.

<div id='slide'>
<div class='folio_block'>

<div class='main_view'>
<div class='window'>
<div class='image_reel'>

<a href='AQUI O ENDEREÇO DO LINK 1'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 1' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 2'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 2' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 3'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 3' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 4'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 4' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 5'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 5' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 6'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 6' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 7'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 7'/></a>
<a href='AQUI O ENDEREÇO DO LINK 8'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 8' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 9'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 9' heigth="300px" /></a>
<a href='AQUI O ENDEREÇO DO LINK 10'><img width="980px" src='AQUI O ENDEREÇO DA IMAGEM 10' heigth="300px" /></a>

</div></div>
<div class='paging'>
<a href='#' rel='1'>1</a>
<a href='#' rel='2'>2</a>
<a href='#' rel='3'>3</a>
<a href='#' rel='4'>4</a>
<a href='#' rel='5'>5</a>
<a href='#' rel='6'>6</a>
<a href='#' rel='7'>7</a>
<a href='#' rel='8'>8</a>
<a href='#' rel='9'>9</a>
<a href='#' rel='10'>10</a>
</div>
</div>

</div></div>

Os Números em Vermelho São o Tamanho Das Imagens.

Você Também Pode Adicionar o último código no gadget "Html/Javascript".

Vlw Galera e Até a Próxima.

Passarinho do Twitter voando

noreply@blogger.com (Tcbjhasper) — Tue, 10 May 2011 14:36:00 +0000

Vamos Começar :

Tem 2 Jeitos de Se Fazer isto .

1 - va em Design clique em adicionar gadgets e coloqueHTML e JAVASCRIPTS

coloque o codigo abaixo:

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script> <br /> <script type="text/javascript"> var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'http://twitter.com/COLOCANDO SEU NOME DO TWITTER'; var twitterThisText =''; tripleflapInit(); </script><br /> <br /> <br /> <br />

Aonde esta escrito http://twitter.com/Colocando Seu Nome do twitter coloque seu twitter .

Vamos Para o segundo Metodo :

va em HTML procure por (/head) e coloque esse codigo antes dele .
enves de colocar () coloque <>

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script> <br /> <script type="text/javascript"> var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png'; var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span'); var twitterAccount = 'http://twitter.com/COLOCANDO SEU NOME DO TWITTER'; var twitterThisText =''; tripleflapInit(); </script><br /> <br /> <br /> <br />

Aonde esta escrito http://twitter.com/Colocando Seu Nome do twitter coloque seu twitter .

Criar barra de ferramentas

noreply@blogger.com (Tcbjhasper) — Mon, 09 May 2011 23:17:00 +0000

Vamos criar uma barra de ferramentas para o blog, deste tipo que as pessoas instalam no navegador (Internet Explorer, Firefox, Chrome e outros), você pode colocar diversos acessórios na sua barra inclusive as últimas atualizações do seu blog, esta é uma boa maneira de conseguir mais divulgação e visitas para seu blog.

Para fazer isso utilizamos o Conduit, depois de fazer um cadastro simples então irá para a tela onde vai criar a barra de ferramentas para o seu blog, lá encontrará coisas básicas como colocar o seu logotipo na barra (basic components, your logo) e muitas outras funções é um site relativamente simples de utilizar.

Note na imagem acima que no topo da pagina tem Your toolbar's download page esse é o endereço para download da sua barra de ferramentas, então crie um link para essa pagina e coloque no seu blog, este link pode ser de texto ou imagem o jeito que você achar melhor para divulgar sua barra de ferramentas e claro seu blog junto com ela, veja o exemplo com o link da barra de ferramentas Dicas para Blogs:

<a href="http://DicasparaBlogs.OurToolbar.com/" target="_blank">Instale nossa Barra de Ferramentas</a>

<a href="http://DicasparaBlogs.OurToolbar.com/" target="_blank"><img src="endereço da imagem" border="0" /></a>

Naturalmente se quiser poderá editar sua barra quantas vezes desejar e a pagina de instalação se atualiza automaticamente. Agora que já está tudo pronto você ainda pode acompanhar as estatísticas da sua barra de ferramentas, ou seja, saber quantas pessoas baixaram, estão utilizando a barra, note que no menu principal do site Conduit tem a opções analytics, como o próprio nome sugere são as estatísticas da barra de ferramentas.

Como Colocar Favicon no Blogger

noreply@blogger.com (Tcbjhasper) — Mon, 09 May 2011 13:55:00 +0000

1- Proucure Por: ]]><*/b:skin>

E cole o Codigo Abaixo :

<*link href='Link da Imagem' rel='icon' type='image/x-icon'/>
<*link href='Link Da imagem' rel='shortcut icon' type='image/x-icon'/>

Obs: Não esqueça de tirar os "*"

Pronto! Qualquer Duvida Comentem!

Colocar Aviso de Blog em Manutenção

noreply@blogger.com (Tcbjhasper) — Mon, 09 May 2011 13:16:00 +0000

Muitos blogueiros perguntam sobre como colocar um aviso de blog em manutenção, isso é algo bem simples de fazer, você só precisa colocar algumas linhas de código nos lugares certos na pagina editar HTML e pronto. Claro que além deste código seria possível fazer uma postagem com o aviso de manutenção do site ou mesmo adicionar um gadget no inicio da pagina do seu blog.
Mas vamos explicar como deixar somente um texto ou imagem no seu blog dizendo que está em manutenção. Entre na pagina editar HTML e procure por <body.....> aqui pode variar um pouco o que aparece mas o importante é achar <body e logo após essa linha coloque esse código:

<div style='text-align: center;'>sua mensagem</div>
<div style='display:none'>

Agora procure por </body> e antes dele coloque </div>, então ficará deste jeito:

</div>
</body>

Quando quiser retirar essa mensagem de blog em manutenção só precisa apagar esses códigos, portanto preste atenção na hora de colocar para não ter dificuldades na hora de voltar seu blog ao normal.

Caso queira editar seu template será necessário retirar esses códigos para poder visualizar seu blog.

Estamos publicando isso devido a diversos pedidos de nossos visitantes, mas achamos que fazer uma postagem ou colocar uma imagem no inicio do blog são melhores maneiras do que esta para avisar que o blog passará algum tempo sem atualizações ou está em reforma.

Colocando Botão Para Seguir o Blog

noreply@blogger.com (Tcbjhasper) — Mon, 09 May 2011 01:18:00 +0000

De um Ctrl + F e procure por :

logo abeixo cole :

Clique aqui para ver o codigo

troque os numeros pelo ID do seu blog , pronto depois disso salve!

pra quem nao sabe o ID do seu blog , ai vai a dica :

1° - Primeiro, faça login no Blogger.
2° - Então escolha o blog que você quer encontrar ID , e click em Design , depois disso é so olhar na sua barra de endereço .

vai estar assim :

http://www.blogger.com/rearrange?blogID=2536010886627191920

pegue o ID e substitua :D

Aprendi isso na LoL Create

Colocar SubMenu no blog!

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 22:21:00 +0000

Colocar um submenu no blog é um pouco mais complicado que um menu normal. Para não deixar duvidas um submenu é quando você passa o mouse pelo menu e sobre algum item aparecem mais opções, por exemplo, um menu de um blog de downloads tem musica, jogos, filmes, games e outros itens, quando você coloca o mouse sobre o item filmes aparece um novo menu ao lado com os itens suspense, terror, comédia, adulto...
Agora que já explicamos como funciona o submenu vamos começar a dizer como colocar um no seu blog. Entre na pagina layout, adicionar gadget, html/javascript e coloque o código abaixo, por ser um código grande pode haver algum problema com o código em copiar e colar direito do blog, então temos aqui o mesmo código pronto para download.

<style type="text/css">

</style>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="link do Item 1.1">Item 1.1</a></li>
<li><a href="link do Item 1.2">Item 1.2</a></li>
<li><a href="link do Item 1.3">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a href="link do Item 3.1">Item 3.1</a> </li>
<li><a href="link do Item 3.2">Item 3.2</a></li>
<li><a href="link do Item 3.3">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<p>
<script src="http://acessoriosparablogs.com.br/scripts/submenu.js" type="text/javascript"></script>
<script type="text/javascript">

</script>

Vamos falar sobre o item 1, isso é o texto que vai aparecer no seu blog, o link dele é daquele jeito mesmo só um sinal de jogo da velha, os subitens é só trocar onde está Item 1.1 pelo titulo que desejar e colocar a url no lugar indicado na mesma linha, e assim por diante em todos os outros links.

Você deve colocar esse código onde aparecerá o menu horizontal com submenu, lembre-se que se o espaço (largura) do seu blog não for suficiente para o menu completo um ou mais itens vão para linha debaixo, portanto é preciso ter cuidado com o numero de itens e a largura do botão para alterar a largura de cada botão mude o valor 150px, veja no código ele aparece 4 vezes width: 150px; você deve mudar esse numero em todos, ou seja, se colocar 130px tem que alterar nos 4 lugares que aparece o 150.

Para mudar as cores, letras, fundo e tudo mais dos botões é nesta parte do código:

ul.MenuBarHorizontal a
{background-color: #6633FF;
border-top: 1px solid #FFFFFF;
color: #FFFFFF;
border-right: 1px solid #0000CC;
border-bottom: 1px solid #0000CC;
border-left: 1px solid #FFFFFF;
font-size: 120%;
text-decoration: none;
padding-top: 5px;
padding-bottom: 4px;
width: 150px;
display: block;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

E o estilo quando o mouse está sobre ele é aqui:

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{background-color: #FFCC99;background-image: url(http://img16.imageshack.us/img16/122/overc.gif);
color: #000000;letter-spacing: normal;word-spacing: normal;border-top: 1px solid #FFFF00;
border-right: 1px solid #CC0000;
border-bottom: 1px solid #CC0000;
border-left: 1px solid #FFFF00;
}

Veja aqui uma demostração do menu com sub menu. Para fazer modificações nos botões é como se fosse qualquer outra coisa feita em CSS, então veja nossas dicas sobre:

Mudar a cor de fundo com um clique

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 22:15:00 +0000

Um efeito interessante é permitir que o visitante do blog escolha a cor de fundo da pagina apenas clicando na cor que mais gosta, dependendo do publico do seu blog essa é uma boa maneira para despertar a curiosidade das pessoas sobre o blog e o melhor de tudo o código para fazer isso é muito simples e fácil de usar.

Entre na pagina layout, adicionar gadget, html/javascript e coloque esse código:

<a href="#" onclick="document.bgColor='#0000ff'">Azul</a><br />
<a href="#" onclick="document.bgColor='#FFFF00'">Amarelo</a><br />
<a href="#" onclick="document.bgColor='#000000'">Preto</a><br />

Veja que as três linhas são basicamente iguais, portanto para usar outras cores ou dar mais opções só precisa alterar o texto com o nome da cor e o código da cor de fundo, no caso da primeira linha #0000ff e azul, cuidado para não apagar as aspas nem outros sinais do código senão ele não funcionará.

Outra coisa que você precisa alterar é na pagina editar html, procure por: body{....} se dentro das chaves do body tiver algo definindo a cor de fundo você precisará apagar senão o código para mudar a cor de fundo não funcionará, veja se tem background-color ou background-image: url(......) e se encontrar apague.

Infelizmente para usar esse efeito no seu blog ele sempre aparecerá com o fundo branco, pois se definir outra cor de fundo não conseguirá fazer o código que indicamos funcionar e alterar a cor da pagina.

Você também poderá fazer isso com imagens usando o código abaixo:

<a href="#" onclick="document.body.background='imagem 1'"><img src="imagem 1" border="0" /></a><br />

<a href="#" onclick="document.body.background='imagem 2'"><img src="imagem 2" border="0" /></a><br />

<a href="#" onclick="document.body.background='imagem 3'"><img src="imagem 3" border="0" /></a><br />

Se preferir salve uma miniatura da imagem para usar como link para troca de imagem de fundo, isso é util dependendo do tamanho da imagem de fundo original que for utilizar no seu blog.

Pré-visualização da imagem com JQuery

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 22:02:00 +0000

Hoje veremos como incluir um efeito diferente nas imagens dos posts.
Trata-se de um efeito de pré-visualização em movimento das imagens dos posts, que funciona a base de um script desenvolvido por Alen Grakalic, autor do site CSS Globe em conjunto com o JQuery.
Com base no efeito que o script gera, eu fiz uma adaptação na chamada do código HTML e acrescentei um pouco de CSS para ter um melhor funcionamento no Blogger.
Neste efeito, quando passamos o mouse em cima de cada imagem miniatura, o script faz com que se abra uma "pop up" para visualização da imagem em tamanho maior.

Demo

Para conseguir este efeito, é necessário a incorporação de javascript à base da biblioteca JQuery e inserção de códigos CSS em seu template.

Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.

1. Instalar o arquivo Javascript

Este script funciona em conjunto com a biblioteca do JQuery na versão 1.4.2, caso você já tenha esta biblioteca instalada em seu blog, não será necessário repetir a chamada dela( linha destacada na cor azul no código)

Vá na aba "design" em "Editar HTML" e procure pela tag </head>
E cole logo ACIMA dela o código a seguir:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
this.imagePreview = function(){ 
 /* CONFIG */
  
  xOffset = 200;  // distancia do topo //
  yOffset = 30;   // distancia a esquerda //
  
  // estas duas variáveis determinam a distância popup a partir do cursor
  // se precisar ajuste para obter o resultado correto
  
 /* END CONFIG */
 $("a.preview").hover(function(e){
  this.t = this.title;
  this.title = ""; 
  var c = (this.t != "") ? "<br/>" + this.t : "";
  $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");        
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px")
   .fadeIn("fast");      
   },
 function(){
  this.title = this.t; 
  $("#preview").remove();
   }); 
 $("a.preview").mousemove(function(e){
  $("#preview")
   .css("top",(e.pageY - xOffset) + "px")
   .css("left",(e.pageX + yOffset) + "px");
 });   
};



$(document).ready(function(){
 imagePreview();
});
//]]>
</script>

2. Aplicar estilos CSS

Vá na aba "design", entre na edição HTML do seu template, não precisa clicar em "expandir modelos de widgets" e procure pela tag ]]></b:skin>
e cole o seguinte código logo ACIMA dela:


ul#imagepreview{
margin:0;
padding:0;
}
ul#imagepreview li {
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
#preview{
position:absolute;
border:1px solid #ccc;  /*---Edite cor da borda---*/
background:#000;   /*---Edite cor de fundo---*/
padding:5px;
display:none;
color:#fff;   /*---Edite cor da fonte---*/
}

Obs: Todos os trechos editáveis já estão identificados e destacados no código.

3. Ativar o efeito nas imagens

Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem que vai utilizar, em algum servidor de imagem qualquer, como o Picasa Web, por exemplo.
Lembrando que o código a seguir deve ser inserido dentro da postagem a ser publicada, através da aba "editar html" no próprio editor de postagens do Blogger.
Para chamar o efeito em imagens utilize o seguinte código, e cole o endereço da sua imagem nos locais indicados:


<ul id="imagepreview">
<li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li>  <li><a href="URL-DA-IMAGEM-QUE-DEVE-APARECER-NO-POPUP" class="preview"><img src="URL-DA-IMAGEM-MINIATURA" width="200" height="200" alt="" /></a></li> 
</ul>

No código acima, as partes destacadas em vermelho correspondem a largura e altura da imagem miniatura do post. Se preferir, você pode ajustar esses valores.

DICA
Procure evitar a utilização de imagens grandes demais, pois quanto maior for a 1ª imagem (a que aparece no pop up), quando o mouse passar em cima dela, mais próxima ela ficará do rodapé da tela no monitor. Isto porque a imagem do pop upa se movimenta. Se usar imagens enormes, pode acabar deixando a imagem "cortada" na parte inferior conforme haja rolagem na tela. Depois não adianta voltar aqui e reclamar que a sua imagem ficou cortada, cappicce?

Caso queira mais imagens com esse efeito, apenas repita o procedimento quantas vezes for necessário.

Bitw.in uma ferramenta essencial para blogueiros

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 21:55:00 +0000

Para quem ainda não conhece, o Bitw.in, é um site , que vai além de ser um simples encurtador de urls, pois é repleto de recursos e ferramentas.
O site é totalmente em português e foi criado pelos metablogueiros: Paulo Estevão, do Códigos blog e o Fernando Jorge, do Blogueiros na Web.
Todos nós, blogueiros e usuários do Twitter, sabemos que atualmente, os encurtadores de urls se tornaram uma necessidade, principalmente para aqueles que gostam de enviar/divulgar seu conteúdo no twitter.
Pensando nisso, surgiu o Bitw.in uma excelente e completa ferramenta, essencial para blogueiros.

Dentre alguns recursos oferecidos pelo Bitw.in, contamos com :
» Estatísticas de tweets mais Clicados, mais Retuitados e mais Recentes
» Número de Visitantes Únicos
» Número de Pageviews
» Quantidade de Visitas por Cidade e Idioma
» Detecta Navegadores e ainda Sistema Operacional
» BookMarklet Bitw.in
» Bitw.in Domínios
» Bitw.in Sorteios

Quer mais?

Bitw.in encurtador de url

Para encurtar uma url através do Bitw.in, é muito fácil, basta colar um link (URL) no local indicado e clicar no botão "encurtar URL". Depois é só copiar a url encurtada e colar no seu tweet.

Se você é usuário do TweetDeck, veja como integrar o Bitw.in no TweetDeck
Se você utiliza o serviço do TwitterFeed, veja como integrar o Bitw.in no TwitterFeed

Bitw.in Domínios

Com o crescimento e o sucesso do Bitw.in, nasceu recentemente mais um novo projeto: o Bitw.in Domínios.
Trata-se de um sistema simples que permite que você crie um encurtador de urls completamente personalizado para o seu blog.
É uma excelente ferramenta, pois com este sistema o seu blog passará a ter um domínio personalizado exclusivamente para as sua urls encurtadas e com todos os recursos que o Bitw.in oferece.
O bitw.in Domínios, é um plano pago, e o contratar o serviço, você pode ter um encurtador de URLs com endereço personalizado ligado exclusivamente ao seu blog.
Além disso, o Bitw.in Dominios disponibiliza várias opções para que você possa ter total controle sobre o seu domínio, podendo, por exemplo, usá-lo para encurtar somente as URLs do seu Blog ou para que somente você possa encurtar URL neles.
Por até R$20 por mês, você pode usar a estrutura personalizada do Bitw.in e ter total controle sob quem usa o seu próprio encurtador.
Mais informações sobre o serviço, acesse o Bitw.in Domínios e clique em Contratar!

Bitw.in Sorteios

Outro serviço que o site oferece é o Bitw.in Sorteios.
Com ele você poderá realizar sorteios no twitter e no Google Buzz, e lhe permite total controle sobre quem pode participar do seu Sorteio de forma simples e prática.
O serviço conta com resultados aleatórios, utilizando-se do random.org para escolha dos contemplados e gera uma página segura contendo o resultado do sorteio para posterior divulgação dos sorteados.
Para realizar um sorteio no Bitw.in Sorteios, basta se cadastrar gratuitamente no endereço: Bitw.in/login .
Em seguida, basta clicar no Botão "Criar Sorteio".
Depois defina as opções para o seu sorteio como:
- titulo para o seu sorteio
- quantidade de sorteados
- ações de participação dos usuários (o que cada participante deve fazer para poder participar do seu sorteio)
Entre estas opções você também pode: agendar um sorteio, ignorar determinados usuários do sorteio etc.

BookMarklet Bitw.in

O Bookmarlet bitw.in permite a criação de Links encurtados sem a necessidade de sair de Página,através da Opção "Favoritos do seu Navegador".
Quando adicionado o código do BookMarklet aos seus Favoritos, em poucos minutos você visualizará o link encurtado da página que você está visualizando, de maneira prática e rápida.

Trio Slide - Mini Galeria em Destaque

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 21:49:00 +0000

Hoje veremos um modelo de slide, que, apesar de simples ele tem um efeito bem legal.
Eu digo "simples" porque este modelo de slide não comporta a inclusão de muitas imagens. Ele serve para dar destaques apenas a algumas postagens.

Veja DEMO nos links abaixo:
Demo - Designer de Modelo
Demo - Template Minima

Só para lembrar, sempre é bom que você faça um Backup do seu templateantes de prosseguir com qualquer instalação para evitar transtornos, caso algo saia errado.

1º passo - Baixar, hospedar e Instalar o arquivo Javascript

Faça download deste arquivo
Hospede o arquivo em seu próprio site de hospedagem.
- Veja relação com opções de Sites para hospedagem de arquivos.
(Eu recomendo o webs.com )

Agora vá na aba "Design" >> "Editar HTML" e procure pela tag </head>
E cole logo ACIMA dela o código a seguir, acrescentando a URL do seu arquivo js já hospedado:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='url do arquivo-jquery_cyrcle_plugin' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
 jQuery(function(){
  var $featured_area = jQuery('#featured-area');
  var $featured_item = jQuery('#featured-area div#slider-control div.featitem');
  var $slider_control = jQuery('#featured-area div#slider-control');
  var $image_container = jQuery('div#s1 > div');
  var ordernum;
  var pause_scroll = false;
   
  $featured_item.find('img').fadeTo("fast", 0.7);
  $slider_control.find("div.featitem.active img").fadeTo("fast", 1);
  $image_container.css("background-color","#000000");
  
  $image_container.hover(
   function () {
    jQuery(this).find("img").fadeTo("fast", 0.7);
   },
   function () {
    jQuery(this).find("img").fadeTo("fast", 1);
   }
  );
  
  function gonext(this_element){
   $slider_control.find("div.featitem.active img").fadeTo("fast", 0.7);
   $slider_control.find("div.featitem.active").removeClass('active');
   this_element.addClass('active');
   $slider_control.find("div.featitem.active img").fadeTo("fast", 1);
   ordernum = this_element.find("span.order").html();
   jQuery('#s1').cycle(ordernum - 1);
  }
  
  $featured_item.click(function() {
   clearInterval(interval);
   gonext(jQuery(this));
   return false;
  });
  
  var auto_number;
  var interval;
  
  $featured_item.bind('autonext', function autonext(){
   if (!(pause_scroll)) gonext(jQuery(this));
   return false;
  });


  interval = setInterval(function () {
   auto_number = $slider_control.find("div.featitem.active span.order").html();
   if (auto_number == $featured_item.length) auto_number = 0;
   $featured_item.eq(auto_number).trigger('autonext');
  }, 5000);

 });
//]]> 
</script>


<script type='text/javascript'>
jQuery(function(){
 jQuery(&#39;#s1&#39;).cycle({
  timeout: 0,
  speed: 1000,
  fx: &#39;fade&#39;
 });

});
</script>

Salve as modificações!

2º passo - Aplicar estilos ao Slide

Agora volte em "Design >> Editar HTML" e procure pela tag ]]></b:skin>
e cole ANTES dela:


/*-----------------Trio Destaque Slide--------------*/

/* container geral do slide */
#gallery {
width:616px;   /* largura do container */
height:320px;    /* altura do container */
margin:0 0 20px 0;
float:left;
display:inline;
}

/* area do slide */
#featured-area {
height: 300px;   /* altura deve ser um pouco menor que o container geral */
position: relative;
padding: 11px 0px 10px 0px; /* distancia entre coluna maior com a coluna menor */
z-index: 1;
width:616px;  /* largura deve ser a mesma que o container geral */
}
/* area da imagem do slide */
#featured-area .pics {
position: absolute;
width: 490px;   /* largura da imagem */
height: 294px;    /* altura da imagem */
top: 11px;
left: 14px;
}
/* area dos titulos e descrição do slide */
#featured-area .pics div.excerpt {
background: #fff;  /* cor de fundo da faixa onde fica titulo e descrição */
bottom:0;
left:0;
padding:0px 0 0 10px;
position:absolute;
width:480px;  /* largura da area onde ficam os titulos e descrição do slide */
z-index:2;
opacity:0.8;
filter:alpha(opacity=80);
.width: 100%; /* IE */
}
/* area do texto da descrição */
#featured-area .pics div.excerpt p {
color: #203136;  /* cor do texto */
width:450px;  /* largura do container do titulo e texto da descrição */
}
/* area do link dos titulos */
#featured-area .pics div.excerpt a {
font-size:18px;  /* tamanho da fonte do titulo */
color: #000;   /* cor do link do titulo */
font-weight:bold;  /* link em negrito */

}
#featured-area .pics div.excerpt a:hover {
color: #ddd;   /* cor do link do titulo no estado hover */
text-decoration:none;
}
.excerpt-text {
display:inline;
float:left;
font-size:10px;  /* fonte do texto da descrição */
width:450px;  /* largura do container do texto da descrição */
padding:0px 0 10px 0;
}
  
#featured-area .pics span.feat-overlay {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 490px;   /* deve ter a mesma largura da imagem do slide */
height:294px;   /* deve ter a mesma altura da imagem do slide */
z-index: 1;
}

/* container geral onde ficam as miniaturas */
#featured-area div#slider-control {
position: absolute;
width: 110px;   /* largura */
height: 296px;   /* altura */
border: 1px solid #b4b4b4;
z-index: 4;
top: 11px;
right: 1px;
}
/* area de cada bloco de miniatura */
#featured-area div#slider-control div.featitem {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_S0dHG2pKGsxAnGhr3y49-48TXTIGMGrzXGFuummWjasuF2JWuODgHLKLOnHJuKljcsijP40Oea7uWJGTnMlLKNBcn_-oa9r5O82nc43-sSSfWlOo7BmxA4ysXanABsD_nvLxeiqNMfI/s0/featitem-bg.png) no-repeat top left;  /* imagem de fundo de cada item da coluna */
height: 77px;   /* altura */
float: left;
width: 76px;   /* largura */
padding: 10px 16px 12px 18px;
cursor: pointer;
}
/* imagem minitura */
#featured-area div#slider-control div.featitem img {
float: left;
margin-right: 18px;
border: 1px solid #f6f6f6;    /* edite borda */
margin-top: 5px;
width:67px;   /* largura da imagem miniatura */
height:67px;   /* altura da imagem miniatura */
}

/* item da minitura ativa */
#featured-area div#slider-control div.featitem.active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXYm15X5I8BEFWbnHUJ5WlF9DeceOUss39BX8zM9vUdt2OAUMBwnzY2fqR6t8fI8e5JusemLvCHWIBvM7dNKWt2O7pr30HiWya1GrdCjR2sciA2kruFyRPrMxR1MQEB5HZM62Vuc75_Oo/s0/featitem-bg-active.png) no-repeat top left;
margin-left: -20px;
padding-left: 38px;
}
#featured-area div#slider-control div.featitem.active h2 {
display:none;
}
#featured-area div#slider-control div.featitem.active span.meta {
border: 0px;
}
#featured-area div#slider-control div.featitem span.order {
display: none;
}
#featured-area div#slider-control div.featitem span.meta {
display:none;
}

Este slide foi projetado com uma largura de 616px e 320px de altura e comporta apenas 3 imagens para destaque.
Eu recomendo que você não faça alterações nestas medidas, a menos que você tenha um máximo conhecimento em CSS, porque se você modifica-las terá que editar completamente o código todo.
De qualquer forma, para ajudar na edição e personalização do slide, eu destaquei no código CSS o que cada trecho representa, basta prestar bastante atenção aos comentários destacados no código.
As imagens do slide possuem um tamanho máximo de 490x294. Escolha ou crie imagens neste tamanho.
Caso opte por modificar o tamanho das imagens, lembre-se que você mesmo(a) deverá editar o código todo, ok?

3º passo - Adicionar o código html do slide

Agora você deve escolher onde quer posicionar o slide.
Eu recomendo instalar o slide acima da coluna de postagem. Preste bastante atenção neste item, pois o trecho que você deverá localizar depende do modelo de template que você está usando.
Vou informar as tags referentes aos template Designer de Modelo etemplates minimas, que são padrões do blogger.

1. Designer de Modelo - Se estiver usando um template Designer de Modelo:
Volte na aba "Design >> Editar HTML" , não precisa marcar a caixinha "expandir modelo de widget".
Localize a tag:


<div class='main-outer'>

2. Template Minima - Se estiver usando uns dos modelos de template minima:
Volte na aba "Design >> Editar HTML" , não precisa marcar a caixinha "expandir modelo de widget".
Localize a tag:


<div id='main-wrapper'>

Após localizar uma das tags acima (dependendo do modelo que você estiver usando)
logo ACIMA dela cole o seguinte código:


<div id='gallery'>

<div id='featured-area'>
<div class='pics' id='s1'>

<!-- PRIMEIRO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-1' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 1</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 1 aqui.Coloque uma pequena descrição do slide 1 aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- PRIMEIRO SLIDE FIM -->

<!-- SEGUNDO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-2' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 2</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 2 aqui. Coloque uma pequena descrição do slide 2 aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- SEGUNDO SLIDE FIM -->


<!-- TERCEIRO SLIDE INICIO -->
<div>
<img src='URL-DA-IMAGEM-3' style='width: 490px; height: 294px;'/>
<div class='excerpt'>
<p><a href='SEU LINK AQUI'>Titulo do Slide 3</a></p>
<p class='excerpt-text'>Coloque uma pequena descrição do slide 3 aqui. Coloque uma pequena descrição do slide3  aqui...</p>
</div>
<a href='SEU LINK AQUI'><span class='feat-overlay'/></a>
</div>
<!-- TERCEIRO SLIDE FIM -->

</div>

<div id='slider-control'>

<!-- IMAGEM MINIATURA 1 -->
<div class='featitem active'>
<img src='URL-DA-IMAGEM-MINIATURA-1' style='width: 67px; height: 67px;'/>
<span class='order'>1</span></div>

<!-- IMAGEM MINIATURA 2 -->
<div class='featitem '>
<img src='URL-DA-IMAGEM-MINIATURA-2' style='width: 67px; height: 67px;'/>
<span class='order'>2</span></div>

<!-- IMAGEM MINIATURA 3 -->
<div class='featitem '>
<img src='URL-DA-IMAGEM-MINIATURA-3' style='width: 67px; height: 67px;'/>
<span class='order'>3</span></div>


</div><!-- end slider-control div -->
<div class='clear'/>
</div><!-- end featured area -->
</div><!-- end gallery -->

Informações adicionais:
Caso você utilize um modelo diferente/modificado, e no seu html não existir nenhuma destas tags informadas acima, lamento, mas, só posso sugerir que você teste sozinho(a) o melhor local para instalar o seu slide.
E lembre-se: conforme eu citei no inicio, este slide está projetado para apresentar apenas 3 imagens em destaque, caso você queira incluir mais itens, deverá editar você mesmo(a) o código todo, tanto no CSS, quanto no código html. No CSS deverá alterar a altura e no html deverá incluir mais códigos referentes a imagem maior do slide e a imagem miniatura. Se optar por editar, faça somente se você tiver um maior conhecimento em códigos html e css. Boa sorte!

ATENÇÃO:

O slide funciona a base de arquivo javascript da biblioteca JQuery e sua funcionalidade pode variar de acordo com o template. Templates que possuem muitos scripts, acabam gerando "conflitos" entre si. Caso este script não funcione em seu blog, faça uma avaliação de quais realmente são mais necessários. Para melhor entendimento, leia este artigo: Por que alguns scripts não funcionam no meu blog.

Hack "Leia Mais" Resumo de Postagem Automático com imagens na Página Inicial

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 20:45:00 +0000

A maioria dos blog aparecem somente um resumo da postagem na página inicial, onde no final aparece escrito "Leia Mais", ou "Continue Lendo", e quando clicamos aparece a postagem completa.Eu uso aqui no meu blog,e particularmente acho que dá uma estética melhor á pagina inicial, evitando que a home fica extensa demais, o que causa, muitas vezes, um certo desconforto na busca dos conteúdos em certas páginas.

Hoje vou ensinar como incluir este 'hack' no seu blog.
Com estes recurso suas postagens se resumirão automaticamente na sua página inicial. A cada postagem, irá aparecer um breve resumo do conteúdo da postagem, juntamente com uma miniatura da imagem utilizada no post.

Antes de tudo faça um backup do seu Template para evitar transtornos, se algo sair errado.

ATUALIZAÇÕES:

1) Muitos leitores relataram dificuldades em hospedar o script para Hack "Leia Mais" em um servidor externo ao Blogger.
Para evitar problemas na dependência com algum servidor externo, é preferível que instale o script diretamente no template, razão pela qual este artigo foi atualizado, com a disponibilização do script na integra para instalçao diretamente no HTML do template.

2) Atualizei o código do 2º passo, tendo em vista a implementação de Páginas Estáticas no blogger. No código a seguir, o hack "Leia Mais" não se aplicará nas Páginas Estáticas, as postagens só aparecerão resumidas na página inicial,marcadores e arquivos.

1º passo - incluir o script no template:

Entre na aba 'design' → 'editar html'(não precisa clicar em 'expandir modelo de widget') e procure pela tag </head> e cole esse código abaixo ANTES dessa tag:


<!-- JavaScript Resumo do Post -->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 450;
summary_img = 400;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{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);} }
strx =  s.join(""); }
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...'; }
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_mode == "float") {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
} else {
imgtag = '<div style="padding:5px" align="center"><img style="max-width:'+img_thumb_width+'px; max-height:'+img_thumb_height+'px;" src="'+img[0].src+'" /></div>';
summ = summary_img;
}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;}
//]]>
</script>
<!-- JavaScript Resumo do Post - Fim-->

Caso tenha dificuldades em copiar o código acima, copie o conteúdo deste arquivo.txt e cole-o ANTES da tag </head>.

Como este script mostra uma miniatura da imagem do post junto com o resumo do texto, você pode personalizar a quantidade de caracteres que aparecerão no resumo e o tamanho da miniatura da imagem do post, desta forma:
Em summary_noimg → é aqui que você vai indicar a quantidade de caracteres para os resumos se o texto não contiver imagem.
summary_img → Indique o número de caracteres do resumo para o texto que contiver imagens.

É neste trecho que você vai definir o tamanho que você quer que as imagens do resume tenham:
img_thumb_height → Indique a altura da imagem
img_thumb_width → Indique a largura da imagem

Visualize e Salve!
Agora vamos a 2ª etapa.

2º passo - edição no html:

Volte á aba 'design' → 'Editar html', clique em 'expandir modelos de widgets' e procure por:


<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Apague tudo e substitua por:


<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span id='showlink'><a expr:href='data:post.url'>Leia Mais &#9658;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

A palavra "Leia Mais" se refere ao texto do link que aparecerá no post, na sua página inicial, é onde o leitor ao clicar,e direcionado à página do post completo. É neste espaço que você coloca o texto que preferir (Ex.Continue Lendo,Ler Todo Artigo, Leia Mais, Ver Conteudo etc).

Você pode também personalizar o link "leia mais", de diversas maneiras,substituindo o texto por uma imagem, ou acrescentar uma imagem ao texto do link, com uma seta, por exemplo.
veja como logo abaixo:

3º passo - Personalizando o Link 'Leia Mais':

Para substituir o texto por uma imagem, procure por este trecho:


<span id='showlink'><a expr:href='data:post.url'>Leia Mais ►

E substitua o texto 'Leia Mais' por:


<span id='showlink'><a expr:href='data:post.url'>
<img src="URL-DA-SUA-IMAGEM" />

Para incluir uma imagem ao texto 'Leia Mais', acrescente logo em seguida a ele:


<img src='ENDEREÇO-DA-SUA-IMAGEM'/>

4º passo - aplicar estilos CSS:

Se você quiser, poderá também personalizar estilos para o link 'Leia Mais', para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :


#showlink {
font-size: 11px; /* escolha o tamanho da fonte para o link */
float: right; /* escolha se quer link flutuando à esquerda ou direita */
margin-right: 30px; /* aplique margens para posicionar link */
margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */
font-weight: bold;
}

#showlink a {
color: #ffffff;  /* escolha a cor de seu link */
}

#showlink a:visited {
color: #cccccc;  /* escolha a cor de seu link quando visitado */
}

#showlink a:hover {
color: #000000;  /* escolha a cor de seu link quando passa o mouse em cima */
}

Confira o artigo:Criando estilos para o Hack 'Leia Mais' de postagem resumida e veja como aplicar estilos para os resumos e como personalizar os posts apenas na página inicial.

ATENÇÃO:Se você possui dominio próprio, infelizmente, arquivos js hospedados no Google Sites NÃO funcionam em blogs com domínio próprio.
Para que o script funcione corretamente, você deverá colar o código na íntegra no seu html.

Criando estilos para o Hack "Leia Mais" de postagem resumida

noreply@blogger.com (Tcbjhasper) — Sun, 08 May 2011 20:45:00 +0000

No outro artigo, você já aprendeu a instalar o hack para incluir no seu blog Postagens Resumidas automática na página inicial (onde aparece somente um resumo da postagem, juntamente com a imagem do post e no final escrito "Leia Mais".
Agora vou ensinar como definir estilos para os resumos e como personalizar os posts apenas na página inicial, onde as postagens aparecem resumidamente apenas na página inicial e nas páginas internas aparecem completa(igual o que eu uso aqui no Mundo Blogger).

Você já deve ter instalado o hack "Leia Mais" de Resumo Automático, para poder dar estilo aos posts, seguindo este tutorial.

Aplicar Estilo CSS

Se você quiser, poderá também personalizar estilos para o link 'Leia Mais', para isto, basta incluir o seguinte código logo ACIMA da tag ]]></b:skin> :

#showlink {font-size: 11px; /* escolha o tamanho da fonte para o link */float: right; /* escolha se quer link flutuando à esquerda ou direita */margin-right: 30px; /* aplique margens para posicionar link */margin-top: -8px; /*a margem negativa para o topo aproxima o link do texto do post */font-weight: bold;}
#showlink a {color: #ffffff; /* escolha a cor de seu link */}
#showlink a:visited {color: #cccccc; /* escolha a cor de seu link quando visitado */}
#showlink a:hover {color: #000000; /* escolha a cor de seu link quando passa o mouse em cima */}

Se você notar, em margin-top: -8px; , eu inclui uma observação, informando que a margem negativa para o topo aproxima o link do texto do post.
Se você quiser que o link fique mais abaixo, tenha um espaçamento maior, basta ajustar o valor em "margin-top", por exemplo:
margin-top:20px;

Personalizar os posts resumidos apenas na pagina inicial
Entre na aba 'Design' → 'editar html',clique em 'expandir modelo de widget', e procure pela tag: ]]></b:skin>

E cole o seguinte código logo ABAIXO dela:

<b:if cond='data:blog.pageType != "item"'><style>.post{height:200px;border: 10px solid #2c8da2;background:url();}.post h3 {margin: 0 auto; padding: 0; text-align:justify;}.post-footer{display:none;}h2.date-header{display:none;}.comment-link{display:none;}</style></b:if>

Importante:
.post -> se refere ao post, e no exemplo acima eu apliquei bordas, e determinei uma altura de 200 height. Se você quiser, pode aplicar uma imagem no lugar das bordas, para isso basta apagar o trecho que se refere as bordas e acrescentar o endereço da sua imagem neste trecho:
background:url(endereço-da-sua-imagem) no-repeat top left;
.post h3 -> se refere ao titulo, e no exemplo acima eu eliminei padding e margin, justificando o texto do titulo. Você deve atribuir os valores referentes a padding e margin de acordo com as medidas do seu template.
.post-footer-> se refere a parte final da postagem, o footer(é onde aparece os marcadores), e no exemplo acima eu determinei que conteúdo de footer não apareça na página inicial, assim como o fiz na parte de que se refere a data e link de comentários.

Lembrando que o comando:

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Determina que os elementos apareçam apenas na página inicial, diferenciando das páginas individuais. As modificações exemplificadas acima afetarão apenas a página inicial.
Você deve adaptar os estilos conforme sua preferência.
Tudo o que você quiser ocultar em sua página inicial, deverá estar contido no código, as classes(.) ou id(#) e sempre separando os elementos por vírgulas. O comando "display:none" serve para ocultarmos elementos.