publicidade
publicidade
publicidade
publicidade
publicidade
publicidade
publicidade

Gadget Para Redes Socias Com caixa de Busca



O Blogger Templates & Tricks nos oferece um gadget muito interessante que inclui uma caixa de busca acoplada, além dos botões de subscrição do FeedBurner, inscrições via email, botões de redes sociais ( Digg, Twitter , Facebook, Delicious ) para partilhar os seus artigos, entre as redes sociais. Os botões de redes sociais são alimentados por www.addthis.com.
Você não precisa mudar nada no código da caixa de pesquisa .Para adicionar esse widget na barra lateral do Blogger , sem fazer qualquer modificação , a largura da barra lateral deve ter pelo menos 305 px de largura. Você pode adicionar este gadget de pesquisa em seu blog seu blog Blogger em poucos minutos, é muito fácil de configurar. Vejamos como:




Faça login, clique em "Design" depois em "Editar HTML"
Copie o código abaixo e cole ANTES da tag </head>

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Salve o template e volte a sua página Design, clique em adicionar um gadget, escolha a opção "HTML/Javascript ", copie o código abaixo e cole dentro do box do gadget. Salve e pronto.


<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4AXPY7yyq0VWBfjwhLMhDQgKi_vHaOwzN8bU6H9hyyU8L7jzqJu8IbDZoLtBplQhCeflL4vukKF9ym-HgIbVvrsicfewOf4ut9RYh9DFng_msQeJTuRG-6P_sYhqk-0PFuKMx6zkkcMp/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9_yo_IXiAvPnrF-VBX7iLzW0K0I9ux4IGtvQ_g79_ZmIB5s40ernBXUsERSwuGm9cTNgMyWQOxhZsco1KOdBT5EEjQOCO2LM6cvoM3Wbd_JMZNqP90VAy6Tcunn9hstXtNw_TD-obOQk/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zSbwYIoAgRk0_l7bCpyMjE7XHXaLnsSqVWZMpEhRyliuzRjuMxaH879N9OCdLcOBle_QeHLFDoZB9Ye27Osg6-IJ63aV5R86KIwb4aI5justccwa-f_M197WTxl10umnyr5TnD-LElrC/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8XykvcfcUm1oEsYRYEiCJHgiFDYI-gJx0SQ6u2fMaZQjsqaBR2hFpF-nXFa656YwM9w3VpiStRNBiD8x8oiP3PjEWUY6ov-VJR-iubKw99y0absgcjIQFSsr2prYv3o7xPcfuBqvn2wi/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFnkYnlo2V5CVleajFV927xR4ftC2FsMBqXPVqJQASaX6CUew1g3OSAuLtdCLe5uVD5TA8vrWjmu7qOg-tQY0o5R_jXWaEVJJJBz4_jypeRKmHilnm8e24lrqk3hSk75Z-Mtg07o6bOS0/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fZbJXjAkdfUovoioF8YmdVznz1gexfTeC7_Lqft_z5kymEvBXYYLxO9aug0Vxz91n32hq8H4ffD99RbC-AQSk2IqCtseU04Vdf8Hac-SlAHaM9N3v7wg-UrSKqvTSWrk_gRbZJed8yc/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYp42pzvtQkbOLq0usShrWtlAv2fABzSTmOM0ceXUXTCmdl2VW8T6XwA4DHHf_DJrhUgMjrU87CAjnb-jdmKhDMwxg3Jt8XTC1VmAskdPm8LuvDCOWUIoS9avycv92v7uoaAanJxdAKuQ/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pPU7WohNmh8BzMPEA55NGwmc75OBROd8O-L3MfB_r1idy2x4nZmlGQMD6FFtXzs4O2v9GYi2B9FpMLXu2S1vcDd81i_5uiAAC_s-mcIMlsU8MKG79QkEJTPch1gZK1CfzTeGsgY2sKI/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5izG1ed5V7whmyyl-j9I4Fs_UXR8NcwZONDDO3duo7cVDnzYEVaR-LUv64oMs9_tX7vB2TLpD3gOzAZzn7sbRY0cVE7jaaT2xV2Z0kA07z6TyHw12shD-aOKxD936kFjBWOjr79Ac3N4/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDiTPMsZnUnEXpKEn6Y4PUZm2GPZQ4-84yhma8LS9eP-16DFQmxpAgBftXK1Q2XXxLmHuqdGt4cnLLzJVL0fDpqlAan620GKI0nEe26KV3fHN6GZXuN0eRQmAjTmXOPLeFBXesOUlAMvs/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf4EK5SamtORdGAdjXFXXgsmBYLM-ovQomaF63D2BqhDZm4eXpqFiCAEMaNa_lTwG33YSG77NDwS8ceazZBxglOiK7W27tEpo8OKSgJoSk4PfEheoCYucksXvVtTv1ZCII_c3dQQRspGU/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>



Configure as partes grifadas:

 FEEDBURNER-ID ► Seu Feedburner ID.(4 vezes).
TWITTER-USERNAME ►Seu Twitter username.
FACEBOOK-USERNAME ►Seu Facebook username.

Caso você tenha algum conhecimento de html e CSS, poderá fazer algumas mudançs para adequar melhor ao seu layout.

0 comentários:

Postar um comentário