25 novembro 2013

Aprenda a fazer templates.

Este código pertence ao :http://www.codigofonte.net
Entre e desfruti de milhares de tutoriais.

Aprenda a fazer seu template de Blog

1) vá em "Iniciar","programas","acessórios"e "bloco de notas".

2)Para iniciar a sua página,cole o seguinte código:

<HTML>

<HEAD>

<TITLE> Nome de seu site</TITLE>

</HEAD>

3)Agora vem a parte de inserir a imagem de fundo e do topo de seu blog.Para isso apenas digite o nome da sua imagem e sua extenção ( EX: back.gif onde é Back é o nome e gif é a extenção; top.gif onde é top é o nome e gif é a estenção)

Nota: Algumas extensões existentes: .gif; .jpg; .bmp; .jpeg

<BODY BACKGROUND="NOME DA FIGURA DE FUNDO AQUI"><BR> 

<img src="NOME DA FIGURA DE TOPO AQUI" style="LEFT: 0px; POSITION: absolute; TOP: 0px;"> 

<BR> 

4) Agora é um pouco mais complicado. As tags a seguir são as pertencentes ao BODY, que é o corpo do site. Para que seu Menu e seus Posts fiquem paradas exatamente no lugar da figura, é necessário utilizar números para mover o texto de um lado ao outro. Veja no código que segue:

<DIV style="LEFT: 0px; POSITION: absolute; TOP: 0px;">

<BR>

Aqui vai o espaço para Menu (veja os códigos nos links "Códigos para Blig; Códigos para Blogger; Códigos para Weblogger")

<BR>

<DIV>

Onde:
LEFT - É o quanto você quer que o texto vá para o lado; Ex: Se você quisê-lo mais para a direita, coloque um número grande; Se você quisê-lo mais para a esquerda, diminua o número
TOP - É o quanto você quer que o texto vá para cima ou para baixo. Se você quisê-lo mais para baixo, digite um número maior; se quisê-lo mais para cima, vá diminuindo até o texto ficar alinhado do jeito que você quer.

Nota: <BR> serve para seu texto pular de linha. Cole essa tag toda a vez que quiser abrir uma nova frase.

5) Para os seus Posts, repita o passo número 4 e copie o código do seu servidor escolhido (Blig, Blogger ou Weblogger).

6) Se você já terminar de digitar seus dados no Menu e colocar tudo direitinho, cole o seguinte código:

</BODY>

</HTML> 

Pronto!

Agora, você precisa salvar seu arquivo como INDEX.HTML. Você TEM que salvar com o final .HTML ou o arquivo não virará página e salvará como um arquivo de texto.

Não se esqueça de salvar o arquivo na mesma pasta onde estão suas imagens para o Blog (TOP E BACK).

29 setembro 2013

Colocar imagem no rodapé

Entre Modelo > Editar HTML > prosseguir > aperte Ctrl + F e procure por :

</footer>

Acima desse código, cole o seguinte código :

<img src="URL DA IMAGEM" />

E pronto! Visualize pra ver se tá tudo certinho, se tiver ao seu gosto, salve.

Espero que tenham gostado...
beijinhos e fiquem com Deus.

24 setembro 2013

Nivo Slider no seu blog

Você pode por no cabeçalho ,ou mesmo no topo das postagens em tamanho grande. Se você quiser colocar no cabeçalho recomendo ler com atenção este post do falecido Cherry Bomb (Que nos faz muitaaaaaaa falta)Espero que volte um dia,quem sabe.

Os códigos são grandes:

Procure por }]]></b:skin> (Ctrl + F) e acima dele cole o seguinte código:

/* The Nivo Slider styles */

#slider {position:relative;}

#slider img {position:absolute; top:0px; left:0px;

display:none;}

#slider a {border:0; display:block;}

.nivoSlider {position:relative; width: 556px; /* largura */ height: 440px; /* altura */ } .nivoSlider img {position:absolute; top:0px; left:0px;}

/* If an image is wrapped in a link */

.nivoSlider a.nivo-imageLink {position:absolute; top:0px;

left:0px; width:100%; height:100%; border:0;

padding:0;margin:0; z-index:6; display:none;}

/* The slices and boxes in the Slider */

.nivo-slice

{display:block;position:absolute;z-index:5;height:100%;}

