Compartir para ver video para Blogger (Viral) Compartir para ver video para Blogger (Viral)
Compartir para ver video para Blogger (Viral)
Página 1 de 8 123 ... ÚltimoÚltimo
Mostrando resultados del 1 al 10 de 80
  1. #1
    Registro
    25-agosto-2013
    Ubicación
    Perú
    Edad
    23
    Mensajes
    3.691
    Compartir para ver video para Blogger (Viral)
    Hola a todos hoy quiero enseñar como convertir su blogger en algo viral para la principal red social "Facebook", encontré este en internet la verdad pero lo que muchos usuarios no han podido es implementarlo y puesto que yo también lo he intentado, no se pudo, pero encontré la manera de poder hacer funcionar de la forma correcta y sin complicarnos mucho la vida.

    Aclaraciones:
    - Funciona en cualquier plantilla siempre y cuando sea de blogger.
    - No necesitaras hacer casi nada solo colocar los códigos.


    #1 Paso:

    • Ve a tu blog (Blogspot)
    • Plantilla
    • Editar HTML


    #2 Paso:
    Buscar la etiqueta </head> y pegamos antes de </head>
    Truco encontrar rápido: cuando estés en la caja de código apreté Ctrl+F y escribe </head> enter y estarás en la linea instantáneamente.
    Una vez que estes en la etiqueta en la parte de arriba pega este codigo.

    Código:
    <!-- compartir para ver contenido carambel -->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
    <style>
    #youcarambelblocker {
     position:relative;
     margin:0px auto;
     cursor:;
     overflow: hidden;
     border:0px solid #000;
     width:640px;
     height:360px;
    }
    #youcarambelblocker iframe {
    display:;
    }
    #youcarambelblocker #image {
     width:100%;
     height:100%;
     background-size:100% 100%;
    }
    #youcarambelblocker #play {
     position:absolute;
     top:0;
     left:0;
     display:block;
     width:640px;
     height:360px;
     background: url(http://3.bp.blogspot.com/-yvC1Py1lQ98/U9avGvgURmI/AAAAAAAAKkI/GOdz5yCVbac/s1600/playyoutube.png);
     border:0px solid #000;
     z-index:1;
    }
    #youcarambelblocker #play-button {
     position:absolute;
     cursor:pointer;
     top:0;
     left:0;
     display:block;
     width:640px;
     height:360px;
    }
    #youcarambelblocker #play-button:hover {
           position:absolute;
           cursor:pointer;
           top:0;
           left:0;
           display:block;
           width:640px;
           height:360px;
           background: url(http://1.bp.blogspot.com/-2oDQw9hgu4I/U9avXdvVibI/AAAAAAAAKkQ/sbyAH5d54HQ/s1600/playyoutube.png);
    }
    #youcarambelblocker #sharebox {
       display:none;
       cursor:pointer;
       position:absolute;
       top:0;
       left:0;
       width:640px;
       height:360px;
       background: url(http://2.bp.blogspot.com/-FfOKWPdyr2g/U9aw-urG34I/AAAAAAAAKkc/F0vBuhhvTOs/s1600/playyoutube.png);
       border:0px solid #000;
       z-index:2;
    }
    </style>
    <!-- compartir para ver contenido carambel -->


    #3 Paso:
    Buscar la etiqueta <body> y pegar debajo de ella este codigo, si tienes problemas usa el truco del paso 2 pero con la diferencia de </head> escribe <body> para que la encuentres mas rapido y ahorres tiempo.

    Código:
    <!-- compartir para ver contenido carambel -->
    &lt;div id='fb-root'/&gt;
    &lt;script&gt;
    //&lt;![CDATA[
    (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = &quot;//connect.facebook.net/es_LA/all.js#xfbml=1&amp;appId=1439152689637274&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    //]]&gt;
    &lt;/script&gt;
    &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
    &lt;script&gt;
    //&lt;![CDATA[
    window.fbAsyncInit = function() {
    FB.init({
    appId: '1439152689637274',
    status: true,
    xfbml: true
    });
    // Additional initialization code such as adding Event Listeners goes here
    };
    function youcarambelblocker() {
    FB.ui( {
    method: '../sharer/sharer.php?u=' +document.URL+ '',
    link : document.URL,
    },
    function(response) {
    if (response) {
    $(&quot;#image, #play, #play-button, #sharebox&quot;).fadeOut('slow');
    } else {
    //alert('');
    }
    }
    );
    };
    function sharebox(){
    $(&quot;#sharebox&quot;).show();
    }
    function youcarambel (IDyoutube) {
    var output1 = '&lt;div id=&quot;youcarambelblocker&quot;&gt;&lt;div id=&quot;image&quot; style=&quot;background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)&quot;&gt;&lt;div id=&quot;play&quot;&gt;&lt;div id=&quot;play-button&quot; onclick=&quot;sharebox();&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;sharebox&quot; onclick=&quot;youcarambelblocker();&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;iframe width=&quot;640&quot; height=&quot;360&quot; src=&quot;http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;&lt;/div&gt;';
    document.write (output1);
    }
    //]]&gt;
    &lt;/script&gt;
    &lt;/b:if&gt;
    <!-- compartir para ver contenido carambel -->
    #4 paso:
    Haz clic en la opcion guardar de blogger template.
    guardarblogger.jpg

    #5 Paso:
    Crea una entrada nueva dentro de ella elije la opción HTML, y pega este código, cambia "Código de vídeo de youtube" No toques las comillas solo lo que están dentro de ellas por el código del vídeo deseado.

    Código:
    <script>youcarambel("Código de vídeo de youtube");</script>
    Código con youtube quedaría así solo pongan el código ejemplo: https://www.youtube.com/watch?v=udckUJA75nU

    Código:
    <script>youcarambel("udckUJA75nU");</script>
    #6 Muestras y demo:
    Una imagen vale mas que mil palabras:


    Un demo funcionando vale mas que 1 millón de imágenes juntas





    BONUS EXTRA:

    Ve a tu blog seguidamente busca:

    • Configuración
    • Entradas y comentarios


    Busca la opción: Plantilla de las entradas y guíate con las imágenes

    1.jpg
    2.jpg

    Este truco sirve para ahorrar trabajo y estar pegando una y otra vez el mismo código
    cuando hayas hecho estos pasos cada que crees una entrada aparecerá el código de forma automática
    lista para que puedas modificar el código de youtube.

    Si te gusto mi tutorial no dudes en:



    • Darle un comentario
    • Darle un Me Agrada
    • Compartirlo en las redes sociales


    El vídeo del paso "#5" ¡A caballo regalado no se lo mira los dientes!
    Última edición por Carambel; 29-jul-2014 a las 16:46

  2. #2
    Me gusta, muy bien explicado.

  3. #3
    Registro
    20-abril-2013
    Ubicación
    Lima
    Mensajes
    4.283
    Buen tutorial, se agradece

  4. #4
    Registro
    25-agosto-2013
    Ubicación
    Perú
    Edad
    23
    Mensajes
    3.691
    Tengo otro tutorial, subiré a la siguiente semana espero que les sirva

  5. Muy bueno

  6. #6
    Registro
    17-febrero-2012
    Ubicación
    Colombia.
    Mensajes
    1.640
    Buen tutorial, gracias

  7. #7
    Cita Iniciado por Carambel Ver Mensaje
    Tengo otro tutorial, subiré a la siguiente semana espero que les sirva
    Gracias

  8. #8
    Registro
    07-noviembre-2011
    Ubicación
    Mexico
    Edad
    27
    Mensajes
    6.175
    Bueno amigo, ¿sabes si este scrip deja de funcionar cuando las visitas al sitio son muchas?

    Es que me ha pasado con otros que cuando ya es muy viral, el scrip deja de funcionar...

    Gracias y tienes mi agrada...

  9. #9
    Registro
    16-junio-2014
    Ubicación
    España
    Edad
    28
    Mensajes
    736
    Gracias por el aporte

  10. #10
    Registro
    15-junio-2013
    Ubicación
    Lima, Perú
    Edad
    27
    Mensajes
    2.418
    Compartir para ver video para Blogger (Viral)
    buen tutorial.... para wordpress hay alguna manera similar?

Página 1 de 8 123 ... ÚltimoÚltimo

Temas similares

  1. Respuestas: 5
    Último mensaje: 15-nov-2014
  2. Tutorial: FREE: Video App Viral Para Blogger.!!!
    Hola, este es mi primer tutorial y les vengo a ofrecer una App Viral de Videos para Blogger que auto-publica en el muro del usuario cuando acepta los...
    Respuestas: 52
    Último mensaje: 01-jul-2014
  3. App viral de botón compartir para blogger
    Hola betas, me preguntaba si esta app Video: Niño de 13 años es condenado a cadena perpetua su historia es sorprendente « VideoYNoticias.Com está...
    Respuestas: 12
    Último mensaje: 14-feb-2014

Normas de publicación

  • No puedes crear nuevos temas
  • No puedes responder mensajes
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •