Template Free 7 Things

Quem acompanha o blog sabe que eu criei meu site específico para Webdesign e Design Gráfico e estou voltando a estudar e trabalhar nessa área. Recentemente eu comprei o meu domínio e estou atualizando o site com cada serviço que eu faço, se você quiser conhecer acesse: www.JUHDESIGN.com <3.

Hoje eu trago o segundo e último Template Free para Blogger que disponibilizarei no BEDA. Ele é bem simples, mas ainda mais completo que o anterior (Template Free Flores de Março), com botão de voltar ao topo, posts relacionados, balão de comentários, comentários personalizados, paginação numerada, caixa de busca e footer personalizados, e versão com ou sem miniaturas de posts recentes.

VISUALIZAR NA WEB

FAZER DOWNLOAD DO TEMPLATE

DOWNLOAD VERSÃO 2 (Sem as miniaturas dos posts recentes).

Agora vamos para as INSTRUÇÕES.

1- Instalando o Template:

Acesse Modelo > Fazer backup/Restaurar > Escolher arquivo > Fechar.

2- Configurando Data:

Vá em Configurações > Idioma e formatação e selecione as configurações seguintes:

3- Colocando o Menu:

Vá em Layout e clique em 'Editar' a gadget que aparece logo abaixo do Cabeçalho:

Cole esse código e salve:

<div id="menutopo"><div id="menu"> <li><a href="http://www.layout-7-things.blogspot.com.br">HOME</a></li> <li><a href="http://seulinkaqui.com">SOBRE MIM</a></li> <li><a href="http://seulinkaqui.com">O BLOG</a></li> <li><a href="http://seulinkaqui.com">FOTOGRAFIA</a></li> <li><a href="http://seulinkaqui.com">RESENHAS</a></li> <li><a href="http://seulinkaqui.com">MEDIAKIT</a></li> <li><a href="http://seulinkaqui.com">CRÉDITOS</a></li> </div><div id='menureparo'></div></div>

4-  Ajeitando os Gadgets da Sidebar.

Observe a imagem seguinte que corresponde a três itens do template original. Ainda na página Layout, vemos uma gadget  para as informações do Perfil, outra para a Caixa de Pesquisa e outra para o botão de Voltar ao topo. 

Pode ser que no seu blog apareçam fora de ordem, mas o importante é que haja as três gadgets HTML e que você coloque o código de cada cadget em cada uma delas. É só ir em editar, colar o código e salvar. Vamos lá:

Código do perfil:

<center> <img src="http://imgur.com/8zdGY6Q.png" style="-moz-border-radius: 1000px; -webkit-border-radius: 1000px; -o-border-radius: 1000px; width:270px; heigh:auto;" /> <br /> <font size="6" face="arial">Seu Nome</font><br /> Fale sobre você, sua idade, etc. Este é o espaço para uma breve apresentação. Coloque miniaturas das suas redes sociais.
<br />   </center>

Código da caixa de pesquisa:

<form action="/search" class="search" method="get"> Pesquise: <input class="searchbar" id="s" name="q" type="text" value="" /> <input class="searchbut" type="submit" value="" /> </form>

Código de Voltar ao topo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type='text/javascript' language='Javascript'> var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://imgur.com/rPBcOOQ.png"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Voltar ao topo'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ return false })oll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

OBS: A gadget do Perfil tem fundo transparente. Então o código do perfil deve estar na Gadget que você observar que tem o fundo transparente. Caso tenha dificuldades, leia este tutorial.

5- Ajeitando a Paginação numerada:

Se o seu blog não exibir 3 posts na página inicial você precisa ajeitar o código da paginação.

Vá em Modelo > Editar HTML.

Tecle Ctrl+F e pesquise por 'perPage:'

Onde estiver o número 3 apague e coloque mesmo número de postagens que o seu blog exibe na página inicial e salve.

6- Colocando as miniaturas dos posts recentes:

Em Layout, clique em Editar a seguinte Gadget:

Cole este código e onde estiver escrito http://www.ENDEREÇODOSEUBLOG.blogspot.com.br altere para o endereço do seu blog e salve.

<script> function bsrpGallery(root) { var entries = root.feed.entry || []; var html = ['<div class="bsrp-gallery nopin" >']; for (var i = 0; i < entries.length; ++i) { var post = entries[i]; var postTitle = post.title.$t; var orgImgUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://lh5.googleusercontent.com/-iaKQ-tiz6KE/VPyO2GnMRXI/AAAAAAAADrc/si7De0SoFO0/s300/semimagem1.png'; var newImgUrl = orgImgUrl.replace('s72-c', 's' + bsrpg_thumbSize + '-c'); var links = post.link || []; for (var j = 0; j < links.length; ++j) { if (links[j].rel == 'alternate') break; } var postUrl = links[j].href; var imgTag = '<img src="' + newImgUrl + '" width="' + bsrpg_thumbSize + '" height="' + bsrpg_thumbSize + '"/>'; var pTitle = bsrpg_showTitle ? '<span class="ptitle">' + postTitle + '</span>' : ''; var item = '<a href="' + postUrl + '" title="' + postTitle + '">' + imgTag + pTitle + '</a>'; html.push('<div class="bs-item">', item, '</div>'); } html.push('</div>'); document.write(html.join("")); } hoje = new Date() numposts = 1; var bsrpg_thumbSize = 220; var bsrpg_showTitle = true; document.write("<script src=\"http://www.ENDEREÇODOSEUBLOG.blogspot.com.br/feeds/posts/default?start-index="+numposts+"&max-results= 4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script>

Lembrando que as miniaturas não vão aparecer se você tiver baixado a versão 2, que não foi feita para receber as miniaturas.

Então esse foi o post de hoje. Não deixe de visitar meu outro site para conferir mais o meu trabalho. õ/