"Como adicionar "Stylish" deslizando para cima " ... "widget"... "Imagem Descrição Widget"

"Como adicionar "Stylish" deslizando para cima " ... "widget"... "Imagem Descrição Widget" 

 

 traduzido:

"Elegante deslizando para cima da Imagem Descrição Blogger "



 
 
 
Este é também tutorial única. 

..."como adicionar deslizando para cima descrição da imagem
para blogger".

Você pode adicionar este widget para sua barra lateral.

Se você tem alguma mensagem especial que você pode ligar seu post
com este description.Im  

deslizamento, 

utilizando CSS e HTML
para este widget.

Você pode alterar as imagens e muito mais
ligação (Link) como seu gosto. 

Siga estes passos para adicionar ao seu
do blog

▼

Obtenha fotos  em galeria de fotos.


Programa demonstrativo 

. Entrar para a conta blogger e Clique cair.
. Agora selecione "Layout" como abaixo.

. Clique em Adicionar Gadget e selecione "HTML / Javascript "

"Como adicionar "Stylish" deslizando para cima "

"Imagem Descrição Widget"



 
Outro elemento que adiciona um grande olhar para o seu site Blogger é a descrição da imagem até correr. 

Você pode incorporar este widget elegante através deste tutorial pelo pessoal da Bloggertrix. 

Você pode adicioná-lo na barra lateral e se você tem um post especial, você pode vinculá-lo bem.

CSS e HTML são usados ​​basicamente por isso é fácil de personalizar, se você quiser mudar as imagens. 

Painel do Blogger - > Layout
Adicionar Gadget - > HTML / Javascript 



Cole este código 
▼
 

 

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgG2Ftq5tNMMFbzCGfZJlQbWIC6q4NyW9Zxtrhy3a8ywbkYhmJUFoXlYr1fTOR6A_5X68GmKthCOc4Wmctvcy1GqzaNhQK2HUzf4aYWN9pTbqIWYfCANtvsqL21YO487hI3D26q-0L_CE/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>
 

 <div style="clear:both;"></div>

</div>

7. Agora salve o seu HTML / Javascript ".

    Está feito ...

fonte (original em Inglês)

▼

"Stylish Sliding Up Image Description for Blogger"

This is  also unique  tutorial. In  this  article  im gonna
explain  how  to   add  sliding  up   image  description
for blogger.You can add  this  widget to  your  sidebar.
If you  have any  special  post you   can link your post
with this sliding description.Im using CSS and HTML
for this widget. You can change images  and more
link as your like. Follow  these  step to  add to  your blog. Get all photo gallery.

Demo
1. Log in to blogger account and Click drop down.

2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgG2Ftq5tNMMFbzCGfZJlQbWIC6q4NyW9Zxtrhy3a8ywbkYhmJUFoXlYr1fTOR6A_5X68GmKthCOc4Wmctvcy1GqzaNhQK2HUzf4aYWN9pTbqIWYfCANtvsqL21YO487hI3D26q-0L_CE/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>
 

 <div style="clear:both;"></div>

</div>

7. Now save your HTML/Javascript'.

    You are done...

fonte:

bloggertrix

-->

Arquivado em: blog, blogger, deslizando para cima, dicas, Imagem Descrição Widget, Stylish, widget on