domingo, 2 de junio de 2013

Como Añadir Widget Estilizado De Red Social

Leave a Comment
Como Añadir Widget Estilizado De Red Social

 Como todos sabemos que las redes social desempeñan un papel importante en el aumento de tráfico del blog y el ranking en los motores de búsqueda, y esa es la razón por la que debe proporcionar a sus lectores  currículum sociales compartidos, si realmente quiere mover su blog al siguiente nivel .

 Este aparato consta de una barra de búsqueda, RSS Feeds,enlace de suscripción, siga el vínculo del gorjeo, siga el enlace de facebook, herramientas para compartir y efecto especial estacionario, como se puede ver el efecto en el enlace twitter. He hecho este widget de manera fácil para usted para ponerlo en práctica en su blog.

Como Añadir este Widget a Blogger 

Paso 1
  • Entra en tu Blogger
  • Da Click en "Deseno" > "Editar HTML" > Haga Copia de Seguridad De Tu Plantilla.

  • Use ctrl F para encontrar el siguiente codigo ]]></b:skin>y pegue el sigiente codigo arriba/encima de ]]></b:skin>

/*  -------------Ciudadblogger SOCIAL SHARING WIDGET-------------------- */
#search{width:300px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYiPVfa1-JY_A0zKh05O4GRQXXhUZXj9zAqU-x7DWZRQ-J1HETkKMDmJmvx9fgbK69pYQnoVFA3t_GHsWjtG4JEe5ibW3-_j7UtAR7xaBI4Ommwfc0ffKhYZ_tHRUdjRoMxhR3EnGaW0c/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}

.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
  • Edite width:300px, para cambiar el ancho del cuadro de busqueda
  • Edite width:80%, para cambiar el espacio de Caja de buqueda.
  • Da Clic "Guardar Plantilla"
Paso 2
  • Go to "Page Elements" > "Add a Gadget"
  • Choose "HTML/JavaScript" from the list of the gadget that appear.
  • Copy and paste the code below in the box.

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZ0C1xrtvUMIped2yQ_ynrSfD72Pp7AAgGBJtO_MYFF6Rs4zYwVccifvOuPUW6cLCZPpmpq3dPKOVrKqiv-hPNfWNwMiNgjU6YxBC-Xq0i3j02cbU_lsIqEw4N1c_yIRNlAPpXFKSv7w/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbr855DzVYGbRDKovif2HbH99xpPR6qsQNUDetupLLNEBJbvtUrlu848OuISWhBSkl-9T-iDCQ7I85v8c2xVEDhune7E64KbjP0ArCBmnQnIpYRAyCtKhqF_DPhz2qZj7U3wMaVOJSpyo/s1600/social-connect-rss.png" /><a href="http://feedburner.google.com/fb/a/mailverify?uri=ciudadblogger" target="_blank">Subscribe to our RSS Feeds!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/realcombiz'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsHqgs5f3cwXr9xXRypESz9ojf7fAcRH2hejsUbxVrxxO5BrB6m5JSHaMFkxTd7WJqB9MpBWdrjqg9oaPG9blY9xFMFgplhgTXQjFu8L2zgx9zAE0VkQTM0_-bSaodBZR1EuummRrN7kNR/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/ciudadblogger'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/realcombiz'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BrZmq6tdVMUaya2lzi7H81z4JPscTkN69HAhikpuLRYeSJtslVJ1NRS73sXPaJ4-l657mb2Q5pBwa3tnnqx0iaKwy9cLF6o5o831y7T5xoT8JbH_eGPGSQvWoNEhJl9ck3EGjDkC3bT2/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/ciudadblogger'>Follow us on Facebook!</a>
</div>

<div style='clear:both;'/>

<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/AVvXsEhqhrtVJRMfrhA-3PamdxJXDyEu4pWvwcIPkWOf3XnWQgl2IyGtJ0IU_nUH68ZyPYQOBJ-moRj3B7wxCVxN0PRoROCavhqqVrJPwqyUzVJS2DhcP8_o7gDi8TB7MrBiMtIbhBIMs7sTXwc/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguYD_awDz7ashHuQdYjyEq9UVtvFgSzePZ_Oq5U2RsyX8C8YLzxpgFt5xPgpjI4LU5xJ-aLHfn3TsN_yfEcUT4OgZMk5zy2T5IjSxHuqLrBYQhQcPiCKtoY5MWaWzBuDQa8xFZONxVe4s/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAy6QFqDtjgmXaPyTsoCodclxoW2m46qmA5IBRiQd-JBQ1XjxFBXCh3SBATrjAwgwvR16PNH1ZhyNjWj0thyphenhyphenaRFNVbZ_aoB2K4S3ed8w-yZuInqRW0fPv4BNyv6M78gyc4vcK_xVJeoEg/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGMHZQqrPV-FN4bq-PZy_5EMdUalLvaqh_8-qudLHZqzRfrfZfGH3I7itwPp954FtooDjeaYEbeRD5so0iRrCyqSQ36_W4EGlw8q9DZlpJF1IKlytGYc77qSbxCGY_v9k69z-G-VNRlhs/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfM8e4szOWsTcHijhkqByV6_5QRD4xcC92CJkVUjXbrR0Ja5G3EFIb_BY6UiAwOhf3gKvXcAx1x0vKzoJro1xiOAgisS3-d-H7hP3EY4J5VP96a8B3poi9kptA7lh0Gs5-ABBZ2A0w-pM/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPFy28-lz_jLgBLNc1Mamh7gp9cK03VL_FSCvQ_uNFiBNr12GxZ29EMbJpyHosOLXL_vgfwLeDzJLvztmR2KViQRhR1v9QwEAbRuybBX_ghb9FCg2zz0-j62jvRODoA-D4d7RO0e1_UFI/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAFRRqgUtNrgjV9ui006zZcpSkmS_-XvD4A6pYpyd7kpV150mG59vXvka_rIBsH6HiX3vUhDFIADx9vRNYSHf1Ae83XbnfuW3CF8JuMSeEjUuc9KrBjreR09qyWxLwe3Fl7ZNyxId32q0/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>
  • Reemplace http://feedburner.google.com/fb/a/mailverify?uri=ciudadblogger con tu url del RSS Feeds .
  • Reemplace http://twitter.com/ciudadblogger con tu url del profile de twitter
  • Reemplace http://facebook.com/ciudadblogger con tu url del profile de facebook
  • Da Click "Guardar" y Listo
Enhanced by Zemanta
If You Enjoyed This, Take 5 Seconds To Share It

0 comentarios:

Publicar un comentario