Widgets para Blogger – Widget de suscripción social
Un nuevo Widget para Blogger realmente
espectacular para que lo utilicen completamente gratis en su blog de Blogger. El
widget que van a aprender a instalarlo en su blog de Blogger se lo conoce como
Widget de suscripción social, el cual es una buena herramienta para que los
usuarios que visitan sus blogs puedan seguirlos gracias a este widget de suscripción
social. Con el widget de suscripción social los usuarios podrán suscribirse y
seguirles en sus cuentas de Facebook, Google+, Twitter y su canal de Youtube. Lo
que vamos hacer es copiar un código en un widget y realizar 4 cambios y luego
lo podrán ubicar donde mejor les parezca. El widget de suscripción social funciona
perfectamente en todos los navegadores web, tiene una carga ligera y no le
causara ningún error a la estructura de su blog.
A continuación, pueden ver su demostración
en el siguiente blog, el widget de suscripción social está ubicado justo arriba
de la entrada del blog de demostración.
Les gusto verdad!
Vamos a trabajar
1 Ir a Blogger
2 Un clic en “Diseño”
3 Abre un gadget “Añadir un gadget”
4 Busca el widget que dice “HTML/Javascript”
ábrelo
5 Ingresa las siguientes líneas de código
en su interior
<style>
/* ayudadeblogger.com*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
html, body {
min-height: 100%;
}
body {
background-image:
linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5)
100%), linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
margin: 0;
}
#buttons {
padding: 2px 2px;
width: 330px;
overflow: hidden;
}
.button {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 4px;
overflow: hidden;
width: 156px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
-moz-border-radius-topleft:
3px;
-moz-border-radius-topright:
0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px
0px 0px 3px;
border-radius: 3px 0px 0px
3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 118px;
-moz-border-radius-topleft:
0px;
-moz-border-radius-topright:
3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px
3px 3px 0px;
border-radius: 0px 3px 3px
0px;
}
.slide p {
font-family: Open Sans;
font-weight: 400;
border-left: 1px solid #fff;
border-left: 1px solid
rgba(255,255,255,0.35);
color: #fff;
font-size: 16px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
}
.button .slide {
-webkit-transition: all 0.2s
ease-in-out;
-moz-transition: all 0.2s
ease-in-out;
-ms-transition: all 0.2s
ease-in-out;
-o-transition: all 0.2s
ease-in-out;
transition: all 0.2s
ease-in-out;
}
.facebook iframe {
display: block;
position: absolute;
right: 23px;
top: 10px;
z-index: 1;
}
.twitter iframe {
width: 90px !important;
right: 5px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___follow_0 {
width: 70px !important;
top: 10px;
right: 45px;
position: absolute;
display: block;
z-index: 1;
}
.youtube #___ytsubscribe_0 {
top: 10px;
right: 1px;
position: absolute;
display: block;
z-index: 1;
}
.facebook:hover .slide {
left: 180px;
}
.twitter:hover .slide {
top: -40px;
}
.google:hover .slide {
bottom: -40px;
}
.youtube:hover .slide {
left: -150px;
}
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
.youtube .icon, .youtube .slide {
background: #b31217;
}
/* ayudadeblogger.com End */
</style>
<div id="buttons">
<div class="facebook
button">
<i
class="icon">
<i class="fa
fa-facebook"></i>
</i>
<div
class="slide">
<p>
Facebook
</p>
</div>
<iframe
src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/tratamientosporansiedad&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:80px; height:20px;"
allowtransparency="true">
</iframe>
</div>
<div class="google
button">
<i
class="icon">
<i class="fa
fa-google-plus"></i>
</i>
<div
class="slide">
<p>
Google+
</p>
</div>
<!-- Place this tag where
you want the +1 button to render. -->
<div
class="g-follow" data-annotation="bubble"
data-href="https://plus.google.com/105165843323659030487"
data-rel="publisher"></div>
<!-- Place this tag after
the last +1 button tag. -->
<script
type="text/javascript">
(function() {
var po =
document.createElement('script'); po.type = 'text/javascript'; po.async =
true;
po.src =
'https://apis.google.com/js/platform.js';
var s =
document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="youtube
button">
<i
class="icon">
<i class="fa
fa-youtube"></i>
</i>
<div
class="slide">
<p>
YouTube
</p>
</div>
<div
class="g-ytsubscribe" data-channel="youtube"
data-layout="default" data-count="default"
data-onytevent="onYtEvent"></div>
<script
src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType ==
'subscribe') {
// Add code to handle
subscribe event.
} else if (payload.eventType
== 'unsubscribe') {
// Add code to handle
unsubscribe event.
}
if (window.console) { // for
debugging only
window.console.log('YT
event: ', payload);
}
}
</script>
</div>
<div class="twitter button">
<i
class="icon">
<i class="fa
fa-twitter"></i>
</i>
<div
class="slide">
<p>
Twitter
</p>
</div>
<a href="https://twitter.com/trastornoansied"
class="twitter-follow-button" data-show-count="false"
data-via="mariuCSS">
Tweet
</a>
<script>
!function(d,s,id){
var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,
'script', 'twitter-wjs');
</script>
</div></div>
|
Realiza estos cambios:
He marcado de 4 diferentes colores en
los cuales ustedes tendrán que ingresar las direcciones de sus perfiles
sociales.
Por ejemplo:
Borra el perfil de Facebook https://www.facebook.com/tratamientosporansiedad y cámbialo
por la dirección URL de tu página de Facebook.
También, tienes que eliminar esta dirección
https://plus.google.com/105165843323659030487
y cambiarla por la dirección URL de tu cuenta de Google+.
Además, borra esta dirección de canal youtube
he inserta el nombre de tu canal de Youtube
Y por último tenemos que borrar esta dirección
https://twitter.com/trastornoansied he ingresar la dirección
URL de nuestra cuenta de Twitter.
Eso es todo, es momento de dar un clic
en “Guardar” y ubica este nuevo widget de suscripción social donde tú quieras.
Fácil verdad!
Recuerda suscribirte y recibirás mis
nuevas actualizaciones directamente en tu correo electrónico
¿Necesitas ayuda?
Cualquier pregunta no duden en hacérmelo
saber y de inmediato les responderé
Saludos
Recuerda suscribirte:
Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
3 comentarios: