Templates e Acessórios: janeiro 2011

Postagens Recentes

Grade Lista

12 de jan. de 2011

Template Tomaz

. Elke di Barros | 23:47 5 comentários:

Template em duas colunas, slide, sidebar em tabela, menu com efeito j.query, menu social e leia mais automático.

DEMO/PEGAR CÓDIGO

Para habilitar o menu

Procure por



E faça as modificações necessárias.

Para habilitar o slide

Procure por:

E faça as modificações necessárias

azul-------------Título
vermelho--------Endereço das imagens
verde------------Endereço do link para suas imagens

Note que abaixo haverá os links para a troca das imagens pequenas. Repita a sequência das imagens grandes.

Depois de:

<div id='thumbs'>

Para habilitar o menu social

Procure por



»»Leia mais...

Slide Thumbs

. Elke di Barros | 22:31 3 comentários:

Encontrei este slide NESTE site. Gostei bastante, fiz algumas modificações e trago para vocês.

DEMO

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. Estas dicas se aplicam aos templates feitos até junho de 2010. Para reinstalar o antigo template clique AQUI

Você precisa ir até o HTML do blog e procurar pelo seguinte código:

]]></b:skin>

Troque-o então, por este código abaixo

/*Slide-----------------------------------------------*/
#preview_wrap {
        margin: 0 -10px 0 30px;
   padding: 22px;
   width: 660px;/*LARGURA DO SLIDE*/
   height: 356px;/*ALTURA DO SLIDE*/
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPdme26Hrpa9XUsmGSBoDWgEnBFsUGU0oO0NLpFsqiiq7NXolWvQ0Qh9Up-3jtPo9VQUBzDyT3yhV0NMRvUHIyV6B5voeLf0ffX8gNijnPY2kXMpYZ2xo_cGapM-REoc7KLmzaa_YueZY/s1600/slideback.png) top left no-repeat;
}

#preview_outer {
    overflow: hidden;
    width: 600px;
    height: 364px;
    position: relative;
}

#preview_inner {
    text-align: left;
    height: 100%;
    position: relative;
}

#preview_inner img{
position: absolute;
width: 625px;
height: 360px;
}
#preview_inner div {
    float: left;
margin: 0 20px 0 -20px;
    width: 610px;
    height: 364px;
    position: relative;
}

#preview_inner div a {
    position: absolute;

    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    text-indent: 20px;
    padding: 20px 0;
    color: #fff;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSuNH0R5zZ6EFRMJ7DRmOkYBj3H4-2ycqsVmg9DSoSuKSOEu2fByMrQq0yOGM-qlLUebBgaa63Vhb77XEhCU63dez4mJdeVbKred9FsxUUrOYmskijMTFCatHGOXRm_AgNdVt8In5vBuU/s1600/bg_trans.png);
    text-decoration: none;
    font-size: 18px;
}

#thumbs {
background: #fff;
    padding-top: -21px;
margin: 0 -20px 0 30px;
    position: relative;
    width: 640px;
    text-align: center;
}

#thumbs span {
    padding: 12px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI2dX_nosQAJkwWIE9SLpHHA1XIVQ-jOYEkXpxhK5zTfxXDjWH8YV54BhYNeIFIa0RgtoAhBhMdsCKy6IIv7lwSlX41nsUYVaDrBDhU0_CpNFns0xGtmpFkrqaGZFfHErKlnw_hcKws-4/s1600/bg_thumb.gif') top left no-repeat;
    display: inline-block;
}

#thumbs span img {
width: 80px;
height: 80px;
}
#arrow {
    position: absolute;
    top: -12px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikdfoBydW-dWaJCLOZmqCyemRS4aRE8GMfD0dzm_bvgaBblDjIfvR8wtTBkJusEbOo2CaodO790kAzkmjlXHPC_yn02MYCPeGhzfr6fGVVgIA4PufWo4IK4Sru2i6LpT3FeWEKkEqacL0/s1600/Image129.png) top center no-repeat;
    width: 60px;
    height: 29px;
    display: none;}

]]></b:skin>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Save the jQuery objects for later use.
    var outer    = $("#preview_outer");
    var arrow    = $("#arrow");
    var thumbs    = $("#thumbs span");

    var preview_pos;
    var preview_els    = $("#preview_inner div");
    var image_width    = preview_els.eq(0).width(); // Get width of imaages

    // Hook up the click event
    thumbs.click(function() {
        // Get position of current image
        preview_pos = preview_els.eq( thumbs.index( this) ).position();

        // Animate them!
        outer.stop().animate( {'scrollLeft' : preview_pos.left},    500 );
        arrow.stop().animate( {'left' : $(this).position().left },    500 );
    });

    // Reset positions on load
    arrow.css( {'left' : thumbs.eq(0).position().left } ).show();
    outer.animate( {'scrollLeft' : 0}, 0 );

    // Set initial width
    $("#preview_inner").css('width', preview_els.length * image_width);
});
//]]>
</script>

Agora acima de:

<b:section class='main' id='main' showaddelement='no'>

Cole o próximo código fazendo suas modificações. (Se quiser que o slide apareça nas páginas internas e nas páginas estáticas, apague a parte em rosa)

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div id='preview_wrap'>
<div id='preview_outer'>
<div id='preview_inner'>

<div>
<img alt='TITULO 1' src='ENDEREÇO DE SUA IMAGEM 1'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 1' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 1</a>
</div>

