... Bom, vamos ao blog amigo indicado: "Adote um Blog Amigo"










"Adote um Blog Amigo"
Este é um resumo de
um blog que adotei
para divulgar ,
pois
estou participando do
"Adote um Blog Amigo".
Não citei o nome do blog para
gerar curiosidade de quem tem interesse em acessar.
Espero que ao acessar você goste!
Pois é de uma pessoa muito querida!
Se você foi indicado deverá "adotar um blog amigo" e falar sobre ele.

Não esquecendo de colocar junto com a postagem o passo a passo ou indicar o link de como participar do Adote um Blog Amigo!
Adote e divulgue um blog amigo!

"Faça amigos não faça guerra"


Bom, vamos ao blog amigo indicado:


blog amigo indicado:

Pesquisando dentro da comunidade diHITT,
encontrei um blog, que tem muitos artigos de grande utilidade!
Dentre eles, o artigo postado:
Então, você que curte
e quer
aprender mais sobre o assunto;
acesse
este "blog amigo"
clique na frase a seguir:

Saiba + : "Como economizar água e energia na hora de lavar roupa"

http://www.aempregadadomestica.com.br/2014/12/como-economizar-agua-e-energia-na-hora.html

► |Veja conteúdo Completo|

http://www.aempregadadomestica.com.br/2014/12/como-economizar-agua-e-energia-na-hora.html



"veja como"
aqui ▼
Como participar!

1º . Escolha um blog amigo

2º . Escreva sobre o tema abordado ou sobre ou dono(a) do blog

Obs: dar um título bem bacana para que o blog indicado realmente seja visitado

3º . Adicione o link do blog no resumo que você fará.
4º . Copie o texto de como participar ou esta frase "Como participar do Adote um Blog Amigo?Acesse Aqui"
e cole no final do resumo do blog indicado. Se
não souber, basta indicar o link ,deste texto, dentro do seu resumo.

5º Depois de escrito e postado no seu blog ou no próprio diHITT
6º Envie a indicação do blog amigo para o diHITT
7º . Depois indique para todos os teus amigos dentro da comunidade diHITT .
8º . Fale para seu amigo(a) indicado que você está participando do "Adote um Blog Amigo".
9º . Incentive seu amigo (a) também a participar da "brincadeira" que só trará benefícios a quem indicar e a quem for indicado.
10º . Se você foi indicado e não quiser participar; passe a vez pra outro amigo.
"Pois,
ninguém é obrigado a participar ,
se não acha cabível ,
dentro do seu conceito humanitário.
Nós iremos respeitar a decisão de quem não quiser participar!"
Regras:

Não pode indicar o próprio blog

O que pode ocorrer é:

... o blog ser "acidentalmente" indicado várias vezes e isso foge do nosso domínio.


Mais uma vez, com um magnífica idéia, de nossa amiga


Valquiria, do blog gata interativa

O bom disso,
é que ,
a gente pode receber muitas visitas,
conseguir mais seguidores para os nossos blogs,
e subir no rank do google!!!!!!!!!!!!!!!!!!!!!
Isso nos dará resultado permanente,

porque
receberemos visitas, praticamente,

para sempre,
pois sempre estará nas buscas via google!
Essa ajuda mútua é mui relevante!

"Dica de como mudar e dar mais vida ao seu blog"

Nosso blog foi indicado por gatainterativa

palavras-chaves: adote, adote um blog amigo, amigo, blog, buscas, dicas, diHITT, google, idéia, visitas,

























Saiba Como:..."criar slideshows stunning no Blogger?"

fonte e créditos:
http://www.mybloggertricks.com/2010/12/how-to-create-stunning-slideshows-in.html               

How To Create Stunning Slideshows In Blogger?


Blogger-Slideshow"  Well this is surely gona cheer up us all. After a lot of struggle a simple coded Slideshow came across my eyes while reading Boban Karišik’s article on Jquery Slideshow. The code that he created is in fact plausible and after tweaking a portion of the CSS and some HTML provided by him, I was able to create a compatible version of the Slide Show for Blogger. Kindly view the demo before we jump at the tutorial.

Live Demo

How To Add Jquery SlideShow To Blogger Templates?

"I have tried my best to make the code installation as easier as possible. You just need to copy the code and paste it in the HTML/Javascript widget. Thats it! "
  1. Go To Blogger > Design
  2. Choose Add a Page Element
  3. Then choose HTML/JavaScript widget
  4. Inside the widget paste the code below,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#MBT-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#MBT-slider {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#MBT-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.MBT-sliderImage {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.MBT-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.MBT-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>

<div id="MBT-slider">
<ul id="MBT-sliderContent">
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear MBT-sliderImage"></div> </ul>
</div>
<br/>

How To Customize The Slideshow Code?

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to bottom if you want the slider to appear from right then change it to right and so on. If you wish you can set all sliders to bottom or top or to any position you wish.
If you want to slow down the speed with which the slider come and go then set timeOut: 3000 to a higher value like 4000 or 5000.
The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes  width: 590px and height: 335px You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. You can play with this part and all other parts using our Magic tool i.e MBT HTML Editor

How To Add More Images Or Remove an Image From the Slider?

To add an extra image just above <div class="clear MBT-sliderImage"></div> add this code,

<li class="MBT-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
"Since you now know how to add an image then you will have certainly figured it out how to remove an image from the slide. I leave it on you. I know you guys are no less than Eienstein! =p"
That’s All! 







