Mejorar diseño de mi blog con imágenes

royitoroy · 24 Jun 2011

hola amigos este es mi primer post en la zona blogger y quiero mostrarles lo que me ha tenido sin dormir los ultimos dias...

sucede q en mi blog Enlace eliminado al final de los post a duras penas he logrado q se vea asi
Enlace eliminado

y quiero una cajita asi como estas imagenes justo debajo de los post en vez de ese poco de iconos feos y mal organizados

Enlace eliminado

Enlace eliminado

Enlace eliminado

me pueden ayudar a como hacerlo? ya la caja la tengo lista en photoshop en jpg pero no se como ponerla ahi y meter todos los iconos dentro...

diegomvsc2 · 24 Jun 2011

puedes usar addthis xD

riggs · 24 Jun 2011

Solo en wordpress se puede hacer eso en blogger no tienes acceso total asi es que solo puedes hacer cambios que te den las plantillas blogger

Yefreer · 24 Jun 2011

riggs dijo:
Solo en wordpress se puede hacer eso en blogger no tienes acceso total asi es que solo puedes hacer cambios que te den las plantillas blogger

Con que plugin en wordpress se puede hacer eso?

royitoroy · 24 Jun 2011

y como puedo modificar mi plantilla entonces? debe haber forma porque si he visto q bloggers tiene cuadros asi... no se mediante html y css, se me ocurre algo como... un codigo css y el codigo html agregado en la zona de elementos de pagina como un widget no se... con un background de la imagen y los botones encima...alguien q si sepa de diseño web podria saber como

Science · 24 Jun 2011

¿Plugins? De Blogger no sé ninguno, pero ya que preguntan los de Wordpress: Sociable!, Be Social, AddThis y Socializer (éste es para mi el mejor de lejos): WordPress › WP Socializer « WordPress Plugins

Aunque yo prefiero usar el modo manual, que es el que mejor funciona y "intuyo" que debe funcionar para Blogger:

PHP:

<div style="float:right; margin-bottom:20px;margin-top:0px;margin-left:20px;margin-right:0px">

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="vertical" data-via="TTTTTT">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>

<iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&app_id=FFFFFF&href=<?php the_permalink();?>&send=false&layout=box_count&width=55&show_faces=false&action=like&colorscheme=light&font&height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:55px; height:60px;" allowTransparency="true"></iframe>

</div>

- En la primera línia le estamos indicando que meteremos en una caja (transparente) los códigos que deseemos, de modo que floten en la parte superior derecha desplazando el texto del contenido. (Se puede colocar fuera del contenido: justo encima de los comentarios, debajo de posts relacionados, o donde sea. Para alinear a la izquierda cambiamos "right" por "left" y listos.

- El siguiente párrafo puse el botón de Twitter. Se puede autogenerar el código desde la página de Twitter y ponerlo aquí. En el lugar de las TTTTTT va la ID de la cuenta de Twitter y al hacer retweet pondrá "via @nombre".

- El siguiente es el botón de StumbleUpon.

- El siguiente es el botón +1 de Google.

- El último es el Me Gusta de Facebook. Se tiene que cambiar la FFFFFF por la ID de Facebook, que será la aplicación creada. Es mejor crearlo directamente desde la sección "developers" de Facebook y añadir el código aquí.

- Y finalmente cerramos con un /DIV.

No hay más misterio. En la primera línea se puede jugar con los valores para situar bien los botones donde mejor queden o nos guste.

Saludos!

royitoroy · 24 Jun 2011

OH gracias science lo probrare ya subire la imagen de como quede para que lo vean... ademas de funcionar quitare el stumbleupon y colocare el meneame y bitacoras las mejores redes habla hispana q he conseguido y tratare de usar el background una imagen para luego poder mover los iconos usando el css paddin margin widht y otros... ojala sirvan en blogger amigo.

ok gracias al amigo Enlace eliminado he podido hacer un gran avance y a quedado asi :biggrin:
Enlace eliminado

lo malo es que en el home al final del post sale esto :ahhhhh:
Enlace eliminado

ahora eso es algo de la plantilla o template, pero no se arreglarlo... aqui les pego esa parte del html y css aver si me ayudan a encontrar la solucion para q no salga esa imagen ni los tags en el home asi no nada mas cuando se vea el post completo :stupido2:

CSS(dentro de <b:skin> </b:skin>)

HTML:

.info {
	line-height: 1.6em;
	font-size: 10px;
	notext-align: right;
	margin: 0px 0px 0px 0px;
	padding: 7px 4px 6px 5px;
	noborder-top: 1px solid #ACACAC;
        background: url("https://lh3.googleusercontent.com/-AvTJjD8q5RA/TgZBG02FwLI/AAAAAAAAEsk/HdKX0QOjgnM/s470/bookmarkstrazos.png") repeat-x scroll left top transparent;
        height: 173px;
}

HTML

HTML:

<div class='info'>


<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='position: absolute; bottom: 97px; float: left; left: 159px;'><fb:like action='like' expr:src='data:post.url' layout='button_count' send='false' show_faces='false' width='450'/></div>

<div style='position: absolute; bottom: 93px; float: right; right: 15px;'><script src='http://apis.google.com/js/plusone.js&apos; type=&apos;text/javascript'/><g:plusone/></div>

<div style='position: absolute; bottom: 94px; float: right; right: 122px;'><a class='twitter-share-button' data-count='horizontal' data-lang='es' data-related='roy_cordero:autor' data-via='roy_cordero' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

<div style='position: absolute; bottom: 90px; float: right; right: 0px;'><a href='mailto:yoenmimoto@gmail.com'><img alt='Email me' border='0' height='25' src='http://i219.photobucket.com/albums/cc286/7kranthiswaroop/thenvelope.gif' width='48'/></a></div>

</b:if>

	<span class='category'>
	  <b:if cond='data:post.labels'>
	    <data:postLabelsLabel/>
	  <b:loop values='data:post.labels' var='label'>
  	    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
	  </b:loop>
	</b:if>
	</span>
  
	<span class='bubble'>
	  <b:if cond='data:blog.pageType != &quot;item&quot;'>
	    <b:if cond='data:post.allowComments'>
		  <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
	    </b:if>
	  </b:if>
	</span>
  	<!-- backlinks -->
	<span class='post-backlinks post-comment-link'>
	  <b:if cond='data:blog.pageType != &quot;item&quot;'> |
	  <b:if cond='data:post.showBacklinks'>
	    <a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
	  </b:if>
	  </b:if>
	</span>

gracias a todos los q me han escrito en mi presentacion de veras son una comunidad muy calida gracias!!😛roud:

Science · 27 Jun 2011

De nada royitory!

Yo lo veo así:
Enlace eliminado

Quizá lo que haría yo es ponerlos debajo hacia la izquierda. Con dos o tres <br> antes del código. Entonces quedaría la caja grande azul "Te gustó?" y justo debajo los botones. El espacio que hay en negro para los botones me parece algo pequeño.

Por cierto es muy chula la plantilla que usas 🙂

Saludos!

Usuario eliminado 5071 · 1 Jul 2011

Se ven superpuestos los botones con la imágen, quizás la solución es como dicen arriba utilizando <br /> para hacer que salten bajo.

Mejorar diseño de mi blog con imágenes

royitoroy

diegomvsc2

riggs

Yefreer

royitoroy

Science

royitoroy

Science

Usuario eliminado 5071

Temas similares