Postagens Recentes

21 de mai. de 2012

Combo para modificar o layout de seu blog com facilidade

5 comentários:
Será essa a aparência do blog.


Que tal modificar totalmente o layout de seu blog através do HTML/Javascript do seu blog ? Bem facinho e te permite fazer várias combinações.




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, caso prefira colocar outras imagens para personalizar seu blog. Se não quiser retirar a barra, apague o código que está na cor vermelha.



<style>
#navbar{display:none;}
body, .body-fauxcolumn-outer .cap-top {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYmZbrXm_0I28iEdhbahEEMmG6C4DBK-ctXRy_U9CE7DlTgb3d1e8Zhk4UswbZ6g7P8GDagL8R3moiPvAw9ivalelHihbuxWf2dZv2cL84g87iXo3DJxm8PYiZSAd-tI1bg1Rn7MISTPs4/s1600/BVS+beautiful+paper08.jpg) repeat;/*imagem de fundo do blog*/
}

.main {
background: #EFEDE7;
}
.main-outer {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZU6U_E1_jqh4E2PeB3YJeBpzAqELsf1Ud8oDL9UeqObEhVB-SQoXd625PciaeN7Lrqe16pd3Ef_kIFMNwv7P3s_4m3ReW8OvX2Sgw99r39_GyVbDHDJ0UEVb6qnkVeF3aEHmuQz0SBYTn/s1600/BVS+beautiful+paper04.jpg)  repeat;
margin: 6px 0 6px 0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
h3.post-title, post-title h2{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3Lb-q5QA53cPX-XHMinygCRlxaAeKC9zbZ0GCmnT1DHtpWhm3LJOVOerCTOMhIbzGXBbNZXLYeemZrEDP6xYbBgV47POK-4eOR27wzwR2ARoYuxIQzCJiUmwpH9lsDFpaFTmx4LBXW_G/s1600/BVS+beautiful+paper14.jpg)  repeat; /*imagem de fundo do título*/
font-color: #fff;
color: #fff; /*cor do título do post*/
text-shadow: black 0.1em 0.1em 0.2em;
padding: 8px 2px;
margin: 3px 1px;
}

/*Tabs--------------------------------*/
.tabs-inner {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Mc0-tpJ9nEE2a9jZ9HK_8aCUUPOScidkD0ubFFmzUu_TOvkNRMXnimumEOZzGvOHQ8kvzLRDqU-I00sWEY1hXMTT8Jkqta4fdAGQJ6kQXKxrBjcWPj0-hmfHtIyLZTlf5u6rMn-2imJj/s1600/BVS+beautiful+paper04.jpg);/*imagem de fundo dos widgets*/
padding: 6px 5px;
margin: 2px 0 6px 0;
border: none;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
.tabs-inner .section:first-child {
margin:2px 2px 2px 1px;
padding: 6px 5px 6px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DekVoqDFlUDh1OtfOCI-smtdsDpM23ikaf50kuqkL4Sh11iTu93JKoLqiXhWVgTn9LXkP95HodYHG3CIEaugPoSVEdm4tJXgPbVcDDzzh9m0ZWSNjoAZUhv38NZ0S_Ektg3dnmHEPhRx/s1600/BVS+beautiful+paper11.jpg) repeat;/*imagem de fundo da tab*/
border: none;
}
.section:first-child ul{
border: 1px dashed #3B2517;
padding: 6px 5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
border: none;
}
.tabs-inner .widget ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIOBpzHTa7AT5luDH-e6SDNcx8d0kqHbChma6X7eQiJU_gyPu6G2d3n9N48A86tY-GVo5c2r7Xp43rvXgNxYz0HmtdaI3dZCaAX1nawYFghAn_R0CxjAEW8qJAXTtWQXRbBJg1fk_aT_qM/s1600/BVS+beautiful+paper10.jpg) repeat;
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1v208SXpQB1G-meGI01aqwgcUSrqiagu7koH9JTd_GGBirisrv0K24HxKjDeITOGjyb9fjFNwODFJWUzvq_ZjpUGDbN-P6lTTtVzMNbBgy-6VzrrpQkQxQK22WH0lZCoWIoj6hS92YlY/s1600/5.gif);
border: none;
width: 98%;
vertical-align: top;
padding: 3px 1px 3px 1px;
margin-left: 2px;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover{
background: #F3EDDF; /*cor de fundo da tabs selecionada*/
border: none;
margin: 2px 0 2px 0;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
.tabs-inner .widget li a{
margin: 0 1px 0 0;
background: #FDFBF7;
border: none;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}

/*Sidebar e footer------------------------------------------------------------*/
#sidebar-right-1, #sidebar-right-3, #sidebar-left-1,  #sidebar-left-3, #sidebar-right-2-1, #sidebar-right-2-1, #sidebar-left-2-1, #sidebar-right-2-2,  #sidebar-left-2-2,  #footer-1, #footer-2-1, #footer-2-2, #footer-2-3{
margin:2px 2px 2px 1px;
padding: 6px 5px 6px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIOBpzHTa7AT5luDH-e6SDNcx8d0kqHbChma6X7eQiJU_gyPu6G2d3n9N48A86tY-GVo5c2r7Xp43rvXgNxYz0HmtdaI3dZCaAX1nawYFghAn_R0CxjAEW8qJAXTtWQXRbBJg1fk_aT_qM/s1600/BVS+beautiful+paper10.jpg) repeat;/*imagem de fundo da sidebar*/
}

#sidebar-right-1 .widget, #sidebar-right-3 .widget,  #sidebar-left-1 .widget, #sidebar-left-3 .widget, #sidebar-right-2-1 .widget,  #sidebar-left-2-1 .widget,  #sidebar-right-2-2 .widget, #sidebar-left-2-2 .widget,  #footer-1 .widget, #footer-2-1 .widget, #footer-2-2 .widget, #footer-2-3 .widget{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Mc0-tpJ9nEE2a9jZ9HK_8aCUUPOScidkD0ubFFmzUu_TOvkNRMXnimumEOZzGvOHQ8kvzLRDqU-I00sWEY1hXMTT8Jkqta4fdAGQJ6kQXKxrBjcWPj0-hmfHtIyLZTlf5u6rMn-2imJj/s1600/BVS+beautiful+paper04.jpg);/*imagem de fundo dos widgets*/
border: 1px dashed #3B2517;
padding: 6px 5px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
#sidebar-right-1 .widget-content,  #sidebar-right-3 .widget-content,  #sidebar-left-1 .widget-content,  #sidebar-left-3 .widget-content, #sidebar-right-2-1 .widget-content,  #sidebar-left-2-1 .widget-content,  #sidebar-right-2-2 .widget-content,  #sidebar-left-2-2 .widget-content, #footer-1 .widget-content, #footer-2-1 .widget-content, #footer-2-2 .widget-content, #footer-2-3 .widget-content{
background: #F3EDDF; /*cor de fundo dos widgets*/
padding: 2px 2px;
}

#sidebar-right-1 h2, #sidebar-right-3 h2, #sidebar-left-1 h2, #sidebar-left-3 h2, #sidebar-right-2-1 h2,  #sidebar-left-2-1 h2, #sidebar-left-2-1 h2, #sidebar-right-2-2 h2,  #sidebar-left-2-2 h2,  #footer-1 h2, #footer-2-1 h2, #footer-2-2 h2, #footer-2-3 h2{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3Lb-q5QA53cPX-XHMinygCRlxaAeKC9zbZ0GCmnT1DHtpWhm3LJOVOerCTOMhIbzGXBbNZXLYeemZrEDP6xYbBgV47POK-4eOR27wzwR2ARoYuxIQzCJiUmwpH9lsDFpaFTmx4LBXW_G/s1600/BVS+beautiful+paper14.jpg) repeat; /*imagem de fundo do título*/
color: #fff; /*cor do título do widget*/
text-shadow: black 0.1em 0.1em 0.2em;
padding: 8px 2px;
margin: 3px 1px;
}