<div>
<img alt='TITULO 2' src='ENDEREÇO DE SUA IMAGEM 2'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 2' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 2</a>
</div>

<div>
<img alt='TITULO 3' src='ENDEREÇO DE SUA IMAGEM 3'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 3' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 3</a>
</div>

<div>
<img alt='TITULO 4' src='ENDEREÇO DE SUA IMAGEM 4'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 4' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 4</a>
</div>

<div>
<img alt='TITULO 5' src='ENDEREÇO DE SUA IMAGEM 5'/>
<a href='ENDEREÇO DO QUER LINKAR EM SUA IMAGEM 5' target='_blank'>ESCREVA ALGO SOBRE SUA IMAGEM 5</a>
</div>

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

<div id='thumbs'>
    <div id='arrow'/>
    <span><img alt='REPITA O TITULO 1' src='REPITA O ENDEREÇO DE SUA IMAGEM 1'/></span>
    <span><img alt='REPITA O TITULO 2' src='REPITA O ENDEREÇO DE SUA IMAGEM 2'/></span>
        <span><img alt='REPITA O TITULO 3' src='REPITA O ENDEREÇO DE SUA IMAGEM 3'/></span>
    <span><img alt='REPITA O TITULO 4' src='REPITA O ENDEREÇO DE SUA IMAGEM 4'/></span>
        <span><img alt='REPITA O TITULO 5' src='REPITA O ENDEREÇO DE SUA IMAGEM 5'/></span>

</div>
</b:if>
</b:if>

»»Leia mais...

11 de jan. de 2011

Template Photo

. Elke di Barros | 17:54 4 comentários:

Template em 2 colunas, sidebar com efeito accordion, slide, menu horizontal, páina inicial somente com os títulos das postagens, footer em 5 colunas, menu social, menu de navegação de páginas.

DEMO/PEGAR CÓDIGO

Para habilitar o slide

Procure por:

<div class='mygallery'>

E vá trocando o endereço de minhas imagens pelo endereço de suas imagens, seu link, e sua inscrição. Vá fazendo isso até que todos estejam trocados.

Para habilitar o menu

Procure por:

<div id='navcontainer'>

E faça as modificações necessárias

Para habilitar o menu social

Procure por:

<div class='menu-social'>

E faça as modificações.

»»Leia mais...

Template Glass

. Elke di Barros | 12:21 2 comentários:

Template com 2 colunas, menu, slide e manu em tables com efeito j.query, menu social e páginas integradas.

DEMO/PEGAR CÓDIGO

Para habilitar o slide

Procure por:



E como mostra a imagem, vá trocando o endereço das fotos e escrevendo algo relacionado a elas.

Para facilitar eis o código completo do slide.

azul--------------Título
verde------------link da foto
vermelho--------endereço da imagem
amarelo---------título de baixo
rosa------------inscrição da imagem

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>

<div id='slideshow'>
<div id='slidesContainer'>
    <div class='slide'>

<h2>Título 1</h2>

        <p><a href='http://tudodisney.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcU1VeAeLIFix-kXJ6QMxiQfTfS4DbaolGsVKrvH3yuXdtZ4QcVxt8L_mX1rnmrZGIS1kQjijzRi7CupA_FMWUlzDR2ZMJO7k0Xr48jFhdDtjBITy5pZgdG3eZUHjR-TbRhoIM6nzMqE/s1600/Chapada+Corpus+Cristi+108b.jpg'/></a></p>

<h3>Título 1a</h3>

<h4>Escreva aqui o que quiser sobre a imagem 1</h4>

    </div>
    <div class='slide'>
       <h2>Título 2</h2>

        <p><a href='http://tudodisney.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIVri0iMoez1SO9nQQ70ITmZhsLSk1ah8ktQtrwoXD2kS1q-Y_b21E9e9Z_mFPkyPw5Yy2pCjxEndOpHWMouGJdY4uBIfOFrwNe99zii_HaEY4rbB_83lPXzZJlmF0CluH0h30YE1bqh4/s1600/4904853584_a6ffef6df5_z.jpg'/></a></p>

<h3>Título 2a</h3>

<h4>Escreva aqui o que quiser sobre a imagem 2</h4>
    </div>
    <div class='slide'>
     <h2>Título 3</h2>

        <p><a href='http://tudodisney.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNyknr35rLETt6797eLZNjvJHT8Yh7sJP1dSaTZZL0gLMYIheWykfwwDA0BiQG1ZxxR_i3HaPDV1t0coDy0PIookl4ozKQEehSQAvdC46RVZlRnNZSeCS5up5IKEeTKIOuarHyxr_6Lkg/s1600/Chapada+Corpus+Cristi+112a.jpg'/></a></p>

          <h3>Título 3a</h3>

         <h4>Escreva aqui o que quiser sobre a imagem 3</h4>

    </div>
    <div class='slide'>
     <h2>Título 4</h2>

        <p><a href='http://tudodisney.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_nxBOgLm9UYwyX2c4XKfIaGAUbnk1Ku_yewm5Chg1GotoDyKInOh1NDHIqmfg0DdstFk1rMBCBJHWuWU9ubCmDRrW5eDicA02iPO7NHAh_wQg4oLCJ7zdsExy53ZjrH7ZCAUjlSkRy0/s1600/fotos+Chapada+076.JPG'/></a></p>

           <h3>Título 4a</h3>

       <h4>Escreva aqui o que quiser sobre a imagem 4</h4>

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

</b:if>
</b:if>