código para numeração de páginas , muito fácil...!...

  Tutorial:

Código para numeração de páginas , 
no seu website/blog...!...



Este código, criei
para que 
a pessoa não tenha muito trabalho de instalar!


demontração, clique aqui

 ▼

Passo a passo:

Logado no painel blogger,

clique em adicionar gadget
e
aparecerá um janela ,
e você clicará em
▼

 HTML/JavaScript
Adicionar funcionalidade de terceiros ou outro código a seu blog.
Por Blogger



daí, 


...no "lay-out" (HTML/JavaScript)
de seu template,

...copie 
e  
cole,
o código a seguir
▼



<style type="text/css">

/*-------- Start paginas numeradas by ebds-----------*/
#blog-pager{font-size:normal;padding:10px 0;clear:both;}
.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:12px;margin:10px}
.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:800}
.showpageNum a{padding:3px 8px;margin:0 2px;text-decoration:none;border:3px solid #006400;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ffff00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihklZKMkA5m_jIVt-Ua18FG72FvGsBbysX3wG7UfWY2Qv0aebfcnGHl6nw8MqxeLAOW06H0QkXW5jG_ugH8ESaSzBmN4iGrVWvTSGkpAUljZdMplIRkcHTJ59VVRUZBbpq5ANgllrxAvi8/s1600/3x75+ebds+bg+pagina%C3%A7%C3%A3o.jpg) 0 -50px repeat-x;color:#000;}
.showpageNum a:hover{border:1px solid #ff6600;background:#ffff00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihklZKMkA5m_jIVt-Ua18FG72FvGsBbysX3wG7UfWY2Qv0aebfcnGHl6nw8MqxeLAOW06H0QkXW5jG_ugH8ESaSzBmN4iGrVWvTSGkpAUljZdMplIRkcHTJ59VVRUZBbpq5ANgllrxAvi8/s1600/3x75+ebds+bg+pagina%C3%A7%C3%A3o.jpg) 0 -25px repeat-x}
.showpageOf{margin:0 2px 0 0;padding:3px 8px;margin:0 2px;text-decoration:none;border:3px solid #000;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ffff00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihklZKMkA5m_jIVt-Ua18FG72FvGsBbysX3wG7UfWY2Qv0aebfcnGHl6nw8MqxeLAOW06H0QkXW5jG_ugH8ESaSzBmN4iGrVWvTSGkpAUljZdMplIRkcHTJ59VVRUZBbpq5ANgllrxAvi8/s1600/3x75+ebds+bg+pagina%C3%A7%C3%A3o.jpg) 0 -50px repeat-x;}
.showpagePoint{color:#fff;text-shadow:0 1px 2px #00ff00;padding:3px 8px;margin:2px;font-weight:800;-webkit-border-radius:3px;-moz-border-radius:3px;border:3px inset #006400;background:#ffff00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihklZKMkA5m_jIVt-Ua18FG72FvGsBbysX3wG7UfWY2Qv0aebfcnGHl6nw8MqxeLAOW06H0QkXW5jG_ugH8ESaSzBmN4iGrVWvTSGkpAUljZdMplIRkcHTJ59VVRUZBbpq5ANgllrxAvi8/s1600/3x75+ebds+bg+pagina%C3%A7%C3%A3o.jpg) 0 0 repeat-x;text-decoration:none}</style>
<script style='text/javascript'>
    var numshowpage=7;
    var postperpage =6;
    var upPageWord="Anterior";
    var downPageWord="Próxima";
    var home_page="/";
    var urlactivepage=location.href;
</script>
<script style='text/javascript' src='https://sites.google.com/site/scriptsedilenebds/scripts/scripts-paginas-numeradas/paginabloggerebds.js'></script>


Pronto!

Visualize!
Estando tudo certo 
Salve!

Arquivado em: blogger, dicas, gadget, numeração de páginas, widget on

"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

"Backgrounds e Patterns"

fonte e créditos:xuxxu

Backgrounds e Patterns

Backgrounds e Patterns. 

O que são e para o que servem?

"Quando você cria um blog ou um site pode usar imagens no fundo para dar um toque pessoal.
Mesmo com tantos templates prontos e com opções muito bonitas. Colocar algo que seja só seu, que você escolheu, é muito prazeroso e até nos ajuda a ter mais disposição para criar nossos posts.
Existe na internet uma infinidade de sites que disponibilizam imagens de fundo para o seu blog/site. Essas imagens são chamadas de Backgrounds ou Patterns.".

"Background = Fundo, ou seja, a imagem de fundo do seu blog / site.
Pattern = Padrão - Geralmente estas imagens formam um padrão de repetição por isso também são denominadas de patterns."

"É importante que você escolha uma imagem de tamanho pequeno para não deixar o seu blog / site muito pesado e dificultar o carregamento da página. Por isso, imagens pequenas repetidas formam um padrão."

... "seleção de vários sites com lindas imagens de fundo para você baixar ou criar e colocar no seu blog / site."

Download Patterns Backgrounds

..." seleção de sites que têm coleções enormes de padrões de fundo para você baixar e usar de graça."

1- Background Labs

2- Dinpattern

3- Vector Patterns

4- Brusheezy

5- Alice Grafixx

6- ava7 patterns

7- Noqta

8- Pattern8

9- Devianart Patterns

10- Webtreats etc.

11- COLOURlovers

12- Patterns of Change

13- PATTERRIFIC

14- Pixel Decor

15- Pixels & IceCream

16- Everyday Icons

Crie seus padrões de fundo online

Esta é uma seleção de sites que possibilitam que você crie seu próprio padrão.

1- BgPatterns

Este site é particularmente interessante porque você pode criar o padrão(pattern) da forma que quiser. É só usar a criatividade.
Estou usando um background aqui no IMV que criei lá! Amei! Muito legal!

2- Tartan Designer

Para quem gosta de fundos em xadrez este site é uma boa opção. Além de ter vários padrões xadrez prontos feitos por usuários, ele também é um "maker" onde você pode criar o seu padrão xadrez para colocar no background do seu blog.

3- Stripemania

4-Stripe Generator

5- bg maker

6- pattern cooler editor

Este site tem patterns prontas para baixar na página inicial e também um editor muito legal.




fonte e créditos:xuxxu

adorotemplates

Arquivado em: backgrounds, blogger, dicas, patterns on

Saiba como configurar um domínio do Registro BR para o Blogger.

rede de blogs e sites: Saiba como configurar um domínio do Registro BR para o Blogger.

Arquivado em: blog, blogger, blogspot, br, curiosidades, dicas, domínio, domínios, internet, registro on