• Home
  • /
  • Portifolio
  • /
  • Facebook
  • /
  • Parceiros
  • /
  • Contato

    • Como Instalar o Layout

    Marcadores: , ,




    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/AVvXsEiHY521NihjH1Kgb2w8zy0EORs2aTLqTQr6j_q59PMaXaxXo4_0MRf203XkoDHENWe40cy6r6xroVTUwJgkW2OLrywFGOjVWZaOFeGT7TxX5iQx_bpuKE75_iXqRJlT1FQW8AmodoAr4zCW/s1600/bela+virtuosa+topo+fonte+janda.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 


    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/AVvXsEhhGJ-ek8ziSBfGFh4WR4gXREz9VeezOP1JhZmZnvrkyR65J8pnt121XXSb2jdVkD5oIyHYWymrW7adklICa3IcBwduugZXqUFw59ZUuRkJY5mSePiK6L7qPSocGm-s27TY4voLpBji_ona/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;'>&#169; <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/AVvXsEjo38KUbNECsbkhiEQDpOI9RrYBaCnXIkZe1dPzArGcqd1Xjf979qHjvv5kQi3pz6si8MfH4el6GANxkF1VFdQESyMZ4NzN4DH9SiR4s425eWewjTjzbQksL_WfIoFHV57CWmIGIg_zkMM/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 


    MK Designer e Layouts

    0 comentários :

    Postar um comentário

    Assinar: Postar comentários ( Atom )
     
    © Layout Free Março Mk Designer- 2017. Todos os direitos reservados. Criado por: MK Designer e Layouts. Tecnologia do Blogger. imagem-logo