Widget com vários botões sociais e buscador

Widget com links para sus páginas sociais, buscador, e outros links de redes sociais. Bem bonito e profissional. Do excelente blog New Blogger, que recomendo demais que conheçam.

»»Leia mais...

Menu social para seu Blogger

Outro excelente menu para suas páginas sociais, mais um modelo incrível do blog Ekletinery, bastando copiar o código e colar no HTML/Javascript em seu Blogger. Facílimo !
Vá até Layout
Clique em Adicionar um Gadget
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias nos códigos grifados na cor vermelha.
<!-- Menu socail -->
<style>
/*--------eklentileri.blogspot.com hareketli menu ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56yRMJpFcXUUbMpdyer0x6NsPFG5RvSHMaFdO2iPjQPwPAH9xNs9a5aNRrDXE6uLrwbvF0b6pdXqm2yykyoNKbvhgYM9pufOWXlFrZ5xyqeXiZMpUsiy9u6IGoBRDIL7mOisG_oz9lEbA/s1600/eklentileri.blogspot.com.png) no-repeat;
-webkit-transition: ease-in 0.2s all;  
-moz-transition: ease-in 0.2s all;  
-o-transition: ease-in 0.2s all;  
-ms-transition: ease-in 0.2s all;  
transition: ease-in 0.2s all;
cursor:pointer;
.touchme a.googleplus {
background-position: 0px -58px;
.touchme a.googleplus:hover {
background-position: 0px 0px;
.touchme a.twitter {
background-position: 0px -290px;
.touchme a.twitter:hover {
background-position: 0px -232px;
.touchme a.facebook {
background-position: 0px -406px;
.touchme a.facebook:hover {
background-position: 0px -348px;
.touchme a.rss {
background-position: 0px -174px;
.touchme a.rss:hover {
background-position: 0px -116px;
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="ENDEREÇO DO FEED" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="ENDEREÇO DO GOOGLE PLUS" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="ENDEREÇO DO FACEBOOK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="ENDEREÇO DO TWITTER" rel='external nofollow' target='_blank' ></a>
</div>

»»Leia mais...

Menu horizontal com efeito

DEMO

»»Leia mais...

Template Scrap Gerbera

DEMO/Pegar código
Na minha mais nova empreita, de retirar links quebrados, templates antigos e obsoletos, resolvi que alguns irei refazer. É o caso deste template para o Blogger. Template com alguns hacks instalados, como posts em grade e em lista, leia mais automático, postagens populares coloridas com numeração, comentários reformulado, menu de navegaçãoo nas laterais das postagens além de belas imagens em scrap digital.
Para ativar o menu social ao pé do template, procure por:
<div id='creditos'>
Abaixo dele você verá escreito "AQUI O ENDEREÇO DE SEU BLOG" e mais abaixo as outras inscrições. Vá mudando e colocando os endereços de suas páginas sociais nestes locais.

»»Leia mais...

Descobrir links quebrados no Blogger

Se você tem blog no Blogger e seu blog possui links externo uma coisa é certa, seu blog tem links quebrados. E isso não é nada bom para seu blog. Muitas vezes linkamos aquele blog, sites, páginas que gostamos e até mesmo imagens, quando não hospedadas no próprio Blogger podem simplesmente desaparecer das  postagens ou mesmo das listas da sidebar do blog. Se você colocou menu social ou implementou qualquer outro hack, certifique-se de linkar cada parte ou delete onde não houver link pois, o Google acaba por penalizar os blogs por isso. Além do mais, todos, internautas que somos, sabemos o quão frustrante é entrar em uma página, clicar num link e nada. Eu por esses dias estou dando um limpa geral em meu blog, tratando de retirar todos os links quebrados que aqui houver por consideração aos meus leitores, e são muitos, muitos, muitos...  :-(
 Para descobrir os links quebrados em seu blog, acesse o site Broke Link, escreva então alí o endereço de seu blog, mas atenção, escreva iniciando por www, sem o http ou não dará certo, ok ?
Se o endereço de seu blog é
http://templateseacessorios.blogspot.com
escreva
www.templateseacessorios.blogspot.com
Depois você será direcionado a uma página como essa abaixo. Veja se o endereço de seu blog está certo. Repita então a capitcha e clique em clique em  "Find broken links now !"
Agora espere...espere... espere e ele te mostrará onde estão os links quebrados para que você, que não tem nada mais interessante na vida fazer. Vá arrumar seus links quebrados, menino (a) !!!!
PS: Olhem só o meu desespero, devo ter uns 800 links quebrados em meu blog, e uma infinidade igual de postagens para arrumar. Desespero ?? Imagina ! É pouco para o que estou sentindo.

»»Leia mais...

Botões sociais com contador no pé da postagem

DEMO

»»Leia mais...

Colocar barra de créditos ao pé do (footer) Blogger

Sempre a procura de epaço e em busca de um template mais harmonioso tem horas  em que nos perguntamos onde mais daria para colocar algum widget, banner, menu social, aquele contador ou outras coisinhas no blog sem o deixarmos com uma estética prejudicada. Por isso, sempre inovamos, buscando soluções que se encaixem bem no blog. Uma solução boa é aplicar uma div para colocarmos coisinhas necessárias, ou nem tanto no footer do Blogger. Faça isso com facilidade.
  Hack atualizado para o  abril de 2013
Vá até o modelo, clique em Personalizar
Clique em Avançado, Adicionar CSS e cole o código abaixo
(se quiser mudar a cor de fundo, troque o código grifado em azul)
Acima dele, cole o código abaixo:
/*Créditos----------------------------------------------------------*/
#creditos{
color: #000;
text-shadow: 0px 1px 0px #fff;
font-weight: bold;
font-size: 12px;
margin: -20px 0 0 0;
padding: 0px 3px 2px 4px;
background: #A5CDEF;
background: -webkit-linear-gradient(#808080, #eee);
background: -moz-linear-gradient(#808080, #eee);
background: -o-linear-gradient(#808080, #eee);
text-align: left;
#creditos a {
color: #000;
font-size: 12px;
Agora volte no modelo.
Clique em Editar HTML
procure por:  </footer> 
 Acima dele cole este próximo código. Não se esqueça de colocar os endereços de suas páginas nos botões sociais e se quiser retirer o link do meu blog, fique a vontade, bastando para isso apagar a parte que está grifado em amarelo.
<div id='creditos'>
<div align='right'>
<a href='ENDEREÇO DE SEU BLOG'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMP_Aj5_BAqgBpveBgesvKWao41BWSGj8yURHW_7QpWBcv6MNEzvSoN-_ruejh-g_5IlFr5S28GSbGTiEynVo0s98L5N65QmmbjxbbRuEi5a7mvqLO7WFc8LCY43lJ9qfRDeR-ChdcxE/s1600/blogger48.png'/></a>
<a href='ENDEREÇO DE SUA PÁGINA NO FACEBOOK'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCzYXPgMxshZdq28NDrisjnCS3keAz4vZ8hIr6_k_CywuATGNAjvNSB_PejuUG18LO4iDKanEu5V2TKjgu7EjhxM4LD0DhZdsLvEx-21fC7x_J2yUwrFPwolfojtaOfaZQWJbEJBsYINk/s1600/facebook48.png'/></a>
<a href='ENDEREÇO DE SEU TWITTER'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieP7DrQpoOeEEB_y9YKgSIvWxmfO7Rt5Lhw7RWkUmbUejO9vTfmuMhDeJpA6nA0zbX2PRCkN3ufa3siflK6cMuCiZLz_sMAJioMhqXlv_BNaPZJ7OF92rEKtp0IHrz96z5FYIOA1xJkoM/s1600/twitter48.png'/></a>
<a href='mailto:ENDEREÇO DE SEU EMAIL'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIpFczLFsyp0bhCfjrqRHD890au0c4oEw3wGDef1HRnwLJeDaBRCQcOnc6ksNyySI7zKEAmhyphenhyphenGiIph8b7_0TRiO6wB8lM1E6EagXt0EKy45oPZrnKjj2T9XF9jhqdZE1hFYsQu3WLiYU/s1600/gmail48.png'/></a>
<a href='ENDEREÇO DE SEU FEED'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEianljlZQdWDCKs7QDqRqu584CvbYOlzcLnHjdP71bW5DkDGffvxgJzOVtv_6mFf3H0vVdwHOeqWfDTMC-f-5szPxVKL1tqLOmXuJlwKb1dRHE6yHy459B_Vkye3RRHA7W0KooXv4vuzpo/s1600/rss48.png'/></a>
</div>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Todos os direitos reservados 2013  &#169; <br />
Por Elke di Barros | Conheça o blog<a href='http://templateseacessorios.blogspot.com/'> Templates e Acessórios</a>
<div align='right'>COLE AQUI ALGO COMO UM CONTADOR</div>
</div>

»»Leia mais...

Botões para seu visitante partilhar suas postagens

DEMO
Aí está um menu interessante, com um efeito bonito e de muita importância para a divulgação  de seu blog no Facebook, Twitter, Pinterest entre outras páginas sociais. De fácil aplicação, sem necessidade de linkar ou escrever no código.
Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011
Procure agora por </body>
Acima dele, cole o código abaixo:
<!-- Start Shareaholic Sassy Bookmarks HTML (eklentileri.blogspot.com)-->
<div class="shr_ss shr_publisher">
</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
</script>
<!-- End Shareaholic Sassy Bookmarks script (eklentileri.blogspot.com) -->

»»Leia mais...

Botões sociais para compartilhar imagens no blog

DEMO
Que tal botões sociais sobre suas fotos do Blogger para que compartilhem suas fofurinhas ? É isto que esse código se propõem a fazer e faz elegantemente com  as imagens de seu blog. Prático e muito fácil.
Clique em Layout
Clique em Adicionar um Gadget
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código. Salve !
<script type="text/javascript" src="http://files.markerly.com/markerly-cdn.js#pub_id=ma-514b6dbc2cafd"></script>
Créditos: http://markerly.com/

»»Leia mais...

Widget do Instagran oculto na lateral do blog

Para quem tem conta no Instagran e gosta de comaprtilhar suas fotos, eis aqui um widget no formato dos outros widgets apresentados nas postagens anteriores. Suas fotos ficam ocultas na lateral do blog. Fácil de implementar mas é necessário além da conta no Instagran, abrir uma conta no site Web Instagran para que seu widget funcione. Depois copie o código abaixo colando em HTML/Javascript, em seguida, coloque o seu nick de usuário do Instagran e pronto.
Meus artesanatos, decorações e comidinhas... Conheça meu blog: Festa, Sabor e Decoração
Agora clique em Layout
Clique em Adicionar um Gadget
Ao abrir, clique em  HTML/Javascript
Cole então o próximo código fazendo as modificações necessárias.
<!-- Widget do instagran -->
<style>
img, a {
border: 0;
#on {
visibility: visible;
#off {
visibility: hidden;
#instagran_div{
width: 400px;
height: 230px;
overflow: hidden;
#instagran_right {
z-index: 10004;
border: 6px solid #493830;
background-color: #D9D2C8;
width: 410px;
height: 220px;
position: fixed;
right: -430px;
#instagran_right_img {
position: absolute;
top: -2px;
left: -70px;
border: 0;
#instagran_left_img {
position: absolute;
top: -2px;
right: -70px;
border: 0;
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()
{ jQuery("").hover(function ()
{  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate({   right: -430  }, 500); }); jQuery("#instagran_right").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("#instagran_right").stop(true, false).animate({   right: -430  }, 500); }); jQuery("").hover(function () {  jQuery(this).stop(true, false).animate({   right: 0  }, 500); }, function () {  jQuery("").stop(true, false).animate(
{   right: -294  }, 500); });});</script><br /><div id="on"> <div id="" style="top: 12%;">
<div id="on">
<div id="instagran_right" style="top: 18%;">
<div id="instagran_div">
<img id="instagran_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunrUYjB0Nb_7sCP9xocrjJEdZ0gNiDdw_GFbOnsjHn3N7Qi5kSLFQmQWttxpXPxHZjEH9JG1HK-CHVejzlz7SXPX8GNWW51ouV6QcQp3CBA9WmnBke0ICdMzVq7a3BJmkC3RFuijHVcc/s1600/Active-Instagram-3-icon.png" width="60px"  />
<iframe src="http://widget.stagram.com/in/AQUI SEU NICK NO INSTAGRAN/?s=100&w=4&h=2&b=0&p=5" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:400px; height: 210px"></iframe>
</div>
</div>
</div></div></div>

»»Leia mais...

Widget de postagens populares colorido com efeito nas imagens

DEMO

»»Leia mais...

Códigos CSS que não funcionam no Blogger

Atenção pessoal,  a quem escreveu-me dizendo que parte dos meus códigos não estão funcionando, em especial os códigos CSS, que são os códigos que personalizam os widgets e parte dos templates, façam o seguinte:
Copie o código que peço nas explicações para colocar antes de:
]]></b:skin>
e coloque-os depois do mesmo código entre as tags abaixo:
<style>
AQUI DENTRO O CÓDIGO
</style>
Ou então, coloque-os em um widget HTML/Javascript, também entre as tags
<style>
AQUI DENTRO O CÓDIGO
</style>
Imagino que deva ter havido mudanças estruturais nos códigos dos templates do Blogger o que afeta diretamente o funcionamento dos códigos.

»»Leia mais...

Menu horizontal oculto

DEMO

»»Leia mais...