Decoração de final de ano para Blogger

Olá amigos Mult-focos! Neste tutorial veremos como colocar uma linda decoração de final de ano para Blogger.
Trata-se de uma decoração com fogos de artifício e pode ser prevista clicando no botão demo abaixo.

Demo Clique aqui
Gostou? Então vamos lá:

1- Vá para o Painel do Blogger -> Modelo -> Editar HTML e encontre o código </body> (usando ctrl + F).
2- Depois de encontrar o código  </body>  no seu modelo, copie o código a seguir e cole-o logo acima no código </body>.

See the Pen pPdOLw by Mairink (@Oemes) on CodePen.

3- Agora, finalmente clique em " Salvar modelo ". Isto é tudo!

---

Mapa do site para Blogger baseado em ajax

Olá amigos Mult-focos tudo bem?
Neste post vamos ver como adicionar um mapa do site para Blogger baseado em ajax.
Muito fácil e com visual realmente profissional, Tenha uma prévia clicando em demo.

Demo 

Bem vamos iniciar

Nota: - Crie uma cópia de segurança do seu modelo antes de instalar este widget. Para fazer isso, navegue até "Tema" e faça um backup do seu modelo clicando no link "Fazer Backup / Restaurar" na parte direita superior. Quando a cópia de segurança terminar, siga estas etapas cuidadosamente.

1 - No Painel do Blogger Vá para Modelo> Editar botão HTML

2 - Clique dentro do Editor HTML, pressione CTRL + F (Isso abrirá um formulário de pesquisa no lado direito superior do Editor HTML)

3 - Agora procure por </head>

4 - Acima desta tag copie e cole o código a seguir.

<style type='text/css'>
.btnt-sitemap { border-bottom: 4px solid #444; }
.btnt-toc-wrap { display: inline-block; font-family: "Century Gothic",sans-serif; width: 100%; }
.btnt-toc-wrap .btnt-cat { background: #333; border-radius: 2px; color: #fff; font-size: 15px; font-weight: bold; padding: 10px 20px; text-transform: capitalize; }
.btnt-toc::before { background: #333; bottom: 0; content: ""; left: 20%; margin-left: -10px; position: absolute; top: 0; width: 4px; }
.btnt-toc { margin: 0; padding: 30px 20px; position: relative; }
.btnt-toc li { list-style: none; margin: 0; padding: 0; position: relative; }
.btnt-toc > li .toc-date { color: #999; display: block; font-size: 14px; font-weight: bold; position: absolute; text-transform: uppercase; top: 25px; width: 15%; }
.btnt-toc > li .btnt-icon { background: #fff; border-radius: 50%; box-shadow: 0 0 0 4px #333; color: #fff; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; height: 10px; left: 20%; line-height: 10px; margin: 0 0 0 -25px; position: absolute; text-align: center; text-transform: none; top: 30px; width: 10px; }
.btnt-toc > li .btnt-post::after { border-color: transparent #f5f5f5 transparent transparent; border-style: solid; border-width: 10px; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: auto; width: 0; }
.btnt-toc > li .btnt-post { background: #f5f5f5; border-radius: 5px; display: block; font-size: 15px; line-height: 15px; margin: 0 0 15px 23%; padding: 25px 30px; position: relative; }
.btnt-toc > li .btnt-post a { color: #333; font-weight: bold; }
.btnt-toc > li .btnt-post a:hover { color: #999; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){var static_page_text=$.trim($(".post-body").text());var text_month=[,"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"];if(static_page_text==="[sitemap]"){var postbody=$(".post-body");$.ajax({url:"/feeds/posts/default?alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var t=[];for(var n=0;n<e.feed.category.length;n++){t.push(e.feed.category[n].term)}var t=t.join("/");postbody.html('<div class="btnt-sitemap"></div>');$(".post-body .btnt-sitemap").text(t);var r=$(".btnt-sitemap").text().split("/");var i="";for(get=0;get<r.length;++get){i+="<span>"+r[get]+"</span>"}$(".btnt-sitemap").html(i);$(".btnt-sitemap span").each(function(){var e=$(this);var t=$(this).text();$.ajax({url:"/feeds/posts/default/-/"+t+"?alt=json-in-script",type:"get",dataType:"jsonp",success:function(n){var r="";var i='<ul class="btnt-toc">';for(var s=0;s<n.feed.entry.length;s++){for(var o=0;o<n.feed.entry[s].link.length;o++){if(n.feed.entry[s].link[o].rel=="alternate"){r=n.feed.entry[s].link[o].href;break}}var u=n.feed.entry[s].title.$t;var a=n.feed.entry[s].published.$t,f=a.substring(0,4),l=a.substring(5,7),c=a.substring(8,10),h='<span class="day">'+c.replace(/^0+/,"")+'</span><span class="month">'+text_month[parseInt(l,10)]+' </span><span class="year">'+f+"</span>";i+='<li><div class="toc-date">'+h+'</div><div class="btnt-icon"></div><span class="btnt-post"><a href="'+r+'">'+u+"</a></span></li>"}i+="</ul>";e.replaceWith('<div class="btnt-toc-wrap"><div class="btnt-cat">'+t+'</div>'+i+"</div>")}})})}})}});
/*]]>*/
</script>
</b:if>
 

Nota: - se o seu blog já tiver um widget jquery remover esta parte do código <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/> do código acima. 

5 - Agora salve seu modelo. 

6 - No painel de controle, vá para Páginas> Nova página

7 - No novo conteúdo da página depois de adicionar o título da página e ocultar os comentários usando as opções, adicione o seguinte código na área de conteúdo da página, com HTML selecionado.

[sitemap]

Para uma melhor compreensão, verifique a área destacada na imagem abaixo.

Clique na imagem para aumentá-la

8 - Agora, clique no botão Publicar e verifique a página publicada para ver o resultado dowidget  sitemap. Isto é tudo! 

---

Scroll Animado para Blogger

Olá amigos Mult-focos!
Neste post vou disponibilizar um "Scroll Animado para Blogger".
Trata-se de um widget com um foguete animado, que leva seu visitante ao topo, assim que ele chega ao fim da sua página. Para isto é só clicar no mesmo.

Vamos lá:

Copie o código JS abaixo e instale-o como um gadget, salve e pronto. (como instalar um gadget)
Isto é tudo.

See the Pen EZvyqq by Mairink (@Oemes) on CodePen.

---

Widget navegação por seta do teclado para Blogger

Olá amigos Mult-focos! Neste post você vai aprender como instalar o Widget navegação por seta do teclado para Blogger.
Muito fácil e simples, caso queira pode também avisar seu leitor que seu blog dispõe este recurso.

Vamos lá, deixo aqui duas opções para instalar

1º copie o código abaixo e proceda a instalação via Layout > Adicionar um Gadget não sabe como se faz?  CLIQUE AQUI e aprenda.

See the Pen ggpWmO by Mairink (@Oemes) on CodePen.

2º Simplesmente clique no botão abaixo que ele automaticamente faz isto por você, é só seguir as etapas.

Isto é tudo.

---

Botão de compartilhamento abaixo de cada postagem

ZOOM Clique na imagem

Olá amigos Mult-focos! Neste post vamos dispor de um "Botão de compartilhamento abaixo de cada postagem" para você e seus leitores compartilharem seus artigos em várias redes sociais.
Direto e objetivo sua instalação também é idem, clique no botão abaixo e estamos conversados.

OBS:  Depois de clicar, faça o login para Blogger (se já não estiver logado), selecione seu blog se tiver mais de um > Adicionar Widget > Pronto. Este widget de compartilhamento instala os botões de compartilhamento abaixo de cada postagem no blog.

Adicionar Clique aqui Isto é tudo!

---

Caixa de diálogo para Blogger

Olá amigos Mult-focos salve, salve!
Vamos mostrar neste post uma caixa de diálogo para Blogger, é um gadget importante para quem quer dar um aviso aos seus leitores e dar a opção de fechar quando queiram.
Veja um demo do visual deste gadget clicando no botão abaixo e ou em result na caixa de código.

Demonstração

Lendo o script do código você pode configurar vários aspectos do seu visual, bastando para isto ter conhecimentos para tanto.
Para inserir o gadget copie o código HTML do box de código e cole em Conteúdo , caso não saiba aprenda AQUI .



Quer mais facilidade? clique em ADD TO BLOGGER e adicione o gadget automaticamente em seu blog, apenas coloque o nome do mesmo, em:Título do widget , isto é tudo.

---

Seta de navegação para Blogger

Olá amigos Mult-focos, está tudo bem? Vamos mostrar neste post como navegar por um site usando as setas do teclado adicionando um recurso muito útil em seu blog, principalmente para seu leitor.
Você sabe que toda página da web as setas para cima e para baixo funcionam normalmente não é mesmo, vamos disponibilizar um widget que vai deixar seu blog apto a também usar as setas para direita e para esquerda.
Todavia se usar a tecla para direita iremos para o próximo artigo e se usarmos a tecla para esquerda iremos para o artigo anterior, legal não é mesmo e mais legal é que não precisa configurar nada, penas copiar o código abaixo e adiciona-lo.
Para isto é só ir ao painel do seu blog e fazer os procedimentos habituais, se não sabe veja AQUI.

Se não quiser ter trabalho clique no botão abaixo e adicione automaticamente em seu blog, isto é tudo.

---

Menu animado CSS para Blogger ll

Olá amigos Mult-focos, salve, salve!
Temos neste post um menu animado muito simples e de visual atraente para seu Blogger, é o Menu
animado Css para Blogger ll.
Como se trata de um widget é só seguir os mesmos passos de adição de um widget, não sabe como veja AQUI.

Copie o código HTML do box abaixo cole em um documento de texto e siga os passos abaixo, para visualizar como funciona o menu clique em result.

Personalização

As nomenclaturas dos links pode mudar para sua necessidade.
As cores dos links estão #ff9900 (Laranja) e #00FF00 (verde) quando passa o mouse e podem ser
mudadas ao seu gosto.
Onde está href="#" a parte em vermelho substitua pela URL do link correspondente.
Feito todas as personalizações é só adicionar o widget, isto é tudo.

<menu class="menu2"> <a href="#" data-hover="Home">Home</a> <a href="#" data-hover="Blogger">Blogger</a> <a href="#" data-hover="Tutoriais">Tutoriais</a> <a href="#" 

data-hover="HTML&CSS">HTML&CSS</a> <a href="#" data-hover="SEO">SEO</a> <a href="#" data-hover="Comtato">Contato</a> <a href="#" data-hover="Social">Social</a> <a 

href="#" data-hover="Sitemap">Sitemap</a> </menu>

<style>menu a {position: relative;  display: inline-block; padding:12px; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #666; -moz-text-

shadow: 1px 0px #666; text-shadow: 1px 0px #666;}

.menu2 a {color: #FF9900;text-decoration: none;}

.menu2 a:before {color: #00FF00;text-decoration: none; content: attr(data-hover); position: absolute; opacity: 0; -webkit-transform: scale(1.1) translateX(10px) 

translateY(-10px) rotate(4deg); -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); transform: scale(1.1) translateX(10px) translateY(-10px) 

rotate(4deg); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; 

pointer-events: none;}

.menu2 a:hover::before, .menu2 a:focus::before {text-decoration: none; -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); -moz-transform: scale

(1) translateX(0px) translateY(0px) rotate(0deg); transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); opacity: 1;} </style>

See the Pen Menu animado CSS para Blogger ll by Mairink (@Oemes) on CodePen.

---

Menu animado CSS para Blogger l

Olá amigos Mult-focos, salve, salve!
Temos neste post um menu animado muito simples e de visual atraente para seu Blogger, é o Menu
animado Css para Blogger l, sim pois postaremos o ll logo a seguir.
Como se trata de um widget é só seguir os mesmos passos de adição de um widget, não sabe como veja AQUI.

Copie o código HTML do box abaixo cole em um documento de texto e siga os passos abaixo, para visualizar como funciona o menu clique em result.

Personalização

As nomenclaturas dos links pode mudar para sua necessidade.
As cores dos links estão #00BFFF(azul piscina) quando passa o mouse e pode ser
mudada ao seu gosto. OBS: Esta cor para mim é azul piscina ou outra cor que você enxergue, sim pois as cores dependem dos seus olhos.
Onde está href="#" a parte em vermelho substitua pela URL do link corespondente.
Feito todas as personalizações é só adicionar o widget, isto é tudo.

<menu class="menu1"> <a href="#" data-hover="Home"><span>Home</span></a> <a href="#" data-hover="About Us"><span>About Us</span></a> <a href="#" data-hover="Tutorials"><span>Tutorials</span></a> <a href="#" data-hover="HTML&CSS"><span>HTML&CSS</span></a> <a href="#" data-hover="Sitemap"><span>Sitemap</span></a> </menu>

<style>menu a {position: relative; display: inline-block; text-decoration: none; font: 15px Verdana; -webkit-text-shadow: 1px 0px #333; -moz-text-shadow: 1px 0px #333; text-shadow: 1px 0px #333;}

.menu1 {position: relative; z-index: 1;}

.menu1 a {overflow: hidden; color:#fff; text-decoration: none;margin: 5px 10px;}

.menu1 a span {display: block; padding: 12px 20px; background: #00BFFF; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s;}

.menu1 a:before {position: absolute; top: 0; left: 0; z-index: -1; padding: 12px 20px; background: #FFF; color: #00BFFF; text-decoration: none; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform: translateX(-25%);}

.menu1 a:hover span, .menu1 a:focus span {-webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%);}

.menu1 a:hover::before, .menu1 a:focus::before {-webkit-transform: translateX(0%); -moz-transform: translateX(0%); transform: translateX(0%);} </style>

See the Pen Menu animado CSS para Blogger l by Mairink (@Oemes) on CodePen.

---

Tradutor Bing para Blogger

Olá amigos Mult-focos, salve, salve!
O tradutor Google é padrão Blogger para adiciona-lo é só seguir o caminho Layout -> Adicionar um Gadget e escolher "Traduzir" da lista.
O que vamos mostrar a vocês amantes da microsoft é como gerar e adicionar em seu blog o tradutor Bing.
1 - Entre nesta página Tradutor Bing
2 - Nela você terá varias opções de configuração, tal como: Cor, tradução,etc.
3 – Depois de configurar seu tradutor será gerado o código copie, vá ao painel do seu blogger e adicione o widget.
Muito simples não? Isto é tudo.

---

Widget posts relacionados sem miniaturas para blogger

Olá! Salve,salve amigos Mult-focos, estamos aqui mais uma vez postando um widget útil para o seu blog.
Este widget vem de encontro para aqueles que precisam de related post porém sem imagens e para isto basta seguir os próximos procedimentos.

Antivírus automático e gratuito

1 - Vá para o painel do Blogger->modelo->editar HTML e pressione CTRL+F para abilitar a caixa de busca, pesquise por:  </head> .
Ao encontrar Copie e cole o código abaixo logo acima dele.

 <b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>#related-posts{margin:15px 5px}#related-posts h2{font-size:27px;font-weight:normal;color:#fff;text-shadow:1px 0px 2px#888;margin-bottom:0.75em}#related-posts a{font-size:13px;color:#888;text-transform:capitalize}#related-posts a:hover{text-decoration:none;color:#555}#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:none;color:#000000}#related-posts ul{list-style-type:none;background:#f9f9f9;border-left:5px solid#f2f2f2}#related-posts li{padding:10px;line-height:1.4;border-bottom:1px dotted#E2E2E2}#related-posts li:hover{background:#F4F4F4}</style><script type='text/javascript'>var relatedpoststitle=&quot;Posts relacionados&quot;</script><script src='https://sites.google.com/site/multfocosjavascript/widget-posts-relacionados/posts%20relacionadosmf.js' type='text/javascript'/></b:if>

PERSONALIZAÇÃO:
Para alterar o tamanho modifique (27px)
Para mudar o título do widget modifique a parte escrita em azul(var relatedpoststitle="Posts relacionados";)
Cor do título (#fff)
Para a cor do link do post relacionado mude (#888)
Para mudar cor de fundo altere (#f9f9f9)
Para cor de fundo mouseover altere (#f4f4f4)

2 – Agora procure por <div class=”post-footer’> (se haver duas linhas como esta, você deverá usar a segunda): Copie e cole o código abaixo logo acima dele.

 <b:if cond='data:blog.pageType ==  &quot;item&quot;'><div id='related-posts'> <b:loop  values='data:post.labels' var='label'> <b:if  cond='data:label.isLast != &quot;true&quot;'> </b:if>  <b:if cond='data:blog.pageType == &quot;item&quot;'>  <script expr:src='&quot;/feeds/posts/default/-/&quot; +  data:label.name +  &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;'  type='text/javascript'/></b:if></b:loop>

<script type='text/javascript'> var maxresults=5;  removeRelatedDuplicates();  printRelatedLabels(&quot;<data:post.url/>&quot;);  </script><a style="font-size: 9px; color: #CECECE; float:  right;"  href="http://mult-focos.blogspot.com/2015/09/widget-posts-relacionados-sem.html"  rel="nofollow" >Simple Related Posts  Widget</a></div></b:if>

ATENÇÃO: Para alterar o número de mensagens máximas relacionadas para cada rótulo, altere o “5” parâmetro de max-results = 5 , isto é tudo.

---

Widget de posts recentes para Blogger

Olá e bem-vindo ao Mult-focos. Trazemos neste post mais um modelo entre vários que já postamos aqui de um widget de posts recentes para blogger, é sem duvida um widget indispensável para seu blog.

Como adicionar box de assinatura abaixo dos posts no blogger

Olá e bem-vindo ao Mult-focos. Neste post temos um tutorial de como adicionar box de assinatura abaixo dos posts no blogger. O Box de assinatura ou subscrição ajuda a aumentar seus seguidores em redes sociais o que contribui para o aumento do tráfego de seu blog, o que torna uma ferramenta superimportante.

Como personalizar o widget de atribuição padrão no blogger

Olá e bem-vindo ao Mult-focos. Neste tutorial vamos mostrar como personalizar o widget de atribuição padrão no blogger.

Box de mult assinaturas sociais para Blogger

Olá e bem-vindo ao Mult-focos. Trazemos neste post uma importante ferramenta para seu blog é o Box de mult assinatura social. Este Box contém as cinco redes sociais mais importantes no momento, o que dá seu visitante um leque maior de opções.

Elegante box de mensagens com abas para Blogger

Olá e bem-vindo ao Mult-focos. Trazemos neste artigo um elegante box de mensagens para Blogger. Na realidade este widget pode ser usado para mensagens e outras utilizações, por exemplo, postar códigos desde que você os converta, é só usar a imaginação.

Widget assinatura de email Feedburner com 9 Botões Sociais

Olá e bem-vindo ao Mult-focos. Neste post trazemos uma ferramenta essencial para um blog, trata-se de um widget assinatura de email Feedburner com 9 Botões Sociais.

Widget atraente vertical de posts recentes

Olá e bem-vindo ao Mult-focos. Neste post trazemos um widget atraente vertical de posts recentes. Veja um demo clicando no botão abaixo ou em Result no box de códicos.

Widget de assinatura sociais para Blogger

Olá amigos Mult-focos, neste post vamos ver como adicionar um chamativo Widget de assinatura sociais.

Widget últimos posts com imagens

Olá amigos Mult-focos, sempre é aconselhável manter seu Blogger bem apresentável, isto lhe proporciona uma atração a mais para manter seu publico visitante. Temos aqui um atraente widget últimos posts com imagens, o que dará seus visitantes, muitas opções de leitura e por consequência sua permanência em seu blog.