segunda-feira, 30 de maio de 2011

ADICIONANDO WIDGET SOCIAL BOOKMARKING (CSS/JQUERY)

social 
Olá amigos, hoje estarei ensinando a vocês de com adicionar um bonito Widget  Social Bookmarking (CSS/JQuery) Veja a demonstração aqui.
 

Como adicionar esse widget com CSS3

1. Ir para Blogger Dashboard > Design > Editar HTML

2. Marque a checkbox   Expandir modelos Widgets

3. Adicionar o código abaixo imediatamente antes da tag </head>


<style type="text/css">/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } /* www.way2blogging.org */ ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } /* www.way2blogging.org */ ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); } /* www.way2blogging.org */ #way2blogging-cssanime:hover li { opacity:0.2; } /* www.way2blogging.org */ #way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } /* www.way2blogging.org */ #way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } /* www.way2blogging.org */ #way2blogging-cssanime li:hover { opacity:1; } /* www.way2blogging.org */ #way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* www.way2blogging.org *//* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */</style>

4. Pesquisar pela tag <data:post.body/>


E adicione o código abaixo logo após ele!

<b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-cssanime'> <li class='way2blogging-facebook'> <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul></b:if>

5. Salve o modelo e pronto...

Como adicionar esse widget com Jquery

1. Ir para  Blogger Dashboard > Design > Editar HTML
2. Marque checkbox Expandir modelos de widgets

3. Adicione o seguinte código antes da tag </head>


<style type="text/css">/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */ ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } /* www.way2blogging.org */ ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; } ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } /* www.way2blogging.org */ ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-facebook { background-image:url("http://lh6.googleusercontent.com/-YbqE_WaWM_I/TYAygBXhxdI/AAAAAAAAAdk/_X3pWlNFRgs/s1600/way2blogging-facebook.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-twitter { background-image:url("http://lh4.googleusercontent.com/-5ZvxVwDY5H4/TYAyiGsT2WI/AAAAAAAAAd8/Farwy9vHqjU/s1600/way2blogging-twitter.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url("http://lh5.googleusercontent.com/-jg3XFSK3GF0/TYAygs6-mQI/AAAAAAAAAdo/PVRayMMzHE4/s1600/way2blogging-googlebuzz.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url("http://lh6.googleusercontent.com/-mldTY6HrKnY/TYAyh1qKYMI/AAAAAAAAAd4/pkdFcTxmYfA/s1600/way2blogging-stumbleupon.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-digg { background-image:url("http://lh5.googleusercontent.com/-u5KAanTOCIQ/TYAyfn6qvpI/AAAAAAAAAdg/l9F0MjdOox0/s1600/way2blogging-digg.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-delicious { background-image:url("http://lh6.googleusercontent.com/-w1KohkQHuqY/TYAyfct003I/AAAAAAAAAdc/3a-vbAhOlTg/s1600/way2blogging-delicious.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-linkedin { background-image:url("http://lh3.googleusercontent.com/-D1_qyJ6YuAg/TYAyg-wrT_I/AAAAAAAAAds/S_GkMjA5ZJ8/s1600/way2blogging-linkedin.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-reddit { background-image:url("http://lh3.googleusercontent.com/-IcX_Sdky5Ok/TYAyhn1obuI/AAAAAAAAAd0/MCWNQkbr818/s1600/way2blogging-reddit.png"); } /* www.way2blogging.org */ ul.way2blogging-social li.way2blogging-technorati { background-image:url("http://lh6.googleusercontent.com/-qPJl0bdRDhc/TYA0oJaVlvI/AAAAAAAAAeA/PeJpSyxdyBs/s1600/way2blogging-technorati.png"); } /* www.way2blogging.org *//* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript">// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org $(document).ready(function () { $("#way2blogging-jqueryanime li").each(function () { $("a strong", this).css("opacity", "0"); }); $( }); $("#way2blogging-jqueryanime li").hover(function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 0.2); $( $("a strong", this).stop().animate({ opacity:
opacity: 1, top:
top: "-10px" }, 300); },
}, function () { $(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500, 1); $( $("a strong", this).stop().animate({ opacity:
opacity: 0, top:
top: "-1px" }, 300); }); });
}); });// Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org </script>

4. Pesquisar pela tag <data:post.body/>

E adicione o código abaixo logo após essa tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <ul class='way2blogging-social' id='way2blogging-jqueryanime'> <li class='way2blogging-facebook'> <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a> </li> <li class='way2blogging-twitter'> <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a> </li> <li class='way2blogging-googlebuzz'> <a expr:href='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' title='Post on Google Buzz'><strong>Google Buzz</strong></a> </li> <li class='way2blogging-stumbleupon'> <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a> </li> <li class='way2blogging-digg'> <a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a> </li> <li class='way2blogging-delicious'> <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a> </li> <li class='way2blogging-linkedin'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a> </li> <li class='way2blogging-reddit'> <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a> </li> <li class='way2blogging-technorati'> <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a> </li> </ul></b:if>

Salve seu modelo e você já poderá ver em seu blogger.

Marcadores: , , , , ,

1 Comentários:

Às 31 de maio de 2011 18:27 , Blogger Gloko disse...

parabens

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial