Postagens Recentes

18 de jun de 2012

Menu social com efeito hover

6 comentários:
DEMO



Menu social com efeito hover para colocar ao final dos posts, com vários botões de várias páginas de indexação e divulgação.



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>  




Acima dele, cole o código abaixo:



/*Sociais--------------------------------------------------------------------*/
#templeacesso-sociais {  clear: both;padding: 2px 0px 20px 0;}
#templeacesso-sociais ul {list-style: none;clear: none;padding: 0px 0px ;margin: 45px 0;}
#templeacesso-sociais ul li {display: inline;background:none;margin:0;padding:0;}
#templeacesso-sociais ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#templeacesso-sociais ul li a.twitter    {background-position: -0px -0px;   }
#templeacesso-sociais ul li a.twitter:hover {background-position: -0px -33px;  }
#templeacesso-sociais ul li a.facebook   {background-position: -32px -0px;  }
#templeacesso-sociais ul li a.facebook:hover {background-position: -32px -33px; }
#templeacesso-sociais ul li a.stumbleupon  {background-position: -64px -0px;  }
#templeacesso-sociais ul li a.stumbleupon:hover{background-position: -64px -33px; }
#templeacesso-sociais ul li a.digg    {background-position: -192px -0px; }
#templeacesso-sociais ul li a.digg:hover  {background-position: -192px -33px;}
#templeacesso-sociais ul li a.reddit   {background-position: -160px -0px; }
#templeacesso-sociais ul li a.reddit:hover  {background-position: -160px -33px;}
#templeacesso-sociais ul li a.google   {background-position: -128px -0px; }
#templeacesso-sociais ul li a.google:hover  {background-position: -128px -33px;}
#templeacesso-sociais ul li a.del-icio-us  {background-position: -480px -0px; }
#templeacesso-sociais ul li a.del-icio-us:hover{background-position: -480px -33px;}
#templeacesso-sociais ul li a.mixx    {background-position: -96px -0px;  }
#templeacesso-sociais ul li a.mixx:hover  {background-position: -96px -33px; }
#templeacesso-sociais ul li a.technorati  {background-position: -416px -0px; }
#templeacesso-sociais ul li a.technorati:hover {background-position: -416px -33px;}
#templeacesso-sociais ul li a.linkin   {background-position: -256px -0px; }
#templeacesso-sociais ul li a.linkin:hover  {background-position: -256px -33px;}
#templeacesso-sociais ul li a.yahoobuzz  {background-position: -448px -0px; }
#templeacesso-sociais ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#templeacesso-sociais ul li a.myspace   {background-position: -512px -0px; }
#templeacesso-sociais ul li a.myspace:hover {background-position: -512px -33px;}
#templeacesso-sociais ul li a.more    {background-position: -576px -0px; }
#templeacesso-sociais ul li a.more:hover  {background-position: -576px -33px;}


Salve !


Clique em "Expandir modelos de widgets"

Procure por:

 <div class='post-footer-line post-footer-line-2'>

Cole então o próximo código depois dele. Salve e já está.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='templeacesso-sociais'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Divulgue este post em twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post em Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Salve este post no Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Divulgue este post no Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Favorite no Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Divulgue este post em Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Divulgue este post no Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if><div style='clear:both;'/>


16 de jun de 2012

Combo: modificar a header e o menu de páginas do novo Blogger

8 comentários:
DEMO

 "Vambora" modificar a header de seu blog ? Colocar um menu social, buscador, feed de comentários e posts e costumizar o menu de páginas do Blogger ?

Para dar estilo à header do Blogger, é necessário antes, dividir a header do Blogger, colocando ali um novo widget. Para isso, siga primeiro essa dica. Depois volte aqui e siga o resto da tutorial...









Ao abrir, cole então o próximo código fazendo as modificações necessárias para linkar suas páginas sociais.


