Como instalar o Layout
Olá pessoal, nessa semana nossa pagina do Facebook chegou a 500 curtidas, e para comemorar decidi colocar dar de presente para vocês um Layout Free. Na verdade esse um novo projeto que vou fazer, que todo mês um novo layout vai ao ar. O Desse mês ficou bem clean, achei lindo ele bem simples.
COMO EDITAR O LAYOUT
Esse layout é bem simples de mexer, mas tem que ser com calma para não ficar feio pessoal
TOPO DO BLOG
Começando com o Banner principal. Para Download estará essa capa sem o nome do blog. Mas como mudo essa capa Karol?
Para mudar essa capa vocês tem que entrar lá em Modelo > Editar HTML e procurar
por background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq3j5WOZ-xxusLURkafhLTviCNZ-luzd-_2momvNOJUtCf1e8DmpiBAbal52B-IEqUJKrV_ju8vYXBvRunMQCcjiALMXIETS0xlvp0xAW1CGTAnHHuDgJ27vRf3bHvJnBAbLJKvF-ByA/s1600/topo+layout+Janeiro+free.jpg');
Onde está o link você irão trocar pela de vocês. Simples? Não entendeu? Leia novamente, que eu tenho certeza que você vai entender.
MENU DO BLOG
Para editar o menu do blog, vocês tem que ter mais paciência ainda, é simples mais é dentro do HTML do blog, então cada "aspas", Cada virgula faz falta.
Para editar vocês vão lá em MODELO > EDITAR HTML e procurar por
<div id='mymenuda'> abaixo dele estar assim
<div id='mymenuda'>
<div id='mymenu'>
<li><a href=' / '>Home</a></li>
<li><a>/</a></li>
<li><a href='Link do post'>Sobre Mk</a></li>
<li><a>/</a></li>
<li><a href='Link do post'>Layouts Pronta Entrega</a></li>
<li><a>/</a></li>
<li><a href=''>Portfólio</a></li>
<li><a>/</a></li>
<li><a href='Link do post'>Nosso diferencial</a></li>
<li><a>/</a></li>
<li><a href='Link do post'>Contato</a></li>
</div>
Na parte Home, Sobre Mk, Layouts a pronta entrega, Portfólio, Nosso Diferencial e Contato, vocês editam do jeito que vocês querem. Já onde está o Link do Post, coloquem o link que corresponde a cada.
POSTAGENS RECENTES NO TOPO DO BLOG REDONDA
Vamos com atenção pessoal, são pequenas coisas, todas fáceis de fazer, mais tenha atenção no que faz. Essa parte vocês vão lá em LAYOUT > ADICIONAR UM GADGET e colocar o código que está abaixo. Salva e veja se deu certo.
<center><style type="text/css">
.bsrp-gallery { width: 1200px !important; background: #fff; margin: 0 0px -50px -50px ; clear:both; margin-top: 600px; float: center !important; text-align: center !important; }
.bsrp-gallery:after { display: table; clear: both; background: #fff; }
.bsrp-gallery .bs-item a { border: 2px solid #fff; position: relative;background: #fff; float:left; margin: 0 0px 0px; margin-right: 4px; text-decoration:none; }
.bsrp-gallery .bs-item .ptitle {
background: rgba(53,50,49,0.7); display: block; transition: ease .7s; clear: left; font-size: 20px; font-family: 'Abel'; text-transform:none; line-height:1.3em; font-weight:400; height: 25%; width:91%; position: absolute; bottom:0%; text-align: center; padding:80px 10px 80px 10px;
color:#33cccc; word-wrap: break-word; overflow:hidden; text-transform: uppercase;
padding-top: 85px; filter:alpha(opacity=0);
-moz-opacity:0; -khtml-opacity:0;
opacity:0;}
.bsrp-gallery .bs-item .ptitle:hover {filter:alpha(opacity=90); -moz-opacity:0.9;-khtml-opacity:0.9; transition: ease .7s; opacity:0.9;}
.bsrp-gallery a img {float: left;}
.bsrp-gallery a:hover img {}
</style>
<script>
//PorFiresideDesign
function bsrpGallery(root) {
var entries = root.feed.entry || [];
var html = ['<div class="bsrp-gallery nopin" title="Código por Fireside Design">'];
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/AVvXsEjg2MIcEBAl1uyMJC8PkgN5sxuHDIzj4IslDNHSKqAGcdY3efGtauA04WRVNkYLjtH0QBYdvj36sJTcaf9cE_nG7Fat3AFaoDUZVCCXTg0nvaSUkYLzo4DYf4Dw_ppHrW9DU-9kbvjyo7ZQ/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="' + 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=\"/feeds/posts/default?start-index="+numposts+"&max-results=5&orderby=published&alt=json-in-script&callback=bsrpGallery\"><\/script>");</script> <br/></center>
Para funcionar no seu blog, ele tem que ter postagens...
ÁREA DE POSTAGEM DO BLOG
Como deixar a area de postagem do jeito da imagem? Bem é simples pessoal, nada de html agora..
Para deixar a postagem certinha como essa olhem na imagem acima, ela tem que estar com as seguintes formas:
Você vai em Layouts, Postagem no blog e editar. A Data tem que ficar no formato da imagem: ( é o penúltimo formato de data)
Agora nesse mesmo lugar você vai desmarcar os seguintes quadradinhos: POSTADO POR, LINK PARA ESSA POSTAGEM, REAÇÕES, MOSTRAR EDIÇÃO RÁPIDA, MOSTRAR LINKS PARA ENVIAR ESSA POSTAGEM,MOSTRAR BOTÕES DE COMPARTILHAMENTOS, LOCAL, MOSTRAR PERFIL ABAIXO DA POSTAGEM E EXIBIR ANUNCIOS ENTRE AS POSTAGENS.
Deve ficar assim abaixo:
O que vai ficar marcado é a DATA, MARCADORES E COMENTÁRIOS.
RODAPÉ DO BLOG
Essa parte é no html pessoal, mais é básica, vocês só trocaram algumas informações do layout para a do blog de vocês.
Para editar você vai em MODELO> EDITAR HTML e procure por <div id='rodape-creditos'>
Abaixo coloquei o codigo completo e estou mostrando o que você podem mudar.
<center><div id='rodape-creditos'>
<table border='0' cellpadding='2' cellspacing='0' oncontextmenu='return false' ondragstart='return false' width='100%'>
<tr>
<td style='width:72%;text-align:center;'>© <a href=''>NOME DO BLOG DE VOCÊS</a>- 2017. Todos os direitos reservados. Layout Free Criado por: <a href='https://www.facebook.com/designerlayoutmk/' rel='nofollow' target='_blank'>MK Designer e Layouts</a>. Tecnologia do <a href='http://www.blogger.com' target='_blank'>Blogger</a>.</td>
<td style='width:28%;text-align:center;'><a href='http://mkdesignerlayout.blogspot.com.br/'><img alt='imagem-logo' border='0' id='logo-footer' oncontextmenu='return false' ondragstart='return false' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLYCwVT_i0GFGg5xY3y1-7MyfL9Utlz3idFtH-HXYrB5ZV4Cyr5RAA-IzCGrhJoH0mWbG8T0l0N0PhPCk1rI2XsWml_To6WkUPxsxc0ybprRiHJTrL7X0i1lRKl530jN-W4ohtzdJ8nc/s1600/pequena_zps46dadd01.png'/></a><br/></td>
</tr>
</table>
</div></center>
Depois desse textão, acabamos isso mesmo pessoal, é fácil de instalar o layout, tenho certeza que seu blog vai ficar lindo.
O que eu queria pedir para vocês é o seguinte:
- Se pegarem o código não retirem os créditos, mas se isso for impossível de fazer pense no trabalho que eu tive para montar esse layout para vocês.
- Compartilhem esse post, isso mesmo no face, twitter, Instagram, onde poder, me ajudem...
- Colocou no seu blog? Deixe o link aqui nos comentários que eu vou lá visitar.
- Não conseguiu instalar, me explique no comentário que eu te ajudo.
Para ver o layout funcionando Clique Aqui
Para fazer Download CLIQUE AQUI