#sidebar-right-1 ul li, #sidebar-right-3 ul li, #sidebar-left-1 ul li, #sidebar-left-3 ul li, #sidebar-right-2-1 ul li,  #sidebar-left-2-1 ul li,  #sidebar-right-2-2 ul li, #sidebar-left-2-2 ul li,  #footer-1 ul li, #footer-2-1 ul li, #footer-2-2 ul li, #footer-2-3 ul li{
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1v208SXpQB1G-meGI01aqwgcUSrqiagu7koH9JTd_GGBirisrv0K24HxKjDeITOGjyb9fjFNwODFJWUzvq_ZjpUGDbN-P6lTTtVzMNbBgy-6VzrrpQkQxQK22WH0lZCoWIoj6hS92YlY/s1600/5.gif);
vertical-align: top;
padding-bottom: 1px;
margin-left: 2px;
border-bottom: 1px dotted #808080;
}

.fauxcolumn-left-outer .fauxcolumn-inner, .fauxcolumn-right-outer .fauxcolumn-inner , .footer-outer{
border: 0px;
padding: 6px 5px 6px 5px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8DekVoqDFlUDh1OtfOCI-smtdsDpM23ikaf50kuqkL4Sh11iTu93JKoLqiXhWVgTn9LXkP95HodYHG3CIEaugPoSVEdm4tJXgPbVcDDzzh9m0ZWSNjoAZUhv38NZ0S_Ektg3dnmHEPhRx/s1600/BVS+beautiful+paper11.jpg) repeat;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-moz-box-shadow: 0px 10px 10px -7px #888;
-webkit-box-shadow:0px 10px 10px -7px #888;
}
</style>


20 de mai. de 2012

Widgets com efeito accordion

Nenhum comentário:
DEMO



Para quem economizar espaço no blog, que tal este efeito accordion em TODOS os widgets do Blogger ?





Vá até o Modelo de seu blog, clique em Editar modelo
  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>  




Depois dele cole o seguinte código:



<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<style type='text/css'>
.cegdicon { position:relative;float:right;height:9px;width:9px;top:3px;margin-top:0px;}
.cegdlink { display:block; }
.cegdclosed { background: url(data:image/gif;base64,R0lGODlhCQAJAKIAAO/v5/fz78TK1/f39wAAAIuRoP///wAAACH5BAAAAAAALAAAAAAJAAkAAAMeKLVcajCaFQkca2gywiwDIYpfEAAWREHpJ0VOwwgJADs=) center center no-repeat;}
.cegdopen { background: url(data:image/gif;base64,R0lGODlhCQAJAKIAAO/v5/fz78TK1/f39wAAAIuRoP///wAAACH5BAAAAAAALAAAAAAJAAkAAAMbKLVcajCaJeFYI+cwyyAg2AUBIFFVl05KswgJADs=) center center no-repeat;}
</style>
<script type='text/javascript'>
//<![CDATA[
// collapse/expand blogger sidebar gadgets
// MS-potilas 2012
var cegdGroups = {};
var cegdMargin = 6;
function cegdToggle(ee, closeonly) {
  if(!closeonly) closeonly = false;
  var ele = $(ee);
  var ene = ele.find(".widget-content:first");
  if(!ene.length) ene = ele.find(".gadgets-gadget-container:first");
  var h2 = ele.find("h2:first");
  if(closeonly || !ene.is(":hidden")) {
    ene.slideUp("fast");
    h2.find(".cegdicon").addClass("cegdclosed");
    h2.find(".cegdicon").removeClass("cegdopen");
  } else {
    ene.slideDown("fast");
    h2.find(".cegdicon").addClass("cegdopen");
    h2.find(".cegdicon").removeClass("cegdclosed");
  }
}
function cegdClose(ee) { cegdToggle(ee, true); }
function cegdDo(ee) {
  if(cegdGroups["#"+$(ee).attr("id")] && cegdGroups["#"+$(ee).attr("id")] != "") {
    var ccc=cegdGroups["#"+$(ee).attr("id")].split(",");
    for(var i=0; i<ccc.length; i++) cegdClose(ccc[i]);
  }
  cegdToggle(ee);
}
function cegdInit(ele, closed) {
  var h2 = $(ele).find("h2:first");
  if(h2.length) {
    if(!(h2.parent().is("a")))
      h2.wrap('<a title="Click para abrir/fechar" class="cegdlink" href="javascript:void(0)" onclick="cegdDo(&#39;'+ele+'&#39;);this.blur();"></a>');
    $(ele).css('margin-top', cegdMargin);
    $(ele).css('margin-bottom', cegdMargin);
    if(!(h2.find(".cegdicon").length))
      h2.prepend('<div class="cegdicon cegdopen"></div>');
    if(closed) cegdClose(ele);
  }
}
function cedgID(gdg) {
  if(gdg[0] == '#') return gdg;
  if($(gdg).length == 1) return gdg;
  if(gdg[0] != '#' && $('#'+gdg).length == 1) return '#'+gdg;
  if($(".widget h2:contains('"+gdg+"')").length == 1)
    return '#'+($(".widget h2:contains('"+gdg+"')").parents(".widget").attr("id"));
  return gdg;
}
function cedgAddOpen() {
  if(arguments.length > 1 && cegdGroups[cedgID(arguments[0])]) return;
  for(var i = 0; i < arguments.length; i++) {
    arguments[i] = cedgID(arguments[i]);
    cegdInit(arguments[i]);
    var oth = "";
    for(var j = 0; j < arguments.length; j++) {
      if(i!=j) {
        if(oth!="") oth += ",";
        oth += cedgID(arguments[j]);
      }
    }
    if(oth != "") cegdGroups[arguments[i]] = oth;
    if(i) cegdClose(arguments[i]);
  }
}
function cedgAddClosed(gdgid) {
  cegdInit(cedgID(gdgid), true);
}
$(window).load(function() {
  // call cedgAddOpen / cedgAddClosed for gadgets you want to expand/collapse
  // parameter: gadget id with # in front of it (CSS/jQuery selector)
  // cedgAddOpen can also create a group, from which only one is open at a time.
  //
  cedgAddOpen("About Me", "More info");
  // cedgAddOpen("#Subscribe1");
 
  $(".sidebar .widget").each(function() { cedgAddClosed("#"+$(this).attr("id")); });
});
//]]>
</script>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>






Salve.

Se quiser mudar a aparência de seus widgets, veja a explicação aqui, aqui, aqui ou aqui. 

Os babacas da internet

11 comentários:
Babaca detect
Não sei quanto ao blog de vocês mas por aqui sempre aparecem babacas para comentar. Eu não sei se é inveja, se falta de caráter, se é apenas frustração pela falta de capacidade de aprendizado mas sei que vira e mexe meu blog é alvo de comentários como este abaixo.



Sempre denuncio estes tipos de comentários como spam, deleto e deixo pra lá, mas resolvi mostrar para vocês como é a alma podre de algumas pessoas que se intitulam como "jovens sonhadores de paz e alegria e que tem Jesus como seu herói".

Vem cá, Jesus não pregava o desapego, a fraternidade e a humildade, tendo inclusive ensinado a dar a outra face ? Acho que seu herói é outro...


Fico me perguntando se o Deus e o Jesus dele acharia bacana esse tipo de comportamento destrutivo, odiento e sem educação. Para quem abre um blog para ensinar o próximo a arte de fotografar fico me perguntando se realmente ele é assim tão generoso. O que você acha ?

11 de mai. de 2012

Menu social na lateral do Blogger com efeito J.query

2 comentários:
DEMO

Este é um menu com alguns efeitos interessantes. A começar que, os botões das páginas ficam escondidos, sendo mostrados a medida em que se passa o mouse. Há um tooltip que é mostrado assim que se pausa o mouse sobre os botões.




Vá até o Modelo de seu blog, clique em Editar modelo
  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>  




Substitua então pelo código abaixo:



]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>
<script type='text/javascript'>/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);
 
    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Carregando...</div>').appendTo(wrapper);
   
    // Set function that will check if all images are loaded
    var interval = setInterval(function(){
        var images = scrollable.find('img');
        var completed = 0;
       
        // Counts number of images that are succesfully loaded
        images.each(function(){
            if (this.complete) completed++;  
        });
       
        if (completed == images.length){
            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function(){
               
                loading.hide();
                // Remove scrollbars  
                wrapper.css({overflow: 'hidden'});                      
               
                scrollable.slideDown('slow', function(){
                    enable();  
                });                  
            }, 1000);  
        }
    }, 100);
   
    function enable(){
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 99;                  
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that
        // var wrapperOffset = wrapper.offset();
       
        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
            .css('opacity', 0)
            .appendTo(wrapper);
   
        // Save menu titles
        scrollable.find('a').each(function(){              
            $(this).data('tooltipText', this.title);              
        });
       
        // Remove default tooltip
        scrollable.find('a').removeAttr('title');      
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');  
       
        var lastTarget;
        //When user move mouse over menu          
        wrapper.mousemove(function(e){
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();
       
            var tooltipLeft = e.pageX - wrapperOffset.left;
            // Do not let tooltip to move out of menu.
            // Because overflow is set to hidden, we will not be able too see it
            tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
           
            var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
            // Move tooltip under the mouse when we are in the higher part of the menu
            if (e.pageY - wrapperOffset.top < wrapperHeight/2){
                tooltipTop += 80;
            }              
            tooltip.css({top: tooltipTop, left: tooltipLeft});              
           
            // Scroll menu
            var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            if (top < 0){
                top = 0;
            }          
            wrapper.scrollTop(top);
        });
       
        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function(){
            if (!lastTarget) return;  
                                       
            var currentText = tooltip.text();
           
            if (lastTarget.nodeName == 'IMG'){                  
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
                        .stop(true)
                        .css('opacity', 0)  
                        .text(newText)
                        .animate({opacity: 1}, 1000);
                }                  
            }
        }, 200);
       
        // Hide tooltip when leaving menu
        wrapper.mouseleave(function(){
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });          
       
        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
            tooltip
                .stop()
                .css('opacity', 0)
                .text($(this).data('tooltipText'))
                .animate({opacity: 1}, 1000);
   
        }, function(){
            tooltip
                .stop()
                .animate({opacity: 0}, 300);
        });
        */          
    }
}
   