<style>
#navbar{display:none;}
body{ background:#808080}
.content-inner {background: transparent;}
.body-fauxcolumn-outer .cap-top { background: url(http://2.bp.blogspot.com/-1gNLt-fo8O0/T9rNpAgPRRI/AAAAAAAAIYM/mCch8oaOHHE/s1600/fundo1.png) repeat-x;}
.main-outer{background: #fff;margin: 8px auto;}
.Header h1 {
  font-size: 40px;
  padding: 40px 2px 20px 2px;
  color: #000;
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
</style>
<style>
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 margin: 33px 20px 0 20px;
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  /*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
  background: #808080;
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 25px 16px 25px 16px;
  font: $(tabs.font);
  color: #000;
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

</style>

<style>
#menu-feed{text-align: right;margin: -5px auto;}
#menu-feed a{color: #000;}
</style>
<div id="menu-feed">
<span style="color: white; font-size: x-small;"><b><img border="0" src="http://4.bp.blogspot.com/-M5MySvzxqY8/TkNsWeFoMBI/AAAAAAAAF38/bZXu7xQ4U0A/s1600/feed+%25281%2529.png" /> <a href="http://feeds.feedburner.com/TemplatesEAcessrios">Feed Posts</a>  <img border="0" src="http://2.bp.blogspot.com/-NMh7BEGT644/TkNsZuTEsvI/AAAAAAAAF4A/dfbp32IXTBo/s1600/feed_ballon+%25281%2529.png" /> <a href="http://templateseacessorios.blogspot.com/feeds/8129006636274137536/comments/default">Feed Comentários</a></b></span></div>


<style type="text/css">
#box-procura{
background:url(http://1.bp.blogspot.com/-m9qvY7QQLSM/T9q9L_v157I/AAAAAAAAIXI/wSgEAFvVcxI/s1600/box+procura.png) no-repeat scroll right transparent; width:307px; height:50px;display:block; float: right; margin: 50px 2px 0 0;}
form#box-procura2{display: block;padding: 12px;margin:0;}
form#box-procura2 #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#box-procura2 #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="box-procura">
<form id="box-procura2" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style>
#menu-social {
  margin: 40px 1px 0 10px;
  float: right;
}
#menu-social ul {
  margin: 0;
  padding: 0;
  margin-top:10px;
}
#menu-social ul li {
  border-right: 1px dashed #808080;
  float: left;
  padding: 5px 2px 0 3px;
  margin-left: 2px;
  list-style-type: none;
}
#menu-social ul li a {
  padding: 4px 0 0 18px;
  height: 22px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}
</style>

<div id="menu-social">

<a href="ENDEREÇO DA PÁGINA INICIAL DE SEU BLOG" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://2.bp.blogspot.com/-D-88XvaRojQ/T9rD-nmauAI/AAAAAAAAIX0/HroSIoCvg-w/s1600/social_balloon-21.png" /></a>
<a href="ENDEREÇO DE SEU FACEBOOK" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://3.bp.blogspot.com/-bqpPE55Q6_8/T9rD9oo83rI/AAAAAAAAIXc/IC_SBOQZPFk/s1600/social_balloon-14.png" /></a>
<a href="ENDEREÇO DE SEU TWITTER" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://3.bp.blogspot.com/-awH5p5H2NKs/T9rD9SmIpmI/AAAAAAAAIXU/CIuL6zrw8rE/s1600/social_balloon-05.png" /></a>
<a href="ENDEREÇO DE SEU GOOGLE" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://1.bp.blogspot.com/-wUSnZESP5L8/T9rD-TVVI-I/AAAAAAAAIXs/a-yaDke5Nh0/s1600/social_balloon-19.png" /></a>
<a href="ENDEREÇO DE SEU FEED" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://4.bp.blogspot.com/-6NKR5fUOWa0/T9rD-CLYVjI/AAAAAAAAIXk/5O-CYh0wb04/s1600/social_balloon-15.png" /></a>
</div>


15 de jun de 2012

Dando estilo aos marcadores com efeito hover

8 comentários:


DEMO


Ontem, no Facebook, recebi do Dudu Srfstinha a dica dos marcadores com efeito hover que está instalado em seu blog, o TPSO. Dei umas modificadinhas e trago a dica para vocês e os meus agradecimentos ao Dudu.

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.


<style>
/* Marcador efeito hover ----------------------------------------------- */
#Label1 {
color: #000;
}

#Label1 ul li {
list-style-type:none;
}
#Label1 li a:link{
border-left: 12px #ccc solid;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #808080;
padding: 8px 2px 8px 17px;
display: block;
color: #fff;
border: 1px ridge #5E5E5E;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
#Label1 ul li a:hover{
color: #fff;
background: #eee;text-shadow: 0 0 0.3em #cc0000, 0 0 0.3em #cc0000, 0 0 0.3em #cc0000;
text-align: left;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
border-left: 12px #cc0000 solid;
border-radius:25px;
-moz-border-radius:35px;
-webkit-border-radius:25px;
}
#Label1  li span{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #ccc;
padding: 8px 2px 8px 17px;
display: block;
color: #000;
border: 1px ridge #5E5E5E;
border-radius:25px;
border-left: 12px #cc0000 solid;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
 #Label1  li a:visited {
color: #fff;
display: block;
background: #cc0000;
border: 1px ridge #5E5E5E;
border-left: 12px #808080 solid;
}
</style>

Se você não conseguiu, faça o seguint: exclua o widget de marcadores de seu blog e depois reinstale o widget.

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