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(http://2.bp.blogspot.com/-5Qbuz2wG-jQ/T7Ojv52f5ZI/AAAAAAAAITU/BUTE9xZD9Ck/s1600/BVS+beautiful+paper08.jpg) repeat;/*imagem de fundo do blog*/
}

.main {
background: #EFEDE7;
}
.main-outer {background: url(http://4.bp.blogspot.com/-HN-UXlmVySw/T7O3fJfrH4I/AAAAAAAAITg/rtrFOWhleZ8/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(http://2.bp.blogspot.com/-NOJR-tXUhd4/T7OdanOgMsI/AAAAAAAAISU/xadKau0Y4d0/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(http://4.bp.blogspot.com/-eUoXsKH_Ye0/T7Odd_FMLFI/AAAAAAAAISc/WuSlGIOagXw/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(http://2.bp.blogspot.com/-FcUuA71FfEs/T7OeCzeERaI/AAAAAAAAISk/iysOw90udtc/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(http://3.bp.blogspot.com/-fZvMRt9Clro/T7OgWYgOYXI/AAAAAAAAISs/pK5gh7AGC08/s1600/BVS+beautiful+paper10.jpg) repeat;
list-style: disc url(http://1.bp.blogspot.com/--M5JC0oEAiQ/TkKipISy44I/AAAAAAAAAhg/IItFPNxHH1Y/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(http://3.bp.blogspot.com/-fZvMRt9Clro/T7OgWYgOYXI/AAAAAAAAISs/pK5gh7AGC08/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(http://4.bp.blogspot.com/-eUoXsKH_Ye0/T7Odd_FMLFI/AAAAAAAAISc/WuSlGIOagXw/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(http://2.bp.blogspot.com/-NOJR-tXUhd4/T7OdanOgMsI/AAAAAAAAISU/xadKau0Y4d0/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(http://1.bp.blogspot.com/--M5JC0oEAiQ/TkKipISy44I/AAAAAAAAAhg/IItFPNxHH1Y/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(http://2.bp.blogspot.com/-FcUuA71FfEs/T7OeCzeERaI/AAAAAAAAISk/iysOw90udtc/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='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0waJqAGiI/AAAAAAAACrs/-t4Sb285MhE/s1600/blogger-webtreats.pn' width='115px'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' height='120px' src='http://1.bp.blogspot.com/_fN8wBWylUn8/TQ0wZHUZXdI/AAAAAAAACro/RLgpKHq7Lkw/s1600/facebook-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wjRrgPzI/AAAAAAAACr4/WKJQSv-KGpM/s1600/twitter-bird3-webtreats.png' width='135px'/></a>

<a href='ENDEREÇO DO YOUTUBE' title='Assista ao meu canal'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xdduFNLI/AAAAAAAACsA/NefQg7oBrX4/s1600/you-tube1-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FLICKER' title='Minhas imagens'><img alt='' height='120px' src='http://3.bp.blogspot.com/_fN8wBWylUn8/TQ0x1RQpwTI/AAAAAAAACsE/MlkYtMkidas/s1600/flickr-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO DIGG' title='Digg'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wbcME6pI/AAAAAAAACrw/zysdEaMe3bY/s1600/digg-logo-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' height='120px' src='http://2.bp.blogspot.com/_fN8wBWylUn8/TQ0wfjJVFJI/AAAAAAAACr0/DPYmMT0HrTE/s1600/orkut-webtreats.png' width='115px'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' height='120px' src='http://4.bp.blogspot.com/_fN8wBWylUn8/TQ0xa9nLwRI/AAAAAAAACr8/vrWxQ7bFbuM/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://lh6.googleusercontent.com/-6nNjVXCg-ZI/TX_EjRWtERI/AAAAAAAAAJ8/18Uz8_NihWc/s1600/blogger-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FACEBOOK' title='Encontre-me no Facebook'><img alt='' src='https://lh6.googleusercontent.com/-XlD_1OWbtvM/TX_EmNZaCVI/AAAAAAAAAKA/UjW6yf_IFwc/s1600/facebook-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO TWITTER' title='Siga-me'><img alt='' src='https://lh4.googleusercontent.com/-ur4RyoQxS5A/TX_EukUmziI/AAAAAAAAAKI/vz2Y8QRZA54/s1600/twitter-bird2-square-webtreats.png'/></a>

<a href='ENDEREÇO DO ORKUT' title='Encontre-me no Orkut'><img alt='' src='https://lh5.googleusercontent.com/-PJnfFgWnQkY/TX_F3vQHosI/AAAAAAAAAKQ/fEhH0OpeiG0/s1600/orkut-logo-square-webtreats.png'/></a>

<a href='ENDEREÇO DO FEED' title='Assine'><img alt='' src='https://lh6.googleusercontent.com/-bzsfE56WHU8/TX_F5qRoWoI/AAAAAAAAAKU/Te0-qANNQ7k/s1600/rss-cube-webtreats.png'/></a>

<a href='ENDEREÇO DE SEU CANAL NO YOUTUBE' title='Meu canal no YouTube'><img alt='' src='https://lh4.googleusercontent.com/-wzELnDONBkY/TX_EsA0g3XI/AAAAAAAAAKE/k8Y3yHddw10/s1600/you-tube2-s-webtreats.png'/></a>

<a href='mailto: ENDEREÇO DE SEU MSN' title='contate-me'><img alt='' src='https://lh6.googleusercontent.com/-zbYpoa3L-eI/TX_F0STZALI/AAAAAAAAAKM/0CndlbI72R0/s1600/msn-logo-square-webtreats.png'/></a>

<a href='mailto: ENDEREÇO DE SEU EMAIL' title='contate-me'><img alt='' src='https://lh6.googleusercontent.com/-F7STZA84aw0/TX_F_S6hTJI/AAAAAAAAAKY/Dvxhk6EEx-I/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="http://3.bp.blogspot.com/-SMvZATD72ns/T60IGeozwuI/AAAAAAAAIPk/wPOuxo-SBEc/s1600/_Blogger.png" /></a>
<a href="ENDEREÇO DO FACEBOOK" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-p6-SBpy-5Pk/T60IIB9nZBI/AAAAAAAAIPs/bpsNKnrkI3M/s1600/_FaceBook.png" /></a>
<a href="ENDEREÇO DO GOOGLE" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/-KMUHEObM1mY/T60II6rfcFI/AAAAAAAAIP0/xdUjKANt1Bk/s1600/_Google.png" /></a>
<a href="ENDEREÇO DO TWITTER" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-ISVdAZWkllM/T60IJWg7AvI/AAAAAAAAIP8/tfRAuR6fXcQ/s1600/_Twitter.png" /></a>
<a href="ENDEREÇO DO YOU TUBE" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-c-HB1gifqlQ/T60IJ1JIz4I/AAAAAAAAIQE/GXJfkZLb7L8/s1600/_Youtube.png" /></a>
<a href="ENDEREÇO DO FEED" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-Jy5Z3JWnbt8/T60IKri8JuI/AAAAAAAAIQM/QqGwhHEVDSc/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="http://4.bp.blogspot.com/-Lfud0PFBTjw/T6HVsqyRQaI/AAAAAAAAIM8/dhqfaNxg01w/s1600/blogger.png" /></a>
<a href="ENDEREÇO DO TWITTER" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/-eX89OJCQa_4/T6HVxE25UMI/AAAAAAAAINE/EB_LNtWeE_U/s1600/twitter.png" /></a>
<a href="ENDEREÇO DO FACEBOOK" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/--nOEmOhQAko/T6HVxvl85fI/AAAAAAAAINM/Z3CiwGh4Pdg/s1600/face+book.png" /></a>
<a href="ENDEREÇO DO FLICKER" imageanchor="1"><img border="0" src="http://3.bp.blogspot.com/-XxqawIT5fog/T6HVzJXzt7I/AAAAAAAAINU/MoWDuVjQfjM/s1600/flickr.png" /></a>
<a href="ENDEREÇO DO YOU TUBE" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-ZWpqt8J345E/T6HV0JXHY_I/AAAAAAAAINc/pVlaKZR6vig/s1600/youtube.png" /></a>
<a href="ENDEREÇO DO FEED" imageanchor="1"><img border="0" src="http://4.bp.blogspot.com/-S5zIbHwgAqc/T6HV0xEgPjI/AAAAAAAAINk/yAbEcdyUFeo/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='http://3.bp.blogspot.com/-f56sxUK2NPU/T53NEp04n-I/AAAAAAAABP8/jCEMNNBcdec/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