$(function(){  
    makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>




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.



<style>

/* Menu social-----------------------------------------------*/
#menu-pro1{margin: -10px 0 0 0;
}
div.sc_menu_wrapper {
position:absolute; top:30px; left:0; z-index:9999; overflow:hidden; width: 80px; position: fixed;
height: 350px; /* modifique o número para diminuir a altura */
width: 200px; /* modifique o número para modificar a largura */
overflow: auto;
}
div.sc_menu {
padding: 3px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 164px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* color y fondo efecto hover */
color: #fff;
}
.sc_menu a:hover {
background: #fff;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading { /* estilos de carga */
position: absolute;
top: 40px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid #63B0B4;
background: #022A4A;
}
.sc_menu_tooltip { /* estilos tooltip */
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: #08044E;
}
</style>



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='sc_menu_wrapper'>
<div class='sc_menu'>
<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2ajclVlOoSPu3QS5gZezS3iVrhWYxpc9Taic8BDMdjmSKhuEZ2wxC79ZXvqR9oMZsGReNPajvgl_SYhdHDPe9GU4AB7r41HPaDzFtyyoCu46RONnEKSnoAQTDRsgzoPp442hvmZRsG0/s1600/blogger-webtreats.pn' width='115px'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7moxanX8yFd6wIhDfXxpQjfySIsQCqGL8EkyvwhiWihl_L1TgXX25X8DLgNYel8ZqgQzkUZha7l-Vf34AeGR_rg9KnOYNo8G5e5KJ9r-QvGg1jJz11zml245bHUQofl9wkuFEDt4EnCo/s1600/facebook-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAy-Aw3bdlI2YRxe-H4o6TyNjIdj3HOcv_wOZuUlWNGgA7A3RUVZ4ejO_rLwaW1RKMWF0oljaXV7GSFlMUaiaKJe2Cnx-qlwZkSjQ45XyjEn0uzLGmRx9sdlUmxAxqMSlsGGCnGH5GnTE/s1600/twitter-bird3-webtreats.png' width='135px'/></a>

<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8Gdm78pAYx0iakkcdtBzQi9ocwXYj_dl3TYA-rZIA9xI1fJbLhOXsrO0gn9GgVIMMGhitNaQ1DwZYRdmSXMDVeDll7KFrCSz3f2Fv5MP68gbGAbDrmA0_G_uxhYEZc71YY_QICm2jxE/s1600/you-tube1-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCNAWAsuxRMeGHdS11hONSy_XWc_l5snpDJd-w19I_jvmUebpK2VaVgzzu777Q9s2Bw_qeR3ojEZj7USYMk8XsSsp0AoNJf1exw17QsZu4CCJa0-ZUZPBOsP2L8C8jn6KplVaG1tkVfs/s1600/flickr-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeTtJfaS2_HbY96uaqg-5VBU8jk7DvtYESAw3jJOKbHbUAKyhj8CHETHk7GYv5INy9V_TmjYHBOMYAoO6SlLVgM4zGaj4amgIE4w6npXru9ecgdTtNDXGVIDRP4CFKkBGZdhW8DLMimAg/s1600/digg-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1fmIvJa0lF_gzeHISDMs0HJl_I9az9Ky38WqTQhEzJqKxzBm02ZHJVC7aVC75w4yAF1zqBwaO3_ptA7HYgF1liiTBi8gse8fRSIGnQibr9FHXrXhJ4nOC_YjHB-vkjRCGFk8ASTMSt_Q/s1600/orkut-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzxfSGfeusvnKGNHDgLqErS2a83dSWBGAMDQ4WbqrE7E1posP61hL3I0GejLiyNMK0bKcKTMXnM8s_oToWFPYg8kcaw4PvDn3vedywUT0mWJEf3ONrMqsx0IOCaOr4Amvu5SupjHlCC8g/s1600/rss-basic-webtreats.png' width='115px'/></a>


</div></div>
</b:if>
</b:if>


Menu social fixo na lateral no Blogger

Um comentário:


Vá até o 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. (se prefere que fique a direita troque o código em azul por right)



<style>
.menu-social-2{ position:absolute; top:30px; left:0; z-index:9999; overflow:hidden; width: 80px; position: fixed;}
.menu-social-2 img{  border: 0; margin: -9px 1px; width: 80px;}
</style>

<div class='menu-social-2'>

<a href='https://www.google.com/accounts/Login?service=blogger' title='Login'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7y-67nHndL-Qp4qyvAx9byRNa_Z0A4kkIgEeOApBItPGYC7nha87UIgwPXk1_BGQM8jdAUJuDWdzjThReuHlwKmZaHNSO1ag3bFSZM-DFLmgMfSPkyJ0LnUHQmfWImmq2qj1ToD7LtMwz/s1600/blogger-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBVeUQphfBcS-12zy_pSIouOh3IFgc2mSkVtDeYfSdO4Bx9ZVaJy01zfaMhY0YfabJLbCnmbW1M2xSbHL8Ti4Ve1lVva-DeZOcANGNpwhzKZkZ4yGIRLH0FGwqdI7GAuFqty7GbvwyVxzI/s1600/facebook-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltgTOTRCNC8yUG-EzUqacIrg4HpU-rpCmVq3GtcMnunakHtyNQVfAehrxDdhRTpybG9eWPCMDKIH4I1SaHe-s1avyitAwBUat0_YRQ6PApuGhKO1_HipQXKAPB5duv-dt9uR_Mz35iySU/s1600/twitter-bird2-square-webtreats.png'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlE7X3E41Kl_3l54iHqJKorTt0IXLI-0ynpl30a4vt-HQ1ro_WG68wKABhu68Z8yYvfsNL5FgCoqBkKXX6RkWBKjSw0M50wjtjQ2tT4KVP_yzrWfKRNX8RfysEhDsh5beUzNDG4fl-30S1/s1600/orkut-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRaN9RFfMW0p_3w9yRbGXSh7cOyatkMyyE7oAG5b0pTwL1vRiuDm4K8mERxM6KEYiTGUFANWbM7uXS5FBpxuQPgJHX_lyUfjg0ZLXmeQjqAJZU65OZjykBlxTbYSX8UdvL1aG8L0vjaXfq/s1600/rss-cube-webtreats.png'/></a>

<a href='ENDEREÇO DE SEU CANAL NO YOUTUBE' title='Meu canal no YouTube'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKrolrSF-gljXAl5IdzFmb-E-Vsk_-JepnRA98IM6rbZc2WzTcSu41pNvAhVnPgTPI_31KRhkWLlG_yiTKYEs2H7rAyBVa3GI1NmHjdX7KrNwK9t7Avpjmb89IMnTdWEm3u342O-X5wB58/s1600/you-tube2-s-webtreats.png'/></a>

<a href='mailto: ENDEREÇO DE SEU MSN' title='contate-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaN-Jm6m33jS-FynCX2cyo3TcG6tavMwjSo2lXDzNZwhmVVFJnkVd5A8KcEZEvwRyJVGK875hD9VYHEftZEZCF0XJgPIca1avZeJNMnquDR2Ieh_-1PI-K2gMB7z8QahvTeQZJ2n6jIRb/s1600/msn-logo-square-webtreats.png'/></a>

<a href='mailto: ENDEREÇO DE SEU EMAIL' title='contate-me'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth1nbb60Gcn-jURqiNWQicGFyHQyt5zPZn0Hzs-I2e4RNHvEdTnBSrZWLzxMpAIOZ0PlpA-EZPYJcjLqdXlrZidO3wmJb0iePX1jyphvToDB3C4rxuDQUcYppFHe81YwUOL54EqhymZ0K/s1600/mail-square-webtreats.png'/></a>


</div>


Menu social de alfinetes

3 comentários:


Facinho colocar este menu e linkar suas páginas sociais...


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-social{display: inline; margin: 2px 2px 2px 2px;}
.menu-social img{padding: 2px 1px 2px 0; width: 80px;}
</style>
<div class="menu-social">
<a href="ENDEREÇO DO BLOGGER" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPy6jg0fZMcOuEUFZbdhRrI1ZSH53KBTAjCKfkOnaSB4aVn1smhJ7cu9hYQHux-LHo8ZtfUc6ilsYmUpm3aKAMhOlUS10F4_59RMdeVb35J173Uz1rpQLqcmeg8FT3FJnYqgA_czuy8Ot7/s1600/_Blogger.png" /></a>
<a href="ENDEREÇO DO FACEBOOK" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZtbz2Dw4DBVnwiS5r36yu4q7624cHkOabYsTxT9RG8AwdNSufkgvseOA8N6v7TRwMEj0vYD2m7kJ4iTbmQ2qnR1lOoo1qWgc3eR5fhNu0WXYTpfStag9ny4dL6qyPVA3bFHOsUjb6jOZL/s1600/_FaceBook.png" /></a>
<a href="ENDEREÇO DO GOOGLE" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmusT0z8gtDsriOtH29MCxT6SX0vrPIRGgvIBjFYd-4QdfIAuZVAhTN_9hThw7-lB9qmpnj8B7GpCK423Q9vu6gLHK2VQm8u2SZUqpZgkgvwFFlbaoHJ8hQ7Pr8ExujngqjVOX9ietv_e9/s1600/_Google.png" /></a>
<a href="ENDEREÇO DO TWITTER" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUvQVmqZj1NFr2ghl_QTfc0QsHnWmsnBSiMLUxXN-smEFz6JNOntWcpqrJr6BqPeGHIeo8VWpqQ3yBhUKS38rtcO_gMPFcUIRfBP4j3_kdVXNPF4ghQsxoYJIGkaiwJ6ifNCtkor3tRhXx/s1600/_Twitter.png" /></a>
<a href="ENDEREÇO DO YOU TUBE" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKywmcWeCdcFufaFvSMoD5aBYRDO9Yc73jklmGGqEhJUl4FrtObgVRq9y15vNE8E4pPj_gkQwBtwDyG29ujN1F52R-4mN1URLx3W0J3NEAidUuUN6T-uzjpykEyzpY2WhEICPD3dbiI6_6/s1600/_Youtube.png" /></a>
<a href="ENDEREÇO DO FEED" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG99I8s1Y0EkgoxZ9qmNM2pTsQuEN8RHBhbEmv3eeWo5NiC82gjUJjjAm0yBRvtVlr95gJbIEgGwaUudZjDgw3wTWRlud9VbtpOJ8JY-m_lof8UdrUY1S0pRQgZSnIgz6UuE0EgQJq4954/s1600/_RSS.png" /></a>
</div>



2 de mai. de 2012

Menu social jeans

2 comentários:


Mais um menu para linkar suas páginas sociais no Blogger.

Clique em Layout





Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript











<style>
#menu-social-jeans{
margin: 20px 1px 10px 0px;
display: inline;
}
#menu-social-jeans img {
width: 90px;
}
</style>

