Para você que é das antigas e gosta do gadget ''seguidores'' como nós da mega creators 3d, esse tutorial foi feito para você. Alguns amigos me perguntaram como faz pra colocar esse botão de seguir igual nós colocamos aqui no nosso blog e por isso, trago a vocês um tutorial muito rapido ensinando a colocar no seu também.

Primeiro passo:  Nesse primeiro passo iremos ensinar a vocês como conseguir o ID do seu blogger.
No painel do seu blogger clique em ''Tema'' ou em ''Layou''. Feito isso, la na barra de endereços (onde você digita os sites que quer entrar) tem o link de onde você se encontra, dentro desse link está escrito blogID= e um numero na frente, esse numero é o ID do seu blog. Pegue esse numero e guarde.

Segundo passo: Copie o codigo abaixo, entre em Layout > Adicionar Gadget > HTML/Javascript e cole o codigo copiado, substitua onde este escrito SEUIDAQUI pelo numero que você conseguiu no primeiro passo, e substitua também o NOMEDOBLOG pelo nome do seu blog, depois é só salvar e estará feito.


<a href="http://www.blogger.com/follow-blog.g?blogID=SEUIDAQUI" style="display:scroll;position:fixed;top:10px;left:12px;" target="_blank" title="Clique Para Seguir NOMEDOBLOG"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBX8C5W5_lJ_0MWTiAR4OToMprHy_DSYWDlD0SCyP_d0dZgII0thkciKG63RKaGCV5EkWwG79S6H7Et8a4vmIms1fr9vGD5wf36qLRXfjBbPOcHXAmwC0haBsWDq-D3DeCPBt_zo6DQuo/s1600/porMEGACREATORS3D.png" /></a>

      Com a nova atualização do blogger, ficou mais dificil alinhar as imagens das postagens do blogger lado a lado como a imagem acima, porem, com o código que irei passar, seus problemas acabaram!

Primeiro passo: Escreva sua postagem normalmente, porem, quando for adicionar as imagens, clique em ''HTML'' na aba da postagem e insira o seguinte código:
<center> <div style="float:left; width:33%"> SUA IMAGEM AQUI</div> <div style="float:left; width:33%"> SUA IMAGEM AQUI</div> <div style="float:left; width:33%"> SUA IMAGEM AQUI</div> </center>
* Perceba que nó código está width como 33%, isto significa que, iremos adicionar 3 imagens e cada uma delas ocupará 33% da area do post.
-Para colocar duas imagens, substitua 33 por 50 e para colocar 4, substitua 33 por 25 e acrescente mais <div style="float:left; width:25%"> SUA IMAGEM AQUI</div> antes de </center> no código.

Segundo passo: Onde está escrito "sua imagem aqui" você deve colocar o código da sua imagem. Se você não souber o código da sua imagem basta apagar esse trecho e deixar o cursor do mouse no mesmo lugar. Clique no icone de adicionar imagem e o código dela aparecerá no lugar do texto que você apagou, feito isso, volte em escrever e veja se deu tudo certo.

Se você não entendeu como conseguir o html de uma imagem, clique no link abaixo:

• Como hospedar imagens no blogger.

• Mega Creators 3D - Como deixar...

     Veja que no link acima não da pra ler completamente o titulo da postagem pois o nome do blog vem antes. Neste tutorial ensinarei a vocês a como colocar o titulo do post antes do blog, isso, alem de deixar esteticamente mais bonito, é uma ótima dica de SEO, para seu blog, pois ajuda a encontra-lo mais facilmente no google. Exemplo:

• Como colocar titulo do post antes do nome do blog - Mega Creators 3D

Primeiro Passo: Entre em ''layout > Editar HTM'' , aperte as teclas CTRL+F dentro do código html e procure por <title><data:blog.pageTitle/></title>

Segundo Passo:  Substitua este código por <title><data:blog.pageName/> <b:if cond='data:blog.pageName'> | </b:if><data:blog.title/></title>

Pronto, agora é só testar.

Neste tutorial ensinarei a vocês 3 coisas simples.

1. Como hospedar imagens no blogger;
2. Como conseguir a url de uma imagem pleo blogger;
3. Como conseguir o html de uma imagem pelo blogger.

 Neste tutorial ensinarei a vocês como instalar o gadget de ultimo comentários  com miniatura, nome e um trecho do comentário de seus seguidores como mostra a imagem ao lado.

Primeiro passo: Entre na aba "layout" do seu blog, clique em "adicionar um gadget" e cole o código abaixo;<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 5, showAvatar = true, avatarSize = 20, roundAvatar = true, showMorelink = false, moreLinktext = "More »", defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwLU_fLJG4ekno4THokXS2uTPOiPq9ep2wBPmKnuAufOeKW79hCXdUCOu91_zwBywpkEDRRunWDQgukRY9laEAuWcWeJl_JP9DRu6pMI6q4lR49g26yJ3OvPDimLEBP2PVACvuebrrZg/s1600/COMMENTS.png", hideCredits = false; //]]> </script> <script src="http://static.tumblr.com/glpbb7a/RsNn4wv8c/comentariosrecentes.js" type="text/javascript"></script> <script src="https://megacreators3d.blogspot.com.br/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5" type="text/javascript"></script>

Segundo passo: Dentro do código substitua https://megacreators3d.blogspot.com.br/ pelo link do seu blog (mantendo o restante do link do código). Feito isso, Clique em "salvar".


Outras modificações possíveis:

1. Você pode substituir a imagem que aparece para aqueles usuários que não possuem imagens alterando o link da imagem que eu coloquei (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikwLU_fLJG4ekno4THokXS2uTPOiPq9ep2wBPmKnuAufOeKW79hCXdUCOu91_zwBywpkEDRRunWDQgukRY9laEAuWcWeJl_JP9DRu6pMI6q4lR49g26yJ3OvPDimLEBP2PVACvuebrrZg/s1600/COMMENTS.png) pelo de sua preferencia;
2. Para mostrar mais comentários é só modificar o número que fica a frente de numComments (ex: numComments =10);
3. Para mudar o tamanho da imagem de cada miniatura altere o valor de avatarSize;

Muitos dos meus leitos me perguntam como eu crio a caixinha para colocar meus códigos, então estarei disponibilizando o código de minha caixinha e ensinarei a utiliza-la.

Primeiro passo: Na area da postagem do blog, existe uma aba escrito "ESCREVER/HTML" clique em "HTML" e cole o código abaixo.

<textarea style="margin-left: 0px; margin-right: 0px; width: 100%; height: 180px;">SEU CÓDIGO AQUI</textarea>

Segundo passo: Onde está escrito '' SEU CÓDIGO AQUI" substitua pelo código que você quer compartilhar.

Terceiro passo: Volte para aba "Escrever" e continue a escrever seu post normalmente.

Outras modificações possiveis:

1. Ajuste de largura: Onde está escrito width: 100%; significa que a caixinha será expandida horizontalmente na area total do post, para definir outro tamanho específico basta substituir 100% pelo tamanho que você quer, não esquecendo de adicionar "px" na frente. (ex: width: 100px;)
2. Ajuste de altura: Para ajustar é só alterar o campo height: 180px; pelo tamanho que deseja.

    Este tutorial é para para pessoas iniciantes na área do design, muitas vezes percebo que as pessoas tem dificuldade em encontrar as famosas imagens sem fundo na internet, então resolvi criar este tutorial rápido para facilitar a vida de vocês.

É importante saber que todas as imagens que não possuem fundo, tem que ser salva obrigatoriamente em PNG, pois se for salva em JPEG, o fundo que era pra ser transparente se tornará branco. Outra coisa também que pode ser notada é que quando clicamos sobre alguma imagem dessa no google e ela abre em um tamnho maior, o fundo fica com uns quadriculados cinza e branco, isso significa que o fundo está transparente. (Tenha como exemplo a imagem que foi usada nesse tutorial no tópico de cima, onde a seta que sai da estrela ''★'' aponta).

•  Mas o que significa Render?

      Para o objetivo que mostramos nessa aula, a palavra render significa ACABAMENTO, ou melhor, no nosso caso, que o acabamento da imagem é a mesma recortada, ou seja, com o fundo transparente.

Para facilitar a vida de vocês, nós temos várias renders aqui no blog que são divididas por categoria.

1.  Todos os Renders
2.  Renders Alimentos 
3.  Renders Android 
4.  Renders Anime 
5.  Renders Dance 
6.  Renders Design 
7.  Renders Efeitos 
8.  Renders Filmes 
9.  Renders Jogos 
10.  Renders Música 

*tutorial atualizado 2018






Primeiro Passo: Vá em Layout, ''Adicionar Gadget'' e em seguida ''HTML/Java Script''.

Segundo Passo: Copie e cole o seguinte código:

<center> <div> <img src="https://lh6.googleusercontent.com/-FaTuEJMeyac/TlSOicbYp2I/AAAAAAAAAGA/agZFL5V9eNQ/01.png" /> Área do visitante ( <a href="JavaScript:set()">?</a> )</div> </center> <script language = "JavaScript"> var expDays = 30; var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function Who(info){ var VisitorName = GetCookie('VisitorName') if (VisitorName == null) { VisitorName = prompt("Qual é seu nome"); SetCookie ('VisitorName', VisitorName, exp); } return VisitorName; } function When(info){ var rightNow = new Date() var WWHTime = 0; WWHTime = GetCookie('WWhenH') WWHTime = WWHTime * 1 var lastHereFormatting = new Date(WWHTime); var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + lastHereFormatting.getDate() var lastHereInDateFormat = "" + lastHereFormatting; var dayOfWeek = lastHereInDateFormat.substring(0,3) var dateMonth = lastHereInDateFormat.substring(4,11) var timeOfDay = lastHereInDateFormat.substring(11,16) var year = lastHereInDateFormat.substring(23,25) var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay SetCookie ("WWhenH", rightNow.getTime(), exp) return WWHText; } function Count(info){ var WWHCount = GetCookie('WWHCount') if (WWHCount == null) { WWHCount = 0; } else{ WWHCount++; } SetCookie ('WWHCount', WWHCount, exp); return WWHCount; } function set(){ VisitorName = prompt("Bem Vindo. Qual é o seu nome??"); SetCookie ('VisitorName', VisitorName, exp); SetCookie ('WWHCount', 0, exp); SetCookie ('WWhenH', 0, exp); } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } </script> <script> document.write("<b>Nome:</b> " + Who() + " <b>Esta é a:</b> " + Count() + "º</b> vez que nos visita") </script> <b>Hoje é:</b> <script language="JavaScript"> hoje = new Date() dia = hoje.getDate() dias = hoje.getDay() mes = hoje.getMonth() ano = hoje.getYear() if (dia < 10) dia = "0" + dia if (ano < 2000) ano = 1900 + ano function NArray (n) { this.length = n } NomeDiaWMOnline = new NArray(7) NomeDiaWMOnline[0] = "Domingo" NomeDiaWMOnline[1] = "Segunda-feira" NomeDiaWMOnline[2] = "Terça-feira" NomeDiaWMOnline[3] = "Quarta-feira" NomeDiaWMOnline[4] = "Quinta-feira" NomeDiaWMOnline[5] = "Sexta-feira" NomeDiaWMOnline[6] = "Sábado" NomeMesWMOnline = new NArray(12) NomeMesWMOnline[0] = "janeiro" NomeMesWMOnline[1] = "fevereiro" NomeMesWMOnline[2] = "março" NomeMesWMOnline[3] = "abril" NomeMesWMOnline[4] = "maio" NomeMesWMOnline[5] = "junho" NomeMesWMOnline[6] = "julho" NomeMesWMOnline[7] = "agosto" NomeMesWMOnline[8] = "setembro" NomeMesWMOnline[9] = "outubro" NomeMesWMOnline[10] = "novembro" NomeMesWMOnline[11] = "dezembro" document.write (NomeDiaWMOnline[dias] + ", " + dia + " de " + NomeMesWMOnline[mes] + " de " + ano) </script> <b>São:</b> <span id="Clock">00:00:00</span> <script language="JavaScript"> <!-- var Elem = document.getElementById("Clock"); function Horario(){ var Hoje = new Date(); var Horas = Hoje.getHours(); if(Horas < 10){ Horas = "0"+Horas; } var Minutos = Hoje.getMinutes(); if(Minutos < 10){ Minutos = "0"+Minutos; } var Segundos = Hoje.getSeconds(); if(Segundos < 10){ Segundos = "0"+Segundos; } Elem.innerHTML = Horas+":"+Minutos+":"+Segundos; } window.setInterval("Horario()",1000); //--> </script>

Terceiro Passo: Após ter colado o codigo, clique em ''Salvar'' agora é só aproveitar!