PoloWave Html's: abril 2015

Edite as letras destacadas abaixo...

Link da Página... - Edite está Palavra Pelo Link da Página Que você Gostaria.
Nome da Página... - Edite está Palavra Pelo Nome da Página.
#ffffff - Edite este Código Pelo Código da cor Que Você Gostaria de Colocar no menu.
Local - Edite está Palavra Por: Left (Esquerda) Center (Centro) ou Right (Direita)

<style type='text/css'>
#menu{
background: #ffffff;
width:100%;
height:40px;
padding:6px;
text-align:center;
position:fixed;
top:0px;
left:0px;
box-shadow:0 0 6px #66757F;
z-index:8888;
}
#menu .content{
width:1024px;
position:relative;
left:50%;
margin-left:-512px;
margin-top:5px;
}
#menu ul{
margin:4px;
padding:0;
padding-bottom:20px;
}
#menu li{
display:inline;
list-style:none;
padding-bottom:20px;
}
#menu li a{
margin-top: 20px;
color:#000;
padding:25px;
padding-bottom:20px;
font-family: Helvetica;
font-size:17px;
text-decoration:none;
z-index:9999;
}
#menu li a:hover{
color:#059bff;
border-bottom:3px solid #059bff;
padding-bottom:15px;
transition:ALL 0.3s ease;
}
#menu input[type='text']{
background-color:#8E9BA4;
border:1px solid #ffffff;
height: 25px;
color:#fff;
font-family:Arial;
font-size:14px;
padding:3px;
border-radius:20px;
outline:none;
margin-top: -2px;
margin-left: 80px;
}

#menu input[type='text']:focus{
color: #fff;
background-color:#66757F;
box-shadow:0 0 4px #027194;
transition:ALL 0.2s ease;
}
#menu input[type='submit']{
height: 25px;
background-color:#8E9BA4;
color:#fff;
font-family:Arial;
font-size:14px;
padding:4px 6px;
border-radius:5px;
border-width:0;
}
#menu input[type='submit']:hover{
background-color:#66757F;
cursor:pointer;
transition:ALL 0.3s ease;
border:
}
</style>

<div id='menu'>

<div class='content'>
<ul style='float:Local;'>
<li><a href='Link da Página 01'>Nome da Página 01</a></li>
<li><a href='Link da Página 02'>Nome da Página 02</a></li>
<li><a href='Link da Página 03'>Nome da Página 03</a></li>
<li><a href='Link da Página 04'>Nome da Página 04</a></li>
<li><a href='Link da Página 05'>Nome da Página 05</a></li>
</ul>

Continue lendo ►

Primeiramente, vou lembrar, que isso não é a versão mais actual. Cada versão tem as suas modificações, mas você próprio também as pode fazer, como mudar as "setas" e etc.
Primeiramente, acesse o seu painel do Blogger, abra o menu dropdown e elcolha a opção “Modelo”. Depois clique no botão chamado “Editar HTML” e “Prosseguir”.

COLOCANDO O SCRIPT NO TEMPLATE

Depois de ter acessado o editor HTML, pesquise a seguinte linha utilizando a ferramenta do próprio navegador (Ctrl+F):

</head>

Encontrou? Caso tenha visto, copie os códigos abaixo e cole em cima da linha pesquisada:

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

<script type='text/javascript'>
$(window).load(function() {
$('#featured').orbit({
advanceSpeed: 5000,
'bullets': true,
'timer' : true,
'animation' : 'horizontal-slide'
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Orbit Plugin 1.1
* www.ZURB.com/playground
* Copyright 2010, ZURB
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&
x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},
a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=
a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;
d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},
a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);
j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);
//]]>
</script>

ADICIONANDO ESTILOS AO SLIDE

O próximo passo é adicionar os estilos (ou CSS).

Para colocar no template, pesquise por:

]]></b:skin>

E cole acima as seguintes linhas CSS:

/* ORBIT SLIDER
----------------------------------------------- */
#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-KWVOvjQoM2Lco5KVAG2njWRTFdIkTJhD6iUhqJqUjbf3YcFTe71vgksc3eQvWfVW8YjZjj_H5oUYQhBFb-hhCwFajKvk3wiOx5wIw-PwVeo8Jfiep2xQwdLjPPtewGqgr2wn9zDlUeuZ/s1600/rotator-black.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibtf-cf5qIuCYEubPgowWuJjWZCCY12rsD3dQBGlgd26Ye8AW172W9m7f3n4my4fGAoJ_0hLJAe3KyFvPISIMCtpZiWRnIF5Ou2jK8tYnYuf3VSMHFbz2N25ifnKVCj0rjseh5XM3FgtuK/s1600/timer-black.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtOrVEx_Poz90Askcs7PUprsl2UL6xyALComa9vXvizoT_AqP8raNrhlKHR0067XHlZrijvhyNWL299QAQ5Nu-3QKTUqDsvxXh6wNvsrwoWmFMkwrGjzCKHVIOd2aOG5-d5urGeFY9uo5M/s1600/pause-black.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7S70SmX6hAyt238Ui3ZGqbvdssf5EUQ5deTOu7gwUVRLCWqSgju3v3CfBJbdq4ZWMmOR-Kzl1HfxQvZICyDCCiIO1IJzwVIW6eOdCzokuM7MFV5cHrCmJ9uMAh7Hq2lLordNPTaxyRx1u/s1600/right-arrow.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnBwGpMFs7w5gE52T_WJEJ4_8hsRtoSlWGnwp9csgSOKZ5NP9UYWazNpS0XKb6YQx_FdXkl-8xdk_EGSKa-yrQaVTlfxzaepjDxirLoU2xYfztLfMCHBrPrFfUi8TLiHfqC-JrA-c4ZTZR/s1600/left-arrow.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiwRue1Uv7WCJi67Ld4MjZTNJ9bXKNILMMn9eyeAdNpJZqi210AA9F_AgHGMIGNGxaJrrTZZmYuGtCWm96JqFz5Gevs7O2TupGc_SVS048QDuGwRF4JR8SLlGY-QJkd7ztUgg3_uxulRf6/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0;
}

COLOCANDO AS LINHAS HTML NO TEMPLATE

Por fim, ensinar a colocar algumas linhas adicionais para visualizar o slide na página do seu blog. Para isso, crie um novo gadget na página layout no painel do Blogger e cole dentro o seguinte código:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='featured'>
<a href="LINK_IMAGEM_1"><img rel='foto1' src="URL_IMAGEM_1" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto1'>DESCRIÇÃO_IMAGEM_1</span>

<a href="LINK_IMAGEM_2"><img rel='foto2' src="URL_IMAGEM_2" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto2'>DESCRIÇÃO_IMAGEM_2</span>

<a href="LINK_IMAGEM_3"><img rel='foto3' src="URL_IMAGEM_3" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto3'>DESCRIÇÃO_IMAGEM_3</span>

<a href="LINK_IMAGEM_4"><img rel='foto4' src="URL_IMAGEM_4" style='width:580px; height:325px;'/></a><span class='orbit-caption' id='foto4'>DESCRIÇÃO_IMAGEM_4</span>
</div>
</b:if>

Coloque os links do artigo que representa a imagem onde está escrito “LINK_IMAGEM”, adicione a URL da imagem onde está aparecendo “URL_IMAGEM” e descrição em cada linha.

Caso não funcione, pode ser porque tem demasiados "scripts" no seu layout. Tente eliminar alguns.

Continue lendo ►

PoloWave Html's

Arquivo do blog

Estamos por aí

RocketSnail no Discord

Menu Horizontal RollDown 2/3

Menu Horizontal RollDown 1/3

Slides Premium 1/5

COLOCANDO O SCRIPT NO TEMPLATE

ADICIONANDO ESTILOS AO SLIDE

COLOCANDO AS LINHAS HTML NO TEMPLATE