Colocando uma caixa com sua Bio no final de cada postagem

Odnei Sales 15:32

Você é criador e autor do seu próprio blog? Ótimo! Então seu visitante ou o leitor de suas postagens devem saber mais sobre você. Então esse widget é considerado um dos mais importantes para você blogueiro. Nesse widget, você pode escrever qualquer coisa sobre você que você acha que os visitantes do seu blog devem saber sobre você e, em seguida, eles também podem se conectar a você por meio de qualquer tipo de site de rede social em que você esteja disponível e que o ache confortável. Isso também pode ser considerado como uma estratégia de marketing, como se um visitante gostasse do seu blog e de você, da maneira como você se aproximou do leitor, ele pode simplesmente compartilhar essas informações com os amigos e, com isso, você fique ainda mais popular. Assim, você pode avançar em direção ao sucesso, basta instalar widget facilmente, através das etapas simples e sem complicações abaixo:
Vamos ao que interessa:


Mas primeiro veja como vai ficar o widget
Siga esses passos abaixo








  • Faça login na blogger depois vá em Template  e em Edit HTML
  • Procure pela tag  </head>  no HTML do seu blog
  • Copie do código CSS e cole logo acima da tag </head>
  • Agora busque pelo trecho <div class=’post-footer-line post-footer-line-1′> no HTML do seu blog
  • Copie o códi HTML e cole logo abaixo do trecho  <div class=’post-footer-line post-footer-line-1′>
  • Por último salve seu template e pronto, depois é só fazer as alterações.

    • Codigo CSS
      <style>
    .author_infost{
    float:left;
    width:550px;
    padding:15px;
    border:1px solid #ccc;
    margin-bottom:15px;
    margin-top:15px;
    background:#eee;
    color:#000;
    }
    .author_infost:hover{
    background:#eee;
    border:1px solid #ccc;
    -webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    -moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    }
    .author_infost h3{
    color:#000;
    margin-bottom:10px;
    }
    .author_infost h3:hover{
    border : 1px solid #EEEEEE;
    -webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    -moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    }
    .author_photost{
    float:right;
    margin:0 0 0 10px;
    }
    .author_photost img{
    border:1px solid #666;
    -webkit-transition:-webkit-transform .15s linear;
    -moz-transition:-moz-transform .15s linear;
    -o-transition:-o-transform .15s linear;transition:transform .15s linear;
    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);
    -moz-box-shadow:0 3px 6px rgba(0,0,0,.25);
    box-shadow:0 3px 6px rgba(0,0,0,.25);
    padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);
    -moz-transform:rotate(+2deg);-ms-transform:rotate(+2deg);
    -o-transform:rotate(+2deg);transform:rotate(+2deg);float:left;
    }
    .author_photost img:hover{
    background:#FFFFFF;
    border : 1px solid #EEEEEE;
    -webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    -moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);
    -webkit-transform:rotate(-1deg);
    -moz-transform:rotate(-1deg);
    -ms-transform:rotate(-1deg);
    -o-transform:rotate(-1deg);
    transform:rotate(-1deg);
    }
    ul.socialost{
    list-style:none;
    margin:10px;
    overflow:hidden;
    }
    .socialost li{
    float:right;
    background:none !important;
    padding:0 !important;
    margin:0 8px;
    }
    .socialost li a{
    display:block;
    width:40px;
    height:40px;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4uoIgGyi3ZqtEQro3EADldmJBZ8RodBqANOrge8dHV6fFH_4fPPyQNdTC9EPTSsShIZIh8BGckB-WaOAg8nyUe8wLYaWPl3fRvD2yQkrW0kGCSlnc1P4Zfhdb6vSSSAjEdJUVIhVKEpEh/s1600/social.png") no-repeat transparent;
    text-indent:-99999em !important;
    }
    .socialost li a:hover{
    padding:0 !important;
    }
    .socialost li.rssicon a{
    background-position:0 0;
    }
    .socialost li.twicon a{
    background-position:-50px 0;
    }
    .socialost li.fbicon a{
    background-position:-100px 0;
    }
    .socialost li.gicon a{
    background-position:-150px 0;
    }
    .socialost li.rssicon a:hover{
    background-position:0 -50px;
    }
    .socialost li.twicon a:hover{
    background-position:-50px -50px;
    }
    .socialost li.fbicon a:hover{
    background-position:-100px -50px;
    }
    .socialost li.gicon a:hover{
    background-position:-150px -50px;
    }
    .mdlinediv{
    margin-top:25px;
    height:0px;
    clear:both;
    display:block;
    border-top:1px solid #fefefe;
    border-bottom:1px solid #CCCCCC;
    }
    .mdemailbutton{
    background:#f7f8f9;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
    background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
    background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
    background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
    background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
    border:1px solid #ddd;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    padding:6px 12px;
    margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
    color:#888;
    text-shadow:0 1px 0 #fff;
    line-height:1.2;
    cursor:pointer;
    font-size:13px;
    }
    .mdemailbutton:hover{
    background:#f1f1f1;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
    background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
    background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
    background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
    background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
    text-decoration:none !important;
    }
    .mdemail{
    clear:both;
    width:250px;
    margin:10px 0;
    float:left;
    }
    .mdemailform{
    position:relative;
    width:250px;
    margin:0 auto;
    }
    .mdemailinput{
    width:200px;
    height:18px;
    margin:0 auto;
    padding:8px 40px 8px 10px;border:1px solid #ddd;
    -webkit-border-radius:4px;-moz-border-radius:4px;
    border-radius:4px;font-family:georgia;
    font-style:italic;
    -webkit-box-shadow:1px 1px 2px #dfdfdf;
    -moz-box-shadow:1px 1px 2px #dfdfdf;
    box-shadow:1px 1px 2px #dfdfdf;
    font-size:14px;color:#666;
    }
    .mdemailbutton{
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -moz-border-radius-bottomright:4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-bottom-left-radius:0px;
    -moz-border-radius-topleft:0px;
    -moz-border-radius-bottomleft:0px;
    border-top-left-radius:0px;border-bottom-left-radius:0px;
    padding:9px;
    position:absolute;
    right:-2px;
    top:0;
    display:block;
    line-height:16px;
    }
    .mdemailbutton{
    padding:8px !important;
    }
    .mdemailform, .mdemailinput{
    width:98% !important;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    height:auto;
    }
    </style>
    Codigo HTML

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='author_infost'>
    <div class='author_photost'>
    <img alt='author' height='150' src='IMAGEM-DO-SEU-PERFIL-AQUI' width='150'/>
    </div>
    <h2>Esta postagem foi escrita por:</h2>
    <p>Olá meu nome é Odneyy Sales e este blog foi feito especialmente para tutoriais para Blogger.</p>
    <div class="mdlinediv"></div>
    <div class="mdemail">
    <small style="text-align:center;">Receba novas postagens grátis na sua inbox!</small>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=odneysalestutoriais, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="mdemailform">
    <input value="odneysalestutoriais" name="uri" type="hidden"/>
    <input name="loc" value="en_US" type="hidden"/>
    <input onblur='if (this.value == "") {this.value = "Cadastre seu email...";}' onfocus='if (this.value == "Cadastre seu email...") {this.value = ""}' value="Cadastre seu email..." name="email" class="mdemailinput" type="text"/>
     <input class="mdemailbutton" value="Cadastrar" title="" type="submit"/>
    </form>
    </div>
    <ul class="socialost">
    <li class="rssicon">
    <a href="http://feeds.feedburner.com/SEU-FEEDBURNER-AQUI">Rss</a>
    </li><li class="twicon">
    <a href="http://twitter.com/SEU-NOME-DE-TWITTER-AQUI">Twitter</a>
    </li><li class="fbicon">
    <a href="http://facebook.com/SEU-NOME-DO-FACEBOOK-AQUI">FaceBook</a>
    </li><li class="gicon">
    <a href="https://plus.google.com/SEU-ID-DO-GOOGLE-AQUI">Google +</a>
    </li>
    </ul>
    </div>
    </b:if>

    Bom é somente isso. Se você já tem algum conhecimento em HTML as mudanças serão fáceis caso tenha alguma duvida comente aí que eu vou te ajudar.
    Odnei Sales

    Postado por Odnei Sales

    Postar um comentário

    0 Comentários