29 janeiro 2014

Menu para sidebar

Pra quem gosta de usar menus na sidebar, hoje trouxe um código feito por mim (que orgulho *_*). Eu usei ele no lay free Blogger to tumblr, portanto clique aqui para ver como fica.

Para colocá-lo no seu blog, vá no seu HTML, aperte Ctrl + F e procure por ]]>

Então cole esse código logo acima:

/*menu por Liah - Cherry Bomb - credite sempre*/#menucb {
float: left;
display: line;
margin:1px;
background:#f2eee8; /*Cor de fundo */
width: 87px; /*Largura de cada link do menu */
height: 25px;
text-align:center;
font-size: 16px; /*Tamanho da fonte*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 0px 9px #cccccc;
-webkit-box-shadow: 1px 0px 9px #cccccc;
box-shadow: 1px 0px 9px #cccccc;
text-shadow: 0px 1px 5px #cccccc;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
#menucb:hover {
background: #cfd9f6; /* Cor de funo quando passa o mouse*/
color: #fff; /*Cor do texto quando passa o mouse*/
}

Salve as alterações.

AGORA:Vá até o layout do seu blog, adicione um gadget de HMTL/Javascript onde você quiser que o menu apareça e coloque esse código:

<a href='LINK' id='menucb'>TÍTULO DO LINK</a>

Repita ele para cada link que for colocar no menu e substitua a url e o nome do link. Depois é só salvar o gadget e pronto!

Espero que tenham gostado, e se usarem, dêem os créditos por favor. Ah, voltamos a ter uma cbox aqui no blog, é só clicar na imagem ali na sidebar que ela abre feito mágica *_*

07 janeiro 2014

Embed para sites de filmes!E seriados

Cole este código em HTML/javascript

Hoje postarei um embed para sites e blogs,esse embed eu encontrei no seguinte site :megafilmeshd.net
Esse embed foi feito especialmente para sites de tv e filmes.
segue o código abaixo :

<iframe name="megafilmes" marginheight="1" marginwidth="1" scrolling="no" width="100%" src="http://www.megafilmeshd.net/lista.html" frameborder="0" height="500"></iframe>

*****************************************************************

Código para colocar seriado em seu blog
segue o código abaixo:
<iframe name="megaseries" marginheight="1" marginwidth="1" scrolling="no" width="468" src="http://megafilmeshd.net/series/" frameborder="0" height="350"></iframe>
megafilmeshd.net

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" .