Peç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:
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.
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:
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='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + 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='" mailto:?subject=" + data:post.url + "&title=" + 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.
<div class='post-footer-line post-footer-line-1'>
<b:if cond='data:blog.pageType == "item"'><data: post.body/>
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
7 comentários
comentáriosnão funcionou porque temos 2 styles e 2 post.body.
Replypoderia colocar uma foto para saber bem ao certo o lugar,eu agradeceria
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:
Reply"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.
A Imagem com os logos ta com um erro
ReplyRemedios 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.
Replyfiz tudo certo mais, não apareceu nada.
Replymuito bom mesmo
Replysimplismente espetacular...
ReplyTodos 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.