Templates e Acessórios: julho 2016

Postagens Recentes

28 de jul. de 2016

Fontes que imitam giz

. Elke di Barros | 18:44 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.

»»Leia mais...

24 de jul. de 2016

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

. Elke di Barros | 13:55 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.

»»Leia mais...

Postagens no Blogger em forma de grade

. Elke di Barros | 12:37 Nenhum comentário:

DEMO DEMO

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.

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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</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 == "item"'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<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 != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<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: 'Open Sans Condensed', 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: 'Open Sans Condensed', 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: 'Pacifico', cursive;
z-index: 122;
}
a.comment-bubble:before {
content: "Comments: ";
}
.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

»»Leia mais...

Postagens relacionados

. Elke di Barros | 02:11 Nenhum comentário:

DEMO

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 == "item"'>
<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.

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

<b:if cond='data:blog.pageType == "item"'>
<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.

»»Leia mais...

23 de jul. de 2016

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

. Elke di Barros | 23:05 Nenhum comentário:

DEMO

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:

Salve !

Procure agora por </body>

Acima dele cole o próximo código.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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 == "archive"'>
<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

»»Leia mais...

19 de jul. de 2016

Imagem de carregamento, loading, em seu blog

. Elke di Barros | 18:07 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.