Templates e Acessórios

Postagens Recentes

27 de dez. de 2010

Template Arco-iris

Template com 2 colunas nas páginas internas e menu em abas com efeito j.query. Na página inicial slide, menu social com efeito j.query, e posts resumidos.

DEMO/ PEGAR CÓDIGO

Para habilitar o menu social procure por:

<div id='menu-social'>

Então você verá um pouco abaixo para trocar os endereços de suas páginas sociais.

»»Leia mais...

Galeria de imagens no Blogger

. Elke di Barros | 02:15 12 comentários:

Faça uma galeria de imagens para colocar em seu blog.

DEMO

Vá até o HTML de seu blog e procure por :

]]></b:skin>

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

Acima dele cole o código abaixo.

/* Gallery styles-------------------------------------- */

#gallery{
-moz-box-shadow:0 0 3px #AAAAAA;
-webkit-box-shadow:0 0 3px #AAAAAA;
box-shadow:0 0 3px #AAAAAA;
-moz-border-radius-bottomleft:4px;
-webkit-border-bottom-left-radius:4px;
border-bottom-left-radius:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
border:1px solid white;
background:#FEDEEF;/*cor de fundo do slide menor*/
width:540px;
margin: 2px 3px 1px 8px;
border: 2px dotted #F672B6;
overflow:hidden;
}
#slides{
height:350px;
width:920px;
overflow:hidden;
}
.slide{
float:left;
}
#menu{
height:60px;
}
ul#gal{
margin:0px;
padding:0px;
}
#gal li{
width:57px;
display:inline-block;
list-style:none;
height:55px;
overflow:hidden;
}
#gal li.inact:hover{
background:transparent;
}
#gal li.act,li.act:hover{
background:#FEDEEF;
}
#gal li.act a{
cursor:default;
}
.fbar{
width:2px;
background:transparent;
}
#gal li a{
display:block;
background:#F672B6;/*cor cima menu pequeno*/
height:35px;
padding-top:10px;
}
.a img{border:none;}

Agora abaixo de:

]]></b:skin>

Cole o seguinte código:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
   /* This code is executed after the DOM has been completely loaded */

    var totWidth=0;
    var positions = new Array();

    $('#slides .slide').each(function(i){

        /* Traverse through all the slides and store their accumulative widths in totWidth */

        positions[i]= totWidth;
        totWidth += $(this).width();

        /* The positions array contains each slide's commulutative offset from the left part of the container */

        if(!$(this).width())
        {
            alert("Please, fill in width & height for all your images!");
            return false;
        }

    });

    $('#slides').width(totWidth);

    /* Change the cotnainer div's width to the exact width of all the slides combined */

    $('#menu ul li a').click(function(e){

            /* On a thumbnail click */

            $('li.menuItem').removeClass('act').addClass('inact');
            $(this).parent().addClass('act');

            var pos = $(this).parent().prevAll('.menuItem').length;

            $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
            /* Start the sliding animation */

            e.preventDefault();
            /* Prevent the default action of the link */
    });

    $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
    /* On page load, mark the first thumbnail as active */

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

Agora cole abaixo de :

<div id='main-wrapper'>

Este próximo código, fazendo a modificação pelas suas imagens. (REPITA A IMAGEM CONFORME MOSTRA O CÓDIGO)

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


<div id='contentWrapperPortfolio'><div id='gallery'><div id='slides'>

<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 1' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 2' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 3' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 4' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 5' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 6' width='702'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 7' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 8' width='572'/></div>
<div class='slide'><img alt='side' height='469' src='ENDEREÇO DA IMAGEM 9' width='572'/></div>


</div><div id='menu'><ul id='gal'>



<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 1' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 2' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 3' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 4' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 5' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 6' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 7' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 8' width='70px'/></a></li>
<li class='menuItem'><a href=''><img alt='thumbnail' src='ENDEREÇO DA IMAGEM 9' width='70px'/></a></li>

        <li class='fbar'/>
        </ul>
</div>
</div>
</div>
</b:if>
</b:if>

»»Leia mais...

26 de dez. de 2010

Template Blue

. Elke di Barros | 23:37 Nenhum comentário:

Template com 2 colunas, página inicial com postagens pequenas, menu social com efeito j.query, menu em abas com efeito j.query, menu horizontal com efeito.

DEMO/PEGAR CÓDIGO

Para instalar o menu social

Procure por:

<div class='sc_menu'>

e troque pelo endereço de suas páginas sociais conforme é pedido.

»»Leia mais...

Template Estrela Gorjuss

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