.nivo-box {display:block;position:absolute;z-index:5;}

/* Caption styles */

.nivo-caption {position:absolute;left:0px; bottom:0px;

background: #ccc; /* Cor de fundo do título */ color: #fff; /* Cor do título */ text-transform: uppercase; width: 100%; z-index:50; border-right: 5px solid #;padding: 5px 0;}

.nivo-caption p {padding:0 20px;margin:0;font-size:14px;}

.nivo-caption a {display:inline !important;}

.nivo-html-caption {display:none;}

.nivo-directionNav a

{position:absolute;top:45%;z-index:99;cursor:pointer;}

.nivo-prevNav {left:0px;}

.nivo-nextNav {right:0px;}

/*============================*/

/*=== Custom Slider Styles ===*/

/*============================*/

.slider {width:100%;}

.slider img

{position:absolute;top:0px;left:0px;display:none;}

.slider a {border:0;display:block;}

.nivo-controlNav {display:none;}

.nivo-directionNav a

{display:block;width:31px;height:34px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibrht-Lyj874yPcQLztqbiH-ZPFdLVWJqYCsNRRIH_QBNsu4aQe6xHO4pUTcg8LzPXageI5ASx_P0_oOY0WRFXj7AUrR-g2GfKxneju5k_StOZUBscuOqwrOgEaINgCXXq9neQ_D4zGOsl/s1600/s-12.png)

no-repeat; /* imagem das setinhas */ text-indent:-9999px;border:0; }

a.nivo-nextNav {background-position:-30px 0;right:15px;}

a.nivo-prevNav { left:15px;}

.nivo-caption {font-family:"Trebuchet MS", Arial,

Helvetica, sans-serif;}

.nivo-caption a {color:#efe9d1; text-decoration:underline;}

As únicas coisas que você precisa alterar são as que estão em vermelho: Principalmente o tamanho (width e height).

Agora procure por </head> e acima dele cole:

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

<script src='http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js' type='text/javascript'/>

<script type='text/javascript'>

var $nv4wp = jQuery.noConflict();

$nv4wp(window).load(function() {

$nv4wp('#slider').nivoSlider({

effect:'random',

slices:15, // For slice animations

boxCols: 4, // For box animations

boxRows: 2, // For box animations

animSpeed:500, // Slide transition speed

pauseTime:3000, // How long each slide will show

startSlide:0, // Set starting Slide (0 index)

directionNav:true, //Next and Prev

directionNavHide:true, //Only show on hover

controlNav:true, // 1,2,3... navigation

controlNavThumbs:false, // Use thumbnails for Control Nav

controlNavThumbsFromRel:false, // Use image rel for thumbs

controlNavThumbsSearch: '.jpg', // Replace this with...

controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src

keyboardNav:true, //Use left and right arrows

pauseOnHover:true, //Stop animation while hovering

manualAdvance:false, //Force manual transitions

captionOpacity:0.8, //Universal caption opacity

prevText: 'Prev', // Prev directionNav text

nextText: 'Next', // Next directionNav text

beforeChange: function(){}, // Triggers before a slide transition

afterChange: function(){}, // Triggers after a slide transition

slideshowEnd: function(){}, // Triggers after all slides have been shown

lastSlide: function(){}, // Triggers when last slide is shown

afterLoad: function(){} // Triggers when slider has loaded

});

});

</script>

Visualize e se estiver tudo ok salve.

O slide ainda não irá aparecer. Para mostrá-lo vá até Layout e adicione em um lugar estratégico um gadget de HTML/JavaScript. Dentro dele cole:

<div id="slide"><div id="slider">

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

<a href="Link do Post" target="_blank"><img src="Link da Imagem" title="Título do Post" width="350" height="210" /></a>

</div></div>

Altere o que se pede e seja feliz!

Lembrando que você deve alterar height e width conforme o tamanho que estipulou lá no primeiro código!
Não retire nenhuma "aspa" .

25 julho 2013

LUMINÁRIA NO SE BLOG

Coloque uma luminária em seu blog.
Na primeira linha escreva uma mensagem de boas vindas.
Na segunda linha, escreva:clic na luminária para entrar.
Este código você encontra no blog:
http://portal-do-mundo.blogspot.com
Vá em layoyt:
adicionar gadget/javascript.

Vá em Layout

clique em adicionar um gadget

e procure por HTML/javascript

Agora copie e cole o código abaixo lá:

<!doctype html><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="tht-position tht-s-e"><a id="lambakapali" onclick="document.getElementById('lambaacik').style.display='block';document.getElementById('lambakapali').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;" title="EDITE AQUI OQUE VC QUER QUE APAREÇA QUANDO PASSA O MOUSE NA LÂMPADA"><img style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaS8Q-6GHLf06j7Zzwsq_mIcDP5o_oYFNh8xUojGv0pM7cJ3DP87MbAPqTLkvdwvzdMMbNQuQJ0HfWSi5e8SydJWcB7FjfcwrYwZ9QFYeNJ52kNSb76Co2PyWP_ACeorF4B_xnxhTEDJU3/s1600/LampOff.png" border="0" /></a><script language='Javascript'>

</script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;
filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;
filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">SUAS BOAS VINDAS AQUI<br/>Segunda linha aqui</a>
</div></!doctype>

12 julho 2013

Personalizando a Data

Vamos ao tutorial. Você deve prestar bastante atenção, pois tem vários códigos. Faça com calma que você consegue.

Abra o painel do blogger, clique no nome do seu blog, depois, clique em "Configurações" > "Idioma e formatação":

Mude o formato da data para a penúltima opção:

Salve as alterações. Clique agora em "Modelo" no menu lateral. É recomendável que você baixe uma cópia do seu modelo antes de prosseguir. Para fazer isso, clique no botão "Fazer backup/Restaurar" e depois em "Fazer download do modelo completo".

Depois de fazer download do seu modelo, clique no botão "Editar HTML" que fica abaixo da miniatura do seu blog. Clique em prosseguir no aviso que aparecer.

Marque a opção "Expandir modelos de widget":

Aperte Ctrl+F e procure por </head>

Logo abaixo disso, cole esse código:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>

Aperte Ctrl+F novamente e procure pela primeira linha deste código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Logo abaixo do trecho que você procurou, cole isso:

<a expr:name='data:post.id'/>

Deve ficar assim:

Aperte Ctrl+F novamente e procure pela linha abaixo:

<h2 class='date-header'><data:post.dateHeader/></h2>

Provavelmente você irá encontrar mais de um desse código. Substitua todos que encontrar por esse código:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

Agora para finalizar, procure por ]]></b:skin>E acima disso, cole o código a seguir:

#fecha {
color: #464646; /*Edite a cor da data*/
padding-top: 5px; /*Margem interna superior da data*/
padding-right: 5px; /*Margem interna direira da data*/
padding-left: 5px; /*Margem interna esquerda da data*/
padding-bottom: 5px; /*Margem interna inferior da data*/
margin-right: -0px; /*Margem externa direita */
margin-left: -0px; /*Margem externa esquerda*/
float:left;
text-align:center;
border: 1px none #dedede; /*Coloque borda se quiser*/
list-style:none;
display: block;
background: url('URL AQUI') no-repeat; /*Imagem de fundo*/
height: 30px; /*Altura da imagem*/
width: 30px; /*Largura da imagem*/
}
.fecha_dia {
display:block;
font-size:18px; /*Tamanho da fonte*/
line-height:16px; /*Altura da Linha*/
font-family:'Arial';
letter-spacing:-1px
}
.fecha_mes {
font-size:10px; /*Tamanho da fonte*/
line-height:9px; /*Altura da Linha*/
text-transform:uppercase;
display:block;
}
.fecha_anio {
font-size:9px; /*Tamanho da fonte*/
line-height:8px; /*Altura da Linha*/
display:block;
}

É nesse último código que você vai editar o estilo da data, colocar imagem de fundo e alterar a fonte.

Se você quiser que a data fique para fora da área de postagens, você deve aumentar os valores de "margin", que estão destacados em rosa. Se sua sidebar ficar no lado direito, aumente o valor de margin-left, sem apagar o tracinho (-) até que fique onde você quer. Agora se sua sidebar fica á esquerda, aumente o valor de margin-right.

Visualize se está tudo certo e salve. Se não funcionar, limpe as alterações e tente de novo com mais atenção. Abaixo tem algumas imagens para você usar como plano de fundo da data: