Tutorial: Como fazer um blog viral no Blogger com um truque incrível

Carambel · 28/07/2014

Olá a todos, hoje quero ensinar como converter seu blogger em algo viral para a principal rede social "Facebook", encontrei isso na internet, na verdade, mas o que muitos usuários não conseguiram foi implementar e, já que eu também tentei, não foi possível, mas encontrei a maneira de fazer funcionar da forma correta e sem complicar muito a vida.

Esclarecimentos:
- Funciona em qualquer template, desde que seja do blogger.
- Você não precisará fazer quase nada, apenas colocar os códigos.

#1 Passo:

Vá ao seu blog (Blogspot)
Tema
Editar HTML

#2 Passo:
Procure a tag </head> e cole antes de </head>
Truque para encontrar rápido: quando estiver na caixa de código, aperte Ctrl+F e escreva </head> enter e você estará na linha instantaneamente.
Uma vez que você esteja na tag, na parte de cima cole este código.

Inserir CODE, HTML ou PHP:

<!-- 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 Passo:
Procure a tag <body> e cole abaixo dela este código, se tiver problemas use o truque do passo 2, mas com a diferença de que em vez de </head> escreva <body> para que você a encontre mais rápido e economize tempo.

Inserir CODE, HTML ou PHP:

<!-- 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 passo:
Clique na opção salvar do template do blogger.

#5 Passo:
Crie uma postagem nova, dentro dela escolha a opção HTML e cole este código, altere "Código de vídeo do youtube" Não toque nas aspas, apenas no que está dentro delas, pelo código do vídeo desejado.

Inserir CODE, HTML ou PHP:

<script>youcarambel("Código de vídeo de youtube");</script>

Código com youtube ficaria assim, apenas coloquem o código exemplo: https://www.youtube.com/watch?v=udckUJA75nU

Inserir CODE, HTML ou PHP:

<script>youcarambel("udckUJA75nU");</script>

#6 Amostras e demo:
Uma imagem vale mais que mil palavras:

Um demo funcionando vale mais que 1 milhão de imagens juntas

DEMO

BONUS EXTRA:

Vá ao seu blog e em seguida procure:

Configurações
Postagens e comentários

Procure a opção: Modelo de postagem e guie-se pelas imagens

Este truque serve para economizar trabalho e não ficar colando uma e outra vez o mesmo código
quando você tiver feito estes passos, cada vez que criar uma postagem, o código aparecerá de forma automática
pronto para que você possa modificar o código do youtube.

Se você gostou do meu tutorial não hesite em:

Deixar um comentário
Dar uma curtida
Compartilhar nas redes sociais

O vídeo do passo "#5" Cavalo dado não se olha os dentes!

pixelito · 28/07/2014

Gostei, muito bem explicado.

Marco Grados · 28/07/2014

Bom tutorial, agradeço :encouragement:

Carambel · 28/07/2014

Tenho outro tutorial, vou postar na próxima semana, espero que seja útil para vocês 😉

Jaison Mora · 28/07/2014

Muito bom :encouragement:

Andres128 · 28/07/2014

Bom tutorial, obrigado :encouragement:

jackemathe · 28/07/2014

Carambel disse:
Tenho outro tutorial, vou postar na próxima semana, espero que seja útil para vocês 😉

Obrigado :encouragement:

tonydalys · 28/07/2014

Bom, amigo, você sabe se este script para de funcionar quando as visitas ao site são muitas?

É que já aconteceu comigo com outros que, quando fica muito viral, o script para de funcionar...

Obrigado e você tem meu agradecimento...

Gotze · 28/07/2014

Obrigado pela contribuição :encouragement:

Lenny Creative · 28/07/2014

bom tutorial.... para wordpress tem alguma maneira similar?
🙄

Carambel · 28/07/2014

tonydalys disse:
Bom, amigo, você sabe se este script para de funcionar quando as visitas ao site são muitas?

É que já aconteceu comigo com outros que, quando fica muito viral, o script para de funcionar...

Obrigado e você tem meu agradecimento...

Funciona corretamente, a única coisa que pode causar problemas podem ser as denúncias dos usuários do facebook.

Johanko · 28/07/2014

Lenny Creative disse:
bom tutorial.... para wordpress tem alguma maneira similar?
🙄

Para isso tem um plugin:encouragement:

BlogNivel · 28/07/2014

O ruim é que não dá para compartilhar com Smartphone, já tentei de tudo, estou editando o código há mais de 3 meses e não resolvi o problema com os celulares

pichuyork · 28/07/2014

[MENTION=47248]Carambel[/MENTION] Obrigado pelo tutorial, algumas dúvidas

O Adsense permite este tipo de scripts?
O que acontece se em algum post não for colocado vídeo? Se eu precisar fazer um post normal sem vídeo, não afeta em nada?

Carambel · 28/07/2014

pichuyork disse:
[MENTION=47248]Carambel[/MENTION] Obrigado pelo tutorial, algumas dúvidas

O Adsense permite este tipo de scripts?
O que acontece se em algum post não for colocado vídeo? Se eu precisar fazer um post normal sem vídeo, não afeta em nada?

Pergunta 1:
Não, está permitido. (Se você vir no DEMO, vou tirar agora, estou fazendo alguns trabalhos)

Pergunta 2:
É só não colocar o código do passo 5 ou, se você tiver automático, apague-o do post e você terá um post normal.

manueldavid123 · 28/07/2014

Muito útil! Vou implementar nos meus blogs! Obrigado

Luis12 · 28/07/2014

alguém testou :encouragement: para mim não funciona

pichuyork · 28/07/2014

Carambel disse:
Pergunta 1:
Não, está permitido. (Se você vir no DEMO, vou tirar agora, estou fazendo alguns trabalhos)

Pergunta 2:
É só não colocar o código do passo 5 ou, se você tiver automático, apague-o do post e você terá um post normal.

Não ficou claro para mim a pergunta um, você me disse NÃO,(vírgula) e depois ESTÁ PERMITIDO.

Está ou não permitido pelo adsense?

tonydalys · 28/07/2014

Carambel disse:
Pergunta 1:
Não, está permitido. (Se você vir no DEMO, vou tirar agora, estou fazendo alguns trabalhos)

Pergunta 2:
É só não colocar o código do passo 5 ou, se você tiver automático, apague-o do post e você terá um post normal.

testei em um par de modelos e o vídeo sai assim: Gyazo - b61df93167608ae1a72a4603542d8387.png

alguma solução?

Carambel · 28/07/2014

tonydalys disse:
testei em um par de modelos e o vídeo sai assim: Gyazo - b61df93167608ae1a72a4603542d8387.png

alguma solução?

Falta você colocar o ID do vídeo do youtube, preste atenção no código para os posts, não toque nas aspas

Tutorial: Como fazer um blog viral no Blogger com um truque incrível

Carambel

pixelito

Marco Grados

Carambel

Jaison Mora

Andres128

jackemathe

tonydalys

Gotze

Lenny Creative

Carambel

Johanko

BlogNivel

pichuyork

Carambel

manueldavid123

Luis12

pichuyork

tonydalys

Carambel

Tópicos similares