Slide No Blogger

Me desculpa não ter postado esse tutorial antes. Eu acabei me distraindo e me esqueci de postar, Vamos ver como por Slides no blog? Os slides que me refiro são aqueles que tem uma setinha pra mudar o slide e com efeitos hovers diferentes.










Vamos ver como faze-lo? Então clique no Leia Mais.

 Primeiro, você vai em Design/Modelo > Editar HTML > Ctrl + F e procure por </head> e acima 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>

Agora procure por ]]> e acima cole:

/* 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: 356px;} .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:#000; color:#fff; 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(http://twizonebr.com/Novidades/wp-content/themes/twizonebrvrs1/arrowswleft.png) no-repeat;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;}

Você não precisa mudar NADA. Agora vamos adicionar o slide em algum Lugar do blog. Vá em Design/Modelo > Elementos da página > Adicinar um gadget HTML/JavaScript > Cole esse código:
<div id="slide"> <div id="slider"> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" width="763" height="277" /></a> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" width="763" height="277" /></a> <a href="LINK" target="_blank"><img src="LINK DA IMAGEM" title="ESCREVA A DESCRIÇÃO"width="763" height="277" /></a> </div> </div>

Primeiro você vai ter saber a largura das imagens, e ter o link. Saiba o que cada parte significa:
LINK DA IMAGEM: Link da imagem.
width/height: Largura e altura da imagem (height: altura & widht: largura).
LINK: O link.
Bem mais fácil do que se parece né? Espero que tenham gostado do tutorial. Obrigado e até.

Sistema termos de uso [Novo]

Yo galera, hoje trago uma super novidade na Designer Project, que é o codigo de termos de uso, é usado por muitos que retiram conteúdos da internet e querem dar uma justificativa para o visitante, tendo até a opção de aceitar ou não o termo. Qualquer dúvida deixe um comentário.

Veja a demo abaixo:

- Todos os links e arquivos que se encontram no blog, estão hospedados na própria Internet, somente indicamos onde se encontra. - Qualquer arquivo protegido por algum tipo de lei deve permanecer, no máximo, 24 horas em seu computador. - Eles podem ser baixados apenas para teste, devendo o usuário apagá-lo ou compra-lo após 24 horas. - A aquisição desses arquivos pela internet é de única e exclusiva responsabilidade do usuário. - Os donos, webmasters e qualquer outra pessoa que tenha relacionamento com a produção do blog não tem responsabilidade alguma sobre os arquivos que o usuário venha a baixar e para que ira utiliza-los. Eu aceito Não aceito

Vamos ao código:

Agora coloque o código abaixo em uma pagina html

<center><textarea rows="10" cols="17" style="background-color: rgb(255, 255, 255); color: rgb(0, 0, 0);" wrap="soft">ESCREVA O SEU TERMO. <*/textarea><center> <center>

Editando:

Escreva o seu termo e no final do código apague o * .

Após escrever o seu termo cole o código abaixo:

<input onclick="alert('Obrigado por aceitar os Termos.')" name="message" type="radio" /> Eu aceito <input onclick="alert('Se não aceita os termos de uso retire-se do blog.')" name="message" type="radio" /> Não aceito </center</center></center>

Menu Salto

Yo galera, venho trazer um tutorial para aqueles que querem um menu simples e pratico, sem levar muito o seu tempo para instala-lo. Ele é usado por muitas pessoas com uma opção de menu principal pela forma que ele se apresenta ao visitante. Qualquer dúvida deixe um comentário.

Veja o exemplo abaixo:

ESCOLHA UM ITEM DO MENU TITULO 1 TITULO 2 TITULO 3 TITULO 4

1º Crie uma pagina em Adicionar um Gadget, HTML/JavaScript

Após fazer isso cole o código abaixo:

<form> <select style="color: #000; padding: 5px; width: 250px;" name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value"> <option selected="selected">ESCOLHA UM ITEM DO MENU</option> <option value="LINK 1">ITEM 1</option> <option value="LINK 2">ITEM 2</option> <option value="LINK 3">ITEM 3</option> <option value="LINK 4">ITEM 4</option> </select></form>

Menu Suspenso (Menu de Salto)

Yo galera estou trazendo um tutorial bem bacana, que é o menu suspenso. Então vamos lá.

Código.

