Widget Estético de Redes Sociales para Blogger

  • Autor Autor garlock
  • Fecha de inicio Fecha de inicio
G

garlock

Kappa
SEO
Verificado por Whatsapp
Hoy les vengo a compartir el codigo de un widget que podemos poner en la sidebar y que nos muestra las redes sociales de la siguiente manera:

Enlace eliminado

Para ponerlo iremos a los elementos de la plantilla y añadiremos en nuestra sidebar un nuevo widget: HTML/JAVASCRIPT.

En ese widget que yo titule siguenos, tu le puedes poner el titulo que desees pones el siguiente codigo:

Insertar CODE, HTML o PHP:
<!-- Styles -->
<style type="text/css">
#share-box-0 {
	width:300px;
	overflow:hidden;
}
#share-box-0 .gplusone {
	background-color:#f5fcfe;
	border:1px solid #d8e6eb;
	border-top:1px solid #FFF;
	font-size:.87em;
	color:#000;
	line-height:24px;
	padding:9px 0 0 11px;
}

#share-box-0 .gplusone span {
	display:inline-block;
	vertical-align:middle;
	height:20px;
	margin-top:-17px;
}

#share-box-0 .fb-like-box {
	border:1px solid #dcdcdc;
	padding:5px 11px;
}
#share-box-0 .twitter-follow {
	background-color:#eef9fd;
	border:1px solid #c7dbe2;
	border-top:0;
}

#share-box-0 .twitter-follow iframe {
	margin:9px 11px;
}
#other-social-bar {
    background-color: #D8E6EB;
    border: 1px solid #B6D0DA;
    box-shadow: 0 1px 1px #FFFFFF inset;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight: bold;
    overflow: hidden;
    padding: 0;
}
#other-social-bar ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow {
    color: #1E598E;
    float: left;
    height: 16px;
    overflow: hidden;
    padding: 10px 10px 7px;
    width: 270px;
}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;
}
#other-social-bar .other-follow li {
    border: 0 none;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li a {
    color: #1E598E;
    display: inline;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px white;
}
#other-social-bar .other-follow li.my-rss {
    background: url(http://4.bp.blogspot.com/-3ZR8uAHB8QY/T-MLyuLqG4I/AAAAAAAAFxw/Zxk86OIXwJM/s000/rss-16x16.png) no-repeat scroll 0 0 transparent;
    line-height: 1;
    margin-bottom: 0;
    padding: 0 3px 1px 20px;
    width: 60px;
}
#other-social-bar .other-follow li.my-gplus {
	background: url(http://2.bp.blogspot.com/-oV5JSdsA2Sw/T-MLyxNI7PI/AAAAAAAAFx4/rVvTQjUpjCE/s000/gplus-16x16.png) no-repeat transparent;
	line-height: 1;
	width: 60px;
	padding: 0px 3px 1px 20px;
	margin-bottom:0px;
}
#other-social-bar .other-follow li.my-pinterest {
	background: url(http://4.bp.blogspot.com/-zYx6lF1--pw/T-MLzJGZcNI/AAAAAAAAFyA/R7emD2taC9s/s000/small-p-button.png) no-repeat transparent;
	line-height: 1;
	width: 60px;
	padding: 0px 3px 1px 20px;
	margin-bottom:0px;
}
#email-news-subscribe .email-box {
	padding: 10px 10px; 
	font-family: "Arial","Helvetica",sans-serif;
	border-top: 0;
	border-right: 1px solid #C7DBE2;
	border-left: 1px solid #C7DBE2;
	border-image: initial;
}
#email-news-subscribe .email-box input.email {
	background:#FFFFFF;
	border: 1px solid #dedede;
	color: #999;
	padding: 7px 10px 8px 10px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	border-image: initial;
	font-family: "Arial","Helvetica",sans-serif;
}	
#email-news-subscribe .email-box input.email:focus {
	color:#333
}	
#email-news-subscribe .email-box input.subscribe {
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
	background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
	-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
	font-family: "Arial","Helvetica",sans-serif;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:white;
	text-shadow:#d08d00 1px 1px 0;
	padding:7px 14px;
	margin-left:3px;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
	border-image: initial;
}
#email-news-subscribe .email-box input.subscribe:hover {
	background: #ff9b00;
	background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
	background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
	outline:0;-moz-box-shadow:0 0 3px #999;
	-webkit-box-shadow:0 0 3px #999;
	box-shadow:0 0 3px #999
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
	background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
	-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border:1px solid #cc7c00;
	color:#FFFFFF;
	text-shadow:#d08d00 1px 1px 0
}
</style>


  <div id="share-box-0">  
  
    <div class="fb-like-box">
      <iframe src="http://www.facebook.com/plugins/like.php?href=[COLOR="#FF0000"][B]URL DE TU BLOG[/B][/COLOR]&amp;layout=standard&amp;show_faces=false&amp;width=350&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:250px; height:40px"></iframe></div>
    <div class="gplusone">
      <div class="g-plusone po-stub" data-size="medium" data-count="true" data-callback="fire_multitrack" data-href="[COLOR="#FF0000"][B]URL DE TU BLOG[/B][/COLOR]"></div> <span>Recomendar en Google</span>
    </div>
   <div class="twitter-follow">
      <a href="http://twitter.com/NOMBREDEUSUARIO[COLOR="#FF0000"][B][/B][/COLOR]" class="twitter-follow-button">Follow @[COLOR="#FF0000"][B]NOMBREDEUSUARIO[/B][/COLOR]</a>
    </div>
	<div style="background: #E3EDF4;" id="email-news-subscribe">
	     <div class="email-box">
		    <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[COLOR="#FF0000"][B]ULTIMAPARTEDEURL[/B][/COLOR]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify?uri=[COLOR="#FF0000"][B]ULTIMAPARTEDEURL[/B][/COLOR]">	
			    <input type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Escribe tu email" name="email" id="email" style="width: 140px; font-size: 12px;" class="email" />		
			    <input type="hidden" name="uri" value="[COLOR="#FF0000"][B]ULTIMAPARTEDEURL[/B][/COLOR]" />
			    <input type="hidden" value="es_US" name="loc" />
			    <input type="submit" value="Suscribete" name="commit" class="subscribe" />	
		    </form>
	    </div>
	</div>
