Layout Responsivo Free
oi meus amores, olha que modelo mais lindo eu trouxe para vcs gratis novamente, eu logico nao sou a criadora desses modelos mais quero ajudar vcs trazendo varios modelos fofos antes de eu começar minhas dicas pessoais para blogueiras iniciantes ok, espero que gostem, nao esquece de compartilhar esse post para suas amigas blogueirinhas iniciantes aqui elas vao amar pra sempre. ahhhh clica aqui nas minhas redes sociais que em breve vamos ter video de passo a passo para cada modelinho desses aqui e muito mais...
DOWNLOAD
O arquivo não esta zipado, ou seja esta em arquivo xml, voce pode baixar
diretamente no seu pc e adcionar automaticamente pelo blogger, ou
clicar sobre o arquivo com o botao direito do mause e abrir com a opção
BLOCO DE NOTAS, selecioar tudo e copiar, colando na area do html do seu
blog, lembrando de fazer sempre o backup caso algo dê errado!
Os codigos que seguem abaixo, é necessario adcionar na gadget do blog.
Em questao a paginacao do blog, apos alguns testes nao consegui ativa
las, precisaria de mais tempo o que eu nao tenho rs... entao SE você for
usar esse layout, o ideal é voce entender de html para testar alguns
tutoriais, ou na opcao de configuração no Layout do blog em MAIN (na
gadget de Postagens do Blog), onde tem Número de postagens na página principal: 05 ... Altere esse valor para 20 ou mais, assim aparecera seus ultimos 20 posts ou mais.
Infelizmente peguei só a base que a Lariz disponibilizou, mas nao tive
tempo para trabalhar nela 100% ... e como tem uns 2 meses que nao posto
um layout free, trouxe esse para quem quiser usar!
Estou com mtas saudades de trazer mais novidades, mas logo logo estarei aqui com muitas coisas boas especialmente para vocês!
Espero que tenham gostado!
Segue abaixo os codigos!
Para adcionar o Menu no topo:
<div id='nav'><ul><li><a href='/'> Início </a></li><li><a href='/p/sobre.html'> Sobre </a></li><li><a href='/p/contato.html'> Contato </a> </li><li><a href='/p/anuncie.html'> Anuncie </a></li><li><a href='/p/blogroll.html'> Blogroll </a></li></ul></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">$("#nav").addClass("js").before('<div id="menu"><img src="http://i.imgur.com/wvad5ud.png"/></div>');$("#menu").click(function(){$("#nav").toggle();});$(window).resize(function(){if(window.innerWidth > 900) {$("#nav").removeAttr("style");}});</script>
Para adcionar a galeria de imagens com Posts recentes:
<center><style type="text/css">
/*INICIO CSS FOTOS*/
.bsrp-gallery {
margin-top:70px;
margin-left: -30px;
width:1120px; ==LARGURA DO SLIDE==
float:center; ==POSIÇÃO DO SLIDE==
clear:both;
}
.bsrp-gallery:after {
display: table;
clear: both;
}
.bsrp-gallery .bs-item a {
position: relative;
float:left;
margin: 0 0px 0px 0;
text-decoration:none;
}
.bsrp-gallery .bs-item .ptitle {
background:#FFF; /*--cor de fundo das miniaturas ao passar o mouse --*/
display: block;
clear: left;
font-size: 16px;
font-family: arial;
text-transform: uppercase; /*--coloca o texto em capslock, apague se desejar --*/
line-height:1.3em;
height:320px;
height: 57.4%; /*--define a altura da legenda --*/
width:100%; /*--define a largura da legenda --*/
position: absolute;
bottom:0%;
text-align: center;
margin:0 0 0px 0px;
padding: 119px 0px 0px 0px;
color:#999; /*== COR DA FONTE DO TEXTO==*/
-moz-opacity:0;
-khtml-opacity:0;
opacity:0;
}
.bsrp-gallery .bs-item .ptitle:hover {
-webkit-transition:All 0.7s ease-in-out; -moz-transition:All 0.7s ease-in-out; -o-transition:All 0.7s ease-in-out;
filter:alpha(opacity=90);
-moz-opacity:0.7;
-khtml-opacity:0.7;
opacity:0.7;
}
.bsrp-gallery a img {
background: #fff;
float: left;
}
.bsrp-gallery a:hover img {
}
/*FIM CSS FOTOS*/
</style>
<script>
//byjana
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Get this from poderondesign">'];
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUTdY5W6_2_cTV8vQzO-rGvVDHgJdNJogH8_lqIfwqSyWYBAxSfMsOqPqluBcy8kl577QZqvpOMy4pA482tb6rhu2VDKqAnk_6dSW_Q3c-bC1T0dQII56jkHiSWz3ILhTD2uBFOZgZ2SFF/s72-c/default+image.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="' + '">' + 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 = 280;
var bsrpg_showTitle = true;
document.write("<script src=\"/feeds/posts/default?start-index="+numposts+"&max-results=4&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script></center>