Este template é ideal para quem tem blog de vídeos ou usa muitos vídeos em suas postagens.
31 de ago. de 2011
Nova interface do Blogger a disposição de todos
A nova interface do Blogger já está disponível à todos. Basta para isso ao entrar no painel do Blogger, clicar em "Experimentar a interface atualizada do Blogger", se não gostar, tem como reverter. Eu já estou usando, e gosto bastante. Claro que você poderá detestar, mas eu estou achando bem mais prática, limpa, enfim, gosto de mudanças.
Agora para ir até o HTML do Blogger, ficou mais fácil também. Ax clicar abrirá uma janela a parte, mais ampla. Um chuchu !
Assim ficou bem mais prático.
Agora o HTML do Blogger abre em uma janela a parte. Gostei muito.
E se não gostou, no painel basta desfazer e voltar ao antigo modelo.
Agora para ir até o HTML do Blogger, ficou mais fácil também. Ax clicar abrirá uma janela a parte, mais ampla. Um chuchu !
Assim ficou bem mais prático.
Agora o HTML do Blogger abre em uma janela a parte. Gostei muito.
E se não gostou, no painel basta desfazer e voltar ao antigo modelo.
Colocar caixa de comentários do Facebook na página inicial do Blogger
Essa dica é para colocar a caixa de comentários do Facebook no Blogger na página inicial, como neste exemplo. Assim, vc posta de seu próprio blog, sem necessidade de entrar no Facebook
A primeira coisa a fazer é entrar neste endereço abaixo.
http://developers.facebook.com/docs/plugins/
Ao entrar, clique em "Comments"
Preencha o pequeno formulário com o endereço completo de seu blog, depois clique em "Get code"
Copie o código que o Face te fornecerá.
Agora vá até o Layout de seu blog.
Clique em Adicionar um Gadget
Ao abrir, clique em HTML/Javascript, e depois, cole o código. Arraste o widget para o local que vc quer que apareça a caixa de comentários.
Como a caixa de comentários irá aumentar de tamanho a medida que forem comentando, você pode colca-la dentro de uma caixa com scroll. Para isso, copie o código avbaixo, cole no HTML/Javascript e coloque o código do Facebook no local indicado.
<div style="padding: 3px;
overflow: auto; color: #000;
position: relative;
height: 160px;">
COLE AQUI O CÓDIGO DO FACEBOOK
</div>
30 de ago. de 2011
28 de ago. de 2011
Media player em seu blog que só toca ao ser clicado
Existe uma grande polêmica a respeito de colocar ou não música em seu blog. Vamos lá: o blog é seu, a música é sua mas quem vai escutar será o visitante. E, será que ele quer ouvir ? Será o mesmo gosto musical ? Será que ele poderá acessar seu blog do serviço se tiver música ? Bem, fica difícil. Por isso existe a opção de seu visitante só ouvir a música ao clicar no play, assim transtornosr serão evitados. Para isso, copie o código abaixo e cole no HTML/Javascript em seu blog. Neste código já vem o endereço da rádio Kiss FM, minha rádio favorita, onde posso escutar rock de qualidade. Mas vai saber, que tipo de música você gosta, por isso, basta apagar o código que está na cor vermelha e colocar no lugar o endereço da propriedade de sua rádio favorita. Para mudar as proporções, troque o código em azul.
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Clique em Adicionar um Gadget
Ao abrir, clique em HTML/Javascript
Cole então o código fazendo as modificações necessárias.
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="46">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<embed type="application/x-mplayer2" height="260" width="280" autostart="false" loop="false"
src= "http://www.crosshost.com.br/cbs/kiss_/radio2.asx">
</embed></object>
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Clique em Adicionar um Gadget
Ao abrir, clique em HTML/Javascript
Cole então o código fazendo as modificações necessárias.
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="180" height="46">
<param name="autoplay" value="false" />
<param name="controller" value="true" />
<embed type="application/x-mplayer2" height="260" width="280" autostart="false" loop="false"
src= "http://www.crosshost.com.br/cbs/kiss_/radio2.asx">
</embed></object>
25 de ago. de 2011
Colocar links externos no menu de páginas do Blogger
DEMO
Sim, é possível colocar links externos no menu de páginas do Blogger, e muito facilmente. Veja as imagens.
Vá até "Páginas" em seu blog como mostra a imagem abaixo. (Para isso, basta entrar em seu blog, pela parte de "dentro")
Clique em Páginas, depois em nova página. Ao abrir a janela, clique em Endereço da Web
Como mostra a imagem, escreva o nome do quer linkar e depois o endereço. Salve e pronto.
Sim, é possível colocar links externos no menu de páginas do Blogger, e muito facilmente. Veja as imagens.
Vá até "Páginas" em seu blog como mostra a imagem abaixo. (Para isso, basta entrar em seu blog, pela parte de "dentro")
Clique em Páginas, depois em nova página. Ao abrir a janela, clique em Endereço da Web
Como mostra a imagem, escreva o nome do quer linkar e depois o endereço. Salve e pronto.
24 de ago. de 2011
Template Teck
Template em 2 colunas, slide com as últimas postagens, posts resumidos, widget com as postagens mais vistas na horizontal.
DEMO/PEGAR CÓDIGO
Habilitar slide
Depois do template instalado, vá até "Layout" Clique em editar, no HTML/Javascript como mostra a imagem, e cole este código abaixo, colocando o endereço de seu blog no local indicado..
<script type="text/javascript">
// 7 variables to control behavior
var Book_Image_Width =450;
var Book_Image_Height =350;
var Book_Border =true;
var Book_Border_Color ="gray";
var Book_Speed =10;
var Book_NextPage_Delay =1500; //1 second=1000
var Book_Vertical_Turn =0;
// variables for content
var random_posts = true; // random posts
var numposts_gal = 10; // number of posts
</script>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galeryposts-bookflip.js" type="text/javascript"></script>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/bookflip.min.js" type="text/javascript"></script>
<div id="Book" style="position:relative; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);">
<img src="http://i1133.photobucket.com/albums/m596/abu-farhan/bookflip/placeholder.gif" width="450" height="350" />
</div>
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>
Habilitar o menu
Procure por:
<ul class='pro16'>
E abaixo dele, coloque os endereços que quiser onde se pede
DEMO/PEGAR CÓDIGO
Habilitar slide
Depois do template instalado, vá até "Layout" Clique em editar, no HTML/Javascript como mostra a imagem, e cole este código abaixo, colocando o endereço de seu blog no local indicado..
<script type="text/javascript">
// 7 variables to control behavior
var Book_Image_Width =450;
var Book_Image_Height =350;
var Book_Border =true;
var Book_Border_Color ="gray";
var Book_Speed =10;
var Book_NextPage_Delay =1500; //1 second=1000
var Book_Vertical_Turn =0;
// variables for content
var random_posts = true; // random posts
var numposts_gal = 10; // number of posts
</script>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galeryposts-bookflip.js" type="text/javascript"></script>
<script src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/bookflip.min.js" type="text/javascript"></script>
<div id="Book" style="position:relative; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
box-shadow: 0px 0px 10px rgba(0,0,0,0.4);">
<img src="http://i1133.photobucket.com/albums/m596/abu-farhan/bookflip/placeholder.gif" width="450" height="350" />
</div>
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts"></script>
<script type="text/javascript">
ImageBook();
</script>
Habilitar o menu
Procure por:
<ul class='pro16'>
E abaixo dele, coloque os endereços que quiser onde se pede
Trocar "Postragens mais antigas" por imagens no novo Blogger
Você pode mudar o menu de navegação do Blogger, que é bem sem-gracinha. Ao invés da inscrição "postagens mais antigas", coloque setas e deixe seu blog mais profissional.
Vá até o Modelo de seu blog, clique em Editar modelo
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Clique em "Expandir modelos de widget
Procure por:
<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>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
E substitua por:
<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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguU41b7oE2doFUvQZyTARUwQZDrPYBuFQQye30yPhQGG5yly51Ohtv_EW1Z1whwQtXyvAkAyjBO7rk8KxBpYbPZisDVXviG6320x4CmhfV91vHjyEymBW6Ok87OnoorRfAfPEk-aL7Y54/s1600/back.png"/></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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4bzlFBLfbmI5sFe7nV3F3CzNuEpNwjEngU4XDC9UYytN6mbIWaW2X-SkFp1vn_jyyhbwNB-p_HnX_lDM7wmLbYxXthywBs1y1Y8BxPiR4XlEez29GzC1wcP5tH7o3ydmxXVXqSCUz8c/s1600/next.png"/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-TIjG8i5AR4JYdKVspApeZ0JgJbT5eMR0s7_eHVwKEfJtMKQBuuupURhAYDKAc7IKav8pdExy-0k0YUM_Fi-SS3NsXTLW3HbieO5WSFmaPjx0gOkQ4TLIZRmsdTapXZlsRSyz7-DJqY/s1600/home.png"/></a>
Acima, dentro do código, há trechos destacados com cores. São os códigos das imagens. Sequiser substituir, troque como mostra o índice:
Vermelho------------------Seta a esquerda
Amarelo-------------------Seta a direita
Azul------------------------Home
Vá até o Modelo de seu blog, clique em Editar modelo
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Clique em "Expandir modelos de widget
Procure por:
<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>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
E substitua por:
<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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguU41b7oE2doFUvQZyTARUwQZDrPYBuFQQye30yPhQGG5yly51Ohtv_EW1Z1whwQtXyvAkAyjBO7rk8KxBpYbPZisDVXviG6320x4CmhfV91vHjyEymBW6Ok87OnoorRfAfPEk-aL7Y54/s1600/back.png"/></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'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4bzlFBLfbmI5sFe7nV3F3CzNuEpNwjEngU4XDC9UYytN6mbIWaW2X-SkFp1vn_jyyhbwNB-p_HnX_lDM7wmLbYxXthywBs1y1Y8BxPiR4XlEez29GzC1wcP5tH7o3ydmxXVXqSCUz8c/s1600/next.png"/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA-TIjG8i5AR4JYdKVspApeZ0JgJbT5eMR0s7_eHVwKEfJtMKQBuuupURhAYDKAc7IKav8pdExy-0k0YUM_Fi-SS3NsXTLW3HbieO5WSFmaPjx0gOkQ4TLIZRmsdTapXZlsRSyz7-DJqY/s1600/home.png"/></a>
Acima, dentro do código, há trechos destacados com cores. São os códigos das imagens. Sequiser substituir, troque como mostra o índice:
Vermelho------------------Seta a esquerda
Amarelo-------------------Seta a direita
Azul------------------------Home
23 de ago. de 2011
Template Scrap Alvo
Template em 2 colunas, slide com as últimas atualizações, posts resumidos, posts relacionados, sidebar em forma de menu em abas.
DEMO/PEGAR CÓDIGO
Habilitar menu social
Procure por:
<div id='menu-social'>
DEMO/PEGAR CÓDIGO
Habilitar menu social
Procure por:
<div id='menu-social'>
Template Terroso
Template em 3 colunas, slide com as últimas atualizações, posts relacionados, sidebar em forma de menu accordion, postagens resumidas, sendo o primeiro post maior que os demais posts.
DEMO/PEGAR CÓDIGO
Habilitar menu social
Procure pelo seguinte trecho:
<div class='menu-social'>
Coloque então os endereços de suas páginas, como se pede no código um pouco abaixo
Habilitar slide
Para habilitar o slide, basta ir até o Layout e clicar em "Editar", como mostra a imagem, copiar e colar este código abaixo e colocar o endereço de seu blog no local indicado.
<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
DEMO/PEGAR CÓDIGO
Habilitar menu social
Procure pelo seguinte trecho:
<div class='menu-social'>
Coloque então os endereços de suas páginas, como se pede no código um pouco abaixo
Habilitar slide
Para habilitar o slide, basta ir até o Layout e clicar em "Editar", como mostra a imagem, copiar e colar este código abaixo e colocar o endereço de seu blog no local indicado.
<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="ENDEREÇO DE SEU BLOG/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
Assinar:
Postagens (Atom)