Template com 3 colunas, galeria de imagens, leia mais, menu animado, menu social. Para quem gosta de modelos cute.

DEMO/PEGAR CÓDIGO

Para ativar a galeria de imagens

Procure por:


E troque pelo endereço de suas imagens. Note que vc terá que fazer isso 2 vezes, para a galeria grande e a pequena.

Para ativar o menu social

Procure por:



E troque os endereços como se pede.

Para ativar o menu animado

Procure por:


E troque pelos endereços que se pedem.

*Para colocar os arquivos nos posts, copie o próximo código e cole onde vc posta, mas clique antes em "Editar HTML.

<script src="AQUI O ENDEREÇO DE SEU BLOG/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

Para ativar o menu horizontal

Procure por:



E troque no local pelos endereços do que quer linkar

»»Leia mais...

20 de dez. de 2010

Gerador de slide

. Elke di Barros | 02:31 4 comentários:

Essa eu encontrei navegando pela net e não podia deixar de compartilhar com vocês. Um site onde você faz slides de fotos para compartilhar com os amigos no Blogger, Facebook e no Twitter. Você poderá fazer um lindo slide de natal para compartilhar com seus familiares e amigos.

Entre no site JalbumNet e se cadastre.

Preencha o cadastro como mostra a imagem abaixo.

Depois cheque seu email.

Abra o email e clique no link

Agora faça o login

Nessa próxima página, clique na opção 5

Você foi direcionado para uma página como essa abaixo.

Para começar a fazer seu slide, suba primeiro as fotos que quer.

(Atenção pois há um limite de imagens, isso depende do tamanho de suas fotos)

Aparecerá o browser de seu computador, escolha então as fotos.

Agora, depois que suas fotos já foram selecionadas, elas aparecerão numa página como essa

Clique então em INFO para escrever informações sobre seu slide

Escreva o título e uma pequena discrição sobre seu slide

Agora você irá selecionar o tipo de slide.

Vá rolando o scroller para ver os modelos.

Note que você poderá escolher até as cores.

Ao encontrar, clique em CHOOSE

Depois de escolhido o slide e ter certeza que está satisfeita, clique então em SAVE AND EXIT, no lado direito do seu monitos, em cima.

Agora na página que você foi direcionado(a), você verá a imagem de seu álbum. Passe o mouse sobre a imagem.

Agora copie o código que irá aparecer e...

Se quer compartilhar seu slide, basta clicar sobre os botões do Facebook ou do Twitter

e cole dentro deste código abaixo:

<iframe height="600px" scrolling="no" src="AQUI O ENDEREÇO DO SEU SLIDE" width="100%"></iframe>

Cole-os onde quer que apareça o slide, nas postagens de seu blog ou no HTML/Javascript.

»»Leia mais...

18 de dez. de 2010

Endereço de radios e tvs para player

. Elke di Barros | 19:18 5 comentários:

Copie o código abaixo e cole no HTML/Javascript.

<embed controls="playbutton" loop="true" autostart="no" type="video/x-ms-wmv" height="45" src="mms://media.brturbo.com.br/turbotv.wmv" style="left: 0px; width: 280px; top: 0px; height: 300px;"></embed>

Copie o endereço e cole no lugar que está em veremelho. Cole no HTML/Javascript
Troque o código na cor vermelha pelo código da rádio de sua preferência.

Código na cor azul representa a largura do player

Código na cor verde representa a altura do player

Canais de clip musicais

Tv Beat One (Austrália)
http://mediahaus.netro.ca/mediahaus

Caribe TV
http://global-itv.com/streams/media/netherlands00000081.asx

France TV
http://global-itv.com/streams/media/france00000008.asx

Niteroi TV (Brasil)
http://global-itv.com/streams/media/brazil00000047.asx

TV Rock (Brasil)
mms://galileo.netpoint.com.br/_TVROCK__SEXTA

Dee Jay Tv (Croácia)
http://live.mediaserver.kataweb.it/deejaytv

Turbo TV (Brasil)
mms://media.brturbo.com.br/turbotv.wmv

Canalmoza (França)
http://www.impek.tv/go/soul/wm

Cybertika (França)
http://www.cybertika.com/clips.cybertika.asx

Yazoo TV (França, clips)
http://www.impek.tv/go/yazoo/wm

3Voor 12 TV (Netherlands, clips)
http://cgi.omroep.nl/cgi-bin/wmlive?vpro3voor12tvcentral-bb.asx

África Tv One (Arizona)
http://www.africatvone.com/liveTvFinal.aspx

CME El Canal de La Musca (Argentina)
http://200.62.54.103:81/cmtv

Aragova (Bosnia)
http://assstroy.ru/aragova1.wmv

E A TV ( EUA)
http://www.evolvingartist.com/eaTV.asx

Mania TV (EUA)
http://www.radios.com.br/asx/maniatv-us.asx

Mezz TV (EUA)
http://www.radios.com.br/asx/mezztv-us.asx

E Music Television (EUA)
http://broadcast.global-mix.net/?m=e-music&.wvx=

Thelol TV (França, vídeos,etc)
http://www.theloltv.com/video8.asx

MTV
mms://a1729.l2168647534.c21686.g.lm.akamaistream.net/D/1729/21687/v0001/reflector:50505

E Music Television
http://broadcast.global-mix.net/?m=e-music&.wvx=

Canais governo brasileiro

Tv Câmara
mms://theon.camara.gov.br/TV

Tv Senado
mms://bombadil.senado.gov.br/wmtencoder/tv.wmv

Tv Religiosa

Tv Cristo Vive
mms://67.15.130.41/tvcristovive

TV Educativa

TV Universitária
mms://150.161.6.17:8080/tvu.asf

RETV

Rádios nacionais

Rádio Navsom

»»Leia mais...

Efeito neon no itulo do blog

. Elke di Barros | 18:10 7 comentários:

EFEITO NEON

Para dar o efeito neon ao título do blog, vá até o HTML de seu blog e procure por:

#header h1 {

Abaixo dele cole o código abaixo. Altere a cor se quiser (código em negrito)

text-shadow: 0 0 0.2em #4040FF, 0 0 0.2em #4040FF, 0 0 0.2em #4040FF;

Se quer dar efeito neon aos títulos das postagens, procure por:

.post h3 {
e abaixo dele cole o mesmo código.

Se quer dar o efeito aos títulos da sidebar, procure por:

.sidebar h2 {
E então cole o código abaixo dele.

»»Leia mais...

16 de dez. de 2010

Template Background

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

Este template possui 2 colunas mais 3 colunas no footer. A sidebar é em forma de menu accordion, possui slide com as últimas postagens, breadcrumb, menu horizontal fixo, tooltip, e fundo que muda de imagem a cada clique.

DEMO/PEGAR CÓDIGO

Para habilitar o menu horizontal

Procure por esta parte:

<li><a class='tip_trigger' href='#'>HOME<span class='tip'>Página inicial</span></a></li>
<li><a class='tip_trigger' href='ENDEREÇO DO LINK 1'>LINK 1<span class='tip'>ESCREVA ALGO SOBRE O LINK 1</span></a></li>
<li><a class='tip_trigger' href='ENDEREÇO DO LINK 2'>LINK 2<span class='tip'>ESCREVA ALGO SOBRE O LINK 2</span></a></li>
<li><a class='tip_trigger' href='ENDEREÇO DO LINK 3'>LINK 3<span class='tip'>ESCREVA ALGO SOBRE O LINK 3</span></a></li>

Botões sociais

Procure por esse trecho e coloque os endereços que se pede.

<a class='tip_trigger' href='ENDEREÇO DO FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsdig5OT1p3cR3d-Hh5PiLnxXTErOTliYYT9FwGDyoC_XwL-h9sFbJrexgKOXCcoo_I5KBw90pk3TEhzajmha9c0kRjOtD65OpCK4zFGii_vmMR3goHp3J5oexnLLoDcA0sLN5lRPJ-7WU/s1600/facebook-logo-webtreatsetc.png' width='66px'/><span class='tip'>Seja um fã no Facebook</span></a>

<a class='tip_trigger' href='ENDEREÇO DO TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCnZBPiw43zmTuFZ-cLXyc-cid9jlVfdVrQFHkTE-2Mta6TKhGp1ErHvwk2H8Ev5HZJp5Pv5xbjkysYD3YhkCHdwLmrzg_G7IF3-eKDhPORtAT7Clo5ZyLJJZovkvJvzp6LiaDG_NNSAty/s1600/twitter-webtreatsetc.png' width='66px'/><span class='tip'>Siga-me no Twitter</span></a>

<a class='tip_trigger' href='ENDEREÇO DO ORKUT'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFFCsKpNIye7wFdhIPqOXZUXXnCT0SukZKZEq7CGpTn3qnBCN2-FDmAT4MGc26o_-ilwrsoYaXf2Pg6rX56o7na1P4ViRKz5MSVRbaXYQJuhix5rVu1aqA4dAiVDjLKZ3H-Hl29WMr5_g/s1600/orkut-webtreatsetc.png' width='66px'/><span class='tip'>Encontre-me no orkut</span></a>

<a class='tip_trigger' href='ENDEREÇO DO YAHOO'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCsC39QciXa5ttPl_SaZk_sth2IMj6V76D08JWU0L3679HQqQmXUBfD3hsOlGHfZfPj1TaBI2bPTmIf4jpTJHBwhjzwM6AYrMceyHlrXGjHUprGFxlzJkIVK2_KYOMzsmqEVGqMarH9s5y/s1600/yahoo-webtreatsetc.png' width='66px'/><span class='tip'>Yahoo</span></a>

Para habilitar o slide

Procure por:

ENDEREÇO DE SEU BLOG AQUI

Para habilitar o botão de feed grande.

Procure por:

ENDEREÇO DE SEU BLOG AQUI

E substitua pelo endereço de seu blog

Para habilitar os marcadores

Procure por:

AQUI OS MARCADORES

E substitua pelo endereço de seu blog

Se quer mudar as imagens de fundo

Veja que no próprio código que disponibilizei já deixei os endereços destacados na cor azul, portanto, é só ir trocando pelo endereço das imagens de sua preferência.

»»Leia mais...

Template Slide Delicado

. Elke di Barros | 14:56 21 comentários:

Este template não possui sidebar na página inicial. Possui um grande slide e as primeiras 5 postagens.

DEMO/PEGAR CÓDIGO

Para habilitar o slide, procure por:

http://templateslidedelicado.blogspot.com/

E troque pelo endereço de seu blog.

Para habilitar o menu, procure por:

<ul id='navigation'>

<li class='link1'><a href='ENDEREÇO DO BLOG'><span>Home</span></a></li>
<li class='link2'><a href='ENDEREÇO DO TWITTER'><span>Twitter</span></a></li>
<li class='link3'><a href='ENDEREÇO DO FACEBOOK'><span>Facebook</span></a></li>
<li class='link4'><a href='ENDEREÇO DO FLICKER'><span>Flicker</span></a></li>
<li class='link5'><a href='ENDEREÇO DO YOU TUBE'><span>You Tube</span></a></li>
<li class='link6'><a href='ENDEREÇO DO YAHOO'><span>Yahoo</span></a></li>
<li class='link7'><a href='ENDEREÇO DO FEED'><span>Feed</span></a></li>
<li class='link8'><a href='mailto:ENDEREÇO DO EMAIL'><span>Email</span></a></li>

E faça as modificações conforme é pedido.

Para que fique certinha a página inicial, deixe em 5 postagens. Vá em Configurações, depiois em Formatação e agora, selecione o número 5 e salve.

»»Leia mais...

Blog Archive

março (1)
julho (6)
junho (1)
dezembro (1)
julho (3)
junho (1)
maio (4)
janeiro (7)
dezembro (4)
novembro (2)
outubro (5)
setembro (4)
agosto (6)
julho (1)
junho (11)
maio (25)
abril (24)
março (26)
fevereiro (9)
janeiro (23)
dezembro (11)
novembro (4)
outubro (30)
setembro (8)
agosto (2)
julho (2)
junho (3)
maio (8)
abril (41)
março (2)
fevereiro (1)
janeiro (1)
dezembro (9)
novembro (6)
outubro (3)
setembro (11)
agosto (40)
julho (39)
junho (5)
maio (7)
abril (4)
março (17)
fevereiro (3)
janeiro (4)
dezembro (22)
novembro (18)
outubro (2)
setembro (10)
agosto (27)
julho (6)
junho (16)
maio (31)
abril (19)
março (8)
fevereiro (4)
janeiro (7)
dezembro (6)
novembro (14)
outubro (21)
setembro (29)
agosto (19)
julho (11)
junho (21)
maio (24)
abril (8)
março (1)
janeiro (5)
dezembro (9)
novembro (8)
outubro (16)
setembro (6)
agosto (27)
julho (34)
junho (21)
maio (42)
abril (85)
março (9)
fevereiro (12)
janeiro (12)
dezembro (22)
novembro (47)
outubro (71)
setembro (14)
agosto (14)
julho (5)

Templates e Acessórios

27 de dez. de 2010

Template Arco-iris

Galeria de imagens no Blogger

26 de dez. de 2010

Template Blue

Template Estrela Gorjuss

20 de dez. de 2010

Gerador de slide

18 de dez. de 2010

Endereço de radios e tvs para player

Efeito neon no itulo do blog

16 de dez. de 2010

Template Background

Template Slide Delicado

Quem Sou

Postagens populares

Posts aleatórios