<center><form><select style="color: #000; padding: 5px; width: 250px;" name="links" onchange="top.location.href=this.form.links.options[this.form.links.selectedIndex].value"> 
<option selected="selected">ESCOLHA UM ITEM DO MENU</option> 
<option value="LINK 1">ITEM 1</option> 
<option value="LINK 2">ITEM 2</option> 
<option value="LINK 3">ITEM 3</option> 
<option value="LINK 4">ITEM 4</option> 
</select></form></center>

Modifique os Termos em destaque (Cores, Espaço interno e Tamanho Respectivamente)
Fonte: DOS

Tutorial - Colocar texto em movimento

Yo galera, hoje trago um tutorial bem bacana que é colocar texto em movimento e com funco colorido. Então vamos lá.

Imagem OnClick

Yo galera, outro tutorial bem bacana pra vocês o efeito OnClick em imagem. 

Então vamos começar, primeiro substitua por aquilo que pede, que é o link das duas imagens e o link do menu.

<img src="IMAGEM01" onmouseover="this.src='IMAGEM02'" onmouseout="this.src='IMAGEM01'" onclick="location='LINK DO MENU'" /> 

Exemplo:

Caixa de seguidores do Twitter

Yo, trago esse tutorial para deixar a caixa de seguidores do Twitter mais legal. ^^

Primeiro passo:

Bom, no blogger, vá em Design, adicionar um gadget, HTML/JavaScript. E cole o código logo abaixo mas lembrando em editar as devidas partes em vermelho.

<div class="textwidget">

<script type="text/javascript" src="http://s.moopz.com/fanbox_init.js"></script>

<div id="twitterfanbox">

<script type="text/javascript">fanbox_init("NOME NO TWITTER");</script>

</div>

</div>

<style>