traduzido


Como para criar slideshows stunning no Blogger?



Blogger-Slideshow 



"  Bem, este é certamente gona animar a todos nós. Depois de muita luta de um simples código Slideshow deparei com os olhos durante a leitura Boban Karisik's artigo sobre Jquery Slideshow. O código que ele criou é de fato plausível e depois ajustando uma parte do CSS e um pouco de HTML desde por ele, eu era capaz de criar uma versão compatível com o Slide Show para o Blogger. Por favor, ver a demo antes de saltar no tutorial."

Live Demo

Como adicionar SlideShow jQuery para Blogger Templates?

"  Eu tentei o meu melhor para fazer a instalação do código como mais fácil possível. "             

"  Você só precisa                                                                             
copiar o código 
e cole-o 


no widget HTML / Javascript. 
É isso! "                                                                                            
  1. Ir para Blogger > Design
  2. Escolha Adicionar um elemento de página
  3. Em seguida, escolha HTML / JavaScript Widget
  4. Dentro da pasta widget o código abaixo,
<script tipo= "Text / javascript" src => "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" script> </
<script tipo= "Text / javascript" src => "http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" script> </
<script tipo= "Text / javascript">
$ (Document). Ready (function () {
$ ('# MBT-slider ") s3Slider. ({
      timeout: 3000
   });
});
</ Script>
<style>
# MBT-slider {
   width: 590px; /* Mantê-la 20px 40px-superior * tamanho real da imagem /
   height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
# MBT sliderContent {
   width: 590px;
position: absolute;
top: 0;
margin-left: 0;
}
. MBT sliderImage {
   flutuar: Left;
position: relative;
display: none; top: 0;
border: 1px solid # DDD;
}
. Span sliderImage MBT-{
position: absolute;
fonte: 10px/15px sans-serif, Arial, Helvetica;
padding: 10px 10px;
background-color: # 000;
color: # fff;
'Alpha (opacity = 70);: filtro
-Moz-opacity: 0,5;
-Opacidade-khtml: 0,5;
opacidade: 0,5;
text-align: justificar;
}
. Span sliderImage MBT-a {
text-decoration: underline;
color: # FE6602;
}
. Claras {
clear: both;
}
. {Alto
top: 0;
left: 0;
width: 570px importante;!
height: 70px;
}
. {Fundo
bottom: 0;
left: 0;
width: 570px importante;!
height: 90px;
}
. Esquerdo {
left: 0;
top: 0;
width: 110px importante;!
height: 335px;
}
. Direita {
direita: 0;
bottom: 0;
width: 80px importante;!
height: 319px;
}
</ Style>

id="MBT-slider"> <div
id="MBT-sliderContent"> <ul
<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "direito"> <h3>RUBRICA-1 AQUI</ H3>Descrição vai aqui</ Span>
</ Li>
<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "esquerda"> <h3>RUBRICA-2 AQUI</ H3>Descrição vai aqui</ Span>
</ Li>

<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "topo"> <h3>RUBRICA-3 AQUI</ H3>Descrição vai aqui</ Span>
</ Li>
<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "fundo"> <h3>RUBRICA-4 AQUI</ H3>Descrição vai aqui</ Span>
</ Li>

<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "fundo"> <h3>RUBRICA-5 AQUI</ H3>Descrição vai aqui</ Span>
</ Li>
<div class="clear MBT-sliderImage"> </ div> </ Ul>
</ Div>
<br/>

Como personalizar o código Slideshow?

"    Basta substituir URL da imagem com o link da imagem e substituir textos em negrito preto com o seu preferido posições e descrições. Você pode jogar em torno de como o controle deslizante é exibida. Se você quiser que a barra apareça de baixo, em seguida, alterar a classe de fundo se você quiser que a barra da direita, em seguida, aparecem alterá-lo para direito e assim por diante. Se quiser, você pode ajustar todos os controles deslizantes para baixo ou para cima ou para qualquer posição que você deseja.
"   Se você quiser diminuir a velocidade com que o cursor ir e vir em seguida, defina timeout: 3000 para um valor maior, como     4000 ou 5000."                                                                                
"


"    O tamanho padrão de todas as imagens que eu usei neste tutorial está tendo uma largura = 550px e altura = 335px. "   
"

  "   Então pegue imagens do mesmo tamanho e depois jogar com a dimensão width: 590px e height: 335px Você pode notar que o tamanho ou seja, a largura (590px) é maior que o tamanho real da imagem de 550px. Você vai ter para manter a largura de 20 40px maior do que o tamanho real da imagem para que a imagem pode se encaixar perfeitamente no slide. Você pode jogar com esta parte e todas as outras peças, usando o nosso ou seja ferramenta Magic MBT editor de HTML"

Como adicionar mais imagens ou remover uma imagem do Slider?

Para adicionar um extra da imagem acima  



<div class="clear MBT-sliderImage"> </ div>  


adicionar esse código,

<li class="MBT-sliderImage">
<Img src = "URL da imagem" />
<Span class = "fundo"> <h3>Título da</ H3>Descrição vai aqui</ Span>
</ Li>
" Como você já sabe como adicionar uma imagem, então você terá certamente percebi isso como remover uma imagem do slide. Deixo isso com você. Eu sei que vocês são nada menos do que Eienstein! = P"
Isso é tudo!









 

Nenhum comentário:

Postar um comentário


Mensagem do formulário de comentário: