Postagens Recentes

28 de jul. de 2016

Fontes que imitam giz

Nenhum comentário:


Na moda e muito linda, na onda retrô, essas fontes imitando giz, dão um toque especial, com ar de feito a mão em plaquinhas, tags e o que mais que sua criatividade mandar.
Baixe as fontes, descompacte no seu programa de edição e mãos a obra.

Clique aqui.

24 de jul. de 2016

Retirar Navbar, Atribuição e Feed Link do Blogger

Nenhum comentário:


O Blogger e seus modelos nativos trazem alguns elementos que muitas vezes não gostamos, Eu por exemplo, toda vez que faço template para meus clientes, é a primeira coisa que faço, retirar estes três elementos que a meu ver, deixam o template com uma carinha nada profissional. Refiz esta dica deixando bem simples para vocês.




No modelo de seu blog", clique em "Personalizar"





Ao abrir essa janela, vá em Avançado  -------> Adicionar CSS 





Copie o código abaixo e cole no local indicado.




.feed-links, #Attribution1, .navbar {display:none;}


Depois, clique em "Aplicar ao blog", no canto direito de seu monitor, na parte superior para salvar.

Postagens no Blogger em forma de grade

Nenhum comentário:


Um excelente tutorial para dar um ar mais profissional a seu blog. São as postagens do Blogger em forma de grade. Dão uma sintetizada em seu blog, fazendo com que o leitor tenha um apanhado de suas postagens, sem parecer cansativo ou desgastante, além da economia de espaço...

O hack foi desenvolvido pelo blog Helplogger


Vá até o "Modelo de seu blog", clique em "Editar HTML"








Procure por </head> e acima dele cole o código abaixo.





<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}

else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9ijz3URv91hsNn5aQO0RPA18k2-xUEZI1elWD8SQON-RAhZkW3Dk5NhQD5q0ttjHlWry54TC_wtLbMKOA1z-th1N2HnRXwmKA4ei5Th-sI8C2SZKLeIDvi9c6IYJ6GNHEBK8KETGZQe0/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

Salve!



Agora clique em CTRL +F e procure pelo seguinte código: <data:post.body/>
Pode ser que você encontre este código 3 vezes em seu template. Substitua apenas o segundo e o terceiro código.








<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>

Salve!

Agora escolha o modelo de seu agrado e acima de </head> cole o código ao qual você quer como modelo de postagens.



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>



Salve!

Mais modelos pegue na página oficial do desenvolvedor clicando aqui

Postagens relacionados

Nenhum comentário:


A ideia é, fazer o visitante explorar seu blog, conhecendo a maior quantidade de páginas, lendo o conteúdo de seu blog, aprofundando no assunto e permanecendo alí, indefinitivamente. Então o segredo é instalar ferramentas para isso. Essa é uma boa ferramenta para aguçar a curiosidade. 


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.







Procure por  <div class='post-footer-line post-footer-line-3'>


Abaixo dele, cole o próximo código colocando o endereço do seu blog no local indicado:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var _0x5db5=["C 2j(a){(C(e){2 f={15:\x22\x22,V:5,1l:5,17:5,E:\x22\x22,6:14,13:\x22\x22,12:\x221O\x22,N:\x22\x22,19:\x222x 1i\x22,1d:\x221H://1.2y.1J.20/-2a/2r/2u/2v/2w/2B.2C\x22,1k:1I,1m:[\x221K\x22,\x221L\x22,\x221N\x22,\x221P\x22,\x221Q\x22,\x221R\x22,\x221S\x22,\x221T\x22,\x221U\x22,\x221W\x22,\x221X\x22,\x221Y\x22],1a:\x2225 1i\x22,16:\x22\x22,1o:2s};f=e.2t({},f,a);2 k=0,b=14,g=14;3(!f.E){1n.1G(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27);f.E=\x22#F-R\x22}2 c=C(x,n){k++;3(x.U.W){J(2 o=0;o\x3Cx.U.W.z;o++){2 u=x.U.W[o];2 q=\x22\x22;J(2 m=0;m\x3Cu.18.z;m++){3(u.18[m].1e==\x2224\x22){q=u.18[m].L;28}}2 p=u.2i.$t.O(0,10);2 l=p.O(0,4);2 w=p.O(5,7);2 s=p.O(8,10);2 r=f.1m[1f(w,10)-1];2 y=u.2z$2A.$t;2 t=u.X.$t;3(\x221j$1c\x22Y u){2 v=u.1j$1c.11.T(/\x5C/s[0-9]+\x5C-c/g,\x22/s\x22+f.1k+\x22-c\x22)}K{2 v=f.1d}3(1M.L.1r()!=q.1r()){i(q,t,v,l,s,y,r)}}}3(k\x3E=f.6.z){g.G(\x22B\x22,\x22\x22);e(\x22#F-P-1g\x22,b).1h();3(f.V\x3E0){e(\x22Q:1V(\x22+(f.V-1)+\x22)\x22,g).1h()}}};2 i=C(p,v,w,l,t,x,r){2 q=e(\x22Q\x22,g);J(2 o=0;o\x3Cq.z;o++){2 u=e(\x22a\x22,q.H(o));2 s=j(u);3(u.G(\x22L\x22)==p){h(u,++s);J(2 n=o-1;n\x3E=0;n--){2 m=e(\x22a\x22,q.H(n));3(j(m)\x3Es){3(o-n\x3E1){q.H(n).1Z(q.H(o))}M}}3(o\x3E0){q.H(0).21(q.H(o))}M}}g.22(\x27\x3CQ\x3E\x3Ca B=\x2223\x22 L=\x22\x27+p+\x27\x22 X=\x22\x27+(f.N?f.N.T(\x22\x5Cd\x22,1):\x22\x22)+\x27\x22\x3E\x3CD B=\x2226\x22\x3E\x3C27 1b=\x22\x27+v+\x27\x22 29=\x22\x27+w+\x27\x22/\x3E\x3C/D\x3E\x3C1p\x3E\x27+v+\x27\x3C/1p\x3E\x3C/a\x3E\x3CA B=\x222b\x22\x3E\x3CD B=\x222c\x22\x3E\x27+t+\x22 \x22+r+\x22 \x22+l+\x27\x3C/D\x3E\x3CD B=\x222d\x22\x3E\x3Ca L=\x22\x27+p+\x27#2e-2f\x22 2g=\x222h\x22\x3E\x27+x+\x22\x3C/a\x3E\x3C/D\x3E\x3C/A\x3E\x3C/Q\x3E\x22)};2 j=C(l){2 m=1f(l.G(\x221q\x22));M m\x3E0?m:1};2 h=C(l,m){l.G(\x221q\x22,m);3(f.N){l.G(\x22X\x22,f.N.T(\x22\x5Cd\x22,m))}3(f.16){l.G(\x22B\x22,f.16+m)}};2 d=C(){3(f.E!=\x22#F-R\x22){2 l=e(f.E);3(l.z!=1){M}b=e(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27).I(l)}K{b=e(f.E)}3(!f.6){f.6=[];e(\x27a[1e=\x222k\x22]:2l(\x27+f.1l+\x22)\x22).2m(C(){2 n=e.2n(e(2o).2p().T(/\x5Cn/g,\x22\x22));3(e.2q(n,f.6)==-1){f.6[f.6.z]=n}})}3(f.6.z==0\x26\x26!f.1a){M}3(f.6.z==0){e(\x22\x3CS\x3E\x22+f.1a+\x22\x3C/S\x3E\x22).I(b)}K{3(f.19){e(\x22\x3CS\x3E\x22+f.19+\x22\x3C/S\x3E\x22).I(b)}}3(f.13){e(\x27\x3CA Z=\x22F-P-1g\x22\x3E\x27+f.13+\x22\x3C/A\x3E\x22).I(b)}g=e(\x22\x3C1s \x22+(f.12?\x27B=\x22\x27+f.12+\x27\x22\x27:\x22\x22)+\x22\x3E\x3C/1s\x3E\x22).I(b);3(f.6.z==0){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}K{J(2 m=0;m\x3Cf.6.z;m++){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{2D:f.6[m],\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}}};3(f.1o){e(2E).2F(d)}K{e(1n).2G(d)}})(2H)};","|","split","||var|if|||tags|||||||||||||||||||||||||||||length|div|class|function|span|containerSelector|related|attr|eq|appendTo|for|else|href|return|relevantTip|substring|posts|li|postsx|h4|replace|feed|maxPosts|entry|title|in|id||url|loadingClass|loadingText|null|blogURL|postScoreClass|maxPostsPerTag|link|relatedTitle|recentTitle|alt|thumbnail|rlpBlank|rel|parseInt|loadingtext|remove|Relacionados|media|rlt_thumb|maxTags|rlt_monthNames|document|onLoad|strong|score|toLowerCase|ul|ajax|feeds|summary|data|max|results|json|script|success|dataType|jsonp|cache|true|write|http|70|blogspot|Jan|Fev|location|Mar|loadingnya|Abr|Mai|Jun|Jul|Ago|Set|gt|Out|Nov|Dez|after|com|before|append|jdlunya|alternate|Recent|gmbrrltd|img|break|src|htG7vy9vIAA|infonya|dt|jkmt|comment|form|target|_blank|published|relatedPostsWidget|tag|lt|each|trim|this|text|inArray|Tp0KrMUdoWI|false|extend|AAAAAAAABAU|e7XkFtErqsU|s1600|Posts|bp|thr|total|grey|gif|category|window|load|ready|jQuery","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (_0xd509x1,_0xd509x2,_0xd509x3,_0xd509x4,_0xd509x5,_0xd509x6){_0xd509x5=function (_0xd509x3){return (_0xd509x3<_0xd509x2?_0x5db5[4]:_0xd509x5(parseInt(_0xd509x3/_0xd509x2)))+((_0xd509x3=_0xd509x3%_0xd509x2)>35?String[_0x5db5[5]](_0xd509x3+29):_0xd509x3.toString(36));} ;if(!_0x5db5[4][_0x5db5[6]](/^/,String)){while(_0xd509x3--){_0xd509x6[_0xd509x5(_0xd509x3)]=_0xd509x4[_0xd509x3]||_0xd509x5(_0xd509x3);} ;_0xd509x4=[function (_0xd509x5){return _0xd509x6[_0xd509x5];} ];_0xd509x5=function (){return _0x5db5[7];} ;_0xd509x3=1;} ;while(_0xd509x3--){if(_0xd509x4[_0xd509x3]){_0xd509x1=_0xd509x1[_0x5db5[6]]( new RegExp(_0x5db5[8]+_0xd509x5(_0xd509x3)+_0x5db5[8],_0x5db5[9]),_0xd509x4[_0xd509x3]);} ;} ;return _0xd509x1;} (_0x5db5[0],62,168,_0x5db5[3][_0x5db5[2]](_0x5db5[1]),0,{}));
//]]>
</script>
<div id='artikelterkaitmkr'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Posts Relacionados",
containerSelector: "#artikelterkaitmkr",
blogURL: "AQUI O ENDEREÇO DE SEU BLOG",
maxPosts: 4,
maxPostsPerTag:4,
rlt_thumb: 120
});
});
//]]>
</script>
</div>
</b:if>
<br/>

Salve !


Procure por ]]></b:skin>  e cole o código abaixo depois dele.


<style>
#related-postsx h4{font-family: Segoe Print;font-size:160%;text-shadow:0 1px 2px #fff; margin-bottom:10px; text-align: center; background: #ccc; padding: 3px;}
#related-postsx ul,#related-postsx li{padding:0;list-style:none;margin:0;overflow:hidden;position:relative}
#related-postsx li{width:49.5%;float:left;height:135px;margin:0 0.25% 2px}
#related-postsx .overlayb{width:100%;height:250px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8Sfk9IYor5IrlJJaRjK0b8chihOeuFeYfoRu8JdAWYvISV60t0FFIDxoGdKLRlQ47tZn4mzy_L_4nKQqSruXDsKbtBriwgjURIeJ8pqxdTQhHTX50UC5ECoTs1vcTVsBDnIzH7KrkTo/s1600/linebg-fade.png);z-index:1;position:absolute;background-position:0 0;background-repeat:repeat-x;bottom:-50%}
#related-postsx li:hover .overlayb{-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#related-postsx img{width:100%;position:absolute;bottom:-40%;height:250px}
#related-postsx strong{position:absolute;bottom:30px;color:white;font-family:&quot;Bitter&quot;,arial,sans-serif;padding:0 10px;z-index:4;width:100%;font-size:150%;font-weight:normal;text-shadow:0 1px 2px black}
#related-postsx .infonya{position:absolute;bottom:10px;padding:0 10px;width:100%;z-index:3;color:white}
#related-postsx .dt{margin-right:5px;padding-right:5px;border-right:1px solid #E9E9E9}
#related-postsx .jkmt{position:absolute;right:10px;padding:2px 4px;top:-5px;background-color:#8A8A8A;z-index:3}
#related-postsx .jkmt::after{content:&quot;&quot;;width:0;height:0;border-width:2px 4px;border-style:solid;border-color:#8A8A8A #8A8A8A transparent transparent;position:absolute;top:100%;right:0}
@media only screen and (max-width:479px){
  #related-postsx li{width:100%;margin:0 0 2px}
}


Procure por </body> e acima dele cole o próximo código




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
SocialBookmarks();
relatedPostsWidget({
related_title: "Posts relacionados",
containerSelector: "#relatedpostsx",
maxPosts: 4,
loadingClass: "loadingxx",
rlt_thumb: 300
});

});
//]]>
</script>
</b:if>






Salve!

Agora acima de </head> cole este código abaixo.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

23 de jul. de 2016

Marcadores em forma de menu suspenso e postagens que se abrem na mesma página

Nenhum comentário:





 Dois hacks que vão dar um toque especial e bacana a seu blog, além de deixa-lo mais eficiente e economizar espaço.



Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Procure por <b:skin>...</b:skin>  se não encontrar procure por ]]></b:skin>






Abaixo dele, cole o próximo código:




<style>
.sidebar li{list-style-type:none; }
a.loadpost{
display:block;
padding:8px;
background-color:#cc0000;
color:white;
text-transform:capitalize;
text-decoration:none
}
.labelnyatas a{
list-style-type:none;
display:inline-block;
padding:0 5px;height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cc0000}
</style>

<style>
/* Label =====================*/
.labelnyatas a{
 list-style-type:none;
display:inline-block;
padding:0 5px;
height:17px;
font-size:8px;
line-height:17px;
text-decoration:none;
background-color:#cc0000;
color:white
}
.bwh-title .comment-link:hover,a.loadpost:hover,.labelnyatas a:hover{
background-color:#cccccc;
font-family: Sans-serif Courier New;
font-size: 18px;
}
.bwh-title .comment-link::after{
content:&quot;&quot;;
width:0;
height:0;
border-width:2px 4px;
border-style:solid;
border-color:#808080 #808080 transparent transparent;
position:absolute;
top:100%;
right:0
}

.menu-xitem{
list-style-type:none;
font-size: 14px;
height:35px;
border-bottom:5px solid #000000;/*cor da linha */
margin-bottom:20px;
color:white
}
.menu-xitem .xitem1{
list-style-type:none;
height:30px;
position:relative;
float:left
}
.menu-xitem .liat{
font-size: 18px;
display:block;
line-height:35px;
padding:0 20px 0 10px;
float:left;
background-color:#cc0000; /*cor botão*/
text-transform:uppercase;
color:white;
position:relative;
text-decoration:none
}
#labelxnya{
list-style-type:none;
position:absolute;
width:230px;
top:100%;
z-index:3;
background-color:#000000;/* cor fundo menu*/
display:none
}
#labelxnya.hidden{display:none}
.menu-xitem .xitem1:hover #labelxnya.hidden{
display:block
}
#labelxnya a{
list-style-type:none;
color:white;text-decoration:none;
display:block;padding:0 10px;line-height:25px
}
#labelxnya a:hover{
border-left:4px solid #cc0000
}
.menu-xitem .liat::before,.menu-xitem .liat::after{
content:&quot;&quot;;width:0;height:0;
border-width:4px 4px;
border-style:solid;
border-color:white transparent transparent transparent;
position:absolute;
top:14px;
right:8px
}
.menu-xitem .liat::after{
border-width:15px 6px;
border-color:transparent transparent black black;
left:100%;
top:0;
right:auto
}

</style>

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");}}

window.labelnyacx=(function(){var a=function(d){var e=d||{},c=e.url_blog||window.location.host,b=e.id_labelcontent||"#labelxnya";$.ajax({url:"http://"+c+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(h){var f=h.feed.category,j="";if(f!==undefined){j="<ul class='subnya-xitem'>";for(var g=0;g<f.length;g++){j+='<li><a href="/search/label/'+encodeURIComponent(f[g].term)+'" target="_blank">'+f[g].term+"</a></li>"}j+="</ul>";$(b).html(j)}else{$(b).html("<span>No Label!</span>")}},error:function(){$(b).html("<strong>Error Loading Feed!</strong>")}})};return function(b){a(b)}})();
//]]>
</script>
  </b:if> </b:if>



Salve !



Procure agora por </body>

Acima dele cole o próximo código.



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
resizeThumb("main",250);
labelnyacx();
(function($) {
var loadingGif = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhejKBEc5a7_kVvZWr-zZV27l1Z7GQegzONtlQJQpWRdSjGJ8dbsZHNVz6Ql9A-5stwbD7T2qfn5tchmeUzFyv3-nWi9UHfGQcQ2hAP2BRI8sNH_sBxfSBh8VDJUVL71xLRrlTYovGeWwCy/s32/ajax-loader.gif';
var olderPostsLink = '';
var loadMoreDiv = null;
var postContainerSelector = 'div.blog-posts';
var loading = false;
var win = $(window);
var doc = $(document);
// Took from jQuery to avoid permission denied error in IE.
var rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;

function loadDisqusScript(domain) {
  $.getScript('http://' + domain + '.disqus.com/blogger_index.js');
}

function loadMore() {
  if (loading) {
    return;
  }
  loading = true;

  if (!olderPostsLink) {
    loadMoreDiv.hide();
    return;
  }

  loadMoreDiv.find('a').hide();
  loadMoreDiv.find('img').show();
  $.ajax(olderPostsLink, {
    'dataType': 'html'
  }).done(function(html) {
    var newDom = $('<div></div>').append(html.replace(rscript, ''));
    var newLink = newDom.find('a.blog-pager-older-link');
    if (newLink) {
      olderPostsLink = newLink.attr('href');
    } else {
      olderPostsLink = '';
      loadMoreDiv.hide();
    }

    var newPosts = newDom.find(postContainerSelector).children('.date-outer');
    $(postContainerSelector).append(newPosts);
resizeThumb("main",250);
    // Loaded more posts successfully.  Register this pageview with
    // Google Analytics.
    if (window._gaq) {
      window._gaq.push(['_trackPageview', olderPostsLink]);
    }
    // Render +1 buttons.
    if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) {
      window.gapi.plusone.go();
    }
    // Render Disqus comments.
    if (window.disqus_shortname) {
      loadDisqusScript(window.disqus_shortname);
    }
    // Render Facebook buttons.
    if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) {
      window.FB.XFBML.parse();
    }

    loadMoreDiv.find('img').hide();
    loadMoreDiv.find('a').show();

    loading = false;
  });
}


function init() {
  if (_WidgetManager._GetAllData().blog.pageType == 'item') {
    return;
  }

  olderPostsLink = $('a.blog-pager-older-link').attr('href');
  if (!olderPostsLink) {
    return;
  }

  var link = $('<a class="loadpost" href="javascript:;">Leia mais postagens</a>');
  link.click(loadMore);
  var img = $('<img src="' + loadingGif + '" style="display: none;">');

  loadMoreDiv = $('<div style="text-align: center; font-size: 140%;"></div>');
  loadMoreDiv.append(link);
  loadMoreDiv.append(img);
  loadMoreDiv.insertBefore($('#blog-pager'));
  $('#blog-pager').hide();
}

$(document).ready(init);

})(jQuery);
//]]>
</script>
</b:if></b:if>



Agora procure por:  <div class='columns-inner'>

Abaixo dele cole o próximo código


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div class='menu-xitem'>
    <div><div class='xitem1'><a class='liat' href='#'><b:if cond='data:blog.url == data:blog.homepageUrl'>
Postagem por assunto
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<data:blog.pageName/>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<data:blog.searchQuery/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<data:blog.searchLabel/>
</b:if>
</b:if>
</b:if>
</b:if></a>  
    <div class='hidden' id='labelxnya'/>
    </div></div>
    </div>
</b:if></b:if>  

Salve

19 de jul. de 2016

Imagem de carregamento, loading, em seu blog

Nenhum comentário:
Tem gente que adora um firula no blog, tipo eu, e gosta dessas imagens de carregamento no blog. Da um charme, uma impressão de site e podemos passar uma primeira impressão divertida aos nossos leitores, como essas imagens fofas de gatinhos. Bem facinho de utilizar no blog.




Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





Clique no botão "Editar modelo" e depois nas teclas Ctrl e F. Ao abrir a janela, procure pelo seguinte trecho.









Procure por </head>


Acima dele cole este próximo código.


<script>function doload(){document.getElementById("load").style.display="none";}window.onload=doload;</script>










Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.


<div id="load" style="text-align:center;"><img src="AQUI O ENDEREÇO DA IMAGEM"/></div>















Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube