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

Read More

Iconos Flotantes De Facebook y Twitter Con Efecto Hover Para Blog

Te Mostrare como añadir los iconos Sociales de Facebook y Twitter flotantes en tu blog de Blogger. Como señale estos iconos flotan i.e. y permaneceran en una posicion estable despues que la pagina suba completamente . Este widget tiene una animacion de sombra cuando pones el cursor de tu raton sobre el mismo .

Despues de configurar estos iconos se mostraran en el lado Izquierdo de tu Pantalla. Cuando des clic en el boton  seras redirigido alas paginas de Twitter / Facebook deseadas. Puedes verlo trabajando en el enlace de abajo recuerda veras estos botones al lado iquierdo de tu pantalla.


Demostracion

Añadiendo este widget a Blogger

Entra en Blogger>> tu Blog  → Diseño → Anadir un Widget → HTML/JavaScript. Pega el codigo de abajo y guarda el widget.

<style type="text/css">
    a.abt-hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5;} a.abt-hover:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; }
    </style>
    <div style="display: scroll; left: 30px; position: fixed; top: 200px;">
    <a class="abt-hover" href="http://twitter.com/Ciudadblogger" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Follow Us"><img border="0" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Twitter-abt.png" /></a>
    <a class="abt-hover" href="http://www.facebook.com/trucosdeblogger" imageanchor="1" rel="nofollow" style="margin-left: 1em; margin-right: 1em;" target="_blank" title="Like Us"><img border="0" src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/Facebook-abt.png" /></a>
    </div>

Cambia Ciudadblogger y trucosdeblogger Con el ID Tuyo.

Finalmente Guarda la Plantilla. Listo. En los blogs con plantillas bien anchas el lugar donde se pone este widget no puede ser corregido
Chequea Como añadir Menu Desplegable a tu Blog

Read More

Como Añadir Tabla De Contenido en Blogger

 El Super Truco de Añadir un Mapa De Sitio o Tabla De Contenido a tu blog de blogger  aumentara  el envolvimiento de los visitantes  ademas ayudara a que cada pagina de tu blog sea indizada por tus lectores  no importa cuan antigua o nueva este script refrescara tu contenido.

En esta aparecen los enlaces de los distintos articulos que hayas escrito y senalara cual de estos son nuevos ayudando asi al lector a seleccionarel articulo de su preferencia con suma facilidad .
Este script anadira automaticamente cualquier entrada o articulo nuevo al indice.

Como Añadir este  script de Indice de Contenido a blog

1- Vaya a Paginas > Pagina Nueva > Pagina En Blanco
 
3- Pongale un Titulo a la Pagina tal como Indice del Sitio , Mapa del Sitio o Tabla de Contenido etc..
2- Escoge Editar Html y luego pegue el siguiente codigo.

<link href="https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/AcordeonU.css" media="screen" rel="stylesheet" type="text/css"></link>
    <script src="https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/AcordeonIndice.js"></script>
    <script src="http://url_de_tu_blog.blogspot.com/feeds/posts/summary?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    <script type="text/javascript">
    var accToc=true;
    </script>
    <script src="https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/Acordeon.js" type="text/javascript"></script>

4- Cambia  Añade la Url de tu Blog  con la url de tu blog da click publicar y listo

Read More

Como Aplicar Google Web Fonts A Tu Blog De Blogger

Quieres darle ese toque especial a tu blog de blogger? Que tal usar un poco de estilo a la letra de tu articulo?Si no lo has visto antes, Los Fonts de Google Web son una gran alternativa , fuera de lo normal las letras o fonts de la web fonts estan integradas en el disenador de plantilla de blogger y muchas personas lo ignoran pero hoy dare ha conocer como aplicarlas a tu plantilla.

Escoja una Font de Google

Las Google Web Fonts son faciles de instalaren tu plantilla solo toma unos pasos para conseguirlo. De lo que las personas no se dan cuenta es que estas letras de web estan disponibles en tu blog de blogger. El Primer paso es ir al diseno de plantilla usando el boton personalizar plantilla.


Proximo, escoja 'Avanzado' y 'Pagina' de la seccion de disenar. si vas a la seccion de 'Font' y buscas veras que dice Google Web Fonts disponible en blogger . Normalmente, estas letras deben anadirse manualmente a la plantilla pero Google las ha incorporado a blogger ya.:


 
Simplemente busca el font que deseas para tu blog -es facil. este seguro de revisarlas y luego das click al boton de 'Aplicar al Blog' :


Eso es todo ahora tendras unas letras mas extilizadas para tu blog Disfrutalas!

Read More

Paquete Gratis de Deslumbrantes de Iconos de Neon Para Tu Blog

Los Iconos de imagenes de las redes sociales ,simbolos en tipo neon hacen lucir y mejoran la apariencia de tu pagina web o blog de blogger y aqui te traigo un enlace para que los bajes gratis.

                             Da Click para  Bajar estos Iconos en Neon gratis para que los utilices en tu blog.

Read More

Como escribir Caracteres Especiales En Tu Entrada De Blog

Como escribir caracteres Especiales en tu blog

Asi es como posteas caracteres especiales como:  † ‰ ♠ ♣ ♥

1. Logea en tu Dashboard
2. refierase a la to LIST de caracteres reconocidos de HTML
3. Escribe el codigo donde quiera que vaya .
4. clickea Previewpara ver si el caracter esta donde querias.
5. si es asi, save o guarda plantilla.

Por ejemplo, si deseas mostrar <a href="X">A</a>, tienes que escribir lo siguiente en tu editor de post :


y si quieres mostra ♠ ♣ ♥ y tendras que anotar lo siguiente :

Read More