Mostrando entradas con la etiqueta Trucos texto. Mostrar todas las entradas
Mostrando entradas con la etiqueta Trucos texto. Mostrar todas las entradas
Destacar el nombre del autor en el post-footer cambiando el tamaño, color o forma del resto de los elementos mostrados.
1. Diseño>Edición de HTML>expandimos artilugios
2. Control+F y buscamos algo similar a...
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Ese código pertenece al autor del blog, y el que hace que se muestre nuestro nombre en Blogger como firma de entradas.
Si nos fijamos, vemos que la etiqueta que muestra la firma -<data:post.author/>- tiene añadida una clase delante -<span class='fn'>-
Usaremos esa clase para controlar el diseño de nuestra firma y cambiarle el tamaño de fuente y el color del texto.
3. Control+F y añadimos antes de ]]></b:skin> algo similar:
.fn{
font-size: 130%;
color: #106716;
}
- Se modifica font-size tamaño del texto tanto en % como en px (píxeles).
- Se modifica color a gusto de cada cual.
- Se pueden añadir todas las órdenes que se nos ocurran relativas a texto o imagen.
Foto y descripción del autor de las entradas |
||
| ⇓ |
Veremos como colocar un apartado especial al pie de cada entrada con la fotografía del autor de la entrada y una breve descripción sobre su persona.
Podrá usarse para blogs con solo un autor o para los que publican varios autores, una vez instalado el código, se mostrará de forma automática el apartado que diferencia a cada autor de las entradas.
1. Diseño>Edición de HTML>expandimos artilugios
2. Control+F y buscamos ]]></b:skin>
#post-footer-autor {
width: 100%;
height: 70px; /*Altura del apartado de autor */
background: #669900; /* Color de fondo del apartado */
margin: 8px 0px 8px 0px; /* Margenes del apartado de autor */
border: 2px solid #ccc; /*Borde del apartado*/
}
/* Estilo del avatar */
#autor-avatar {
width: 54px; /* Anchura del espacio para el avatar */
height: 54px; /* Altura del espacio para el avatar */
background: #ccc; /* Color de fondo del avatar */
float: left;
margin: 7px; /* Margenes del avatar */
}
#sobre-autor {
padding-right: 5px;
margin: 0px;
}
/* Estilo del texto de la descripción */
#sobre-autor p{
font-size: 12px; /* Tamaño de la fuente */
padding: 10px;
margin: 0;
text-align: justify;
text-transform: normal;
color: #fff;/* Color del texto */
}
/* Estilo texto de enlace */
#sobre-autor a{
color: #9A9A9A; /* Color del enlace */
text-decoration:none;
}
/* Estilo texto enlace al paso del ratón */
#sobre-autor a:hover {
color: #9A9A9A; /* Color enlace */
text-decoration:none;
}
3. Control+F y buscamos la etiqueta:
<div class='post-footer'>
o
<div id='post-footer'>
4. Una vez localicemos una u otra, según aparece en nuestra plantilla, tenemos que colocar justo antes, este código:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "NOMBRE DEL AUTOR"'>
<div id='post-footer-autor'>
<div id='autor-avatar'>
<img src='URL DE LA IMAGEN DE AUTOR' style="border: 2px solid #ccc; padding: 0; margin: 0;"/>
</div>
<div id='sobre-autor'>
<p>
DESCRIPCION BREVE DE AUTOR
</p>
</div>
</div>
</b:if>
</b:if>
Nota:
- El código tal cual lo vemos arriba -paso 4- sería para solo un autor.
- Si se desea que se muestre la descripción de autor en blogs compartidos tendremos que repetir ese código tantas veces como autores publiquen en el blog; más tarde se realizan los cambios correspondientes para cada autor.
- El apartado de autor solo será visible en las páginas de entrada, para mostrarlo también en el home del blog, eliminamos la primera línea del código:
<b:if cond='data:blog.pageType == "item"'> y el último </b:if> del final.
- NOMBRE DEL AUTOR Colocamos aquí el nombre del autor exactamente igual a como aparece en nuestro perfil de Blogger, es decir, el nombre que usamos en nuestra cuenta de Blogger para firmar las entradas.
- URL DE LA IMAGEN DE AUTOR Colocamos la url aquí de nuestro avatar, que tendrá aproximadamente unas medidas de 50px por 50px.
- DESCRIPCION BREVE DE AUTOR Aquí escribimos una breve descripción sobre el autor, usando la vista previa para calcular que el texto no sobrepase el espacio disponible para él. Se pueden incluir enlaces en el texto si así lo queremos.
- El apartado de autor solo será visible en las páginas de entrada, para mostrarlo también en el home del blog, eliminamos la primera línea del código:
<b:if cond='data:blog.pageType == "item"'> y el último </b:if> del final.
- NOMBRE DEL AUTOR Colocamos aquí el nombre del autor exactamente igual a como aparece en nuestro perfil de Blogger, es decir, el nombre que usamos en nuestra cuenta de Blogger para firmar las entradas.
- URL DE LA IMAGEN DE AUTOR Colocamos la url aquí de nuestro avatar, que tendrá aproximadamente unas medidas de 50px por 50px.
- DESCRIPCION BREVE DE AUTOR Aquí escribimos una breve descripción sobre el autor, usando la vista previa para calcular que el texto no sobrepase el espacio disponible para él. Se pueden incluir enlaces en el texto si así lo queremos.
Visto en El escaparate de Rosa
Convertir en enlace el nombre del autor |
||
| ⇓ |
Supongamos que tenemos una firma en el blog en forma de imagen o texto...Ésta puede ser un enlace que lleve a donde queramos.
1. Diseño>Edición de HTML>expandimos artilugios -----Control+F y buscamos
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
2. Añadimos la etiqueta <data:post.author/> dentro del enlace:
<a href=URL-pagina' target="_blank"><data:post.author/></a>
3. Si ya hemos cambiado antes la firma o nombre del autor por una imagen, la etiqueta
<a href='URL-pagina' target="_blank"><img src="Url_de_la_imagen_de_la_firma"/></a>
Enlace a correo electrónico en código |
||
| ⇓ |
Los enlaces directos a un correo electrónico usan el atributo href agregando al principio de la dirección mailto: que vendría a sustituir el protocolo (http://, ftp://, etc).
Ejemplo con texto:
<a href="mailto:nombre-usuario@gmail.com">TEXTO</a>
<a href="mailto:usuario@servidor.com"> texto </a>
Ejemplo con imagen:
<a href="mailto:nombre-usuario@gmail.com"><img src="URL_IMAGEN"/></a>
• Código ampliado:
<a href="mailto:usuario@servidor.com?CODIGOadicional"> texto </a>
El Código adicional podría ser:
subject=texto incluye el texto en el campo ASUNTO
cc=direccion@servidor.com incluye una dirección en el campo CC
bcc=direccion@servidor.com incluye una dirección en el campo BCC
Sólo puede ser utilizada una de las opciones a la vez. El usuario puede modificar los campos antes de enviarlo.
Mover el texto con marquee donde sea |
||
| ⇓ |
Moviendo el texto iría encadenada a una entrada que me ayudó mucho sobre Códigos HTLM. Crear efectos en tu blog. Listado y Recopilación.
Este tipo de cosas pueden ir en un post o hasta en un gadget HTML/Javascript que vaya en cualquier lado.
Marquee es la encargada de mover letras y hasta imágenes...
Con background puedes cambiar el color
Se puede modificar el color, el grosor y tipo de borde.
Nota:
- Se puede dar más o menos velocidad con la instrucción scrollamount="1"
- Se para el movimiento cuando pones el ratón encima si añades después de marquee ...
onmouseover="stop()" onmouseout="start()"
Grandes emoticones smiles y caras divertidas |
||
| ⇓ |
Más emoticones y caritas...
♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ Horóscopo
(O,,v,,O) Llorando
ξξ☀ ‿☀ξξ
( •´¨‿¨`•) {U are welcome ]
✫ ☄ ✫ __ ?
(＾∇＾) ❤❤❤
ε(❀◕ω◕)зღღღ
(●◜◡◝●)
(๑˘ᴗ˘๑)
(つω；)
（ ☉_☉ﮌ
¿ⓧ_ⓧﮌ
☆⌒Ｙ⌒Ｙ⌒Ｙ⌒ヾ(o◕ω◕）ﾉ
(✿-ω-)
ﾟ+.(◕∀◕)ﾟ+.
(・@・) baby
ヾ(◨ฺω◨✿ฺ )
(*✪‿✪)pღ✿ღﾟ
♡o｡(๑◕‿◕๑)｡o♡
ｚＺ(✿◡‿◡）
ﾟ+.(✿≈∀≈✿)ﾟ+.ﾟ
✾(｡◠‿◠｡✿)
ヾ(✿❛◡❛o)ノ
（ლ ^ิ౪^ิ）ლ
ﾟ*｡.ヾ(ღ◕ܫ◕)ﾉ⊹⊱
(｡≖‿≖)ﾌﾟ
(｡ì _ í｡)
☆*:.｡. o(≧▽≦)o .｡.:*☆
ლ(❛◡❛✿)ლ
(｡￫ω￩｡)
。・:*:・゜`*。・:*:・。・:*:・゜`*。・:*:・゜`
(｡✿‿✿｡)
ლↂ‿‿ↂლ
ⓣⓗⓐⓝⓚⓢ
（❀◕‿◕）
♥♫♈(¯`v´¯) `·.¸.· ¸.·´¸.·¨) ¸.·¨) (¸.·´ (¸.·´ (¸.·¨¯`♥
❁◕‿◕❁
(♥◠‿◠)ﾉ
(•Ӫ•)
ლ(▒╹〰╹▒)ლ
∿∿∿∿✈
✌ˆ▿ˆ◦
(❍ʻ◡ʻ❍)
(◔ ॣ ◔ლ)
(∗ ੈ ੁ ੈ ∗)
o(*´∇｀)┌θ kick
(｡･ω･｡)ﾉ
◜◕ω◕◝
✌⁅❛Д❜⁆✌
✿◕‿◕✿
ઈ(◔ั◡◔ั)ઊ
↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘‿↗⁀↘
✌（＾∀＾✗）
✌♫♪˙❤‿❤˙♫♪✌
U(･㉨･)U doggy
(♡u‿u)⊹⊱ good night
( 。´◕ω◕)y─┛ண smokin'
ﾟ･✿ヾ╲(｡◕‿◕｡)╱✿･ﾟ:✲
ヾ(დ☣‿☣)ﾉ Morning
(♧◑ω◑)☞♡☜(◐ω◐♧)
ゑ(╹◡╹ゑ)
(づ㌔◕)づ
ʕ·ᴥ·ʔ koala
(o◕ܫ◕)ﾉ♥ⓛⓞⓥⓔ♥ヽ(◕ܫ◕｀o)
(*^□'*)v
(✌ﾟ∀ﾟ)☞
ლ(❛◡❛✿)ლ
ヾ(๑╹◡╹)ﾉ"
☮▁▂▃▄☾ ♛ ◡ ♛ ☽▄▃▂▁☮
(U •́ .̫ •̀ U)
(´◕ω◕｀)✪Д✪)◕∀◕)♉A♉)☼Д☼)❝_❝)◉｡◉)▣_▣)☉∀☉)
／）( ◕ ‿‿ ◕ )（＼
ლↂ‿‿ↂლ
ლ(╹◡╹ლ) ლ(＾ε＾ლ) ლ(ﾟдﾟლ) ლ(´∀`ლ) ლ(⁰⊖⁰ლ) ლ(･ิω･ิლ) ლ(^o^ლ) Love
＿☆（ ´_⊃｀）☆＿
‘ ‘ • ♫♫♫*♥*♫♫♫• * ‘ ‘
─────█████████════█ inyección
(*◕ ◡◕)✿♫♬
(U◕㉨◕)ﾉ
(◕ิ(ｪ)◕ิ) ← Oso
✿♬ﾟ+.(｡◕‿◕) Buenas noches ♪.+ﾟ♬✿
ↁ_ↁ
(^ *=o =* ^)---з >)-)-)-(⊙>
(>'o')> ♥ <('o'<)
ჰ❛‿❛ჴHola❤
( ☞՞ਊ ՞)☞
♡+♡=❤²
٩(-̮̮̃-̃)۶ ٩๏̯͡๏۶ ٩(͡๏̯͡๏)۶ ٩◔̯◔۶ ๏̯͡๏﴿
⊙▃⊙
☁ ☝ˆ~ˆ☂
✌.ʕʘ‿ʘʔ.✌
(⊙⊙)
(>_<� ) (� >_<)
ː̖́(" `з´),/
(∘❛ั⌔❛ั∘)
(-̩̩̩-͡_--̩̩̩͡)
Uº :̲̅̅=̲̅̅o|̲̲̅̅=̲̅̅: ºU {GUAU!]
(｡◕ω◕｡)
STEVE JOBS 1984 (//O,,‿V,,O\\) ■ STEVE JOBS 2011 [o,,v,o] RIP
o(≧▽≦)o
〠_〠
ヽ(￣д￣;)ノ=3=3=3
º°˚˚°ºº°˚˚°º·♣·
.. ♡º°˚нåнåнåнå˚°º♡ ..
(´^ิω^ิ｀)
(□´´‿ □)
( ﾟ▽ﾟ)/ｺﾝﾊﾞﾝﾊ
ђέђέђέ
-·=»‡«=·-
»-(¯`v´¯)-»
☺☻ ♥ ♦ ♣ ♠ ♂ ♀ ♪ ♫ ☆ ☼ ☾ ۞ ✈ ๑ ۩ ₪ ∂
°º¤ø,¸¸,ø¤º°`°º¤ø,¸
(´⊙д⊙`)
( ☞ ・Д・)☞
(●´ω｀●)
(´･ω(´･ω･(´･ω･｀)･ω･｀)ω･｀)
¯\(°_o)/¯
☻☠ ☹
(↺o↻)
㋡ ξ ✃ ✎ ☭ ☠ ☂ ❀ ㋡ ✌ ♘ ☀ ✄ ♪ ♡ ❥ ♺ ☪ ✈ ㋡
(^_^)
ლ (´^ิ益^ิ｀ ) 癶
(癶;:゜;益;゜;)癶 ( ・ൠ・ )
˚•_•˚ ✌
.ʕʘ‿ʘʔ.✌ \ᇂ_ᇂ\
(♉ฺA♉ฺ) (☼Д☼) (❝ฺ_❝ฺ) (◉ฺ｡◉ฺ)
(◑◡◑) ˚⌇˚
(∘❛ั⌔❛ั∘)
☾˙❀‿❀˙☽
(ಠ皿ಠ)൬
• Resumiendo a mogollón:
(｡◕‿◕｡) (◕_◕) (◕‿◕) \(◕ ◡ ◕\) Σ ◕ ◡ ◕ (◕︵◕) (´◕ฺω◕ฺ｀) (◕ฺ∀◕ฺ) ┌∩┐(◕_◕)┌∩┐ ✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁ ✾◕‿◕✾ (°∀°) (• ε •) (●´ω｀●) ٩(•̮̮̃•̃)۶ ٩(●̮̮̃•̃)۶ ٩(͡๏̯͡๏)۶ ٩(͡๏̯ ͡๏)۶ ٩(͡๏̯͡๏)۶ ٩๏̯͡๏)۶ ٩๏̯͡๏۶ ﴾͡๏̯͡๏﴿ ๏̯͡๏﴿ ٩(-̮̮̃-̃)۶ ٩(-̮̮̃•̃)۶ ๏[-ิิ_•ิ]๏ ◔̯◔ ٩◔̯◔۶ ٩(×̯×)۶ ๏̯͡๏ (๏̯͡๏ ) ⊙▃⊙ טּ_טּ ಠ~ಠ ಠoಠ ਉ_ਉ ଘ_ଘ ✖_✖ ๏_๏ ◪_◪ ◮_◮ ◔_◔ ◎ܫ◎ ಠﭛಠ ⊙_ʘ (ʘ_ʘ) (ʘ‿ʘ) ♨_♨ ಠ_ಠ (✌ﾟ∀ﾟ)☞ ( ☞՞ਊ ՞)☞ ⨀_⨀ ⨂_⨂ (/◔ ◡ ◔)/ °ﺑ° (¬_¬) (´・ω・｀) (◣_◢) (☞ﾟ ∀ﾟ )☞ (☼_☼) ( ・∀・) @_@ ¬_¬ ¯\(º o)/¯ °ω° °Д° Ò,ó ŎםŎ Σ(ﾟДﾟ ) д_д ф_ф Ծ_Ծ இ_இ อ_อ อ้_อ้ ๏_๏ ๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎ ≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙０⊙ ╰☆╮ □_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕‿◕ ◕◡◕ ◪_◪ ◮_◮ ☆¸☆ ☻_☻ ♥◡♥ ヽ(´ｰ｀ )ﾉ 흫_흫 句_句 （゜Д゜） （ﾟ∀ﾟ） ｡◕‿‿◕｡ Ƹ̵̡Ӝ̵̨̄Ʒ ( °٢° ) σ_σ ㅎ_ㅎ ☜(⌒▽⌒)☞ (☞ﾟヮﾟ)☞ ☜(ﾟヮﾟ☜) ^ㅂ^ ヽ(ｏ`皿′ｏ)ﾉ (≧ロ≦) (ΘεΘ;) d(*⌒▽⌒*)b （ つ Д ｀） (￣ー￣) (ﾟ∀ﾟ) ‹(ᵒᴥᵒ )› Ꙩ_Ꙩ ꙩ_ꙩ ⨀_Ꙩ Ꙩ⌵Ꙩ בּ_בּ טּ_טּ לּ_לּ מּ_מּ סּ_סּ תּ_תּ כּ‗כּ ✌.|•͡˘‿•͡˘|.✌ {◕ ◡ ◕} (͡๏̯͡๏) ‹•.•› ⊛ठ̯⊛ 〴⋋_⋌〵 ‷̗ↂ凸ↂ‴̖ (ு८ு_ .:) ヽ(｀Д´)ﾉ (ಠ_ృ) סּ_סּ טּ_טּ ๏[-ิิ_•ิ]๏ בּ_בּ תּ_תּ ۞_۞ ๏_๏ ・_・ ಸ_ಸ ↁ_ↁ ⇎_⇎ 흫_흫 இ_இ Ծ_Ծ 〠_〠 ☹_☹ 〓D (°∀°) (• ε •) (●´ω｀●) ◖|◔◡◉|◗ (˚இ˚) ༺‿༻ ಠ , ಥ ª{•̃̾_•̃̾}ª ◃┆◉◡◉┆▷ ☼.☼ (☼◡☼) १✌◡✌५ (◜௰◝) १|˚–˚|५ โ๏௰๏ใ ื ◜㍕◝ ˚▱˚ (づ｡◕‿‿◕｡)づ ರ_ರ \˚ㄥ˚\ 《〠_〠》 ⊂•⊃_⊂•⊃ •✞_✞• ۹⌤_⌤۹ ╭✬⌢✬╮ ◖♪_♪|◗ ♀ح♀ヾ (०्०) !⑈ˆ~ˆ!⑈ •(⌚_⌚)• (▰˘◡˘▰) ۹ↁﮌↁ ح˚ᆺ˚ว ಠ.ಠ （´☣///_ゝ///☣｀） (◑◡◑) ˚⌇˚ ❐‿❑ (｡◕‿◕｡) ح˚௰˚づ ◉︵◉ ╚(•⌂•)╝ (◕^◕) 乂◜◬◝乂 q(❂‿❂)p (•‿•) <【☯】‿【☯】> ¿ⓧ_ⓧﮌ (-’๏_๏’-) ಠ╭╮ಠ ಠ_๏ ಠ◡ಠ ಥ◡ಥ ✌♫♪˙❤‿❤˙♫♪✌ ☼.☼ ♥╭╮♥ ☾˙❀‿❀˙☽ ☜-(ΘLΘ)-☞ ⊂(◉‿◉)つ أ‿أ 【•】_【•】 ⋋ō_ō` ►_◄ ♡+♡=❤² ペ㍕˚\ (╬ ಠ益ಠ) ☁ ☝ˆ~ˆ☂ ó‿ó (>'o')> ♥ <('o'<) ¢‿¢ ＿☆（ ´_⊃｀）☆＿ ôヮô ◘_◘ ◙‿◙ δﺡό ☜ق❂Ⴢ❂ق☞ ☮▁▂▃▄☾ ♛ ◡ ♛ ☽▄▃▂▁☮ •ﺑ• حᇂﮌᇂ) ✄---------❤ ˚•_•˚ ✌.ʕʘ‿ʘʔ.✌ \ᇂ_ᇂ\ ŏﺡó ‹›‹(•¿•)›‹› I♥you ٩(*❛⊰❛)۶Ⴛ̅̀ (๑✧◡✧๑) (U •́ .̫ •̀ U) ヽ(❀・♉ฺ･｀)ﾉ ♬♩♫♪☻(๑❛౪❛๑)☺♪♫♩♬ (´^ิ౪＾ิ) ( ´;ﾟ;ё;ﾟ;) ლ(❤ʚ❤ლ) (◉◞౪◟◉｀) ( ´థ,_‥థ｀)b ( ´థ౪థ）σ'`ﾞヵ ⊜‿⊜✴ (ಠ皿ಠ)൬ (・皿・)ว ｫ'`(゜･･_,゜*)ﾉｮｩ★ ガ━(;Ⅲ□Ⅲ;)━ン!! ლ(^ʚ^ლ) ♡￫ܫ￩♡ (✪ฺД✪ฺ) (♉ฺA♉ฺ) (☼Д☼) (❝ฺ_❝ฺ) (◉ฺ｡◉ฺ) (☉∀☉) (Θ﹎Θ) ∪◉ω◉∪ ♬ Happy Birthday (^₃^)₌₃♕ ჰ❛‿❛ჴHello❤ (﹂︹﹂ა) (◜﹏◝) (＇益＇)ノ (´＾ิ益＾ิ｀)ノ (A＇益＇*） ( *´^ิ益^ิ｀*)ﾆﾀｧ (( ´^ิ益^ิ`)ｸｸ… (ｏ▼皿▼) (۞益۞)ノ ヘ(▼┏益┓▼*) (▼益▼）ノ (メ▼益▼*） |||＾ิ益||| ┏( '=ิ益=ิ｀)てへへ (๑థิ益థิ) (థิ益థิ)ノ (๑≖ิิ益≖ิ๑) (╬♛. 益♛. ) (ฺ๑☣ฺ౪☣ฺ๑) (*۞，_ゝ۞) (థฺˇ౪ˇథ) ヘ(・┏益┓・*) (*థิ┏益┓థิ)ノ (●థิＣ_，థิ●) (´=ิ益=ิ｀) ( * ・ 益 ・） (メФ益Ф*) (；；ళ益ళ*) (メಈ益ಈ） (´＾ิ┏益┓＾ิ｀) (*Ф┏益┓Ф)ノ ( :; ´^;ิ益;^ิ;.) ( ･ิ,_ゝ･ิ)ﾌﾟｯ (δﾟ）!! (◞≼◉ื≽◟ ;益;◞≼◉ื≽◟) （ლ ^ิ౪^ิ）ლ (´^ิ益^ิ｀ ) 癶(癶;:゜;益;゜;)癶 ( ・ൠ・ ) ლ（இ e இ｀。ლ） (◞≼◎≽◟◞౪◟◞≼◎≽◟) (◞≼ ⌒ ≽◟◞౪◟◞≼ ⌒ ≽◟) (☄ฺ♛ฺ3♛ฺ) （´◉◞౪◟◉) ( ･ิω･ิ) (╯⊙ ⊱ ⊙╰ ) (́◉◞౪◟◉) ☜(:♛ฺ;益;♛ฺ;)☞ (◞≼●≽◟◞౪◟◞≼●≽◟) （。 ☣ฺ⋌⋚⋛⋋☣ฺ。） (╬ಠิ益ಠิ) （´≝◞⊖◟≝｀) （´☣౪☣) <⇋⇋⇋⋛∰≓⊂(⌒,_ゝ⌒)⊃≓∰⋛⇋⇋⇋> (╬⓪益⓪) 爻((╬ಠิ益ಠิ)) ( ╬◣ 益◢）y━･~ （╬ಠ益ಠ)ｺﾞﾙァ!! (╬ﾟ◥益◤ﾟ) ಠ益ಠ 〠_〠 •✞_✞• （ ´☣///_ゝ///☣｀） ◉︵◉ ☜-(ΘLΘ)-☞ ☁ ☝ˆ~ˆ☂ ✌.ʕʘ‿ʘʔ.✌ ☜Ҩↂ⼼ↂҨ☞ ლↂ‿‿ↂლ (☝΄◞ิ◟ิ‵)☝ ( ◜◡＾)っ✂╰⋃╯ ‘ ‘ • ♫♫♫*♥*♫♫♫• * ‘ ‘ (> ” ” <) ( =’o'= ) -(,,)-(,,)- [̲̅$̲̅(̲̅2οο̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅ιοο̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅5̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅1̲̅)̲̅$̲̅] ஜ۩۞۩ஜ ▂ ▃ ▅ ▆ █ █ ▆ ▅ ▃ ▂ ★·.·´¯`·.·★ ..♩.¸¸♬´¯`♬.¸¸ ¸¸.♬´¯`♬¸¸.♩.. ¤♥¤Oº°‘¨☜♥☞¤ ¤☜♥☞¨‘°ºO¤♥¤ ๑۞๑,¸¸,ø¤º°`°๑۩ ۩๑ ,¸¸,ø¤º°`°๑۞๑ °º¤ø,¸¸,ø¤º°`°º¤ø,¸ °º¤ø,¸¸,ø¤º°`°º¤ø,¸ -*’^'~*-.,_,.-*~ ~*-.,_,.-*~’^'*-, .•¯(_.•¯(_.•¯(_ _)¯`•._)¯`•._)¯`•. ©º°°º© ─────█████████════█
■ Puede interesarte:
► Actualización 11/10/2011
(⊙⊙)
(>_<� ) (� >_<)
ː̖́(" `з´),/
(∘❛ั⌔❛ั∘)
(-̩̩̩-͡_--̩̩̩͡)
Uº :̲̅̅=̲̅̅o|̲̲̅̅=̲̅̅: ºU {GUAU!]
(｡◕ω◕｡)
STEVE JOBS 1984 (//O,,‿V,,O\\) ■ STEVE JOBS 2011 [o,,v,o] RIP
o(≧▽≦)o
〠_〠
ヽ(￣д￣;)ノ=3=3=3
º°˚˚°ºº°˚˚°º·♣·
.. ♡º°˚нåнåнåнå˚°º♡ ..
(´^ิω^ิ｀)
(□´´‿ □)
( ﾟ▽ﾟ)/ｺﾝﾊﾞﾝﾊ
ђέђέђέ
-·=»‡«=·-
»-(¯`v´¯)-»
☺☻ ♥ ♦ ♣ ♠ ♂ ♀ ♪ ♫ ☆ ☼ ☾ ۞ ✈ ๑ ۩ ₪ ∂
°º¤ø,¸¸,ø¤º°`°º¤ø,¸
(´⊙д⊙`)
( ☞ ・Д・)☞
(●´ω｀●)
(´･ω(´･ω･(´･ω･｀)･ω･｀)ω･｀)
¯\(°_o)/¯
☻☠ ☹
(↺o↻)
㋡ ξ ✃ ✎ ☭ ☠ ☂ ❀ ㋡ ✌ ♘ ☀ ✄ ♪ ♡ ❥ ♺ ☪ ✈ ㋡
(^_^)
ლ (´^ิ益^ิ｀ ) 癶
(癶;:゜;益;゜;)癶 ( ・ൠ・ )
˚•_•˚ ✌
.ʕʘ‿ʘʔ.✌ \ᇂ_ᇂ\
(♉ฺA♉ฺ) (☼Д☼) (❝ฺ_❝ฺ) (◉ฺ｡◉ฺ)
(◑◡◑) ˚⌇˚
(∘❛ั⌔❛ั∘)
☾˙❀‿❀˙☽
(ಠ皿ಠ)൬
• Resumiendo a mogollón:
(｡◕‿◕｡) (◕_◕) (◕‿◕) \(◕ ◡ ◕\) Σ ◕ ◡ ◕ (◕︵◕) (´◕ฺω◕ฺ｀) (◕ฺ∀◕ฺ) ┌∩┐(◕_◕)┌∩┐ ✿◕‿◕✿ ❀◕‿◕❀ ❁◕‿◕❁ ✾◕‿◕✾ (°∀°) (• ε •) (●´ω｀●) ٩(•̮̮̃•̃)۶ ٩(●̮̮̃•̃)۶ ٩(͡๏̯͡๏)۶ ٩(͡๏̯ ͡๏)۶ ٩(͡๏̯͡๏)۶ ٩๏̯͡๏)۶ ٩๏̯͡๏۶ ﴾͡๏̯͡๏﴿ ๏̯͡๏﴿ ٩(-̮̮̃-̃)۶ ٩(-̮̮̃•̃)۶ ๏[-ิิ_•ิ]๏ ◔̯◔ ٩◔̯◔۶ ٩(×̯×)۶ ๏̯͡๏ (๏̯͡๏ ) ⊙▃⊙ טּ_טּ ಠ~ಠ ಠoಠ ਉ_ਉ ଘ_ଘ ✖_✖ ๏_๏ ◪_◪ ◮_◮ ◔_◔ ◎ܫ◎ ಠﭛಠ ⊙_ʘ (ʘ_ʘ) (ʘ‿ʘ) ♨_♨ ಠ_ಠ (✌ﾟ∀ﾟ)☞ ( ☞՞ਊ ՞)☞ ⨀_⨀ ⨂_⨂ (/◔ ◡ ◔)/ °ﺑ° (¬_¬) (´・ω・｀) (◣_◢) (☞ﾟ ∀ﾟ )☞ (☼_☼) ( ・∀・) @_@ ¬_¬ ¯\(º o)/¯ °ω° °Д° Ò,ó ŎםŎ Σ(ﾟДﾟ ) д_д ф_ф Ծ_Ծ இ_இ อ_อ อ้_อ้ ๏_๏ ๏̯͡๏ •▱• ↁ_ↁ ⇎_⇎ ≧ヮ≦ ⊙ω⊙ ⊙▂⊙ ⊙△⊙ ⊙︿⊙ ʘ‿ʘ ⊙﹏⊙ ⊙０⊙ ╰☆╮ □_□ ◉_◉ ◉△◉ ○_○ ◔_◔ ◔ᴗ◔ ◕‿◕ ◕◡◕ ◪_◪ ◮_◮ ☆¸☆ ☻_☻ ♥◡♥ ヽ(´ｰ｀ )ﾉ 흫_흫 句_句 （゜Д゜） （ﾟ∀ﾟ） ｡◕‿‿◕｡ Ƹ̵̡Ӝ̵̨̄Ʒ ( °٢° ) σ_σ ㅎ_ㅎ ☜(⌒▽⌒)☞ (☞ﾟヮﾟ)☞ ☜(ﾟヮﾟ☜) ^ㅂ^ ヽ(ｏ`皿′ｏ)ﾉ (≧ロ≦) (ΘεΘ;) d(*⌒▽⌒*)b （ つ Д ｀） (￣ー￣) (ﾟ∀ﾟ) ‹(ᵒᴥᵒ )› Ꙩ_Ꙩ ꙩ_ꙩ ⨀_Ꙩ Ꙩ⌵Ꙩ בּ_בּ טּ_טּ לּ_לּ מּ_מּ סּ_סּ תּ_תּ כּ‗כּ ✌.|•͡˘‿•͡˘|.✌ {◕ ◡ ◕} (͡๏̯͡๏) ‹•.•› ⊛ठ̯⊛ 〴⋋_⋌〵 ‷̗ↂ凸ↂ‴̖ (ு८ு_ .:) ヽ(｀Д´)ﾉ (ಠ_ృ) סּ_סּ טּ_טּ ๏[-ิิ_•ิ]๏ בּ_בּ תּ_תּ ۞_۞ ๏_๏ ・_・ ಸ_ಸ ↁ_ↁ ⇎_⇎ 흫_흫 இ_இ Ծ_Ծ 〠_〠 ☹_☹ 〓D (°∀°) (• ε •) (●´ω｀●) ◖|◔◡◉|◗ (˚இ˚) ༺‿༻ ಠ , ಥ ª{•̃̾_•̃̾}ª ◃┆◉◡◉┆▷ ☼.☼ (☼◡☼) १✌◡✌५ (◜௰◝) १|˚–˚|५ โ๏௰๏ใ ื ◜㍕◝ ˚▱˚ (づ｡◕‿‿◕｡)づ ರ_ರ \˚ㄥ˚\ 《〠_〠》 ⊂•⊃_⊂•⊃ •✞_✞• ۹⌤_⌤۹ ╭✬⌢✬╮ ◖♪_♪|◗ ♀ح♀ヾ (०्०) !⑈ˆ~ˆ!⑈ •(⌚_⌚)• (▰˘◡˘▰) ۹ↁﮌↁ ح˚ᆺ˚ว ಠ.ಠ （´☣///_ゝ///☣｀） (◑◡◑) ˚⌇˚ ❐‿❑ (｡◕‿◕｡) ح˚௰˚づ ◉︵◉ ╚(•⌂•)╝ (◕^◕) 乂◜◬◝乂 q(❂‿❂)p (•‿•) <【☯】‿【☯】> ¿ⓧ_ⓧﮌ (-’๏_๏’-) ಠ╭╮ಠ ಠ_๏ ಠ◡ಠ ಥ◡ಥ ✌♫♪˙❤‿❤˙♫♪✌ ☼.☼ ♥╭╮♥ ☾˙❀‿❀˙☽ ☜-(ΘLΘ)-☞ ⊂(◉‿◉)つ أ‿أ 【•】_【•】 ⋋ō_ō` ►_◄ ♡+♡=❤² ペ㍕˚\ (╬ ಠ益ಠ) ☁ ☝ˆ~ˆ☂ ó‿ó (>'o')> ♥ <('o'<) ¢‿¢ ＿☆（ ´_⊃｀）☆＿ ôヮô ◘_◘ ◙‿◙ δﺡό ☜ق❂Ⴢ❂ق☞ ☮▁▂▃▄☾ ♛ ◡ ♛ ☽▄▃▂▁☮ •ﺑ• حᇂﮌᇂ) ✄---------❤ ˚•_•˚ ✌.ʕʘ‿ʘʔ.✌ \ᇂ_ᇂ\ ŏﺡó ‹›‹(•¿•)›‹› I♥you ٩(*❛⊰❛)۶Ⴛ̅̀ (๑✧◡✧๑) (U •́ .̫ •̀ U) ヽ(❀・♉ฺ･｀)ﾉ ♬♩♫♪☻(๑❛౪❛๑)☺♪♫♩♬ (´^ิ౪＾ิ) ( ´;ﾟ;ё;ﾟ;) ლ(❤ʚ❤ლ) (◉◞౪◟◉｀) ( ´థ,_‥థ｀)b ( ´థ౪థ）σ'`ﾞヵ ⊜‿⊜✴ (ಠ皿ಠ)൬ (・皿・)ว ｫ'`(゜･･_,゜*)ﾉｮｩ★ ガ━(;Ⅲ□Ⅲ;)━ン!! ლ(^ʚ^ლ) ♡￫ܫ￩♡ (✪ฺД✪ฺ) (♉ฺA♉ฺ) (☼Д☼) (❝ฺ_❝ฺ) (◉ฺ｡◉ฺ) (☉∀☉) (Θ﹎Θ) ∪◉ω◉∪ ♬ Happy Birthday (^₃^)₌₃♕ ჰ❛‿❛ჴHello❤ (﹂︹﹂ა) (◜﹏◝) (＇益＇)ノ (´＾ิ益＾ิ｀)ノ (A＇益＇*） ( *´^ิ益^ิ｀*)ﾆﾀｧ (( ´^ิ益^ิ`)ｸｸ… (ｏ▼皿▼) (۞益۞)ノ ヘ(▼┏益┓▼*) (▼益▼）ノ (メ▼益▼*） |||＾ิ益||| ┏( '=ิ益=ิ｀)てへへ (๑థิ益థิ) (థิ益థิ)ノ (๑≖ิิ益≖ิ๑) (╬♛. 益♛. ) (ฺ๑☣ฺ౪☣ฺ๑) (*۞，_ゝ۞) (థฺˇ౪ˇథ) ヘ(・┏益┓・*) (*థิ┏益┓థิ)ノ (●థิＣ_，థิ●) (´=ิ益=ิ｀) ( * ・ 益 ・） (メФ益Ф*) (；；ళ益ళ*) (メಈ益ಈ） (´＾ิ┏益┓＾ิ｀) (*Ф┏益┓Ф)ノ ( :; ´^;ิ益;^ิ;.) ( ･ิ,_ゝ･ิ)ﾌﾟｯ (δﾟ）!! (◞≼◉ื≽◟ ;益;◞≼◉ื≽◟) （ლ ^ิ౪^ิ）ლ (´^ิ益^ิ｀ ) 癶(癶;:゜;益;゜;)癶 ( ・ൠ・ ) ლ（இ e இ｀。ლ） (◞≼◎≽◟◞౪◟◞≼◎≽◟) (◞≼ ⌒ ≽◟◞౪◟◞≼ ⌒ ≽◟) (☄ฺ♛ฺ3♛ฺ) （´◉◞౪◟◉) ( ･ิω･ิ) (╯⊙ ⊱ ⊙╰ ) (́◉◞౪◟◉) ☜(:♛ฺ;益;♛ฺ;)☞ (◞≼●≽◟◞౪◟◞≼●≽◟) （。 ☣ฺ⋌⋚⋛⋋☣ฺ。） (╬ಠิ益ಠิ) （´≝◞⊖◟≝｀) （´☣౪☣) <⇋⇋⇋⋛∰≓⊂(⌒,_ゝ⌒)⊃≓∰⋛⇋⇋⇋> (╬⓪益⓪) 爻((╬ಠิ益ಠิ)) ( ╬◣ 益◢）y━･~ （╬ಠ益ಠ)ｺﾞﾙァ!! (╬ﾟ◥益◤ﾟ) ಠ益ಠ 〠_〠 •✞_✞• （ ´☣///_ゝ///☣｀） ◉︵◉ ☜-(ΘLΘ)-☞ ☁ ☝ˆ~ˆ☂ ✌.ʕʘ‿ʘʔ.✌ ☜Ҩↂ⼼ↂҨ☞ ლↂ‿‿ↂლ (☝΄◞ิ◟ิ‵)☝ ( ◜◡＾)っ✂╰⋃╯ ‘ ‘ • ♫♫♫*♥*♫♫♫• * ‘ ‘ (> ” ” <) ( =’o'= ) -(,,)-(,,)- [̲̅$̲̅(̲̅2οο̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅ιοο̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅5̲̅)̲̅$̲̅] [̲̅$̲̅(̲̅1̲̅)̲̅$̲̅] ஜ۩۞۩ஜ ▂ ▃ ▅ ▆ █ █ ▆ ▅ ▃ ▂ ★·.·´¯`·.·★ ..♩.¸¸♬´¯`♬.¸¸ ¸¸.♬´¯`♬¸¸.♩.. ¤♥¤Oº°‘¨☜♥☞¤ ¤☜♥☞¨‘°ºO¤♥¤ ๑۞๑,¸¸,ø¤º°`°๑۩ ۩๑ ,¸¸,ø¤º°`°๑۞๑ °º¤ø,¸¸,ø¤º°`°º¤ø,¸ °º¤ø,¸¸,ø¤º°`°º¤ø,¸ -*’^'~*-.,_,.-*~ ~*-.,_,.-*~’^'*-, .•¯(_.•¯(_.•¯(_ _)¯`•._)¯`•._)¯`•. ©º°°º© ─────█████████════█
■ Puede interesarte:
Caras y emoticones gráficos para Twitter por Javier Tascon |
||
| ⇓ |
Encontré en Twitter a @javiertascon que entre muchas más cosas es uno de los impulsores de la #twittergrafia. Si miran su perfil verán que está conectado con el "last" grito.
Me paseé por sus twitts entusiasmada y encontré maravillas como:
ღ(•‿¨ ͡● ) [Ġя@¢¡A§]
,,,(◠‿*),,۶,,,¨´¨´ .٩,(< ‿<),,,, CHAPOTEO
ξζ º¨,,-,,¨¨º ζξ ۶´¨´*¨◯ [ ╧ ] 〓 GO SPAIN !
(^◣_◢] ▬彡 ᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀ ᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀ ᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀᷀ WOLVERINE - LOBEZNO
(ﺏ _ﺒ)᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁ Echando Humo
(｡ﾝ､)_zzZZ...
(º☝º) ☞(º_º)☜ (▀_▀)
(ºµº) MOQUILLO
__________________,,,^._.^,,,__________________
(ರ"灬 ರ") ABUELO
¾ de lo =
*(↷_↶)* ¨(๖ ‿ ๖)¨ ( ͡๏_>͡๏ )*·~-.¸
(◐_◑) ESTRÁBICO ░ (◑_◐) BIZCO ░ ☁(◐_⊙)☁ TRUEBA ░ (=_=) MIOPE
VAMOS RAFA NADAL !!! >[ ̿~_̿ ̿-̿ ]┘*·~-.¸¸,.-~*
(♌º] Emoticón picassiano.
≤≥≤≥≤≥■■■≤≥≤≥≤≥
╤╤╤╤╤╤╤╤ ‿‿‿‿‿☀‿‿‿‿ ╤╤╤╤╤╤╤╤
=(_=)_==)=_=))_=)-_=)- _o) LEVÁNTATE DE UNA VEZ!! }٩(º︷º)۶
(⊕‿ ⊕) ░POSITIVO░ (Θ﹏Θ) ░NEGATIVO░ (⊕_Θ) ░NEUTRO░
(☄‿☄) PESTAÑAS
☠★* (c ◣_◢) PEPE y MARCELO §§⊙‿⊙§§ *★☠»
(c ◣_◢) PEPE ▒ (◎_◎) OZIL ▒ §§⊙‿⊙§§ MARCELO ▒ ( •´¨‿¨`•) VILLA ▒ ξξ⌒_⌒ξξ PUYOL ▒ (✴_º) PITO TITO VILANOVA
|-------m_ε[-ิ_ิ]_m---------|
(>_º つ❊﹏º) Mou y " Pito Vilanova o como se llame "
⌒(º_º)⌒(º_º)⌒⌒(º_º)⌒⌒(º_º)⌒ multitud
☼ ,.-~*`((☀﹏☀))´`*·~-.¸ INSOLACIÓN
(◑[_][_][_][_][_][_])-O(*_=) 【ZAS】AGRESIÓN POLICIAL
(ศ__ศ) ºoO (MELANCOLÍA)
┣┓╔════╗┏┫MESA PARA DOS
ε[-ิ-ิ] {√²≌∞¹ø≡¼±³} MATEMÁTICO
(⌒V⌒) [MAMÁ } >(º) <(º) <(º)
^(ૈv ૈ)^ LECHUZA
//(๔ ..๕) → →→ → ❤ (◐´..`◐=) ROMANCE
(⊙◢◣⊙) Bigotillo
`"¹l(⊙﹏⊙)il¹"` REPELÚSSSS
,.-~*( )彡*_*)\\ ♥
√v^√v^√√v^√v^√♥ (◎﹏◎) IBEX 35
Tic [(◐_◐)] Tac [(◑_◑)] Tic [(ô_ô)] Tac...NOCHE DE INSOMNIO
✌(~¨-)✌ 〓GOOOOL〓
╚═(⊙__⊙)═╝ SAN FERMÍN ╚═(⊙__⊙)═╝
(-©_©)☞ ☀`·.¸.:
¨(•̪●)´¨C¨A¨L¨O¨R
◥'~,.,~'◤ Conde Drácula
(º︻º) con mostacho
(б_⊙) Con monóculo
٩͡[๏̯͡๏]۶
ε[-ิิ]۰ • ● {�] DUDAS
ε\__/ *CAFÉ* \__/3
,.-~*'¨¯¨'*·~-.,.,[SOS}٩(͡๏̯͡๏)۶-~*'¨¯¨'*·~-.,.-~*'¨¯¨'*·~-.,.-~*'¨¯¨'*·~-
ღ☁(©‿©)☁ ☞-~*'¨¯¨'[♣] [♠] [♥] [♦],´TACHÁNNNN '¨¯¨* Juan Tamariz
Evolución de emoticón: (~‿~) Risueño ░ (º‿~) Guiño amable ░ (º_~) Algo en el ojo ░ (~_~) Cegado por el sol ░
(º‿ º) (º‿~)ºoO (REFLEXIÓN COLECTIVA)
Ooº(~‿º) (º‿ º) [~_-]ºoO ( REFLEXIÓN )
(=^.^=)
(̅_̅_̅(̅_̅_̅_̅_̅_̅_̅_̅̅()᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁᷁ Ahumando el timeline
Cuando el Ψ╰(◥ ◤)╯no tiene nada que hacer ... tuitea
(⊙_✖)
(c º} < Tuitéame!) (!Unfollowme> {* )))
(c ◣_◢) PEPE y COENTRAO ‿[-///_-]
(º╒╝╚╕º) ( º︻º ) (º↶↷º) (º⇔º) MOSTACHOS
^(Ⓞ=o=Ⓞ)^ LEMUR
( >_>) ⇄ (➢L➢) Miradas que matan
(◐_◑) ESTRÁBICO ░ (◑_◐) BIZCO ░ ☁(◐_⊙)☁ TRUEBA ░ (=_=) MIOPE
Prácticas molestas en Twitter ▒ ☞=_<) ▒ c(º _ *)C☜ ▒ ( *☝º )
‿‿‿‿‿‿‿ قققققققققققققفقف ‿‿‿‿‿‿‿ PATERAS
(~_◑ o=(_)̅m__̅_̅_̅_̅_̅_̅(_) ✩ * ☾.*•. TELESCOPIO
ε[-ิิ]۰ • ● {�] DUDAS
(☞,,回ヮ,,回)☞ {BATALLA A DEDAZOS} ☜(´,,ζ,`,☜)
┌[ ̿~_̿ ̿-̿ ]┘*·~-.¸¸,.-~* O
[Nada aquí}<(ºoº<)....(>ºoº)> {Nada allá]... [Y mi voto, dónde irá?} (ºoº)>✉
[=I=] Libro ⊙CD 【TV】
Mirando (^__ ಿ) ... por el rabillo del ojo.
(*)> Tuitea que algo queda
(c º} < Llevo tu nombre tuiteado @♥) (!Unfollowme> {* ))
[c-O} ---·~-.<(⊙ _ ⊙)>.-~*'¨¯
(c º} ---((♥‿ ♥))-->>
٩(͡๏̯͡๏)۶█¯▒ ALLEZ PARIS!!
(c º} < Tuitéame!) (!Unfollowme> {* )))
__/ (c º)⋌〵__ CONDUCIENDO
( •´¨‿¨`•)
(↷_↷)(↷_↷) ‿‿‿☄‿‿‿ (↶_↶)(↶_↶)
(｡◕‿◕｡)
╒╒╒(º___º)╕╕╕
La verdad, el muchacho es estupendo y coloca una sonrisa en tu vida. ¡Suerte!
■ Puede interesarte:
• Emoticones japoneses o smilyes (caritas en el texto) estándar
• Combinación teclas Alt + Ctrl + más comunes.
Ocultar datos en blog con botón abrir / cerrar |
||
| ⇓ |
Mediante un sencillo botón se puede ahorrar espacio en una entrada. Con este truco es posible esconder información (texto, imagen, link, código) o simplemente hacer visualmente una entrada más simple.
En este caso este tipo de códigos son factibles en cualquier otra parte del blog como la sidebar, footer,...
El que uso tiene la fórmula:
Aquí va el texto, imagen, link, código a esconder...¿ok?
- Tanto ABRIR - VER - CERRAR pueden sustituirse por otro conjunto de palabras
- margin es la distancia al borde la entrada.
- width es el ancho del botón. Si colocas un texto largo en el botón habrá que aumentar su número en px.
- font-size: Tamaño de la fuente del texto.
- font-family: trebuchet ms u otras es el tipo de fuente del texto.
- background-color: color del fondo del botón.
- color: color de la fuente del texto.
- border: bordes y tipos.
Apuntes...
Ventana o scrollbar en entrada para ahorrar espacio |
||
| ⇓ |
Un viejo truco es colocar una ventana (scrollbar) para aquellas entradas que son muy largas. Ahora se aplica el truco "Leer más" pero también tiene sus "pros y contras".
Se puede colocar texto, imágenes, enlaces de forma que queda un efecto deslizante en forma de ventana que ocupa unas dimensiones específicas; sólo se trata de acortar la longitud de la entrada....Para colocar el código basta con ir a la pestaña Edición de HTML en la zona del redactado de la entrada y allí anotarlo.
Es factible escribir directamente dentro del cuadro, basta con pinchar dos veces en su interior.
*Lo positivo es que el siguiente código se puede pegar en una entrada sin tocar la fastidiosa plantilla.
El colapso de Argentina dio lugar a la suspensión de pagos más grande de la historia.
Los expertos están de acuerdo en que éste es sólo el último de una serie de salvamentos encabezados por el FMI que despilfarraron miles de millones de dólares y no lograron salvar a las economías que pretendían ayudar. La naturaleza de ese fracaso, sin embargo, está todavía en discusión. Algunos argumentan que el FMI fue demasiado indulgente; otros, que fue demasiado severo.
Aquellos que culpan al FMI ven el problema como provocado por el propio gasto de Argentina, despilfarrador y corrupto. Estos intentos de culpabilización están equivocados: uno puede entender la suspensión de pagos como consecuencia de los errores económicos cometidos durante toda una década. Entender qué fue lo que salió mal nos brinda importantes lecciones para el futuro.
Los problemas empezaron con la hiperinflación de la década de los ochenta. Para reducir la inflación hacía falta cambiar las expectativas; 'anclar' la moneda al dólar suponía lograr eso. Fue un retorno a una variante del viejo argumento del patrón oro. Si la inflación continuaba, el tipo de cambio real del país se apreciaría, la demanda de sus exportaciones caería, el desempleo se incrementaría y eso moderaría las presiones de los salarios y los precios. Los agentes del mercado, sabiendo eso, se darían cuenta de que la inflación no se mantendría. Siempre y cuando el compromiso con el sistema cambiario fuera creíble, lo sería también el compromiso para detener la inflación.
Si las expectativas inflacionarias cambiasen, podría lograrse reducir la inflación sin un costoso desempleo. Esta receta funcionó durante un tiempo en algunos países, pero era arriesgada, como se mostraría en Argentina.
El FMI fomentó el uso de este sistema cambiario. Ahora es menos entusiasta, aunque es Argentina quien está pagando el precio, y no el FMI. La fijación por ley de la paridad uno a uno entre el peso y el dólar redujo la inflación, pero no promovió un crecimiento sostenido. Se debió alentar a Argentina para que estableciera un sistema cambiario más flexible o, por lo menos, un tipo de cambio que reflejara más los patrones comerciales del país.
También hubo otros errores en el programa de 'reforma' de Argentina. Se alabó a ese país por permitir que los bancos fueran en gran parte propiedad de extranjeros. Por un tiempo esto creó un sistema bancario aparentemente más estable, pero este sistema fracasó en la ayuda a las pequeñas y medianas empresas. Después del impetuoso crecimiento que llegó con el fin de la hiperinflación, éste se redujo, en parte porque las empresas en el país no pudieron obtener una financiación adecuada. El Gobierno argentino reconoció el problema, pero fue golpeado por numerosos contratiempos fuera de su control antes de que pudiera hacer algo al respecto.
La crisis de Asia Oriental de 1997 le supuso el primer golpe. En parte debido al mal manejo del FMI, aquélla se volvió una crisis financiera global, incrementando los tipos de interés para todos los mercados emergentes, incluyendo el de Argentina. El sistema cambiario de ese país sobrevivió, pero a un precio muy alto: la aparición de un porcentaje de desempleo de dos dígitos.
Pronto, los altos tipos de interés desbordaron el presupuesto del país. Pero aun así, la relación deuda-PIB de Argentina -incluso cuando el país empezó a colapsarse- permaneció en un nivel moderado, cerca de 45%, más bajo que la de Japón. Pero con tipos de interés de 20%, el 9% del PIB del país se gastaría anualmente en financiar la deuda. El Gobierno buscó la austeridad fiscal, pero no lo suficiente como para compensar los caprichos del mercado.
La crisis financiera global que se dio después de la de Asia Oriental provocó una serie de grandes ajustes en los tipos de cambio. El valor del dólar, al que estaba atado el peso argentino, se incrementó fuertemente. Entre tanto, el vecino de Argentina y socio comercial del Mercosur, Brasil, depreció su moneda; algunos dicen que fue significativamente subvaluada. Los salarios y los precios cayeron, pero no lo suficiente como para permitir que Argentina compitiera de manera efectiva, en especial porque muchos de los productos agrícolas -que constituyen la ventaja comparativa natural de ese país- se enfrentaron con altas barreras para entrar a los mercados de los países ricos.
Apenas se había recuperado el mundo de la crisis financiera de 1997-1998, se deslizó hacia la desaceleración global del 2000/2001 begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting empeorando la situación de Argentina. Aquí fue donde el FMI cometió su error fatal; apoyó una política fiscal restrictiva, la misma equivocación que cometió en Asia Oriental, y con las mismas desastrosas consecuencias.
Se suponía que la austeridad fiscal iba a restaurar la confianza. Pero las cifras del programa del FMI eran ficticias; cualquier economista podía haber predicho que las políticas de ajuste del gasto incitan a la recesión y que los objetivos presupuestarios no serían alcanzados. No hace falta decir que el programa del FMI no alcanzó sus metas. Rara vez se recupera la confianza cuando una economía cae en una profunda recesión y en un porcentaje de desempleo de dos dígitos.
Quizá un dictador militar, como Pinochet en Chile, podría suprimir los disturbios sociales y políticos que surgen en tales condiciones. Pero en la democracia argentina eso fue imposible. En varias visitas que realicé a Argentina, me sorprendí del largo tiempo que llevaban sufriendo sus habitantes; a mí no me resulta tan sorprendente que los alborotos callejeros hayan destituido al presidente de Argentina como que esos disturbios hayan tardado tanto tiempo en producirse.
Hay siete lecciones que deben extraerse ahora de este proceso:
1. En un mundo de tipos cambiarios volátiles, fijar una moneda a otra como el dólar es muy arriesgado. Hace años que se debía haber aconsejado a Argentina que abandonara ese sistema cambiario.
2. La globalización expone a un país a enormes sacudidas. Las naciones deben enfrentarse a esas sacudidas. Los ajustes de los tipos de cambio forman parte del mecanismo de globalización.
3. Ignorar los contextos social y político se vuelve un peligro en perjuicio propio. Cualquier gobierno que aplica políticas que dejan a grandes sectores de la población desempleados o subempleados no está cumpliendo su misión primaria.
4. Centrarse exclusivamente en la inflación -sin prestar atención al desempleo o al crecimiento- es arriesgado.
5. El crecimiento requiere de instituciones financieras que brinden créditos a las empresas nacionales. Vender los bancos a extranjeros, sin crear las salvaguardas apropiadas, puede impedir el crecimiento y la estabilidad.
6. Raramente se restablece la fortaleza -o la confianza- económica con políticas que conducen a la economía de un país a una profunda recesión. El Fondo Monetario Internacional es el gran culpable por haber insistido en políticas restrictivas.
7. Hacen falta mejores métodos para afrontar situaciones similares a la de Argentina. Ése fue mi argumento durante la crisis de Asia Oriental; el FMI afirmó lo contrario, optando por su estrategia de gran salvamento. Ahora el FMI reconoce tardíamente que debería explorar otras alternativas.
El FMI intentará por todos los medios desviar la culpa: habrá acusaciones de corrupción y se dirá que Argentina no adoptó las medidas necesarias. Por supuesto, el país necesitaba llevar a cabo otras reformas, pero seguir el consejo del FMI de aplicar políticas de ajuste del gasto sólo empeoró las cosas. La crisis de Argentina debería recordarnos la apremiante necesidad de reformar el sistema financiero global, y por donde debemos empezar es por una profunda reforma del FMI.
El colapso de Argentina dio lugar a la suspensión de pagos más grande de la historia.
Los expertos están de acuerdo en que éste es sólo el último de una serie de salvamentos encabezados por el FMI que despilfarraron miles de millones de dólares y no lograron salvar a las economías que pretendían ayudar. La naturaleza de ese fracaso, sin embargo, está todavía en discusión. Algunos argumentan que el FMI fue demasiado indulgente; otros, que fue demasiado severo.
Aquellos que culpan al FMI ven el problema como provocado por el propio gasto de Argentina, despilfarrador y corrupto. Estos intentos de culpabilización están equivocados: uno puede entender la suspensión de pagos como consecuencia de los errores económicos cometidos durante toda una década. Entender qué fue lo que salió mal nos brinda importantes lecciones para el futuro.
Los problemas empezaron con la hiperinflación de la década de los ochenta. Para reducir la inflación hacía falta cambiar las expectativas; 'anclar' la moneda al dólar suponía lograr eso. Fue un retorno a una variante del viejo argumento del patrón oro. Si la inflación continuaba, el tipo de cambio real del país se apreciaría, la demanda de sus exportaciones caería, el desempleo se incrementaría y eso moderaría las presiones de los salarios y los precios. Los agentes del mercado, sabiendo eso, se darían cuenta de que la inflación no se mantendría. Siempre y cuando el compromiso con el sistema cambiario fuera creíble, lo sería también el compromiso para detener la inflación.
Si las expectativas inflacionarias cambiasen, podría lograrse reducir la inflación sin un costoso desempleo. Esta receta funcionó durante un tiempo en algunos países, pero era arriesgada, como se mostraría en Argentina.
El FMI fomentó el uso de este sistema cambiario. Ahora es menos entusiasta, aunque es Argentina quien está pagando el precio, y no el FMI. La fijación por ley de la paridad uno a uno entre el peso y el dólar redujo la inflación, pero no promovió un crecimiento sostenido. Se debió alentar a Argentina para que estableciera un sistema cambiario más flexible o, por lo menos, un tipo de cambio que reflejara más los patrones comerciales del país.
También hubo otros errores en el programa de 'reforma' de Argentina. Se alabó a ese país por permitir que los bancos fueran en gran parte propiedad de extranjeros. Por un tiempo esto creó un sistema bancario aparentemente más estable, pero este sistema fracasó en la ayuda a las pequeñas y medianas empresas. Después del impetuoso crecimiento que llegó con el fin de la hiperinflación, éste se redujo, en parte porque las empresas en el país no pudieron obtener una financiación adecuada. El Gobierno argentino reconoció el problema, pero fue golpeado por numerosos contratiempos fuera de su control antes de que pudiera hacer algo al respecto.
La crisis de Asia Oriental de 1997 le supuso el primer golpe. En parte debido al mal manejo del FMI, aquélla se volvió una crisis financiera global, incrementando los tipos de interés para todos los mercados emergentes, incluyendo el de Argentina. El sistema cambiario de ese país sobrevivió, pero a un precio muy alto: la aparición de un porcentaje de desempleo de dos dígitos.
Pronto, los altos tipos de interés desbordaron el presupuesto del país. Pero aun así, la relación deuda-PIB de Argentina -incluso cuando el país empezó a colapsarse- permaneció en un nivel moderado, cerca de 45%, más bajo que la de Japón. Pero con tipos de interés de 20%, el 9% del PIB del país se gastaría anualmente en financiar la deuda. El Gobierno buscó la austeridad fiscal, pero no lo suficiente como para compensar los caprichos del mercado.
La crisis financiera global que se dio después de la de Asia Oriental provocó una serie de grandes ajustes en los tipos de cambio. El valor del dólar, al que estaba atado el peso argentino, se incrementó fuertemente. Entre tanto, el vecino de Argentina y socio comercial del Mercosur, Brasil, depreció su moneda; algunos dicen que fue significativamente subvaluada. Los salarios y los precios cayeron, pero no lo suficiente como para permitir que Argentina compitiera de manera efectiva, en especial porque muchos de los productos agrícolas -que constituyen la ventaja comparativa natural de ese país- se enfrentaron con altas barreras para entrar a los mercados de los países ricos.
Apenas se había recuperado el mundo de la crisis financiera de 1997-1998, se deslizó hacia la desaceleración global del 2000/2001 begin_of_the_skype_highlighting 2000/2001 end_of_the_skype_highlighting empeorando la situación de Argentina. Aquí fue donde el FMI cometió su error fatal; apoyó una política fiscal restrictiva, la misma equivocación que cometió en Asia Oriental, y con las mismas desastrosas consecuencias.
Se suponía que la austeridad fiscal iba a restaurar la confianza. Pero las cifras del programa del FMI eran ficticias; cualquier economista podía haber predicho que las políticas de ajuste del gasto incitan a la recesión y que los objetivos presupuestarios no serían alcanzados. No hace falta decir que el programa del FMI no alcanzó sus metas. Rara vez se recupera la confianza cuando una economía cae en una profunda recesión y en un porcentaje de desempleo de dos dígitos.
Quizá un dictador militar, como Pinochet en Chile, podría suprimir los disturbios sociales y políticos que surgen en tales condiciones. Pero en la democracia argentina eso fue imposible. En varias visitas que realicé a Argentina, me sorprendí del largo tiempo que llevaban sufriendo sus habitantes; a mí no me resulta tan sorprendente que los alborotos callejeros hayan destituido al presidente de Argentina como que esos disturbios hayan tardado tanto tiempo en producirse.
Hay siete lecciones que deben extraerse ahora de este proceso:
1. En un mundo de tipos cambiarios volátiles, fijar una moneda a otra como el dólar es muy arriesgado. Hace años que se debía haber aconsejado a Argentina que abandonara ese sistema cambiario.
2. La globalización expone a un país a enormes sacudidas. Las naciones deben enfrentarse a esas sacudidas. Los ajustes de los tipos de cambio forman parte del mecanismo de globalización.
3. Ignorar los contextos social y político se vuelve un peligro en perjuicio propio. Cualquier gobierno que aplica políticas que dejan a grandes sectores de la población desempleados o subempleados no está cumpliendo su misión primaria.
4. Centrarse exclusivamente en la inflación -sin prestar atención al desempleo o al crecimiento- es arriesgado.
5. El crecimiento requiere de instituciones financieras que brinden créditos a las empresas nacionales. Vender los bancos a extranjeros, sin crear las salvaguardas apropiadas, puede impedir el crecimiento y la estabilidad.
6. Raramente se restablece la fortaleza -o la confianza- económica con políticas que conducen a la economía de un país a una profunda recesión. El Fondo Monetario Internacional es el gran culpable por haber insistido en políticas restrictivas.
7. Hacen falta mejores métodos para afrontar situaciones similares a la de Argentina. Ése fue mi argumento durante la crisis de Asia Oriental; el FMI afirmó lo contrario, optando por su estrategia de gran salvamento. Ahora el FMI reconoce tardíamente que debería explorar otras alternativas.
El FMI intentará por todos los medios desviar la culpa: habrá acusaciones de corrupción y se dirá que Argentina no adoptó las medidas necesarias. Por supuesto, el país necesitaba llevar a cabo otras reformas, pero seguir el consejo del FMI de aplicar políticas de ajuste del gasto sólo empeoró las cosas. La crisis de Argentina debería recordarnos la apremiante necesidad de reformar el sistema financiero global, y por donde debemos empezar es por una profunda reforma del FMI.
Es decir,
- scrollbar-arrow-color = color de la flecha. Color de las flechas del ScrollBar.
- scrollbar-base-color = color de la base
- scrollbar-dark-shadow-color = sombra del primer plano. Bordes de shadow.
- scrollbar-track-color = color del fondo de la barra. Frontal de la barra de navegación.
- scrollbar-face-color = color del primer plano. Frontal del botón y flechas.
- scrollbar-shadow-color = color de la sombra del fondo. Borde inferior y derecho del botón.
- scrollbar-highlight-color = luz del cuadro de la flecha
- scrollbar-3d-light-color = luz 3D. Borde superior e izquierdo.
- widht: ancho. Se coloca una medida concreta. Si colocamos auto se ajustará a la pagina.
- height: alto que es modificable mediante su valor en px.
- align = right, center, left, justify ...
Sobre los bordes lo mejor es consultar esta entrada para elegir los que se prefieran y los colores en la correspondiente. ( BORDER-LEFT-COLOR BORDER-RIGHT-STYLE ...)
Apuntes...
Tablas tipos y diseño. |
||
| ⇓ |
Las tablas que se enumeran a continuación se usan en los posts, gadgets HTML/Javascript...Es una herramienta más que puede usarse para albergar menús sencillos, enlaces, textos, ...
■ Básicamente está compuesta por las órdenes:
<table> : inicio de una tabla.
<tr> : inicio de la primera fila.
<td> : inicio del código o contenido de la columna.
<td> : fin del código o contenido de la columna.
</tr> : fin de la primera fila.
</table> : fin de una tabla.
• Tabla-Básico: tiene la estructura...
| Texto o código |
Para que se vea el borde o grosor de la tabla le añadimos la orden border= "un número". Por ejemplo: border=1 , border=2 , border=5 .... La cifra dependerá de la anchura que se necesite en ese momento.
Efecto añadiendo el atributo "border":
| Texto o código |
• A una tabla simple se le pueden añadir columnas. Para ello basta con jugar con los códigos <td></td>. Pueden añadirse tantas columnas como uno desee.
Ejemplo con sólo columnas:
| Columna 1 | Columna 2 | Columna 3 | Columna 4 |
• Supongamos que añadimos filas bajo esas columnas para incorporar códigos, frases, información de cualquier tipo...
| Columna 1 | Columna 2 | Columna 3 | Columna 4 |
| Texto Fila 1 | Texto fila 2 | Texto Fila 3 | Texto fila 4 |
Otra forma de explicarlo visualmente
| Contenido 1 | Contenido 2 |
| Contenido 3 | Contenido 4 |
| Contenido 5 | Contenido 6 |
**El contenido 1 y 2 pertenecen a la misma fila (<tr> </tr>) pero se situan en distintas columnas (<td> </td>)
■ Otro ejemplo:
| Columna 1, fila 1 | Columna 2, fila 1 | Columna 3, fila 1 |
| Columna 1, fila 2 | Columna 2, fila 2 | Columna 3, fila 2 |
Es un ejemplo en que se han introducido dos filas y tres columnas. El truco reside en aplicar a las celdas los códigos td o tr.
► Lo divertido es que a estos códigos se le puede aplicar efectos como color en el fondo <bgcolor="#F5D0A9"> , color en el borde <bordercolor="#000000"> , color de la fuente <font color"#0B0B61"></font> (Sin olvidar la cifra que podemos dar a border= )
Estas características se colocan en el inicio del código cuando se define la tabla. <table>
Ejemplo:
| Texto o código o lo que queramos |
■ Cómo colocar un enlace en una tabla:
| Blog de Lujo |
■ Cómo colocar una imagen en una tabla:
<table border=3><td><img src="http://lo que siga para completar la url de la imagen" </td></table>
 |
■ Resaltar un texto con color de fondo:
Texto y más texto Texto y más texto Texto y más texto |
Donde: aling = CENTER | LEFT | RIGHT, tbody es dependiente de la etiqueta table y
<strong> marca la negrita.
■ Una característica es que a través de WIDTH= a un porcentaje se le puede añadir una medida determinada.
Ejemplo:
| rosas | claveles |
| margaritas | lilas |
<TABLE BORDER WIDTH=40%>
<TR><TD>rosas</TD><TD>claveles</TD></TR>
<TR><TD>margaritas</TD><TD>lilas</TD></TR>
</TABLE>
También, (como al resto), se le pueden añadir caracteríticas como color, fondos, grosor...
Tablas con Colspan y Rowspan
Es la forma de fusionar celdas en una tabla.
rowspan: Indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila.
colspan: Indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna.
De esta forma si ponemos <td colspan="2"> quiere decir que la celda actual se extiende en el ancho de dos celdas.
Algo parecido ocurre si ponemos <td rowspan="3"> la celda ocupará en alto de 3 celdas normales.
Ejemplo:
Si visualizamos esta tabla, podemos observar que la primera celda ocupa tres filas, y no sobrepasa la altura total de las tres celdas que tiene a la derecha.
Países Europeos | España | Madrid |
Francia | París | |
Reino Unido | Londres | |
Países Americanos | EEUU | Washington |
Canadá | Toronto | |
México | México |
• El código es:
<table width="80%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3"><p>Paises Europeos</p></td>
<td><p>Spain</p></td>
<td><p>Madrid</p></td>
</tr>
<tr>
<td><p>Francia</p></td>
<td><p>Paris;s</p></td>
</tr>
<tr>
<td><p>Reino Unido</p></td>
<td><p>Londres</p></td>
</tr>
<tr>
<td rowspan="3"><p>Paises Americanos</p></td>
<td><p>EEUU</p></td>
<td><p>Washington</p></td>
</tr>
<tr>
<td><p>Canada</p></td>
<td><p>Toronto</p></td>
</tr>
<tr>
<td><p>Mexico</p></td>
<td><p>Mexico</p></td>
</tr>
</table>
Resumen...
Caracteres básicos. HTML Character Entity Reference |
||
| ⇓ |
Junto con los efectos básicos que crean los códigos HTLM, se encuentran otros que algunas veces queremos aplicar en el blog y que tienen como ventaja no tener que subir ninguna imagen por lo que ayuda a la rápida carga del blog.
Ejemplo:
× - ×
» - »
↑ - ↑
⇒ - ⇒
• - •
En XHTML Character Entity Reference se encuentran más símbolos que son de utilidad cuando trabajamos con la plantilla, zona HTML o un gadget HTML/Javascript.
Texto en dos columnas como un diario o periódico en post. Tipos |
||
| ⇓ |
Escribir un texto en dos columnas como si se tratara de un artículo de un diario cualquiera es muy fácil si aplicas un código en la zona de redactar entradas (Edición de HTML).
Este truco se puede catalogar como uno de los que se aplican a los textos y son de utilidad cuando armamos un post.
En ocasiones, si nos da la real gana, puede servir para que un texto no se haga demasiado largo o para darle un aire periodístico a la entrada. Cualquier opción que ronde por la imaginación es válida.
Lo más habitual es:
Escritorio - Nueva entrada - Edición de HTML y copiar el códido
Después en Redactar, das rienda suelta a tu imaginación y escribe lo que desees.
Por experiencia propia sé que cuando te enfrentas a un código, sea el que sea, te "pones mal@". Lo mejor es pasar de todo y dejarse llevar. Si sale mal....., otro día saldrá muuuuuucho mejor. Algunas veces cuestión de "prueba y error".
• Opción A:
Realizamos lo más simple.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
• Opción B:
Supongamos que queremos que las dos columnas salgan con unas características que a nosotros nos lo haga más atractivo, es decir que el texto salga justificado.
Si es así basta con añadir esta preferencia a las órdenes primarias anteriores dentro de la orden style :
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
• Opción C:
También puedes colocar una imagen en lugar de la primera letra o directamente la imagen que te dé la santa gana. Para ello basta con añadir una orden al lado de
<div style="float: left; width: 45%; text-align: justify;"> la línea:Es decir, quedando:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat
Nota:
También resulta con:
<table><td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA PRIMERA<br />COLUMNA DEL POST</p> <td style="width:40%;margin-top:0px;padding:15px;"><p style="text-align:justify;">AQUI EL TEXTO DE LA SEGUNDA COLUMNA DEL POST</p> </table>
Más apuntes en Trucos de Texto
Notas con fieldset. Tipos, listado, combinaciones. Post it |
||
| ⇓ |
Son notas, cajitas, recuadros que suelen usarse en posts, sidebars, gadgets para enmarcar un texto que uno quiera resaltar.
• Nota simple enmarcada:
<fieldset> Colocar el texto que se desee </fieldset>
• Si queremos colocar una Nota, Aviso el código es:
<fieldset>
<legend> Título de la nota o aviso </legend> Colocar el texto que se desee
</fieldset>
• Se puede realizar una anotación con el texto que se desplace de un lado a otro:
<fieldset>
<legend> Título de la nota o aviso </legend>
<marquee> Colocar el texto que se desee y vemos como se mueve </marquee>
</fieldset>
• Si prefieres que el texto se mueva pero la letra sea mayor te propongo:
<fieldset>
<legend> Título de la nota o aviso </legend>
<marquee> <span style="font-size:140%;"> Colocar el texto que se desee y vemos como se mueve con letras más grandes </span></marquee>
</fieldset>
* font-size nos marca el tamaño de la letra.
* marquee es el atributo que provoca el movimiento de las letras o imágenes.
• Si quieres colocar el título de aviso en negrita:
<fieldset>
<legend><strong> Nota o aviso en negrita </strong></legend>
<marquee> <span style="font-size:150%;"> Colocar el texto que se desee y vemos como se mueve con letras más grandes</span></marquee>
</fieldset>
■ Se pueden dar muchos estilos a estas notas o post it si jugamos un poco con marcadores sencillos.
- Mediante el atriburo style podemos hacer cosas como:
<fieldset style="border: 5px solid rgb(180, 4, 95); width: 500px;">
<legend>Nota o aviso</legend>Colocar el texto que se desee y que consideres interesante.
</fieldset>
* border es el borde de la nota. En este caso le he dado un valor de 5 pero puede variarse más o menos a elección del gusto de cada cual.
* #B4045F es un color expresado de forma hexadecimal. En esta entrada puedes elegir el que más te guste.
* width: 500px; es el ancho de la nota. En este caso es de 500, pero se puede colocar en la medida que se desee.
• Además de lo que ya sabemos se puede colocar un fondo de color. Esto se hace añadiendo el atributo background:
<fieldset style="border: 3px solid rgb(180, 4, 95); background: #FBFBEF; repeat; width: 500px;">
Colocar el texto que se desee y que consideres interesante.
</fieldset>
• También se puede agregar un fondo en forma de imagen
(Aviso: las notas que lleven un fondo de imagen podrían verse mal con la última versión de Internet Explorer. Sólo ocurre en los modelos que llevan "legend"; en el resto su visualización es perfecta.)
<fieldset style="border: 3px solid #B4045F; background: url(URL DE TU IMAGEN) repeat; width: 500px;">
<legend>Nota o aviso</legend>Colocar el texto que se desee y que consideres interesante.
</fieldset>
• Combinación cambiando los estilos de los textos:
<fieldset style="border: 3px solid rgb(180, 4, 95); background: url(URL DE LA IMAGEN) repeat;" >
<legend><span style="font-weight: bold; color:rgb(255, 0, 0); ">Nota o Aviso </span></legend><span style="color: rgb(0,0,0);" ><span style="font-weight: bold;">Colocar el texto que se desee y que consideres interesante.</span></span>
</fieldset>
<fieldset style="border: 3px solid rgb(180, 4, 95); background: url(URL DE LA IMAGEN) repeat;">
<span style="color: rgb(0, 0, 0);font-size:130%;" ><span style="font-weight: bold;">Colocar el texto que se desee y que consideres interesante.</span></span>
</fieldset>
►Lo imprescindible es:
- No olvidar colocar <fieldset> </fieldset>
- Colocar un número al borde que dará el ancho: border: 3px
- Decidir un tipo de borde: solid, dotted, double, dashed, groove, ridge, inset, outset.
- Background con imagen background: url(URL DE LA IMAGEN) o un color.
- El texto que va dentro de las notas lo puedes formar sin romperte la cabeza directamente en el editor que tiene Blogger:
Bordes Tipos CSS explicación y como usarlos |
||
| ⇓ |
Con el atributo border-style o border podemos definir varios estilos de borde, entre una gama de posibilidades. Elegir el uno depende del gusto de cada cual.
Posibles estilos de borde:
* solid
* dotted
* double
* dashed
* groove
* ridge
* inset
* outset
A. Lo esencial
• Estilo solid:
<p style="border: solid 4px #FF8000; "> Un ejemplo de estilo de bordes con atributo solid </p>
Un ejemplo de estilo de bordes con atributo solid
- En CSS la instrucción sería: border: solid 4px #FF8000;
• Estilo dotted:
Un ejemplo de estilo de bordes con atributo dotted
<p style="border: dotted 3px #FF8000; "> Un ejemplo de estilo de bordes con atributo dotted</p>
- En CSS la instrucción sería: border: dotted 3px #FF8000;
• Estilo double:
Un ejemplo de estilo de bordes con atributo double
<p style="border: double 5px #5E610B; "> Un ejemplo de estilo de bordes con atributo double</p>
- En CSS la instrucción sería: border: double 5px #5E610B;
• Estilo dashed:
Un ejemplo de estilo de bordes con atributo dashed
<p style="border: dashed 5px #5E610B; "> Un ejemplo de estilo de bordes con atributo dashed</p>
- En CSS la instrucción sería: border: dashed 5px #5E610B;
• Estilo groove:
Un ejemplo de estilo de bordes con atributo groove
<p style="border: groove 8px #5E610B; "> Un ejemplo de estilo de bordes con atributo groove</p>
- En CSS la instrucción sería: border: groove 8px #5E610B;
• Estilo ridge:
Un ejemplo de estilo de bordes con atributo ridge
<p style="border: ridge 8px #5E610B; "> Un ejemplo de estilo de bordes con atributo ridge</p>
- En CSS la instrucción sería: border: ridge 8px #5E610B;
• Estilo inset:
Un ejemplo de estilo de bordes con atributo inset
<p style="border: inset 8px #8A084B; "> Un ejemplo de estilo de bordes con atributo inset</p>
- En CSS la instrucción sería: border: inset 8px #8A084B;
• Estilo outset:
Un ejemplo de estilo de bordes con atributo outset
<p style="border: outset 8px #8A084B; "> Un ejemplo de estilo de bordes con atributo outset</p>
- En CSS la instrucción sería: border: outset 8px #8A084B;
B. Probando posibilidades, por practicar:
► Variantes con distintos bordes:
<p style=" border-bottom-color:#B4045F; border-bottom-style:dashed; border-bottom-width:5px; border-top-color:#5E610B; border-top-style:solid; border-top-width:8px;"> Un ejemplo de estilos de bordes con el inferior (border-bottom-color) y el superior ( border-top-color)</p>
Un ejemplo de estilos de bordes con el inferior (border-bottom-color) y el superior ( border-top-color)
► Otro ejemplo dentro de una tabla:
| Un ejemplo de estilos de bordes |
<table width="70%" align="center" cellspacing="10" cellpadding="0" style="border-bottom-color:#610B38;border-bottom-width:5px;border-bottom-style:solid;border-top-color:#3B0B0B;border-top-style:solid;border-top-width:5px; border-left-color:#FF8000; border-left-width:5px;border-left-style:solid;border-right-color:#FF0000; border-right-width:5px;border-right-style:solid;">
<tr>
<td style="border-color:#0B0B0B; border-style:dashed; border-width:2px;"> Un ejemplo de estilos de bordes</td>
</tr>
</table>
C. El terrible CSS dentro de una plantilla (rollo de cuidado)...
■ En CSS (dentro de la plantilla) podemos colocar bordes redondeados en las esquinas, pero hay navegadores que no lo soportan pej: Internet Explorer.
La instrucción clave es: -moz-border-radius a la que se le asigna una cifra en píxeles que hará de ángulo de la circunferencia (redondeo).
#HTML2 {
border: 5px solid #0B0B61;
-moz-border-radius: 10px;
padding: 11px;
}
Al atributo -moz-border-radius se le pueden definir distintos tipos de redondeo en cada esquina de la siguiente forma:
-moz-border-radius: 7px 27px 100px 0px;
Ejemplo en esta página con la formula:
#HTML2
border: 1px solid #000000;
-moz-border-radius: 7px 27px 100px 0px;
padding: 11px;
}
- Si se usa en CSS -moz-border-radius hay que definir el tipo de borde: solid, dotted, double ....
■ Por otro lado dentro del CSS se pueden definir por lados. Si es así quedaría de esta forma:
.bordeporlados{
border-top: 1px solid #ff9999;
border-right: 2px dotted #99ff99;
border-bottom: 2px dashed #9999ff;
border-left: 4px double #666666;
}
Es decir, borde de arriba, borde derecho, borde de abajo, borde izquierdo......
Lo esencial es la parte A, el resto son divagaciones y apuntes....
Tipos links o enlaces. Listado y Clasificación |
||
| ⇓ |
Actualización:
Botón con efecto "rollover"
Lo siguiente es una tontería, pero lo anoto para ver el funcionamiento de este tipo de combinaciones con onmouseover. Seguramente debería ir en tipos de enlaces y links...
- La imagen nº1 es la que aparece sin pasar el cursor (en el ejemplo es Shin Chan con una flor en la boca).
- La imagen nº 2 es la que se ve al pasar el cursor por encima (en el ejemplo es el log donde se lee Lujo).
P.ej:
El efecto es curioso y se le considera un botón con efecto "rollover".
En definitiva, no es más que un link que al pasarle el ratón por encima cambia de imagen y sale un cartelito con el nombre del sitio web indicado en el respectivo código.
Nota:
- <center> al principio y </center> al final de la línea,hace que la imagen se centre.
- <a href="url de destino" es el enlace al sitio.
- target="_blank" hace que se abra en otra ventana.
- title="texto" es el texto que se mostrará al poner el ratón por encima.
y como no hay más datos en esta zona lo cerramos todo con >
- <img src="url de la imagen"> es el código para que se vea la imagen que va a servir de enlace.
- </a> cierra el conjunto de códigos.
Más notas:
- Un enlace para imagen sería:
<a href="url-de-la-pagina"><img src="url-de-la-imagen" /></a>
- Para conseguir una serie de imágenes del mismo tamaño se asignan los atributos width - height - border para crear una separación.
<a href="url-de-la-pagina"><img src="url-de-la-imagen" border="1" height="60" width="60" /> </a>
- Con title le asigno un título:
<a style="" title="TITULO"<a href="url-de-la-pagina"><img src="url-de-la-imagen" border="1" height="60" width="60" /> </a>
- le asignaremos el atributo target="_blank" para que al clicar encima de la imagen la página se abra en una ventana aparte.
Conclusión:
El código necesario para realizar una serie de imágenes del mismo tamaño que también sean enlaces tendría una fórmula:
<a style="" title="aquieltitulo" href="aquilaurldelapagina"target="_blank"><img src="aquilaurldelaimagen" border="1" height="60" width="60" /></a>
Con la repetición de este código se puede crear un conjunto en horizontal o de varias líneas.
Todo lo que está explicado puede ir en un gadget HTLM/javascript o en una entrada en Edición de HTLM.
