"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

-->

Este post foi escrito por: Autor Nome

Temeradeusplus!

Receba atualizações por e-mail gratuitas para sua Caixa de entrada!

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

Featured Posts

Pesquisar

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