<div id="menu-social-jeans">
<a href="ENDEREÇO DO BLOGGER" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DQ96xNymwPyC3Q3dB-naQ39sam0kjnonLIIZBGB5LI0dReVaXL4a3yqmocSYRONBpDuKvYhL3hW_tf47Kd-UDKnge8LAWUzrZ-Y1yfusJFIEGm-IeFom4Ra_qtp-ny9wxKjONErhDu7r/s1600/blogger.png" /></a>
<a href="ENDEREÇO DO TWITTER" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6JWPqrBhiZ0AU3ijYKcuRqMKphyphenhyphenRqsK_-upomYvLhf1PP_GPG7gP7-e0Y3PyU-IwnQqiet2ae49Ye1LMNpKjdHwpgrmR6thzbMFlOi27eEg0e0v-A5mSEWxDAyCHUA8JPDFEwnhW0NaCK/s1600/twitter.png" /></a>
<a href="ENDEREÇO DO FACEBOOK" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0EjNGDzTotnlkel_rrlssemZU8scLLlPoBQGXIvqdpiheLf5SiaU3Xu4LlIJZy8TQ5XZ5DY8aZfGhpVEETBa74OgxS4t5Do2MsJjPsaLv6IDtQXo9NCQjv-Yc8Bl1UX7h5zJxso3sq3Ux/s1600/face+book.png" /></a>
<a href="ENDEREÇO DO FLICKER" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfh52Vrj6UT8oiW9IbKHkwwk7jBOUe-gjjlmBFDoLcs8odeSk3ikiMmOiWdxyX4u7W2lawZu4PoxhI50H3JikziMiQD-eHk0kGYXGHdIhAkdnbsuYtEL3F5t0IIfXGaz8GKVWwelBRhX7/s1600/flickr.png" /></a>
<a href="ENDEREÇO DO YOU TUBE" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc4MffrBETvBWV0EN_6t47WRgqgY0NGdDBG5AXHBy9P-aA8Kn5CzxFk3xPJuvl9TohEtLW1Ii4sr9ZA64iOp0MIeRcpHVKVqUa8EKn41duIjS0tgZPw8coHakiTYRaxyGc63PiCuo4JmhC/s1600/youtube.png" /></a>
<a href="ENDEREÇO DO FEED" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iEGf8s4D8VyUpQkm1jvwwgvtIRHYEB-0_ggAMTEQiikNoTvdf8JJSLyQhxFYM0qxVk7AR3nE1mgqIAIWAnu9F1eH_D27qrPcDg0Fsj77iG6bErkZsr1j3vgKAtFGku1Z2SYRm6dEBkeN/s1600/rss.png" /></a>
</div>


Botão para colocar o blog em forma dinâmica

7 comentários:
Vá até o Modelo de seu blog, clique em Editar modelo
  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:  </body>




Substitua então pelo código abaixo:



<script src='http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js' type='text/javascript'/>
<a href='/view' style='display:scroll;position:fixed;bottom:4px;right:4px;' title='Ver este blog em slide'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2JE8bCp32GlbCLwkPQ8kYzW504Fb5duj8AxHEEBrkAP7tEGNi3g40snwtZJurBJh_17jA8dIlrx5BKLhKOHhK-Bi4NeoJpmlxL3uu8Y5IhPUIfhZnZdFX0NFFD_rEUX4nKF7t3MESlB8/s1600/_Blogger.png'/></a>
</body>


Salve !


Se quiser, troque a imagem por uma de sua escolha. Pegue aqui.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube