Tachar con imagenes

Accede a este LINK y sigue las instrucciones, es muy fácil!

Firma en el Post

María, me pregunta como poner una firma personalizada en los posts!

Nada más fácil que entrar en Livesignature, y crearla los pasos son muy sencillos, pero os los dejo de todos modos :

( visto en Si quieres puedes - transcrito )

Una vez en la página pulsais en CREATE SIGNATURE.

Os va a dar dos opciones, escogeis la de arriba "Using the signature creation wizard" para que te ofrezca tipos de letra, tamaño, etc. La segunda opción sería para hacer la firma desde una imagen escaneada.

Una vez seleccionado lo anterior os lleva a una pantalla en la que dice Enter the name, en la cajita de texto escribis el texto que quereis que se vea en la firma.

Os va a ofrecer seguidamente el tipo de letra que quereis, en la siguiente pantalla el tamaño, en la siguiente el color y por último la inclinación del texto. Vais seleccionando vuestras preferencias y pulsando Next Step. Cuando teneis todo elegido llegais a una pantalla que dice: Finished! The signature is ready. Tendreís la vista previa de vuestra firma y pulsando en: Want to use this signature? os lleva a la pantalla que os genera el código mágico. Elegis la primera opción que es la gratis y ya teneis una firma para vuestros posts.

Si no quereis pegar el código en cada una de las entradas,teneis que ir a la Edición y en Opciones elegís Formato, ahí teneis como última opción Plantilla de entrada. Pegando el código en ese espacio aparecera automáticamente en cada nueva entrada aunque no se pondrá en las que tuvierais hechas de antemano.


También podéis hacer de otra manera, que lo explica divinamente Rosa.

Emoticonos en los comentarios

Nuevos emoticonos para formulario de comentarios





  RECOPILADO DEL BLOG - EL ESCAPARATE DE ROSA

[1] En nuestro panel de Blogger nos situamos en Edición HTML.

[2] Marcamos ahora la casilla de "Expandir plantillas de artilugios".

[3] Localizamos esta línea de código:

<p><data:blogCommentMessage/></p>

[4] Justo debajo, pegamos este código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold; '>

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEPTdo1Ce6xT-iloK2Sp7D1KSbkdaVoKpV-W3HKd1hHWQySxCo7iYnKoODJ85TR2x3cZyaPNQycgqFQDXpmf_13m2FPuUcg8Z97BeDDDvcF2FeEqGnG_ZThrDs40wQFfD1O6SkSLL9xA/s800/emoticon-0100-smile.gif'/> :a

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTBQjbpolHwdHvg3NnzVgR_5lb8RPCO7asfeydxXkVH2BdW3ETrFOrB0AbWiviLm3bcUoJGIhEuVIrbw-pk_WNX_AWyj__UEY0MAxFEGfKflFObHZPknwc42VFf7r29TVfEgUYov8ws/s800/emoticon-0101-sadsmile.gif'/> :b

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a7NVRlQJ7irk77YMRxhHIwsZKIqAoR34AjFeNuTJay_vL_gVJJ6iyeOWfdQdaVwwXavaj_EuTJrmApPsuWA_IUSRu5RWQqeo0xfRHNZOSO_KITe7FvwOHOS53-LIC5ZeRSfXnfzfltM/s800/emoticon-0102-bigsmile.gif'/> :c

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEbBnvGNdvdhN1P1yGmvGaQTgGREFAk0LYLbQp3LrBCF7oY7iCyYIBCPy0b03PbxZEH10f22ESPKT3QQf9mcMERVlcb5YwQFpgIBApZ-QBvzNhRmH1NlitHzidh-0nyVhS72fJpPsXGQ/s800/emoticon-0105-wink.gif'/> :d

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ldg8bydTDtHLfqlCBdg2etcgHjQdSFToPYkqKhWrJMcnhdqDO0zf2rhR5q5KDkUh-NZMjQ0nMaUZwGPkipovUPO2oCe3hkOHsdUE-MRZxPRqglwABWJFAEL9u0kVPcCgxVEUg14fgGo/s800/emoticon-0104-surprised.gif'/> :e

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwpB6EtqvzoN4FJBNUBalznzXGMweeaV9tBACPx-wGyfQAmNHt8FAGF43cvJ8Nq1NsNN1EPgmii_zL-bsOcb4Dw7J1n3SQ9WQiZ6fE7t-5YApE3AaQlbGdzbIa1RtTuQVuP9FlGAmhbNw/s800/emoticon-0106-crying.gif'/> :f

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVzwIn2uQJRR_mFTGJyqYp25xVoPRV95LixUHKiqCe0TPBLMGrxnx_r2udP9191bYe5AGjB-H51m1tchzdBhOP-oaDFro7gWHh04nqtGrDllXagk9PQVMfmkOH_1jRi0HytGuupnPZF8/s800/emoticon-0109-kiss.gif'/> :g

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pjUBg90Wo-XZ0re76moCugqb2NG6THbp7CtcjOqfYdVAZn0biKeWc7xGOu1zRGHnR5-niclM2l9L_jj8dAw2gqAiMf96G0-zRb3MZGB9UOaA0jZPzex3mXJ8uFO8NvmqnAGEM4hZGaw/s800/emoticon-0111-blush.gif'/> :h

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJ8BgtXvfyM1tr_RIJ9iOEAk3BdrzPKkC4ENvpXCbvV8WlH1Mp_s_H8PufiI4sFARQBdOvKqdl_TDoFk6zx9Bov7owMHPVpQi54FtajJSn-apoAJvvuoI94JyL8zi7mZCFLtUZrXINOs/s800/emoticon-0110-tongueout.gif'/> :i

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYIS_oT4oRlvWMyiGn7dmNGb67TEAE1CfxzdsDZZxOitlN2EtKYsdU0ceCy7-g-swm5BZCb3hF_Y8SaVPlD3RemL7fLtwna0Qll-b-vuYe9ioXg3g0doQitw8UFnHINQzdosXc6qXwhc/s800/emoticon-0126-nerd.gif'/> :j

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPkdh_H8Sy6jJR3EEt15nCYEsmQ47a7jRSD8Mw6TbD86mIWwX3MENd1LAImDjxPthL4jN_qDX36zTpshBT7crQU7SZG7qhlWb-bgKWiutJzCXcND6sqIFbNMp_4hkG1oIoZb8aAnqS0s/s800/emoticon-0103-cool.gif'/> :k

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07MbYzTL2Zdtv1yFU_3HmIB9p8zT1HnDSENeoYLPYNewxBjEJKM0rnBip6Cm3DXFJF84w_nGdjMReajhPKhakRJiv8TqARuO3eaqGlujP-0-h-BBQDPxymFH80JGbh5sDY_WSVCKHdSk/s800/emoticon-0130-devil.gif'/> :l

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iOuZgtf1WxNGQxL1GeLfHN2qaLKfQUTzbcpaK1FpJWR7xqt76VyaPWwGNe6uqu5-YjJ4BJnoc6nrP0_CSuyfUJp9dH3LV__YPWe6sv6LaeAfhYc6tn5XrJyS7ikY5Old0FuTZ9yD4bo/s800/emoticon-0133-wait.gif'/> :m

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMGNsHJ_JMcDadF4vu_CGPZflXZtVbSbfUXfcYQnbVzeEqj6A_gT8erb8WM7O2T81Ntg1tJhODrI9gE6AES0C5X0coL7Kay-AotB7m2r_YDvmdPnEnWosEA9e3CS4Dfw7Zbe1k7nHUR8/s800/emoticon-0137-clapping.gif'/> :n

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaHPceIKBECVz2wTCPIRJZD0hwL1vj1QBcmny8FObGtpHkeO8zzFqMrTCeqj-4z8Rp4oD9q3TbWlSW0d3MNAWT0-N5c3kngCCPJ-Iy67T-gjUksMrD5ey5SVuffKPk2G-xXtnZOm0wkE/s800/emoticon-0136-giggle.gif'/> :o

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy15rSwkOIdVv_MMWNCGZeJW6rRDTfYo7QtGFvyKHAuL8Q4R4ve8ErttewNX_vaBuSBqlJPx7b2FbyGOjrHUx4jSjjhUiConzoSYGqVMvoCHRTcsyKUmkB3nJsI3LZoUBAGxLRcnQuk1g/s800/emoticon-0141-whew.gif'/> :p

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFYH_FHs0oRzmrLjvLznKHG6BxCGHJbYuJ8H_0LwRgNNwOvguid_T2IE_s9wHzfxAEaQ5whDeuZOvtH2fgLbPCSSPKdx-F0qRUWpCOZvWu-gs5-o0EcqOrJ_MnRZprRCx5aaTKsnApX0/s800/emoticon-0148-yes.gif'/> :q

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Czdu3j0vwemMKHwXqOcRsfCdXbYbnGT6yAieWQmzluSb3NXvxbf7SKrMEbf9HCJzOd93kdGiCykaHnBSuUVhKTjCqcFMcUsSbgqUAUIaNEZaMvHAbdzMia7gibhHsi2O7p8eMQvnanc/s800/emoticon-0149-no.gif'/> :r

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO01krlRBSwwIOpiUNhFOBiSAZIjFKbQ71y0X2G05BNV0zrfIWp777ZI5_rVTUYDu1W9zP3X9g0iXfTzj-sx_J8iSVVWFt8U1gMmIwHIIoKVQxzeuEs7k00vdhC6RWP52WRzs3i400Cag/s800/emoticon-0178-rock.gif'/> :s

&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FS4K3XvRfZuwqzdsVAza10zcnZI8jYWcAq1gIbWtPu3ZgOfbx92dqnz5L8CpV8ENOHVWJt9XQCwi30dnWepzCAhntpva4110RsjcHXH61QHm-dpMFnk8MCLq0YbgaPDf328bFjF7yu0/s800/emoticon-0155-flower.gif'/> :t
</div>

[5] Guardamos los cambios y ya podemos comprobar que sobre el formulario de comentarios estarán los emoticonos y sus símbolos correspondientes.

Una vez incluida la imagen con los emoticonos, vamos a ver como incluir en la plantilla el código (script) que hará posible el usar los emoticonos en los comentarios.

[5] Localizamos la etiqueta </body> en nuestra plantilla (casi al final del código de la misma) y, justo sobre ella, pegamos el script:

<script type='text/javascript'>

//<![CDATA[
a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') {
_str = b.item(i).innerHTML.replace(/:j/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYIS_oT4oRlvWMyiGn7dmNGb67TEAE1CfxzdsDZZxOitlN2EtKYsdU0ceCy7-g-swm5BZCb3hF_Y8SaVPlD3RemL7fLtwna0Qll-b-vuYe9ioXg3g0doQitw8UFnHINQzdosXc6qXwhc/s800/emoticon-0126-nerd.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrPkdh_H8Sy6jJR3EEt15nCYEsmQ47a7jRSD8Mw6TbD86mIWwX3MENd1LAImDjxPthL4jN_qDX36zTpshBT7crQU7SZG7qhlWb-bgKWiutJzCXcND6sqIFbNMp_4hkG1oIoZb8aAnqS0s/s800/emoticon-0103-cool.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh07MbYzTL2Zdtv1yFU_3HmIB9p8zT1HnDSENeoYLPYNewxBjEJKM0rnBip6Cm3DXFJF84w_nGdjMReajhPKhakRJiv8TqARuO3eaqGlujP-0-h-BBQDPxymFH80JGbh5sDY_WSVCKHdSk/s800/emoticon-0130-devil.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iOuZgtf1WxNGQxL1GeLfHN2qaLKfQUTzbcpaK1FpJWR7xqt76VyaPWwGNe6uqu5-YjJ4BJnoc6nrP0_CSuyfUJp9dH3LV__YPWe6sv6LaeAfhYc6tn5XrJyS7ikY5Old0FuTZ9yD4bo/s800/emoticon-0133-wait.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEMGNsHJ_JMcDadF4vu_CGPZflXZtVbSbfUXfcYQnbVzeEqj6A_gT8erb8WM7O2T81Ntg1tJhODrI9gE6AES0C5X0coL7Kay-AotB7m2r_YDvmdPnEnWosEA9e3CS4Dfw7Zbe1k7nHUR8/s800/emoticon-0137-clapping.gif' alt='' class='smiley'/>");
_str = _str.replace(/:o/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUaHPceIKBECVz2wTCPIRJZD0hwL1vj1QBcmny8FObGtpHkeO8zzFqMrTCeqj-4z8Rp4oD9q3TbWlSW0d3MNAWT0-N5c3kngCCPJ-Iy67T-gjUksMrD5ey5SVuffKPk2G-xXtnZOm0wkE/s800/emoticon-0136-giggle.gif' alt='' class='smiley'/>");
_str = _str.replace(/:p/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy15rSwkOIdVv_MMWNCGZeJW6rRDTfYo7QtGFvyKHAuL8Q4R4ve8ErttewNX_vaBuSBqlJPx7b2FbyGOjrHUx4jSjjhUiConzoSYGqVMvoCHRTcsyKUmkB3nJsI3LZoUBAGxLRcnQuk1g/s800/emoticon-0141-whew.gif' alt='' class='smiley'/>");
_str = _str.replace(/:q/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFFYH_FHs0oRzmrLjvLznKHG6BxCGHJbYuJ8H_0LwRgNNwOvguid_T2IE_s9wHzfxAEaQ5whDeuZOvtH2fgLbPCSSPKdx-F0qRUWpCOZvWu-gs5-o0EcqOrJ_MnRZprRCx5aaTKsnApX0/s800/emoticon-0148-yes.gif' alt='' class='smiley'/>");
_str = _str.replace(/:r/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Czdu3j0vwemMKHwXqOcRsfCdXbYbnGT6yAieWQmzluSb3NXvxbf7SKrMEbf9HCJzOd93kdGiCykaHnBSuUVhKTjCqcFMcUsSbgqUAUIaNEZaMvHAbdzMia7gibhHsi2O7p8eMQvnanc/s800/emoticon-0149-no.gif' alt='' class='smiley'/>");
_str = _str.replace(/:t/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FS4K3XvRfZuwqzdsVAza10zcnZI8jYWcAq1gIbWtPu3ZgOfbx92dqnz5L8CpV8ENOHVWJt9XQCwi30dnWepzCAhntpva4110RsjcHXH61QHm-dpMFnk8MCLq0YbgaPDf328bFjF7yu0/s800/emoticon-0155-flower.gif' alt='' class='smiley'/>");
_str = _str.replace(/:s/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO01krlRBSwwIOpiUNhFOBiSAZIjFKbQ71y0X2G05BNV0zrfIWp777ZI5_rVTUYDu1W9zP3X9g0iXfTzj-sx_J8iSVVWFt8U1gMmIwHIIoKVQxzeuEs7k00vdhC6RWP52WRzs3i400Cag/s800/emoticon-0178-rock.gif' alt='' class='smiley'/>");

_str = _str.replace(/:a/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKEPTdo1Ce6xT-iloK2Sp7D1KSbkdaVoKpV-W3HKd1hHWQySxCo7iYnKoODJ85TR2x3cZyaPNQycgqFQDXpmf_13m2FPuUcg8Z97BeDDDvcF2FeEqGnG_ZThrDs40wQFfD1O6SkSLL9xA/s800/emoticon-0100-smile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixTBQjbpolHwdHvg3NnzVgR_5lb8RPCO7asfeydxXkVH2BdW3ETrFOrB0AbWiviLm3bcUoJGIhEuVIrbw-pk_WNX_AWyj__UEY0MAxFEGfKflFObHZPknwc42VFf7r29TVfEgUYov8ws/s800/emoticon-0101-sadsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:c/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0a7NVRlQJ7irk77YMRxhHIwsZKIqAoR34AjFeNuTJay_vL_gVJJ6iyeOWfdQdaVwwXavaj_EuTJrmApPsuWA_IUSRu5RWQqeo0xfRHNZOSO_KITe7FvwOHOS53-LIC5ZeRSfXnfzfltM/s800/emoticon-0102-bigsmile.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbEbBnvGNdvdhN1P1yGmvGaQTgGREFAk0LYLbQp3LrBCF7oY7iCyYIBCPy0b03PbxZEH10f22ESPKT3QQf9mcMERVlcb5YwQFpgIBApZ-QBvzNhRmH1NlitHzidh-0nyVhS72fJpPsXGQ/s800/emoticon-0105-wink.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ldg8bydTDtHLfqlCBdg2etcgHjQdSFToPYkqKhWrJMcnhdqDO0zf2rhR5q5KDkUh-NZMjQ0nMaUZwGPkipovUPO2oCe3hkOHsdUE-MRZxPRqglwABWJFAEL9u0kVPcCgxVEUg14fgGo/s800/emoticon-0104-surprised.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwpB6EtqvzoN4FJBNUBalznzXGMweeaV9tBACPx-wGyfQAmNHt8FAGF43cvJ8Nq1NsNN1EPgmii_zL-bsOcb4Dw7J1n3SQ9WQiZ6fE7t-5YApE3AaQlbGdzbIa1RtTuQVuP9FlGAmhbNw/s800/emoticon-0106-crying.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVzwIn2uQJRR_mFTGJyqYp25xVoPRV95LixUHKiqCe0TPBLMGrxnx_r2udP9191bYe5AGjB-H51m1tchzdBhOP-oaDFro7gWHh04nqtGrDllXagk9PQVMfmkOH_1jRi0HytGuupnPZF8/s800/emoticon-0109-kiss.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9pjUBg90Wo-XZ0re76moCugqb2NG6THbp7CtcjOqfYdVAZn0biKeWc7xGOu1zRGHnR5-niclM2l9L_jj8dAw2gqAiMf96G0-zRb3MZGB9UOaA0jZPzex3mXJ8uFO8NvmqnAGEM4hZGaw/s800/emoticon-0111-blush.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i/ig,"<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitJ8BgtXvfyM1tr_RIJ9iOEAk3BdrzPKkC4ENvpXCbvV8WlH1Mp_s_H8PufiI4sFARQBdOvKqdl_TDoFk6zx9Bov7owMHPVpQi54FtajJSn-apoAJvvuoI94JyL8zi7mZCFLtUZrXINOs/s800/emoticon-0110-tongueout.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

//]]>

</script>

[6] Guardamos cambios.

Nota:

Para cambiar el diseño del rectángulo (div) donde van incluidos los emoticonos sobre el formulario, lo haremos en la primera línea del código:

<div style=' width: 370px; text-align: left; border: 2px solid #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>

width: 370px; Cambiamos el ancho del recuadro.

text-align: left; Alineación, en este caso a la izquierda.

border: 2px solid #0084ce; Grosor, aspecto y color del borde.

background: #FEF9EA; Color de fondo del rectángulo-contenedor.

padding: 10px; Distancia de los emoticonos (contenido) al borde.

color:#0084ce; Color del texto (los símbolos).

font-weight:bold; Fuente en negrita.

Lista de blogs en movimiento

 Antes de hacer nada, guardar la plantilla, por si las moscas. Aunque no tiene ninguna complicación. Os dejo con la explicación:

Comprueba que has añadido el gadget "Lista de blogs":

En caso de no tenerlo, agrégalo a tu barra lateral.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

Lo que ves en naranja es el título de mi gadget. El tuyo tendrá el título que le hayas atribuido.

Un poco más abajo encontrarás esta otra línea:

<b:includable id='main'>

Ahora borra desde esta línea hasta su etiqueta de cierre </b:includable> (ambas incluidas) como te muestro a continuación:

<b:widget id='BlogList1' locked='false' title='Mi lista de blogs' type='BlogList'>

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>
<div class='item-content'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
-
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time'>
<data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='clear: both;'/>
</li>
</b:loop>
</ul>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
</span>
<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>

Unstyle='margin-left: 5px;'>

<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

( se borra solo lo que está en rojo)

Una vez eliminado, inserta este otro código en su lugar:

<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='1' style='height: 240px; padding: 4px; border: 2px solid #cccccc;'><ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon' style='visibility: hidden; display: none;'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title' style='margin-bottom: 14px; font-size: 14px; text-decoration: none;'>
<a expr:href='data:item.blogUrl' style='text-decoration: none;' target='_blank'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/Sizicons/12x12/arrow_2_right_round.png'/> <data:item.blogTitle/>...</a>
</div>
<div class='item-content' style='text-decoration: none;'>
<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a>
</div>
</b:if>
</b:if>
<b:if cond='data:showItemTitle == &quot;true&quot;'>
<span class='item-title'>
<b:if cond='data:item.itemUrl != &quot;&quot;'>
<a expr:href='data:item.itemUrl' style='color: #003399; text-decoration: none;' target='_blank'>
<data:item.itemTitle/></a>
<b:else/>
<data:item.itemTitle/>
</b:if>
</span>
</b:if>
<b:if cond='data:showItemSnippet == &quot;true&quot;'>
<b:if cond='data:showItemTitle == &quot;true&quot;'>...
</b:if>
<span class='item-snippet'>
<data:item.itemSnippet/>
</span>
</b:if>
<b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
<div class='item-time' style='margin-top: 6px; color: #003399; text-align: right;'>
<img src='http://icons3.iconfinder.netdna-cdn.com/data/icons/circular%20icons/bullet_black.png' style='padding-right: 4px;'/><data:item.timePeriodSinceLastUpdate/>
</div>
</b:if>
</div>
</div>
<div style='margin-bottom: 14px; border: 3px solid #ccc; clear: both;'/>

</li>
</b:loop>
</ul></marquee>

<b:if cond='data:numItemsToShow != 0'>
<b:if cond='data:totalItems &gt; data:numItemsToShow'>
<div class='show-option'>
<span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
<a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>

</span>

<span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
<a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
</span>
</div>
</b:if>
</b:if>

<b:include name='quickedit'/>
</div>
</div>
</b:includable>

En caso de querer editar el movimiento, reemplazar el valor 1 (marcado en rojo) por 2, 3, 4...

Para cambiar la dirección y hacer que los blogs "bajen" en lugar de que "suban" cambiar up por down.

Para cambiar el color, cambiar el número marcado en rosa.
Aquí tenéis la tabla de colores.

Guarda el gadget para terminar.

 Visto en : El balcón de Jaime

Poner vídeos en Blog

Primero entramos en la página de vídeos, de donde queremos sacarlo, por ejemplo Youtube.

En la página una vez seleccionado el vídeo que queremos, pinchamos en el, como cuando vamos a verlo. En esa misma página tienes por debajo dos códigos. Uno es el enlace para acceder a la página, y normalmente la nomean como URL, y luego tienes el segundo que pone insertar y en algunos casos Embed.

Copiais el código, y lo pegáis en la entrada en edición HTML, en la foto veréis donde tenéis que darle. Luego podéis seguir escribiendo en Redactar.

Widgets en uno solo

No es tan complicado como parece, ni hace falta hacerse un curso de HTML.
Con estas nociones básicas lo puedes hacer :

Para dejar un espacio entre cada uno  se usa  &nbsp; , entre cada código.
 quedaría así:

Para separarlos como un párrafo o salto de línea se usa  <P>  entre los códigos.
Y quedaría así :

Diseñador de plantillas

En Blogger in draft ( blogger en borrador), ahora se puede diseñar nuestra plantilla, sin perder nada de lo que tenemos.

Hay varios formatos a elegir, fondos, columnas, pie de página con columnas...cantidad de herramientas. Solo hecho en falta, que no hayan puesto una opción para subirnos, nuestra propia imagen ( o no la vi...).

De cualquier modo, antes de hacer cualquier cambio ( por si acaso) guardar siempre vuestra plantilla  primero.

Buscador de Iconos

Os presento una herramienta muy útil :

El buscador de Iconos  - Iconfinder

Solo tiene un por, que tenéis que buscar en ingles!

Aquí probé a buscar Home :

Flecha Arriba

Para poder tener la flecha en su blog solo tendrán que ir a Plantilla----->Editar HTML----->Expandir artilugios----->y buscamos este codigo </body> , justo antes colocaremos este otro código:

<a href='#'><img alt='ir arriba' border='0' src='url de la imagen' style='position:fixed; bottom:0; right:0;'/></a> 

En ese codigo se puede cambiar la parte que dice ir arriba, por cualquier otra frase o palabra que quieran que sea mostrada cuando el cursor pare sobre la imagen. Tendran que cambiar donde dice URL de la imagen por la direccion de la imagen que quieran poner.

Una vez escogida la imagen, subirla a Tynpic (por ejemplo), y obtenéis la dirección que os sirve - Enlace directo.

Os dejo la dirección de una :

http://i50.tinypic.com/ibw8hu.png








Podéis buscar la imagen que queráis en google imagenes, ponéis icono flecha y a escoger!

Empezar un blog

No puedo dejar de publicar esta entrada, la encontré en El Mosquitero, y explica muy bien la mejor forma de construir tu blog.

NO DEJAR DE LEERLO :

Dos formas de comenzar en los blogs

Estoy segura de que será de gran ayuda!

Pregunta lo que quieras

Este es un nuevo Widget que encontré en uno de los blogs que visito, y me pareció interesante.

Esta es la dirección :

Formspring.mehttp

Aquí la gente puede preguntarte lo que quiera, y tu contestares . Te proporciona unos posts divertidisimos.

Plantillas flash

Os dejo una dirección, con varias plantilas en flash, muy bonitas. Tienen el código para 2 columnas y 3 columnas. Solo escoger, copiar y pegar.
Es muy sencillo de hacer, solo tenéis que ir a diseño - añadir gadget - HTML - pegar código y voilá!! Listo.

http://decoratublog.blogspot.com/

Saludos

Linwithin - enlaces con imagen a otros posts

Tutoriales - El escaparate de Rosa

En LinkWithin podemos añadir un gadget de Entradas relacionadas con miniatura de imagen.

[1] Accedemos a la página de LinkWithin y a la derecha vemos el formulario para obtener el gadget. Tenemos que introducir nuestro email, la url del blog donde vamos a colocar el gadget y la plataforma, que en nuestro caso será Blogger:

[2] Si nuestro blog tiene fondo oscuro en las entradas, marcamos la opción que dice "My blog has light text on a dark background" para que el gadget adapte el color de su texto al del fondo.
Pinchamos en "Get Widget".

[3] Pasamos entonces a otra página donde se nos dan las instrucciones para integrar el gadget, que se hace de la misma manera que cualquier otro que se integra directamente al blog.
Pinchamos en "Install Widget".

[4] Una vez instalado el Gadget este se verá en la sidebar pero solo en la parte de diseño,  dentro de ese gadget está el código que le hace funcionar, así que para eliminar las entradas relacionadas cuando ya no nos interese usarlas, lo unico que tenemos que hacer es eliminar ese gadget.

Las entradas relacionadas se mostrarán de forma automática al final de cada entrada, justo sobre el post-footer (pie del post) .

Algunas de las cosas que he notado en mis pruebas:

Si en nuestro blog no usamos imágenes en las entradas, en el gadget se verán solo los títulos de los posts.

El gadget se carga una vez ha cargado el resto del blog.

Algunas veces el gadget tarda algo en cargar e incluso no llega a hacerlo; cuando esto pasa en el lugar que el gadget con el código ocupa en la sidebar, se muestra un enlace a LinkWithis.
Para evitar que salga este enlace, en el "editar" del gadget eliminamos esta parte del código:

<a href="http://www.linkwithin.com/"><img alt="Related Posts Widget for Blogs by LinkWithin" style="border: 0" src="http://www.linkwithin.com/pixel.png"/></a>

Emoticonos

Poner emoticones en tu blog en realidad es sencillo, lo complicado realmente es crear el Script para hacerlo, pero aqui en esta miniguia pongo a disposicion de todos un Script que he creado y depurado, es el mismo que utilizo en este blog asi que los emoticones que pondremos son los siguientes:

:-) :-s :-p :-[ :-d }:-] x* ;-d :-| :-} :*) :-( ;-) xd

Antes de empezar quiero hacer una aclaracion: El Script del codigo lo pongo en un archivo de texto que pueden descargar, no pongo el codigo aqui escrito en blog porque al poner los cogigos del Script habrian partes en las que ustedes verian en vez de codigo los emoticones, espero darme a entender :-S

Bueno empezemos:


PASO 1

Debes ir a tu plantilla de blogger: Diseño > Edicion HTML y darle click a Expandir plantillas de artilugios una vez estando ahi tienen que buscar </head>

Un truco para buscar codigos en la plantilla de blogger es presionar Ctrl+F esto despliega una pequeña ventanita donde introduces lo que quieres buscar

Bueno una vez lo hayas encontrado tienes que pegar encima del </head> el codigo de Script que he puesto dentro de este archivo de texto

Descargar el Codigo del Script

El codigo es grande(no te asustes) lo unico que tienes que hacer es pegarlo y LISTO!!! ya tienes los emoticones


PASO 2

Ahora que ya tienes instalado el Script hace falta poner encima del formulario de comentarios de tu blog los codigos con la indicacion de los emoticones, para que se vea asi:


Para hacer esto, tienes que insertar una tabla html con los emoticones y el simbolo a utilizar, yo me he tomado la molestia tambien de hacer la tabla que igual que el Script esta en un archivo de texto

Descarga La Tabla de los Emoticones

Cuando ya tengas el cogido de la tabla tienes que ir a tu plantilla y con los artilugios expandidos buscar el siguiente codigo:

<p><data:blogCommentMessage/></p>

Ahi justo debajo de ese codigo debes pegar todo lo que esta adentro del archivo de texto de la tabla


PASO 3

Guarda los cambios en tu plantilla y ya puedes utilizar tus emoticones, tanto en los posts como en los comentarios ;-)

Extraído de   Trucosgeek

Formato texto

 

Align="CENTER":      define la alineación de la línea (center, right, left).

Size="2":   define el grosor, en píxel, de la línea.

Width="400":   define la longitud horizontal, en píxel, de la línea. Puede también expresarse en tanto por cien respecto al espacio a disposición: width=80%.

Color="RED":    define el color de la línea.

Noshade:    si este atributo está presente, elimina el efecto 3D de la línea. Si no está presente, produce dicho efecto.

WIDTH=178     es la dimensión horizontal (ancho) de la imagen

HEIGHT=180     la dimensión vertical (alto)

ALIGN=top:    alinea la primera línea de texto con la parte superior de la imagen.

ALIGN=middle:     alinea la primera línea del texto con el centro de la imagen.

ALIGN=bottom:     alinea la primera línea de texto con la parte inferior de la imagen.

ALIGN=left:     el texto se coloca a la derecha de la imagen empezando desde la parte superior de la misma.

ALIGN=right: el texto se coloca a la izquierda de la imagen empezando desde la parte superior de la misma.

Ensanchar la plantilla Mínima

Tutoriales - Ayuda para tu Blog 

Bueno en este tutorial les voy a mostrar como pueden cambiar el ancho de su blog (cuerpo, entradas, sidebar, titulo, etc)
Para esto les dejo 5 pasos sencillos para que lo puedan hacer, ya sea disminuir o agrandar el ancho de tu blog.
En estos 5 pasos les voy a mostrar como ensancho mi blog, ya de paso les dejo una medida muy apropiada y conveniente para ensancharlo, pero esta de mas decir que pueden elegir la medida que ustedes quieran.

1) Primero que nada deben dirigirse a la parte de diseño del blog, a la edicion de codigo HTML. No hace falta que expandamos los artilugios. Nececitamos localizar la instruccion #outer-wrapper ( Esto es como quien dice, el ancho del blog en si, dentro del blog esta el espacio para las entradas y la sidebar, si queremos ensanchar estas ultimas, primero debemos hacer espacio en el blog para que luego entren sin problemas). La primera linea debajo de:#outer-wrapper es width: 660px;Cambiaremos esa línea por width: 850px; (width significa ancho y el numero es la cantidad de pixeles que le estamos dando)

2) A continuacion vayamos a ensanchar el espacio de entradas (main), si buscamos mas abajo de lo anterior debemos encontrar: #main-wrapper ( y al igual que antes cambiamos la línea del width (ancho) por esta: width: 500px;)

3) Un poco más abajo vemos #sidebar-wrapper (, ahí es donde modificaremos el ancho de nuestra sidebar con el mismo sistema que antes, cambiando la línea del width (ancho) por esta otra: width: 250px;)



4) Ahora vayamos a ensanchar el titulo para lograr una mejor estetica en nuestro blog, para eso dejemoslo del mismo ancho que el resto del blog. Para hacer este cambio buscamos (hacia arriba) esta parte: #header-wrapper ( y cambiamos la línea del width porwidth:850px;) (el mismo ancho que el cuerpo del blog), así la cabecera ocupará el mismo espacio que las entradas y la sidebar juntas. Bajamos ahora por el código de la plantilla, hasta encontrar el #footer ( y le ponemos también el mismo ancho que el blog: width:850px;)
de esta forma nuestro blog logra una imagen uniforme.





5) Usamos la vista previa, y si todo ha ido según lo previsto, guardamos los cambios.

Si usas otras medidas no olvides que la suma del ancho de las entradas con el de la sidebar, debe ser menor o igual a el ancho del blog para una correcta vizualizacion.

Mostrar fecha en todos las entradas

Tutoriales El escaparate Rosa

En unos sencillos pasos conseguiremos que la fecha de nuestras entradas se muestre dentro de una imagen tipo calendario.

[1] Para comenzar tendremos que cambiar el formato en que se muestra la fecha de nuestros posts. Iremos a nuestro panel de Blogger y en Configuración escogemos la opción Formato, una vez allí en "Formato de cabecera de la fecha" seleccionamos la penúltima opción que aparece en el despegable.
Ejemplo: 08 junio 2008

[2] Una vez cambiado el formato de la fecha, vamos a Edición de Html y expandimos los artilugios. Localizamos la etiqueta y justo antes colocamos este script:


<script>

function remplaza_fecha(d){

var da = d.split(' ');

dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";

mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";

anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";

document.write(dia+mes+anio);

}

</script>


[3] Tendremos que localizar ahora dentro del código de la plantilla esta etiqueta:

<h2 class='date-header'><data:post.dateHeader/></h2>


Para que no sea tan complicado podemos usar nuestro navegador para buscarlo.

Sustituimos esa etiqueta por este código:

<div id='fecha'>

<script>remplaza_fecha('<data:post.dateHeader/>');</script>

</div>



[4] Volvemos hacia arriba en nuestra plantilla para localizar la etiqueta ]]></b:skin>
y justo encima, pegamos estas líneas de CSS para controlar el estilo de nuestra fecha:

/* Calendario-Fecha
-------------------- */

#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url(http://img367.imageshack.us/img367/1449/blue2kt9.png) no-repeat;
border: 0;
text-transform: uppercase;
}

.fecha_mes {
display: block;
font-size: 10px;
font-weight:bold;
}

.fecha_anio {
display: block;
font-size: 10px;
}

.fecha_dia {
margin: 2px 0 0 1px;
display: block;
font-size: 16px;
font-weight:bold;
}


Notas: En el CSS anterior está colocada la url de uno de los calendarios azules (el que se ve en el ejemplo de la imagen) para usar otro color de calendario, tendremos que subir el calendario escogido a un alojamiento de imágenes y sustituir la url en el código por la que nos proporcionan en el alojamiento.


Estes son algunos ejemplos :

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE GOOGLE-PAGES

DESCARGAR EL PACK DE ICONOS-CALENDARIOS DESDE DROPBOX

Eliminar fecha del post

Cómo quitar la fecha de las entradas
lunes 21 de diciembre de 2009

Hay dos formas sencillas de eliminar la fecha de las entradas.

La primera consiste yendo a Diseño - Elementos de página - Entradas del blog - Editar. 
En editar os encontraréis con la siguiente opción:

Debes dejar la casilla sin seleccionar y posteriormente guardar los cambios.

Si con esto aún continua apareciendo la fecha en las entradas, deberás realizar cambios en tu plantilla HTML. Esto puede deberse a que no estés empleando una de las plantillas mínimas que nos facilita Blogger.

1) Ves a Diseño
2) Edición de HTML
3) Busca date-header (teclea Ctrl + F para buscar más rápido)
4) Te encontrarás con algo así:

h2.date-header {
margin:0;
padding:0;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

Deberás añadir, respetando la estructura, este código:

visibility:hidden;

Es decir, deberás quedarte así:

h2.date-header {
margin:0;
padding:0;
visibility:hidden;
font-weight:normal;
font-size:10px;
background:#fff;
color:#222}

5) Clica en vista previa, y si todo está correcto guarda tu plantilla.

Fuente - Quiero crear un blog

Sidebar con 2 columnas

FUENTE  -  TUTORIALES - EL ESCAPARATE DE ROSA

Una manera de ganar espacio extra en el blog sin hacer grandes cambios es añadir una nueva sidebar debajo de la que ya tenemos y dividirla en dos.

Para explicar estas modificaciones, damos por hecho que la plantilla a la que vamos a hacer los cambios tiene solamente una sidebar y, por descontado, que lo más adecuado sería tratar de hacer los cambios en un blog de pruebas antes de pasarlos al "original".

Para mi ejemplo usaré la plantilla Mínima de Blogger con sus medidas originales.
Haremos todos los cambios sin "expandir las plantillas de artilugios".

[1] Localizamos el código CSS que corresponde a la sidebar que ya tenemos en la plantilla y que será algo como esto:

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lo copiamos y justamente debajo pegamos la copia y le cambiamos la id, por ejemplo a sidebar-wrapper-doble:

#sidebar-wrapper-doble {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

[2] Debajo de ese mismo código que acabamos de añadir, pegamos este otro que servirá para controlar las dos columnas de la nueva sidebar:

#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}

[3] Bajamos ahora hacia el HTML de la plantilla para localizar el código de la sidebar que ya tenemos:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

</b:section>

</div>

Añadimos, justo debajo, el código para la nueva sidebar con sus columnas incluidas:

<div id='sidebar-wrapper-doble'>

<b:section class='sidebar' id='columna-izda' showaddelement='yes'>

</b:section>



<b:section class='sidebar' id='columna-dcha' showaddelement='yes'>

</b:section>



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

</div>

Este sería el  resultado:

 

Mas plantillas

Blogger:

• Blogandweb. Muy buenos diseños creados a partir de plantillas gratuitas en CSS de la web Free CSS Templates y similares. Sin duda, es un trabajo que merece ser reconocido y premiado al menos con un enlace hacia su blog al instalar alguno de sus themes.
• BloggerTemplates. Es un buen sitio con excelentes diseños, aunque algo escaso en cuanto a la cantidad de plantillas.
• Blogger-Templates. Blog con bastantes themes clasificados en función de su estilo y codificación.
• BlogSkins. Puedes ver las plantillas más votadas por los usuarios o el estilo del día en su página principal. Los diseños están disponibles para Blogger, Movable Type y Xanga.
• BlogFlux Themes. Sección para descargar templates de este directorio de blogs.
• Geckoandfly. Blog con multitud de diseños para Blogger con un estilo similar al de los themes disponibles para WordPress.
• BlogMundi. Un blog fantástico con consejos para bloggers y multitud de utilidades que cuenta con algunos templates para Blogger magníficos.
• TemplatePanic. Las plantillas de Blogger están clasificadas en función de su número de columnas en la barra de navegación derecha.
• Psycho. Generador de plantillas para Blogger gratuito que te permitirá crear tu propio diseño en menos de 10 minutos.

Marcadores sociales

Las tendencias muestran que el uso de los marcadores sociales va en aumento… y es sencillamente porque son muy practicos y útiles. Aqui desarrollo un pequeño tutorial de como colocarlos en tu blog de Blogger. El proceso es MUY sencillo.

• Primero anda a tu panel de control->Diseño->Edición de HTML.
• Hace un backup de tu plantilla haciendo click en “Descargar plantilla completa” (nunca esta demás ser precavido).
• Hace click en la opción “Expandir plantillas de artilugios”.
• Busca la linea de código
  
  <code><div class='post-footer'>.
  
  En la siguiente imagen podes ver el lugar exacto. (si usas Firefox como navegador en Windows aprieta Crtl +F para buscar la linea rápidamente.)

• Pega el código que encontrarás en este archivo, y guarda los cambios.

Listo! Ahora tus visitantes cuentan con accesos rápidos para compartir y agregar tus posts a sus marcadores sociales o redes sociales. En el código encontrarás un vinculo a una explicación que realice sobre los marcadores sociales, algo que resulta útil a muchas personas que hace mucho que ven estos iconos pero aún no saben que son. Por supuesto, si el vinculo complica en algo el diseño de tu blog podes sacarlo.


Fuente : La web de Juan

Medidores de Pagerank

Aquí te presentamos varios estilos en medidores de pagerank. Selecciona el que más te guste e intégralo gratuitamente en tus paginas web o Blog para mostrar o medir tu pagerank, puedes tambien saber tu pagerank actual haciendo click aquí.

Para instalar un medidor de Pagerank en tu web o Blog solo debes seleccionar el código a continuación de cada medidor, copiarlo y pegarlo en las paginas que desees y tus páginas mostraran su Google Pagerank.

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=1); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:71px; height:17px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=2); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:71px; height:17px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=3); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:44px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=4); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:70px; height:36px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=5); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=6); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:52px; height:38px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=7); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:15px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=9); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:80px; height:18px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=10); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=11); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=12); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=13); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

<a href="http://www.mediatools.cl" style="background-image:url(http://www.mediatools.cl/contenidos/page/googlepagerank_insert.php?estilo=14); background-repeat:no-repeat; text-indent:-880px; overflow: hidden; display:block; width:75px; height:20px" title="Posicionamiento web">Posicionamiento web</a>

Muy pronto más estilos de medidores de pagerank para tu sitio web o blog y totalmente gratis!


Fuente : MediaTools