7 de ago de 2014

#1 For the Bloggers


Nos grupos de bloggers no Facebook percebo muitas pessoas pedindo ajuda sobre algumas questões relativamente simples, que uso ou já usei aqui no blog e que encontrei na internet. Então nesta série de posts vou ensinar vocês a incluir slides, comentários do Facebook e a opção de curtir a fanpage do blog na barra lateral, entre outras coisas. 

Vamos começar pelo Slider. Com este código ele irá apresentar os posts recentes do seu blog e as fotos deles automaticamente. Lembrando que é importante criar as imagens para o post nas mesmas dimensões que você irá selecionar para o slide. Outra dica indispensável é colar os códigos em um bloco de notas antes de colocar no seu blog.

1- Acesse seu blogger, vá em "Modelo" e depois "Editar HTML".

2- Clique no código de seu template, pressione "CTRL+F" e pesquise por  ]] > </ b: sk in > (retire os espaços)

3- ACIMA da tag pesquisada cole o seguinte código:

/*----- INÍCIO DO SLIDE  ----------------------------------------*/
.th eme- default .nivoSlider {
position:relative;
backgr ound :#fff url(http://4.bp.blogspo t.com/ - ly7fzdRVYSw/Unaw16dpWOI/ AAAAAAAAB98/Y-MCamn7gTg/s1600/loading.gif) no-repeat 50% 50%;
-web kit-box-shadow: 0 px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
 box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
 position:abs olute;to p:0px;left: 0px;display:none;
}
.theme-default .nivoSlider a {
 border:0;display:block;
}
.theme-defa u lt .nivo-controlNav {
 position:abs olute;left:50%;bottom:-42px;
 margin-left:-40p x; /* Tweak this to center bullets */
}
.theme-default .n ivo-controlNav a {
 display:blo ck;width:22px;height:22px;
 background:url(h ttp://1.bp.blogspot.com/-5SVyk_I uXL0 /U naw-9FiC1I/AAAAAAAAB-E/bUiJlPt0b-E/s1600/bu llets.png) no-r epeat;
 text-indent:-9999px;border:0;margin-right:3px;float:left;
}
.theme-default .nivo-controlNav a.active {
 backgroun d-position:0 -22px;
}
.theme-default .nivo- directionNav a {
 display:block;width:30px;height:30px;
 backgrou nd:url(http://2.bp.blo gspot.com/-ZfMy0_axq9 I/UnaxF7X _BgI/AAAAAAAAB-M/F4rPrDMd2Xo/s160 0/arrows.png) no-repeat;
 text-indent:-9999px;b order:0;
}
.theme-default a.nivo-nextNav {
 background-position:-30px 0;right:15px;
}
.theme-def ault a.nivo-prevNav {
 left:15px;
}
.theme-default .n ivo-caption {
 font-family: Helv etica, Arial, sans-serif;
}
.theme-defau lt .nivo-caption a {
 color:#fff;
 border- bott om:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
 color:#fff;
}
/*-----  E ND De fault Theme ----------------------------------------*/
/* The Nivo Slider styles */
.nivoSlider {
 positio n: relative;
}
.nivo Slider img {
 position:ab solute;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 a nd boxes in the Slider */
.nivo-slice {
 displa y:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
/* Caption styles */
.nivo-caption {
 position :absolute;
 l eft:0px;
 bottom :0px;
 background:#000;
 color:#ff f;
 opacity:0.8; /* Overridd en by caption Opacit y settin g */
 width:100%;
height:50px;
 z-index:8;
}
.nivo- caption p {
 padd ing:10px;
 margin:0;
font-si ze:15px;
}
.nivo-c aption a {
 display:inline !important;
}
.nivo-html-caption {
 display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
 position:absolute;
 top:45%;
 z-index:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo -nex tNav {
 right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-contro lNav a {
 positi on:relative;
 z-ind ex:9;
 cursor:poi nter;
}
.nivo-control Nav a.active {
 font-w eight:bold;
}
.them e-default #slider {
margin: 10px -20px 60px 10px; /* Aqui você define a posição do slide */
widt h:610px;
height:3 00px;

}
.theme-pascal.slider-wrapper,
.theme-orman.slider-wrapper {
 ma rgin- top:1 50px;
}
.cle ar {
 clear :both;
}
 (lembre-se de deletar todos os espaços simples, mantendo apenas os Enter)

* Se você tem experiência com CSS, pode alterar alguns e trechos e personalizar a sua maneira.
* A parte destacada em vermelho, representa a largura e a altura do slide, configure de acordo com seu blog.

4- Pesquise agora por < / h ea d > (retire os espaços)

5- Logo ACIMA cole o seguinte código:

< scr ipt src='http://ajax.go ogleapis.com/ajax /lib s/jq uery/1.6/jquery. min.js' type ='text/javascr ipt'/>  < scr ipt  src='http://y ourjavascript. com /34324213 544 /nivo-slider-modified- min.js' type='text/javascript'/> $( window).l oad(function( ) { $('#slider' ).niv oS lider(  ); }); </ script >

(retire todos os espaços simples)
6- Clique em "Salvar Modelo".

7- Agora no menu lateral de seu blogger clique em "Layout".

8- Clique em "Adicionar um gadget" e escolha por "HTML/Javascript".

9- Dentro do gadget cole o seguinte código:

< div class = "slider-wrapper theme-default " >
< div class="ribbon"> </ div>
 < scrip t style = "text/ javascript" src="http://yourjavascript.com /42432749341/galleryslide. js"> < / sc ript >
< scr ipt style ="text/ javascript " >
 var numposts_gal = 4;   // number of posts
var im age_height = 300; / /im age height
var image_width = 610;  // image width
< / script > < sc ript src = " http:// endereç odeseublog /feeds/posts/ default? orderby = published & alt= json-in-script& callback = showgallery posts" > < / script >
< / div >

(lembre-se de retirar todos os espaços simples)

* Atenção para as partes destacadas:
 var numposts_gal = 4; troque o 4 pelo número de posts que você deseja que apareça.
 var image_height = 300; o 300 representa a altura da imagem do slide.
 var image_width = 610;  o 610 representa a largura da imagem do slide.
 endereçodeseublog , troque pela url de seu blog.

10- Clique em "Salvar", arraste-o para onde você deseja que o slide apareça e clique em "Salvar Organização".

11- Visualize seu blog e voilá!

Se tiverem dificuldades é só dizer nos comentários! Tem algum ideia para as próximas dicas? Deixe sua sugestão :)
bjs

O nome Let's Lola e todo conteúdo textual e imagens autorais do blog pertencem a Míriam Rosa | All Rights Reserved ©