add

Widget Social Multi Tabla 3 en 1 para páginas web


¿Necesito un widget Social 3 en 1 para mi página web? ¿Cómo crear un widget Social para compartir las publicaciones de mi página de Facebook, mi página de Twitter y un video de Youtube? ¿Buscar un widget Social para ubicarlo debajo de una entrada “Post” “Articulo” de mi blog de Blogger? Tutorial. Algunas de estas preguntas llegan a mi cuenta de correo electrónico y para ello voy a responder claramente cómo pueden realizar este gran truco en su blog de Blogger. Cada usuario de Blogger debe tener una página de Facebook y una página de Twitter en los cuales publican y comparten sus artículos con sus seguidores. Todos estos artículos que han compartido en sus redes sociales de Facebook y Twitter, los podrán mostrar en un solo widget y debajo de las Entradas “Post” “Artículos”, incluyendo un video de Youtube promocionando aún más su blog. Con este widget Social Multi Tabla 3 en 1 conseguirán aumentar las vistas de sus artículos destacados que hayan compartido en sus redes sociales ya que el nuevo usuario que visita su blog o página web lo compartirá con sus familiares o amistades, lógicamente basándose en sus intereses. Las Redes Sociales hoy en día es una de las principales fuentes de tráfico web y es por esta razón que comparto con ustedes este grandioso truco de Blogger.

Widget Social Multi Tabla 3 en 1 para páginas web

Bueno luego de una pequeña introducción y explicación, pueden ver su demostración en la siguiente página web. El widget Social de Facebook, Twitter y Youtube está siempre ubicado al final de cada artículo “Post” “Entrada”

DEMO


¡Te gusto verdad!

Recomiendalo

Vamos a trabajar

Sigue las instrucciones de este grandioso tutorial

1 Ir a Blogger

2 Un clic en “Diseño

Widget Social Multi Tabla 3 en 1 para páginas web

3 Abre “Añadir un gadget

Widget Social Multi Tabla 3 en 1 para páginas web

4 Busca el widget que dice “HTML/Javascript” ábrelo

Widget Social Multi Tabla 3 en 1 para páginas web

5 Ingrese las siguientes líneas de código en su interior

<b:if cond='data:blog.pageType == "item"'>
<style>
.ui-spinner .ui-icon-triangle-1-s {
   background-position: -65px -16px;
}
   /* ayudadeblogger.com */
.ui-tabs {
    position: relative;
    padding: 0em;
}
.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 0em 0em 0;
}
.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    padding: 0;
    white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: .5em 1em;
    text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: -1px;
    padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
background: url("http://3.bp.blogspot.com/-HfSK5Opcr2c/VP2vvNJJFwI/AAAAAAAAPw4/b0GsUMI5CRI/s1600/ayudadeblogger.png") repeat-x scroll left top rgb(85, 149, 37);
color: rgb(255, 255, 255);
font-weight: bold;
border-width: 1px ;
border-style: solid solid none;
border-color: rgb() rgb(99, 173, 43) -moz-use-text-color;
-moz-border-top-colors: none;
-moz-border-right-colors: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
border-image: none;
text-shadow: -1px -1px 0px rgb(68, 119, 29);
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
    font-family: Helvetica;
    font-size: 13px;
}
.ui-tabs .ui-tabs-panel {
    display: block;
    padding: 1em;
    clear: both;
    border: 2px solid rgb();
    position: relative;
    overflow: hidden;
    z-index: 10;
width: 500px;
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 500px;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
    border-width: 1px;
}

/* Contenido del contenedor
----------------------------------*/
.ui-widget {
    font-family: Helvetica, Arial,sans-serif;
    font-size: 14px;
margin-top: -10px;
}
.ui-widget .ui-widget {
    font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}
.ui-widget-content {
    color: #222222;
}
.ui-widget-content a {
    color: rgb(35, 97, 161);
display: block;
font-weight: normal;
text-decoration: none;
}

.ui-widget-header {
    font-weight: bold;
}
.ui-widget-header a {
    color: #222222;
}

/* Estado de interacciones
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
background: #e6e6e6;
    font-weight: normal;
    color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #555555;
    text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
background: none repeat scroll 0% 0% rgb(241, 241, 241);
    font-weight: normal;
    color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #212121;
    text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    font-weight: normal;
    color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #212121;
    text-decoration: none;
}

</style>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

<div id="tabs">
<ul>
<li><a href="#tabs-1"><img border="0" src="http://3.bp.blogspot.com/-JkzjK9X1OdY/VP2xM917qPI/AAAAAAAAPxE/0qFmPoeDT7s/s1600/facebook.png" /></a></li>
<li><a href="#tabs-2"><img border="0" src="http://4.bp.blogspot.com/-yd5GRGmei7s/VP20cMXf2TI/AAAAAAAAPxQ/7I5dUdR7Buk/s1600/twitter.png" /></a></li>
<li><a href="#tabs-3"><img border="0" src="http://3.bp.blogspot.com/-KLAc7m44DQI/VP20w5cgqMI/AAAAAAAAPxY/Gyjkad4xebE/s1600/youtube.png" /></a></li>
</ul>
<div id="tabs-1">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/ayudadeblogger&amp;width=500&amp;height=500&amp;colorscheme=light&amp;show_faces=false&amp;header=true&amp;stream=true&amp;show_border=true&amp;appId=237665269733962" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:500px;" allowtransparency="true"></iframe>

</div>
<div id="tabs-2">

            <a class="twitter-timeline"  href="https://twitter.com/EcuadorTuristic" data-widget-id="573922016597794816">Tweets por el @EcuadorTuristic.</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 id="tabs-3">

<iframe width="500" height="500" src="https://www.youtube.com/embed/aCwLjXH0f-Y?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

</div>
</div></b:if>

Realiza estos 3 cambios:

1 Cambia la dirección URL que está marcada de color azul http://www.facebook.com/ayudadeblogger por la dirección URL de su página de Facebook

2 Para poder obtener el widget de Twitter siga las siguientes instrucciones:

Abra su cuenta de Twitter

Diríjase a crear el widget de Twitter desde el siguiente enlace:


Siga la secuencia de las siguientes imágenes en las cuales se muestra claramente la forma en la cual se debe crear el widget de Twitter desde su cuenta:

Widget Social Multi Tabla 3 en 1 para páginas web
Widget Social Multi Tabla 3 en 1 para páginas web
Widget Social Multi Tabla 3 en 1 para páginas web
Widget Social Multi Tabla 3 en 1 para páginas web

Ahora vamos a copiar el código que nos proporcionó Twitter y lo vamos a pegar en vez del código que estaba marcado de color rojo

<a class="twitter-timeline"  href="https://twitter.com/EcuadorTuristic" data-widget-id="573922016597794816">Tweets por el @EcuadorTuristic.</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>

3 El último cambio que vamos hacer es cambiar el códido embed URL que está marcada de color verde aCwLjXH0f-Y , por el codigo embed de la URL del video de Youtube que quiera mostrar en este widget. Por ejemplo mire las siguientes imagenes, en las cuales se muestra cual código embed coger y pagar

Widget Social Multi Tabla 3 en 1 para páginas web
Widget Social Multi Tabla 3 en 1 para páginas web


Eso es todo

Procedemos a dar un clic en “Guardar” y a ubicar el widget Social Multi Tabla debajo de la Entrada "Entradas del blog", mira la siguiente imagen.

website

¡Fácil verdad!

¿Necesitas ayuda?

Espero haber sido lo más explicativo posible, cualquier pregunta no duden en hacérmelo saber

0 comentarios:

Publicar un comentario en la entrada

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios