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.

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.

<!-- Menu social -->
<style type='text/css'>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}&gt;
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>
<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Buscar...&quot;;}" onfocus="if (this.value == &quot;Buscar...&quot;) {this.value = &quot;&quot;;}" type="text" value="Buscar..." />
<input id="searchsubmit" type="submit" value="Buscar" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/ID DE SEU FEEDBOURNER" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvwDojM1I/AAAAAAAADgU/tBRpYkXIVho/rss.png"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/ID DE SEU FEEDBURNER" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=ID DE SEU FEEDBURNER" target="_blank" rel="nofollow"><img src="http://1.bp.blogspot.com/_4HKUHirY_2U/TKgvv1xjnUI/AAAAAAAADgE/XnHFsRwk1Js/email.png"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=ID DE SEU FEEDBURNER" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="ENDEREÇO DE SEU TWITTER" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvvhhVo_I/AAAAAAAADf8/IE38PfZs7sE/twitter.png"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="ENDEREÇO DE SEU TWITTER" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="ENDEREÇO DE SEU FACEBOOK" target="_blank" rel="nofollow"><img src="http://2.bp.blogspot.com/_4HKUHirY_2U/TKgvv-pobaI/AAAAAAAADgM/1wAlSk8_1yY/facebook.png"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="ENDEREÇO DE SEU FACEBOOK" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9fsSTv4I/AAAAAAAAB90/lJxosSNM6jE/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9MH_zqNI/AAAAAAAAB9E/PahHr5GN6dI/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9NTh41aI/AAAAAAAAB9U/2RkBR3wbLBY/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='http://4.bp.blogspot.com/_4HKUHirY_2U/TIb9M5a4BZI/AAAAAAAAB9M/xoWTjnPVepc/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TIb9e_Kpo-I/AAAAAAAAB9s/1WqjOIz3B_A/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='http://2.bp.blogspot.com/_4HKUHirY_2U/TIb9eJ5RTWI/AAAAAAAAB9c/tYvdT6xgaLw/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TIb9egD8XSI/AAAAAAAAB9k/rZY5eofO2SY/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div></script></div></div>

Crédito: http://www.ebloggertricks.com

»»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(http://4.bp.blogspot.com/-KHbv7Tz112U/T9fZAXtBe8I/AAAAAAAAB_s/7nmIbT9ltQw/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

Um bonito efeito neste menu horizontal com efeito, desenvolvido pelo blog Eklentiler.

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

Agora procure por: ]]></b:skin>  

Acima dele, cole o código abaixo:

/*Soldan Kayma Efektli Blogger Menü Bar Eklentisi Kod Baslangici www.eklentileri.blogspot.com*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
    z-index: 4;
}
#flyingmenubt li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#flyingmenubt ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

Salve. 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.

<ul id="flyingmenubt">
    <li><a href="#">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
 
</ul>

Se o seu menu não funcionou,é porque é necessário ajustes. Leia este post, dica do comentarista Willian

»»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

Um bonito menu para colocar ao pé de suas postagens para que seus visitantes compartilhem suas postagens no Facebook, Google Plus e Twitter, principais páginas sociais da atualidade. Vamos implementar ?


Vá até o "Modelo de seu blog", clique em "Editar HTML"

Clique em Ir para um widget ao abrir a janela, clique em Blog1

 

Clique agora na pequena seta para abrir o código...

 

Clique novamente na pequena seta ao lado do código

<b:includable id='post' var='post'>...</b:includable>

Procure então por <div class='post-footer'>


Abaixo dele, cole o próximo código.

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(http://1.bp.blogspot.com/-tuXyPoGGaSc/UPH_CO1-80I/AAAAAAAAC1U/RSCRAf4N3FE/s1600/social-kutucuk.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="BloggerEklenti" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
       
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
               
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
       
</script></div>
</div>
</b:if>

Crédito: Eklentiliery

»»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='http://3.bp.blogspot.com/-ULQT58b38Ls/US_dOumijuI/AAAAAAAABuE/ga37dOJMUyM/s1600/blogger48.png'/></a>
<a href='ENDEREÇO DE SUA PÁGINA NO FACEBOOK'><img border='0' src='http://3.bp.blogspot.com/-Kc794L0ii0Y/US_c4p7yGdI/AAAAAAAABtU/K_dsnRRCkuk/s1600/facebook48.png'/></a>
<a href='ENDEREÇO DE SEU TWITTER'><img border='0' src='http://1.bp.blogspot.com/-cR7p8MmBZAA/US_c5CXsdgI/AAAAAAAABto/p0RD1aNcKv4/s1600/twitter48.png'/></a>
<a href='mailto:ENDEREÇO DE SEU EMAIL'><img border='0' src='http://2.bp.blogspot.com/-I-dQL7zKI3s/US_dOlkTh9I/AAAAAAAABuI/iZGU-PmdeiI/s1600/gmail48.png'/></a>
<a href='ENDEREÇO DE SEU FEED'><img border='0' src='http://3.bp.blogspot.com/-3ttj1aNyap8/US_c4yM7iUI/AAAAAAAABtk/vLHEU8UHpMQ/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="http://3.bp.blogspot.com/-f5YAR2OdjEY/UUtBjOBezxI/AAAAAAAAT68/ITELErgVisk/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

Mais uma maneira de personalizar o widget de postagens populares, deixando o widget colorido e as imagens menores e com efeito de transição.


Vá até o modelo de seu blog e clique em "Personalizar"

/*Popular Post CSS ------------------------------------------------------------------------------*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:91%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:88%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:85%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:82%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:79%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:76%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li{background:#f6993d;width:73%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li{background:#EDB0EE;width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li + li  + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#C0C0FF;width:67%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li {background:#C0C0C0;width:64%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li + li + li + li +li{background:#C0C0C0;width:61%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after{content:"11"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li +  li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li  + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li .item-thumbnail{ float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}

#PopularPosts1 ul li a{ font-size:12px;color:#444;text-decoration:none}
#PopularPosts  ul  li {list-style-type:none; }

#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

#PopularPosts1 img{width: 40px; height:40px;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

»»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

As vezes o que precisamos no blog, com tantos widgets indispensáveis e excelentes, é de espaço. As vezes links são extremamente necessários, como links para páginas sociais, outros blogs que porventura você vier a ter e cadê espaço dentro de um layout que consideramos perfeito ? Que tal então, dar uma inovada e colocar um menu que fica oculto, sendo mostrado apenas ao se clicar em um link. Fácil de instalar, enxuto e prático.


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.

<style>

/*Menu oculto----------------------------------------------------------------------------*/
ul.nav8 {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}

ul.nav8 table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

* html ul.nav8 > li {
    width:auto;
}

ul.nav8 > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}

ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

ul.sub li {
    float:left;
}

ul.sub li:first-child {
    margin-left:45px;
}

ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}

ul.sub li a b {
    font-size:14px;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a b:hover {
    font-size:16px;
    color:#FF0000;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.sub li a p:hover {
    font-size:13px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.nav8 > li:hover {
    width:600px;
}

ul.nav8 > li a.ie6:hover {
    direction:ltr;
    width:600px;
}

ul.sub li a:hover i {
    opacity:1.0;
}


/*Sociais ------------------------------------------------------------------*/
ul#m-soc2{ 
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;}
ul#m-soc2 li{
list-style: none;margin: 7px;padding: 0;float:left;border: none;}
ul#m-soc2 li a{
background: url(https://lh4.googleusercontent.com/-n5zj4LjXnmM/T8zwsOI_NhI/AAAAAAAADIg/tD-DgPUODu4/s132/sosyal-butonlar.png) no-repeat 0 0;
margin:0;padding:0;display: block;position:relative;
width: 33px;
height: 33px;
overflow: visible;
}
ul#m-soc2 li a.twitter{
background-position: 0 0;
}
ul#m-soc2 li a.facebook{
background-position: -33px 0;
}
ul#m-soc2 li a.google{
background-position: -66px 0;
}
ul#m-soc2 li a.rss{
background-position: -99px 0;
}
ul#m-soc2 li a.twitter:hover{
background-position: 0 -33px;
}
ul#m-soc2 li a.facebook:hover{
background-position: -33px -33px;
}
ul#m-soc2 li a.google:hover {
background-position:-66px -33px;
}
ul#m-soc2 li a.rss:hover{
background-position:-99px -33px;
}
ul#m-soc2 li a span{
background: #555;position:absolute;
top:-10px;left:-10px;width:auto;height:auto;opacity:0;
padding:3px;text-align:left;
color:#fff;filter:alpha(opacity=0);
white-space:nowrap;border-radius:3px;font-size:12px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none}
ul#m-soc2 li a:hover span{
opacity:.7;
filter:alpha(opacity=70);
top:-23px}
</style>
<ul class="nav8">
<li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table>
<tr><td><![endif]-->
            <ul class="sub">
<li><a href="ENDEREÇO DO LINK 1"><b>Link 1</b>LINK 1<br />
<i></i></a></li>
<li><a href="ENDEREÇO DO LINK 2"><b>Link 2</b>LINK 2<br />
<i></i></a></li>
<li><a href="ENDEREÇO DO LINK 3"><b>Link 3</b>LINK 3<br />
<i></i></a></li>
<li><a href="ENDEREÇO DO LINK 4"><b>Link 3</b>LINK 4<br />
<i></i></a></li>
<li><a href="ENDEREÇO DO LINK 5"><b>Link 4</b>LINK 5<br />
<i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr>
</table>
</a><![endif]-->
        </li>
</ul>

»»Leia mais...