.FB_SERVER_IFRAME {

height: 250px !important;

width: 290px !important;

</style>

Espero que tenha gostado. ^^

Ícones de redes sociais

Yo, trago essa maneira bem legal pra colocar link em rede sociais. Vamos lá.

Primeiro passo:

Bom, no blogger, vá em Design, adicionar um gadget, HTML/JavaScript. E cole o código logo abaixo mas lembrando em editar as devidas partes em vermelho.

<div style="margin: 5px; padding: 10px;"><a

href="ENDEREÇO DO FEED"><img

style="border: 0px solid ; width: 48px; height: 48px; float: left;"

alt=""

src="http://lh5.ggpht.com/_dAGEULh1_1g/THwD-xP5n9I/AAAAAAAAEBk/1DE1CA0UtCA/rss.png"></a><a

href="ENDEREÇO DO TWITTER"><img

style="border: 0px solid ; padding-left: 5px; width: 48px; height: 48px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-5SoTTI/AAAAAAAAEBo/Yh2jRrtkOeo/twitter.png"></a><a

href="ENDEREÇO DO YOUTUBE"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh3.ggpht.com/_dAGEULh1_1g/THwD-4XjHKI/AAAAAAAAEBs/waG0ImvEsQI/youtube.png"></a><a

href="ENDEREÇO DO ORKUT"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh4.ggpht.com/_dAGEULh1_1g/THwD-3vEZVI/AAAAAAAAEBg/jq-RSB5gXBc/orkut.png"></a><a

href="ENDEREÇO DO FACEBOOK"><img

style="border: 0px solid ; width: 48px; height: 48px; padding-left: 5px;"

alt=""

src="http://lh6.ggpht.com/_dAGEULh1_1g/THwD-vZ7bDI/AAAAAAAAEBc/4fHoPnWmq8M/facebook.png"></a><br></div>

Espero que tenha gostado. ^^

Caixa de Feed Flutuante

Yo, trago pra vocês uma maneira de personalizar o feed, é uma caixa flutuante que fica no rodapé e acompanha a pagina. Vamos começar.

Exemplo:

Primeiro passo:

Bom, no blogger, vá em Design, adicionar um gadget, HTML/JavaScript. E cole o código logo abaixo mas lembrando em editar as devidas partes em vermelho.

<script type="text/javascript" src="http://dl.dropbox.com/u/30158660/blogger-widgets/assinar-feed2.js"></script><div id="feed" style="visibility: hidden; background-color: #ffffff; width: 320px;height: 115px;border: 1px solid black; position: fixed; bottom: 10px; right: 10px;  z-index:1000000"><div id="topo-title" align="center" style="width: 100%; height:16px; background-color: #000000">

<span id="assinar-feed-head" style="font-size:12px; color:#ffffff;font-weight: bold;">ASSINE NOSSO FEED!<a href="javascript:closebar(feed);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIjW2aLg8C5zymkj_BcYopU0QYi2JjgXysiNd2g7IfdSeCAThdU_6Ff7aILqlvu86ESdTO7DikEX8iZTpbLQX_-_aXXhez5IhtZ9myX7onUdr8gq5eXJnQWa8GAGRVxA7UzF32zJHXVZl/" widht="300px" height="16" px; align="right" border="0" title="Fechar" /></a>

</span></div><div style="width: 100%; height:auto !important; min-height: 84px; height: 84px;font-size:13px; font-weight:bold; color:black;"><a href="URL-DO-FEED"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga4_bJZ4m8aYo3jNlaU9jgN-0FOpEEuOQu8arTBvyewDiHmzGiIs2GFAaigAqdCe_JCkpcC4oPT-MNS28TWQqq0FY8PuSWXezjOFDO2OIpO2GgTD8HzhQhTAnSROdWm-YW5MLnMGprhX2w/" align="left" alt="Inscrever-Rss-Feed" title="Cadastre-se no nosso Feed!" /></a>Cadastre seu <u>E-mail</u> e receba nossas atualizações diretamente no seu e-mail!<br /><br /><form align="center" action='http://feedburner.google.com/fb/a/mailverify' method='post' target="_blank"><input type="text" style="width:230px" name="email" value="Coloque seu E-mail aqui!" onblur="if (this.value == &#39;&#39;) 

{this.value = &#39;Coloque seu E-mail aqui!&#39;;}" onfocus="if (this.value == &#39;Coloque seu E-mail aqui!&#39;) {this.value = &#39;&#39;;}" align="center" />

<input name="uri" type="hidden" value="NOME-DO-FEED" /><input name="loc" type="hidden" value="pt_BR" /><input type="submit" value="Assinar" />

</form>

<p style="text-align: center;margin-top:0px;font-size:80%"></p></div></div>

Espero que tenha gostado. ^^

Textos ou Banners Rolando

Yo, pediram esse feito bem bacana pra personalizar a area da parceria ou um texto. Vamos lá.

De vermelho, determine a altura a largura, respectivamente.

De verde, a direção: "up" - de baixo para cima "down" - de cima para baixo "up style" -  da esquerda para a direita

De azul, a velocidade do rolamento.

De laranja, insira os códigos de imagens, textos ou banners. <marquee heigth="480" widht="480" direction="up" behavior="scroll" onmouseover="this.stop() " onmouseout="this.start()" scrollamount="3"> <center> Código de Imagem, Texto ou Banner. </center></marquee> Espero que tenha ajudado. ^^

Adicionando facebook na lateral

Yo, trago o tutorial de como colocar o facebook na lateral da tela. Espero que gostem.

Vamos lá

1º - Vá no Painel de Controle de seu Blog e clique na Guia Modelo.

2º - Clique no Botão Editar HTML.

3º - Agora pressione as teclas CTRL+F e procure por:

</ head>

 4º - E ACIMA dele cole o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/

jquery.min.js" type="text/javascript"></script>

5º - Clique em Salvar Modelo.


Agora vamos adicionar essa Box em seu blog, então faça o seguinte:
Clique na Guia Layout →  Adicionar um Gadget e selecione a opção "HTML/JavaScript". (Não adicione título no gadget). Na caixa do Gadget cole o código abaixo:

<script type="text/javascript">

//<!--

$(document).ready(function() {$(".box-curtir-flutuante").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});

//-->

</script>

<style type="text/css">

.box-curtir-flutuante{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksEQMG-20HK0ymIgU591SUFDwoAaQrBeW_N3Mml4-vMwmgE4X9B0AFSepdv-WOuv8KtwMvEU3FkjPfzpEwOa2aC-o2q-mLUjZeT77o2KsqVzJjzmrTS5n_f3VZVf2pGHOYdKUnnJ3dJs/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}

.box-curtir-flutuante div{border:none;position:relative;display:block;}

.box-curtir-flutuante span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}

.box-curtir-flutuante span a{color: #808080;text-decoration:none;}

.box-curtir-flutuante span a:hover{text-decoration:underline;}

</style><div class="box-curtir-flutuante" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=COLOQUE-O-URL-DA-SUA-PÁGINA-DO-FACEBOOK&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe></div></div>

6º - Feita as alterações, clique em Salvar.

Pássaro do twitter voando

Yo, traga do esse tutorial bem bacana, um pássaro do twitter voando na tela, então o código está logo abaixo, pra adicionar você deve:

Crie um Gadget sem título de HTML/JavaScript em qualquer lugar do blog e cole o script abaixo:

<script src='http://oloblogger.googlecode.com/files/tripleflap.js' type='text/javascript'></script>

<script type='text/javascript'> 

var birdSprite="http://img827.imageshack.us/img827/7393/birdsprite.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");

var twitterAccount = "ENDEREÇO NO TWITTER";

var tweetThisText = "Leyendo: WWW.CREATE SOUL.BLOGSPOT.COM";

tripleflapInit();

</script>     

É isso,espero que tenha ajudado. Valeu.

Botões de subir e descer

Vá em "Design" > "Editar html".
1  Procure por: </body> e acima dele cole o código abaixo:

    <!-- Código da seta no canto da janela -->

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img alt='Ir ao Topo' border='0' src='http://lh3.ggpht.com/_ng5d2Z6JZ3w/TAudodPSY1I/AAAAAAAABoc/SfAeX4gqzrU/up_arrow_thumb%5B1%5D.png?imgmax=800' style='position:fixed; bottom:40px; right:0;'/></a> 

<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img alt='Ir ao Fundo' border='0' src='http://lh3.ggpht.com/_ng5d2Z6JZ3w/TAudpdzyIRI/AAAAAAAABok/7dRENO784gk/down_arrow_thumb%5B1%5D.png?imgmax=800' style='position:fixed; bottom:70px; right:0;'/></a> 
<!-- Fim do código da seta no canto da janela -->

2 ~ Agora procure por: </head> e antes dele coloque, o seguinte código:

<script src='http://www.google.com/jsapi'/>

<script>

google.load("prototype","1.6.0.3");

window.JSON = {

parse: function (st) { return st.evalJSON(); },

stringify: function(obj) { return Object.toJSON(obj); }

}; google.load("scriptaculous", "1.8.2");

</script>

3 ~ Edite as imagens:

http://lh3.ggpht.com/_ng5d2Z6JZ3w/TAudpdzyIRI/AAAAAAAABok/7dRENO784gk/down_arrow_thumb%5B1%5D.png?imgmax=800

http://lh3.ggpht.com/_ng5d2Z6JZ3w/TAudodPSY1I/AAAAAAAABoc/SfAeX4gqzrU/up_arrow_thumb%5B1%5D.png?imgmax=800

Bloquear botão direito

Olá pessoal, o tutorial de como bloquear o botão direito do mouse, siga os passos a baixo:

1. Faça o login no blogger e vá em Design > Editar HTML

2. Aperte CTRL + F procure pela tag:

</head>

3.Logo abaixo insira o seguinte codigo acima da tag: 

<script>

function click() {

if (event.button==2||event.button==3) {

oncontextmenu=&#39;return false&#39;;

}

}

document.onmousedown=click

document.oncontextmenu = new Function(&quot;return false;&quot;)

</script> 

E pronto, espero que tenham gostado. ^^

Colocar seta pra subir

Primeiro substitua a imagem pela sua escolha, e depois copie o codigo abaixo:^

<div style="position:fixed; bottom:0px; right:0px;"><a href="#"><img src="Sua imagem" border="0" /></a></div>

Ajuda:

Para fazer isso você só precisa entrar na sala Design, adicionar gadget, e escolha html/javascript, e colo o código acima em qualquer parte da pagina, e ja esta pronto. 

Redirecionando blogs

Olá, você tem um novo blog, mais também tem um antigo, que você  nunca mais vai usar e quer alguma função pra ele, Aqui esta a solução, um código que vai fazer o seu blog ser direcionado para o seu novo blog. Código abaixo.

<script language="javascript" type="text/javascript">

location.replace("Seu site")

</script>

Ajuda:

Para fazer isso você só precisa entrar na sala Design, adicionar gadget, e escolha html/javascript, e colo o código acima em qualquer parte da pagina, e ja esta pronto. Quando você entrar no blog você ira ser redirecionado para seu novo blog/site.