Menu de links sociais no blogger

Menu de links sociais no blogger

00:00

Sexy-LovePeço que, para quem já usa o menu e teve problemas com a imagem, ou com o próprio menu, colocar o novo link de imagem (em vermelho logo Abaixo como demostrado no passo 2, poderá clicar para ver onde deverá colar o link:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhtmhaEjJS1xB7HtQjiQ74V9yfRVEDp4-osaEtBky-M1atW7jWzb6kIjp5reTceUalYZpP8pcCpxA01nFAqSWd6lwNQavRG3OxYUSN6E1_DPWpmNUGu4D_Rnjd2MUtSYvIAvVcoEruA/s1600/sexysprite.PNG

Clique aqui para ser direcionado para o local de inserção do código!

Acho que os que me acompanham no blog viram uma implementação no layout anterior, que continha alguns links de redes sociais...

Quando havia feito as implementações, fiz com o efeito onMouseOver de tecnologia CSS, onde alguns navegadores (morte ao IE), não aceitavam tais formatações, Estava eu visitando um site muito querido por mim, onde o dono auxilia os blogueiros com muitos templates de qualidade superior, em scripts e design, estou falando do bietemplates. Baixei e instalei o template que uso agora pelas configurações que ele trazia, inclusive o menu social, que trato de trazer à vocês neste tutorial, mas já vou perguntando:
Você sabe ler inglês?

Se sim leia o artigo original/fonte, no qual especifica todos os procedimentos que aqui estão.

SexyBookmarks v2 For Blogger | Css Reflex - Design Blog | Web Design | Inspiration and Resources for Designers - Original

Via Ipietoon - Mod 1

Vamos lá, caso queira ficar por aqui mesmo...

Entre em Painel > Layout > Editar HTML e habilite a opção "Expandir Modelos de Widgets"

Localize a tag de estilos (ou coloque em um arquivo externo e referencie-o no head)

<style>

e após esta Tag cole as seguintes poucas linhas de código:

div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
padding-top:20px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float: left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPNhtmhaEjJS1xB7HtQjiQ74V9yfRVEDp4-osaEtBky-M1atW7jWzb6kIjp5reTceUalYZpP8pcCpxA01nFAqSWd6lwNQavRG3OxYUSN6E1_DPWpmNUGu4D_Rnjd2MUtSYvIAvVcoEruA/s1600/sexysprite.PNG') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position: left top !important;
}
.sexy-delicious:hover {
background-position: left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

Width = Largura de 540px alterável

Obs.: Código alterado, por motivo de: imagem do servidor não estava mais disponível.

Agora localize o seguinte código:

<data: post.body/>

e cole antes:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/indiceblogger' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

indiceblogger = Seu ID no feedburner

Visualize seu modelo, caso não tenha funcionado veja abaixo as notas, caso tenha salve.

Notas:
Caso não funcione corretamente implemente o 3° passo depois de:
<div class='post-footer-line post-footer-line-1'>
Caso seu template possui o mecanismo de resumo de posts automático, tal como este, implemente o 3° passo após:
<b:if cond='data:blog.pageType == &quot;item&quot;'><data: post.body/>
o endereço da imagem pode ser trocado com o atriburo de URL alterando o que está em vermelho:
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
Quer mais? assine o rss feed ou contribua com suas idéias no formulário de comentário abaixo.

Passe adiante!

» Daniel Ikeda «

Share this

More

Related Posts


Ordenar: DescAscby @dfikeda

7 comentários

comentários
DEVANIR13
26/10/2011, 12:20 delete

simplismente espetacular...

Reply
avatar
Vitória de Oliveira
05/01/2010, 12:45 delete

fiz tudo certo mais, não apareceu nada.

Reply
avatar
» Daniel Ikeda «
13/11/2009, 18:37 delete

Remedios Caseiros Obrigado pela observação, foi corrigido os links do menu do blog e também da postagem, para quem já o utiliza favor alterar como descrito na postagem. Verifiquei e o site desenvolvedor não reparou o erro até o momento da re-publicação deste.

Reply
avatar
Remedios Caseiros
10/11/2009, 11:48 delete

A Imagem com os logos ta com um erro

Reply
avatar
» Daniel Ikeda «
10/09/2009, 14:22 delete

ADMBANZAI o estilo em CSS que é para ser inserido dentro da TAG de <style> pode ser inserido dentro de qualquer uma das duas que citou desde que as tenha dentro da tag <head>, quanto ao <data: post.body/> pode ser alterado o local de cópia, ou seja no meu template ele esta colado abaixo da linha que termina em:

"post-footer-line-3'/>"

ou

após o término da div que a contém.


Caso não encontre solução, mande o código fonte completo (arquivo XML, Layout > Editar HTML > em "Baixar modelo completo") de seu blog para analisar-mos.

Reply
avatar
Renato
10/09/2009, 11:42 delete

não funcionou porque temos 2 styles e 2 post.body.

poderia colocar uma foto para saber bem ao certo o lugar,eu agradeceria

Reply
avatar

Todos os comentários serão moderados, aguarde a publicação.

Outros assuntos ou solicitações pessoais devem ser feitas por meio do formulário de contato.

:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
:-?
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
$-)
(y)
(f)
x-)
(k)
(h)
cheer
Assinar: Postar comentários (Atom)