Como Colocar Slide No Blog

 

Oi gente :3 vocês viram que eu coloquei o slide no meu blog? *-* Então hoje eu vou ensinar pra vocês como colocar esse slide no blog... vamos ao tutorial

- Primeiro vá em modelo > Editar HTML e pesquise por  </head> (aperte Ctrl + F)

- Feito isso cole o seguinte código abaixo de </head>

 <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:640px  !important; /*largura do slide*/height:300px  !important; /*Altura do slide*/
background:  #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6pAdtWewn2jLlZrrp3pIPMzM2psMAZh0YDzIlxCmMuF8SpDbRM8d096v5PMYvcCAccZYZ7HPSh4WBBGTs6Fswn6bCx2ls-PE7A13SgOPnx7WGEmz5nCTh3EUE-ONKMEJjmKdIMMEBtogr/s1600/w2bLoader.gif") no-repeat 50% 50%;
margin: 20px auto 35px;
border: 3px solid #000;/*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: Arial,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("URL_IMG_SETA") 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("URL_IMG_BULLETS") 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>

As partes onde está em negrito são as que você vai ter que editar de acordo com o seu blog ou como você quiser que fique o slide, depois clique em salvar modelo.

- Agora vá em Layout > Adicionar gadget > adicione o gadget HTML/Javascript e dentro dele cole o seguinte código:

<div id="w2bSlideContainer">
<div id="w2bNivoSlider">
<a href="LINK_DO_SLIDE_1"><img src="URL_DA_IMAGEM_1" title="LEGENDA DA IMAGEM 1"/></a>
<a href="LINK_DO_SLIDE_2"><img src="URL_DA_IMAGEM_2" title="LEGENDA DA IMAGEM 2"/></a>
<a href="LINK_DO_SLIDE_3"><img src="URL_DA_IMAGEM_3" title="LEGENDA DA IMAGEM 3"/></a>
<a href="LINK_DO_SLIDE_4"><img src="URL_DA_IMAGEM_4" title="LEGENDA DA IMAGEM 4"/></a>
</div>
</div>

Onde está escrito Link do slide, você vai colocar o link de uma postagem por exemplo, Url da imagem, você vai colar o endereço da imagem que você quer que apareça no slide, Legenda da imagem, a legenda que você quer que fique e pronto! ta feito o seu slide :3

Então é isso galera bjs.

Como personalizar o menu do blog

 

Oi gente tudo bom? trouxe um tutorial divino pra vocês :3 que como personalizar o menu do blog, mas o que é menu do blog? e onde tem as paginas (inicio, contato, por exemplo) vejam o exemplo abaixo: 

Depois de personalizado o menu vai ficar mais ou menos igual o meu... então vamos ao tutorial!

Primeiro vá em modelo> editar HTML > Aperte ctrl+f e procure por  /* Tabs

você vai encontrar o seguinte código abaixo:

 /* Tabs
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

.tabs-inner .widget li {
border: none;
}

.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
}

Apague todo o código acima e substitua por este:


* Menu do blogger personalizado by Go Imagine modificado por Bloguinho Cute
----------------------------------------------- */
.tabs-inner {
margin: 1em 0 0;
padding: 0;
margin-top: 0px; /*para subir ou descer o menu troque o número*/
margin-left: 0px; /*para afastar o menu para esquerda ou direita troque o número*/
}

.tabs-inner .section {
margin: 0;
}

.tabs-inner .widget ul {
padding: 0;
}

.tabs-inner .widget li {
border: none;
}

/*Estado normal do menu*/
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #fff; /*cor da fonte*/
font: $(tabs.font); /*fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px;
background: #BFCED5; /*cor do fundo normal*/
margin-left: 8px; /*espaço entre os botões*/
}

/*Estado hover e selecionado*/
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #8BC2C9; /*cor do fundo hover/selecionado*/
color: #fff; /*cor da fonte*/
border-radius: 50px; /*bordas arredondadas, apague a linha se n quiser*/
line-height: 5px;
padding: 12px; /*espaçamento interno*/
}

 Lembrando que no margin-top números positivos descem e negativos sobem. Já no margin-left números negativos vão para a esquerda e positivos para a direita.

Viu como é  facíl gente? *-*  Então é isso galera beijos! ;D

 Créditos á Goimagine e Bloguinho Cute

Como fazer cabeçalho ocupar toda a largura do blog!

Oi gente, hoje vou ensinar pra vocês como fazer o cabeçalho ocupar toda a largura do blog, não vou dizer que é simples, mas também não é tão dificil... bem, existem duas maneiras de ajustar o cabeçalho com todo o blog, sem um plano de fundo e com um plano de fundo eu usei a primeira porque não tive muita paciência, e ainda sim o meu cabeçalho não ficou beem do jeito que eu queria mas deu pro gasto rs, vamos lá...

Opção 1. sem o plano de fundo:

Primeiramente tem que ter o seu cabeçalho pronto e um cabeçalho transparente, sem brush, sem nada. depois vá em modelo > Layout > cabeçalho (onde tem o nome do seu blog) > editar e carregue a imagem transparente.

Depois vá em modelo > personalizar > plano de fundo > e carregue o seu cabeçalho (normal, com brush etc) Não esqueça de marcar a opção "NÃO DIVIDIR EM BLOCOS" quando a sua imagem carregar.

ATENÇÃO: seu cabeçalho não pode ter mais que 300 kb, se tiver vai aparecer uma mensagem dizendo que o arquivo é muito grande, por isso quando você estiver fazendo o seu cabeçalho preste atenção no tamanho da foto das ilustraçoes se voce for usar é claro, escolha imagens com poucos kb! e sempre redimensione o seu cabeçalho! no meu eu usei 1444 de largura! mas isso depende do seu layout, você vai ter que procurar uma largura que ajuste perfeitamente com o resto do blog, ( foi nessa parte que me faltou a paciência heuheu )

Opção 2. com um plano de fundo:

 Vá em modelo > Editar HTML clique dentro da caixa do html primeiro agora aperte Ctrl+f e vai abrir uma caixinha de pesquisa em cima, na caixinha cole o seguinte codigo >  font: $(body.font);  ou esse >  body {  

pronto depois de ter pesquisado você vai encontrar o codigo abaixo >  

body {

font: $(body.font);

color: $(body.text.color);

background: $(body.background);

}

Apague o codigo acima e substitua por este:

body, html {

height: 400px;

margin: 0;

padding: 0; }

body {

background: url("URL do cabeçalho") no-repeat; }

html {

background: url("URL do background") repeat; }

Onde está escrito "URL do cabeçalho" troque por a url (endereço) do seu cabeçalho, que tem que está hospedado na internet.

Onde está escrito "URL do background" troque por a url do background que você vai usar! 



                                             Então é isso galera espero que tenham gostado do tutorial, beijos :3

Inspiração: blusas com franjas!

Oi galeres *-* a quanto tempo né? rs, então hoje trago pra vocês uma dica super legal, vocês ja perceberam que está super em alta as blusas com franjas né? o melhor de tudo é que você mesma pode fazer em casa, vou deixar um tutorial que achei no youtube e algumas blusas pra vocês se inspirarem hihi...

Turorial: http://www.youtube.com/watch?v=XBjRZ7IU7po&hd=1

então é isso galere... bjs e até a próxima!