- Desde
- 25 Nov 2011
- Mensajes
- 219
A veces cuando tenemos un blog en blogger, las secciones debajos de las entradas llaman demasiado la atencion y no dejan espacio para que los navegantes puedan ver la caja de comentarios, restandole atencion y por lo tanto comentarios.
Por otra parte, los botones sociales de blogger debajo de las entradas son muy pequeños, y tambien muchos usuarios lo pasan por alto.
Con este par de codigos lo que se busca es facil: atraer la atencion del visitante para que comparta y deje comentarios.
Aqui una imagen de ejemplo:
En primer lugar dejar claro que el codigo de botones sociales esta proporcionado por The Largest Sharing and Social Data Platform. We Provide Twitter and Facebook Buttons, Custom Audience Targeting, and more. | AddThis, modificado por Espectaculares Marcadores Sociales para tu blog | Mil Trucos Blogger para incluir imagenes personalizadas. Como blogger español, es bastante importante la presencia de Tuenti en esos marcadores, asi que he "diseñado" un boton parecido a los de miltrucos y agregado el codigo para poder compartir en esa red social.
El segundo codigo no es mas que un enlace que conduce al formulario de comentarios, con una imagen para que quede mejor. Dejar claro que de momento solo funciona con los de blogger, pero si alguien me pasa el codigo de disqus, se podria añadir al mismo un name para se pueda hacer lo mismo.
Una vez explicado, comencemos con los codigos.
En este, se añadira debajo de la entrada unos botones grandes y cuadrados (aunque como antes he explicado, se puede cambiar la imagen) que atraeran la atencion. Hay que mencionar que hay desactivar los botones de blogger sociales, para eso vamos a Diseño, y en el cuadrado "Entradas del blog", hacemos click en "Editar", y desmarcamos la opcion "Mostrar botones para compartir" y "Mostrar enlaces para el envío de entradas".
Buscamos este codigo en nuestra plantilla:
Y debajo, pegamos este otro:
En este codigo, los botones que aparecen son Facebook, Google+, Twitter, Stumbleupon, Evernote, Blogger, Enviar por Email, Enviar por Email Yahoo, y el boton "Mas" de AddThis.
Para dejar a nuestro gusto, podemos eliminar botones y cambiar imagenes. Para eliminar un boton, por ejemplo evernote, es facil, solo tenemos que eliminar su parte de codigo:
Y para cambiar la imagen igual, solo tendiramos que cambiar la url "src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png" por nuestra imagen.
Para añadir el codigo de tuenti con el boton cuadrado, solo tenemos que añadir este codigo debajo de cualquiera ya puesto:
Para ver una prueba de como funciona, visita el blog de prueba.
Tambien podemos ver que hay un texto que aparece en grande "Comparte este Post", cosecha de MilTrucos, que podemos modificar para atraer al visitante con la frase que queramos.
Yo personalmente, para no relantizar la pagina con carga de imagenes y no bombardear al visitantes con 30 opciones, he dejado solo 6 opciones, FaceBook, Twitter, Google+, Tuenti, Email y "Mas". Todo esto esta visible en el blog de prueba.
Y ahora procedemos con el codigo que conduce a los comentarios.
Este es muy simple, pues solo es un enlace.
Justo debajo del codigo de MilTrucos, ponemos esto:
Al pulsarlo, nos lleva directamente al formulario de comentarios.
Lo malo es que este boton aparece tambien en las paginas, si hay algun experto que pudiera explicarme como añadir un condicional para que solo se muestre en los post, perfecto.
El proceso de modificacion es el mismo, cambiar imagen y texto.
Todo esto lo vamoso probando para dejarlo lo mas atractivo posible, y asi poder atraer la atencion a que compartan y comenten nuestro contenido.
PD:
Si alguien no encuentra el codigo en su plantilla o no sabe como ponerlo o modificarlo, que comente o envie un MP, se lo explicare especial para su plantilla en privado.
Por otra parte, los botones sociales de blogger debajo de las entradas son muy pequeños, y tambien muchos usuarios lo pasan por alto.
Con este par de codigos lo que se busca es facil: atraer la atencion del visitante para que comparta y deje comentarios.
Aqui una imagen de ejemplo:
En primer lugar dejar claro que el codigo de botones sociales esta proporcionado por The Largest Sharing and Social Data Platform. We Provide Twitter and Facebook Buttons, Custom Audience Targeting, and more. | AddThis, modificado por Espectaculares Marcadores Sociales para tu blog | Mil Trucos Blogger para incluir imagenes personalizadas. Como blogger español, es bastante importante la presencia de Tuenti en esos marcadores, asi que he "diseñado" un boton parecido a los de miltrucos y agregado el codigo para poder compartir en esa red social.
El segundo codigo no es mas que un enlace que conduce al formulario de comentarios, con una imagen para que quede mejor. Dejar claro que de momento solo funciona con los de blogger, pero si alguien me pasa el codigo de disqus, se podria añadir al mismo un name para se pueda hacer lo mismo.
Una vez explicado, comencemos con los codigos.
En este, se añadira debajo de la entrada unos botones grandes y cuadrados (aunque como antes he explicado, se puede cambiar la imagen) que atraeran la atencion. Hay que mencionar que hay desactivar los botones de blogger sociales, para eso vamos a Diseño, y en el cuadrado "Entradas del blog", hacemos click en "Editar", y desmarcamos la opcion "Mostrar botones para compartir" y "Mostrar enlaces para el envío de entradas".
Buscamos este codigo en nuestra plantilla:
HTML:
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>Y debajo, pegamos este otro:
HTML:
<style type='text/css'>
.custom_images ul {display:inline; list-style:none}
.custom_images ul li {float:left; margin-right:1px}
</style>
<div class='addthis_toolbox'>
<div style='margin: 50px 0px 10px; font-size: 30px;'>Compartir este Post</div>
<div class='custom_images'>
<span class='fade'><ul>
<li><a class='addthis_button_facebook'><img alt='Share to Facebook' border='0' height='57' src='https://lh3.googleusercontent.com/-ErgrNe7VaTM/T4ywntBsxGI/AAAAAAAAJHA/79YM4bBqnf4/s57/Facebook%2520alt%25202.png' width='57'/></a></li>
<li><a class='addthis_button_twitter'><img alt='Share to Twitter' border='0' height='57' src='https://lh5.googleusercontent.com/-jZW7xfQfo5c/T4ywo5r5yBI/AAAAAAAAJHM/4ZtK0i8IXyA/s57/Twitter%2520alt%25204.png' width='57'/></a></li>
<li><a class='addthis_button_google_plusone_share'><img alt='Share to Google+' border='0' height='57' src='https://lh5.googleusercontent.com/-l682ZOmTPl8/T4ywn1Z13TI/AAAAAAAAJG8/ncHs61veQOo/s57/Google%252B%2520alt%25202.png' width='57'/></a></li>
<li><a class='addthis_button_stumbleupon'><img alt='Share to Stumble Upon' border='0' height='57' src='https://lh4.googleusercontent.com/-OBxyCfQlXV4/T4ywonzZx6I/AAAAAAAAJHI/UBRTcapYwCw/s57/StumbleUpon%2520alt.png' width='57'/></a></li>
<li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>
<li><a class='addthis_button_blogger'><img alt='Share to Blogger' border='0' height='57' src='https://lh6.googleusercontent.com/-DkPVHUpO5Mc/T4y73abYX4I/AAAAAAAAJH0/1xfolEU-Y_k/s57/Google%2520Blogger.png' width='57'/></a></li>
<li><a class='addthis_button_email'><img alt='Share to Email' border='0' height='57' src='https://lh4.googleusercontent.com/-CxGRg2HeAXc/T4y73bmCVAI/AAAAAAAAJHw/gaA6Y7GwQZU/s57/Mail%2520alt.png' width='57'/></a></li>
<li><a class='addthis_button_yahoomail'><img alt='Share to Yahoo Messenger' border='0' height='57' src='https://lh6.googleusercontent.com/-z9ucAlSwZ1o/T4y-uaIEpNI/AAAAAAAAJIc/YL6sPfqvFkk/s57/Yahoo%2521%2520alt%25201.png' width='57'/></a></li>
<li><a class='addthis_button_more'><img alt='More...' border='0' height='57' src='https://lh3.googleusercontent.com/-R_-TACJvUQY/T4y73dnBoTI/AAAAAAAAJH4/KWAUNXbnq8A/s57/Share%2520alt%25201.png' width='57'/></a></li>
</ul></span>
</div>
</div>En este codigo, los botones que aparecen son Facebook, Google+, Twitter, Stumbleupon, Evernote, Blogger, Enviar por Email, Enviar por Email Yahoo, y el boton "Mas" de AddThis.
Para dejar a nuestro gusto, podemos eliminar botones y cambiar imagenes. Para eliminar un boton, por ejemplo evernote, es facil, solo tenemos que eliminar su parte de codigo:
HTML:
<li><a class='addthis_button_evernote'><img alt='Share to Evernote' border='0' height='57' src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png' width='57'/></a></li>Y para cambiar la imagen igual, solo tendiramos que cambiar la url "src='https://lh4.googleusercontent.com/-RCzpjgpIEcE/T4y74V6mhzI/AAAAAAAAJH8/ex7WdsezcYk/s57/evernote-icon.png" por nuestra imagen.
Para añadir el codigo de tuenti con el boton cuadrado, solo tenemos que añadir este codigo debajo de cualquiera ya puesto:
HTML:
<li><a class='addthis_button_tuenti' title='Compartir en Tuenti'><img alt='Compartir en Tuenti' border='0' height='57' src='http://3.bp.blogspot.com/-6k_o3-_q25Q/UlFPYLiWC0I/AAAAAAAABRI/GSGZyT7zqu4/s1600/tuenti.jpeg' width='57'/></a></li>Para ver una prueba de como funciona, visita el blog de prueba.
Tambien podemos ver que hay un texto que aparece en grande "Comparte este Post", cosecha de MilTrucos, que podemos modificar para atraer al visitante con la frase que queramos.
Yo personalmente, para no relantizar la pagina con carga de imagenes y no bombardear al visitantes con 30 opciones, he dejado solo 6 opciones, FaceBook, Twitter, Google+, Tuenti, Email y "Mas". Todo esto esta visible en el blog de prueba.
Y ahora procedemos con el codigo que conduce a los comentarios.
Este es muy simple, pues solo es un enlace.
Justo debajo del codigo de MilTrucos, ponemos esto:
HTML:
<div style='margin: 15px 0px 10px; font-size: 30px;'>O añade un comentario:</div>
<div>
<a href='#comments' title='Haz click aqui para Añadir un Comentario'><img border='0' src='http://1.bp.blogspot.com/-RkaApNKeV2U/UlKGjdu4h8I/AAAAAAAABSU/VE7mmO6cAbU/s1600/button.png'/></a></div>Al pulsarlo, nos lleva directamente al formulario de comentarios.
Lo malo es que este boton aparece tambien en las paginas, si hay algun experto que pudiera explicarme como añadir un condicional para que solo se muestre en los post, perfecto.
El proceso de modificacion es el mismo, cambiar imagen y texto.
Todo esto lo vamoso probando para dejarlo lo mas atractivo posible, y asi poder atraer la atencion a que compartan y comenten nuestro contenido.
PD:
Si alguien no encuentra el codigo en su plantilla o no sabe como ponerlo o modificarlo, que comente o envie un MP, se lo explicare especial para su plantilla en privado.
