+c%C3%B3pia.png "LEGENDA DA IMAGEM 4")
Oi! Então, esse é o nosso primeiro layout do Inspiração Supersônica, feito totalmente por mim, então se você retirar os créditos vai ser perseguido até o quinto dos infernos.
Para aplicar o layout, vá em:
Modelo>>Fazer backup/Restaurar>>Choose file
O template estará sem cabeçalho e sem alguns gadgets. Os códigos:
Código do Gadget Welcome
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOeZNoqzhlBOeWRIwhzz9yO23fjq9YDiLy9dSnE_nya6tcFp_miS75XOTUbTy8skPXhkZlTDbfFCGcUrVdzbqXyo0TflhyphenhyphenQesV-2EnKs2ELuNgEPcSv-CldvAAbfN9Bm0MLGrlihzK5Eg/s1600/25.png" width="250" height="100" />
<center>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<center/></center></center>Código do Menu de Tags
Vá em seu HTML e procure por ]]></b:skin>. Cole acima.
#menu-tags-dois-isa {
color: white;
background-color: #COR DO FUNDO;
text-shadow: 2px 1px 1px #COR DA SOMBRA;
font-family: 'arma five';
font-size: 8px;
padding: 1px;
margin-bottom: 1px;
border: 1px solid #COR DA BORDA;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;
}
#menu-tags-dois-isa:hover {
text-shadow: 2px 1px 1px #COR DA SOMBRA HOVER;
border: 1px solid #COR DA BORDA HOVER;
-moz-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-webkit-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-o-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-ie-box-shadow:inset 160px 0px 0px #COR DA SOMBRA QUE VEM;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
transition-duration: 1s;}
@font-face {font-family: "Arma Five"; src: url('http://static.tumblr.com/bsalulu/qxQmmc6lm/pf_arma_five.ttf');}
.lado-esquerdo {float: left; width: 49%; text-align: center;}
.lado-direito {float: right; width: 49%; text-align: center;}
Abra um gadget de HTML/JavaScript e cole o código:
<div class='lado-esquerdo'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
<div class='lado-direito'>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
<a href="Link"><div id="menu-tags-dois-isa">NOME</div></a>
</div>
Slide do cabeçalho
Procure por </head> e cole abaixo:
<style type='text/css'>
/* <![CDATA[ */
#w2bSlideContainer {position: relative;display: block; top:0px; left:0px; right:0px;/*Ajuste as posição do slide*/}
#w2bNivoSlider { position:relative;
width:500px !important; /*largura do slide*/height:300px !important; /*Altura do slide*/
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV-UKVsxZKfHnfYONI5y2wSa9iiRMVrpTwf0-a8fDixBLjiGGDNNZqlO2R_5961bCyMbM0wpbDVXdnrwi2HdwT9NkG84bGhDmFR-zNnq08MfHebo0ChaOSmcZoEKupJ6B6iSiBDyPrRDme/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #dd8256;/*Coloque borda se quiser*/ }
#w2bNivoSlider img {position:absolute; top:0; left:0; display:none}
.nivoSlider {position:relative;width:100%;height:auto;}
.nivoSlider img {position:absolute;top:0;left:0}
.nivo-main-image {display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box {display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img {display:block}
.nivo-caption {padding: 5px;
font-family: Oswald,sans-serif;position:absolute; /*Fonte da legenda*/Font-size: 14px; /*Tamanho da fonte da legenda*/background:#000; /*Cor de fundo da legenda*/color:#fff; /*Cor do texto da legenda*/-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8; width: 630px;/*Largura da legenda*/ z-index:8;}
.nivo-caption p {padding:2px;margin:0}
.nivo-caption a {display:inline!important}
.nivo-html-caption {display:none}
.nivo-directionNav a {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXAfFn5eUH2NErsAt8-tD78AcfONPFHoLQ_BPX0GG2jgjU3ocz8rWEvoFkA9EW4g98zXme8VUfbdG4TbcoQQyXsmv9NL7jBQJ0RbqTGIf5zBIk33CKEuWO-pPHNYXQxnLAthjuqJdPpEjM/s1600/s-9.png") no-repeat;text-indent:-9999px;border:0}
.nivo-prevNav {left:10px}
.nivo-nextNav {background-position:-30px 0!important;right:10px}
.nivo-controlNav {position:absolute;left:0;right:0;bottom:-35px;text-align:center}
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB-nJSxr0UTdqagOVn_aai_iUeUCdQSIZLaNvadF0vyLNCRXokfpL9SbN-lbOi0WxOWRk7FIjxy5MzV7laLfvCNr4aNw1Ys0aXFIPNL3dXhnVoikBSxOty6pYo2C5o9W-3W-x6fJ-IaQdA/s1600/b-3.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
.nivo-controlNav a.active {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://static.tumblr.com/y66747w/9hlmdpcpa/nivoslider.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
$('#w2bNivoSlider').nivoSlider({
effect : 'random',
slices : 10,
boxCols : 8,
boxRows : 4,
animSpeed : 500,
pauseTime : 4000,
startSlide : 0,
directionNav : true,
directionNavHide : true,
controlNav : true,
keyboardNav : false,
pauseOnHover : true,
captionOpacity : 0.8
});
});
/* ]]> */
</script>
Agora abra um gadget de HTML e cole:
<div style="position: absolute; margin-top: -350px; left: 450px;">
<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ZXwpSjv8Ph5PnP6Q_YHdikoaLUXRsFEO9ME1uO4LVRpQLpDNvABnAZGOdJx5Qjd86Rn61sq_8bhZTPlHIqHOtnGtnYubVbLxCGIZDhqZtNSKxVXEwLqxsYlI20jdS3fgihzFF-SRYfcj/s1600/asneira.png" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipFxa8ZYhfRMgpZU-cMYE-xEblrnu8J-B8OtSB4Z8NFn7Pqx5nVHInlY0guFaLfK4DgNJqnkmRZ0311PNXfD2y7wvJcvI_rppIA09PxPVsClVDIHGrCpARlPxzh0bl__kPjqyDERodwGN3/s1600/asno+c%C3%B3pia.png" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1eEJQ458pv0eYWLCT_DSIfkJUcmwQPlqpMvNliv6XdXgwih1XtTlrg8ImYiDZ_1s3IVjeKgEa_CtEbACAv1hTaCNvI3qK2BYkGalqSrtX-_e3BngWtpHZ3OHAKuRdPiaJrED6XOiHSm6b/s1600/cor.png" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6c7TluQBMWGvs_oL9xGlk_I6CmmWq40_YzNVTA_2wSbpcPMODKjuwCTMHrDUMjqw0nOwSH6vgcYTJYGeQj9fy2prhu3TZvUY3UblHQGgUfKJPFHxT4RJIqeTRb_LvydBgId8nf6JcuNq/s1600/image+(6)+c%C3%B3pia.png" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div></div>
Agora, o cabeçalho. Usamos uma base trasparente de 1020x300 (deixe a largura do seu blog em 1020 e a da sidebar em 300) e a fonte que usamos foi a Bittersweet. Download.
Agora é só editar e usar as cores certas. Por favor, não retire os créditos de jeito nenhum e use com sabedoria. PLÁGIO É CRIME!
DOWNLOAD
