Design Fanmytsu

17:37

29 de janeiro de 2013

Postado por: Hudson

Mais um tutorial a pedidos. Faça seu pedido de tutorial também, clique aqui.

Download

Esse botão serve para links de download, ou pra qualquer outro tipo de link, depende da sua imaginação. Vamos começar.

Antes de prosseguir, é recomendável que faça um backup completo do seu template.

Cole o CSS que eu preparei acima da tag:

]]></b:skin>

Código CSS:

download a{
width:200px;
background: #003366;
overflow:auto;  /* barra de rolagem*/
border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-khtml-border-radius: 6px 6px 6px 6px;
text-shadow: #000 1px 1px 1px;
color: #fff;
font-size:10px; 
display:block;
white-space:pre;
text-align:center;
word-wrap:break-word;
padding:2px 5px 4px 5px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px#000;
box-shadow: 0 0 5px #000;

}

download a:hover{
background: #333;
color: #fff;
}

Com o CSS instalado, agora é só colocar o código abaixo na postagem que quiser:

<center><download><a href="LINK-DO-DOWNLOAD">Download</a></download></center>

Pronto. Você pode editar o código CSS ao seu estilo, use sua criatividade!

Mostrar widget somente na página inicial do Blogger

17:03

Postado por: Hudson

[1] Comente!

A pedidos, ensinarei como ocultar um widget nas demais páginas do blogger, técnica muito usada com chats, sliders, e outros objetos que possam dificultar a navegação do leitor.

É recomendável que você faça um backup completo do template antes de prosseguir.

Bom, primeiro em Layout, crie o seu Gadget que será ocultado, depois vá até Modelo, clique em Editar HTML e marque a opção Expandir modelos de widgets.

Procure pelo nome do seu gadget, se não houver nome, tente localiza-lo pela posição em que está. se estiver com dificuldade, crie um título para ele, depois retire.

A condicional deverá ser colada após a tag:

<b:includable id='main'>

Código da condicional:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Agora nós devemos fechar a tag da condicional que adicionamos, cole:

></b:if>

Antes de:

</b:includable>

Pronto, agora é só aplicar aos widgets que quiser.

Adicionar botões de compartilhamento nas postagens

17:41

28 de janeiro de 2013

Postado por: Hudson

[0] Comente!

Bom, este tutorial é simples, aqui ensinarei a você como adicionar os botões de compartilhamento, em determinado local das postagens do Blogger.

É recomendável que você faça um backup completo do seu template antes de prosseguir.

Código dos botões:


<div style='margin-top: -18px; margin-left: 20px;'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if></div>

Se você quer adicionar no rodapé, cole o código abaixo da tag:

<div class='post-footer'>

Se você quer adicionar na parte de cima dos posts (cabeçalho), cole o código abaixo da tag:

<div class='post-header-line-1'>

Use margin-top e margin-left para definir a posição dos botões.

Espero ter sido útil, visite sempre a Design Fanmytsu.

Ativar botões de compartilhamento nas postagens do Blogger

17:38

Postado por: Hudson

[0] Comente!

Bom, este tutorial é simples, aqui ensinarei a você como adicionar os botões de compartilhamento, em determinado local das postagens do Blogger.

É recomendável que você faça um backup completo do seu template antes de prosseguir.

Código dos botões:


<div style='margin-top: -18px; margin-left: 20px;'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
</b:if></div>

Menu de topo com imagem deslizante

15:20

Postado por: Hudson

[0] Comente!

Nesse tutorial, você vai aprender a adicionar um menu em JQuery que ficará no topo do blog.

Demonstração

É recomendável que você faça um backup completo de seu template antes de prosseguir.

Vamos começar adicionando o script. Procure por:

</head>

Adicione o código a seguir:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);
    });
 
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);
    },
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);
    }
);
});
</script>

Agora vamos ao CSS, procure pela tag:

]]></b:skin>

Acime dela adicione o código:

/* Aqui definimos as propriedades CSS para a lista do menu */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 10px;
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9; /*---cor de fundo---*/
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;  /*---cor da borda---*/
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
}
ul#navigation li a:hover{
background-color:#CAE3F2;
opacity: 1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8; /*---cor do link---*/
    text-shadow: 0 -1px 1px #fff;      
}

/* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/
ul#navigation .home a{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAviDoX79NWL2PL6yr9JUlcMTD9tU7yOgdZUy_SW4duLHxiqKFE5AX3crK-p6FpFf0-e1yMAfVFW0fRq0hvGdRtKIS0nvLQyJysYZkksUx-spJfv0U4cy0U6qmSua3EMtvcbUzj_O9Xo/s1600/home+%25281%2529.png);
}
ul#navigation .sobre a      {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMi8h-aVIqwIebkPRlhR3qlhTQt2zZR1rO_-dGcotDraQctLSXA4QLbW8V2qPu7Q7Rt43_N7O8X1ZKKy-nG-np392DXjvZ6Xg_IzU-liD1hOMULPX1n2UO0bevnln_EtjXf4zr6z-HzY/s1600/id_card+%25281%2529.png);
}
ul#navigation .contato a    {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Jt6DExRtjlY4yRT6dVFJ37AqBR503jl2LZinsb7xZ2vGMFDYwZmo1DGODCzLmYE5msh40qSw7sbPG5_iT23jXM5YrQ_1c_2-6RwXvAxsaAUn8kNHrcfX-Hh3gJrpq9ot9trMi5QXpFo/s1600/mail+%25281%2529.png);
}
ul#navigation .feedrss a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEich9vWCbRCC_YQY2Ciw56gzra9KMRdRg7gqu6YN2OiqNCsicvXn95vWwRalR_zj8e0IoMX_nCnCEyohL8zykZeap8YArnyO3dNTIKpjPzxd6g3E89kem9FLzpWH1yZEl_dUFzUaWZP2ys/s1600/rss+%25281%2529.png);
}
ul#navigation .imagens a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdNMhH07zdFVCYE_A7_Xhb6Wq7UsljZQfSZFaEll4qVk9f-eqjpwuUPVhpaM9ToGuU0cDSTLVBPiLzyqqj9zc8pY73Tggk9WvAmY5Y4r7ZpZ8kpwutAy_idBOLnCD7z5zfKtRpD-klA7A/s1600/images.png);
}

Pronto, agora por último, a estrutura HTML, que deverá ficar acima da tag:

<header> ou <div id='header-wrapper'>

O código a ser adicionado é:

<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Home</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Sobre</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Contato</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Feed</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Imagens</span></a></li>
</ul>

Pronto, seu menu está adicionado, agora é só editar ao seu gosto.

Tutorial adaptado de: Mundo Blogger

Principal

Tutoriais

Downloads

Parceiros