Como Instalar o Layout
Marcadores:
Free blogger,
Layout blogger,
Layout Free blogger,
Personalizado,
Template free blogger,
Template free Mk
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/AVvXsEhaD5tpoFmRmZdXyWRQIN8zTo5rd9rqIuLTSc3v1o63ZCFpHVFtTh9CEXdPmpY7Vr54SyYmIq8GHb0wJfV-cpqjplzhN5H7rY_D8smgIB0F2AHeTBM0DMzhZK8KTgl2ozhUCa08Kc2u3g/s1600/topo+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: 550px; 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/AVvXsEiN-RQqrwoxnMqs7ctO-MVwZ5OWnjd1EtrZ-801n-0XfNM6gsgiAgdm-i_tD6Kp-VaMwqQuOGwPvVEGmkW2ZpeayERes1riYK1DohUzu2TXSKqUqwaJmYzFQDIk63iEraMUDMPBK-RsptaP/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/AVvXsEjjvkMilB-JkhY0fCVA9slspWZVy8GbK06wrdf_pO8Zgbx0b5TMHYY6FjVW9vk8aOpz6K4y64l4ek-14YBktdUm6iHBzSsmIeeeJ2XkkqsuhPA12Jnm3mSeSxGjaPI_aH7JcA_-puPb3UM/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.
Curte a nossa pagina pelo amor de Deus...
Para ver o layout funcionando Clique Aqui
Para fazer Download CLIQUE AQUI
Layout a Pronta Entrega Escolhas
Marcadores:
Mk,
Pronta Entrega
Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis,
Template a pronta entrega
Marcadores:
Mk,
Pronta Entrega
Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat. Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam neque. Curabitur ligula sapien, pulvinar a, vestibulum quis, facilisis vel, sapien. Nullam eget nisl. Donec vitae arcu. Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam commodo dui eget wisi. Donec iaculis gravida nulla. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat.
Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Etiam commodo dui eget wisi. Donec iaculis gravida nulla. Donec quis nibh at felis congue commodo. Etiam bibendum elit eget erat.