<div style="background: #D8E6EB;" id="other-social-bar">
	<ul class="other-follow">
		<li class="my-rss">
			<a target="_blank" href="[COLOR="#FF0000"][B]URL DE TU RSS (PUEDE SER FEEDBURNER)[/B][/COLOR]" title="RSS" rel="nofollow">RSS Feed</a>
		</li>
		<li class="my-gplus">
			<a target="_blank" href="[COLOR="#FF0000"][B]URL DE TU PERFIL DE GOOGLE+[/B][/COLOR]" title="Google Plus" rel="nofollow">Google Plus</a>
		</li>
		<li class="my-pinterest">
			<a target="_blank" href="http://pinterest.com/[B][COLOR="#FF0000"]NOMBREDEUSUARIO[/COLOR][/B]" title="Pinterest" rel="nofollow">Pinterest</a>
		</li>
	</ul>
</div>
  </div>

<!-- Scripts -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'en'}</script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<div class='clear'></div>

Ya solo queda modificar lo que puse en MAYUSCULAS Y EN ROJO.
NOTA: para poner la caja de suscripcion por email de feedburner tomaremos la ultima parte de la url de feedbuerner, es decir, si nuestra direccion de fedburner es: Enlace eliminado , en el codigo solo sustituiremos lo que esta en rojo por lo que esta despues del / , en mi caso: SoyTwitter
(Espero asi les funcione)

NOTA2: Los Me Gusta no cuestan, deja uno si te agrado el widget!
Cualquier duda dejenla en este hilo
 

Adjuntos

  • 192526-95201290953am.webp
    192526-95201290953am.webp
    10,6 KB · Visitas: 117
Última edición:
Gracias por el aporte, te quedó genial garlock.
 
muchas gracias, muy bueno
 
Gracias pro compartir [MENTION=2099]garlock[/MENTION], pero tengo un problema, haber si me ayudas: cuando coloco el CODIGO DE FEEDBURNER PARA SUSCRIBIRSE POR EMAIL no sale con el estilo que muestras aqui en la imagen, sale con ele stilo pro defecto de feedburner, es decir, solo sale el boton suscribe gris abajo del formulario, no como lo muestra en la imagen.
 
a mi tampoco. podrías compartir el código que tienes en ese cuadro? sería perfecto!
 
Muchas gracias por el aporte. Voy a probarlo a ver
 
cambiare el codigo y lo pondre para que solo le modifiques unos parametros

Gracias pro compartir [MENTION=2099]garlock[/MENTION], pero tengo un problema, haber si me ayudas: cuando coloco el CODIGO DE FEEDBURNER PARA SUSCRIBIRSE POR EMAIL no sale con el estilo que muestras aqui en la imagen, sale con ele stilo pro defecto de feedburner, es decir, solo sale el boton suscribe gris abajo del formulario, no como lo muestra en la imagen.
 
Es una modificacion del generador de widget Mashable de Way2Blogging cierto?

Te ha quedado bien.:encouragement:
 
[MENTION=4812]esejoker468[/MENTION] y [MENTION=23424]Baico[/MENTION] ya corregi el codigo, espero les sirva
 
gracias por el aporte 🙂
 
Excelente, lo voy a usar. Muchas gracias.
 
Genial! lo acabo de poner en mi web!

Gracias Amigo!
 
Colega gracias por compartirlo, lo habia probado con el codigo de otro sitio y no me habia funcionado, saludos😉
 
Gracias por compartirlo y es util no solo para Blogger :encouragement:
 
Atrás
Arriba