Colocar redes sociais ao lado dos anúncios Google AdSense nas páginas do Blogger

 Para quem usa o programa de afiliados em seu blog como o Google AdSense ou mesmo outro como UOL, HotWord ou similares tem como deixar tudo bem arrumadinho nas páginas das postagens com esse código que deixa mais harmonioso, e mais fácil para seus leitores. É possível colocar mais de um anúncio, caso suas páginas internas tenham espaço para faze-lo.


Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em Expandiir modelos de widgets

Se quiser colocar abaixo dos títulos do post, procure por:


<div class='post-header-line-1'>

ou

<div class='post-header-line-1'/>


Se quiser colocar após a postagem do blog, procure por:
 
<div class='post-footer'>

Abaixo de qualquer dos códigos escolhidos, cole o próximo código, fazendo as modificações necessárias para linkar suas páginas sociais e colar os códigos referentes aos programas de afiliados.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='Adsense-sociais'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='708'>

AQUI O CÓDIGO ADSENSE, SE TIVER ESPAÇO, PODE COLAR MAIS DE UM CÓDIGO

</td>
<td>
 <div class='widget' id='counter'>
    <div class='inner clearfix'>
    <div class='box-out'>
    <div class='head box'>
    <p>Inscreva-se e siga NOME DE SEU BLOG</p>
    </div>
    </div>
    <div class='side_cont box-out clearfix'>
    <div class='box clearfix'>
    <div class='email_rss clearfix'>
    <span>Assine nossas atualizações</span>

    <form action='http://feedburner.google.com/fb/a/mailverify' class='clearfix' id='subscribe-form' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=&apos;NICK_FEED_AQUI&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input class='txt' id='newsletter' name='email' type='text'/><input name='uri' type='hidden' value='NICK FEED'/><input name='loc' type='hidden' value='en_US'/><input class='btn' type='submit' value='Assinar'/></form>

    </div>


    <div class='social_links clearfix'>

    <a class='png_bg dysocial' href='ENDEREÇO FACEBOOK' id='side_fb' rel='nofollow' title='Assine nossa página'>Facebook</a>

    <a class='png_bg dysocial' href='ENDEREÇO TWITTER' id='side_tw' rel='nofollow' title='Siga-nos'>Twitter</a>

    <a class='png_bg dysocial' href='ENDEREÇO FEED' id='side_rss' rel='nofollow' title='Inscreva-se via RSS'>RSS</a>

    <a class='png_bg dysocial' href='http://feedburner.google.com/fb/a/mailverify?uri=NICK FEED' id='side_email' rel='nofollow' title='Assine por email'>Email</a>

    </div>
  
    </div>
    </div>
    </div>
    </div>
</td>
</tr>
</table>
</div>
</b:if>

Salve. Agora clique em Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código, depois salve.

<!--BloggingeHow Subscription Widget-->

     <style>
    body {
        color: #434343;
        font: 12px/20px Arial,Helvetica,sans-serif;
    }
    #sidebar .widget {
        background-color: #000000;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }


    #sidebar .widget .head {
        text-shadow: 0 1px 0 #FFFFFF;
    }
    #sidebar .widget .box {
        background: #ccc;
        padding: 8px;
    }
    #sidebar .widget .box-out {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 1px;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    #sidebar .widget .box {
        background: #ccc;
        padding: 8px;
    }
    .clearfix {
        display: block;
    }
    .clearfix {
        display: inline-block;
    }
    .clearfix:after {
        clear: both;
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
        width: 0;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .clearfix {
        display: block;
    }
    .fan_box {
        background-color: #F5F5F5;
        margin: 15px 0;
        padding: 4px;
        position: relative;
    }
    .fan_box .full_widget {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
    }
    .fan_box .full_widget .connect_top {
        background: url("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 8px;
    }
    .fan_box .full_widget .connections {
        background-color: #FFFFFF;
        border-bottom: 1px solid #E5E5E5;
        padding: 5px 1px 1px;
    }
    .fan_box .full_widget .connections_grid {
        background: url("http://3.bp.blogspot.com/-HRLwwHESa7E/UDipbPeTd6I/AAAAAAAAF64/JYE8V3mtgZs/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
        padding: 6px;
    }
    .fan_box .full_widget .connections .total {
        margin: 4px 0 4px 8px;
    }
    .fan_box .profileimage {
        background-color: #FFFFFF;
        border: 1px solid #E5E5E5;
        display: inline;
        margin-right: 10px;
        padding: 5px;
    }
    .fan_box .full_widget .connections_grid a img {
        border: 1px solid #FFFFFF;
    }
    .fan_box .full_widget .connections_grid a img:hover {
        border: 1px solid #000000;
    }
    .social_links, .email_rss {
        padding: 5px 0 10px;
        width: 100%;
    }
    .social_links a {
        background-image: url("http://4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/s1600/social.png");
        background-repeat: no-repeat;
        color: #999999;
        display: inline;
        float: left;
        font-size: 11px;
        margin-bottom: 0;
        padding-top: 45px;
        text-align: center;
        text-decoration: none;
        width: 67px;
    }
    .social_links a:hover {
        color: #000000;
        text-decoration: underline;
    }
    a#side_fb {
        background-position: -173px 0;
    }
    a#side_tw {
        background-position: -81px 0;
    }
    a#side_rss {
        background-position: 8px 0;
    }
    a#side_email {
        background-position: -267px 0;
    }
    #geek {
        background: url("4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/s1600/social.png") no-repeat scroll -387px -363px transparent;
        bottom: -1px;
        display: block;
        height: 117px;
        position: absolute;
        right: -22px;
        text-indent: -9999em;
        width: 94px;
    }
    .email_rss {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 5px;
        position: relative;
    }
    .email_rss span {
        font-size: 11px;
    }
    #subscribe-form {
        margin-top: 5px;
    }
    #subscribe-form #newsletter {
        border: 1px solid #CCCCCC;
        padding: 5px;
        width: 150px;
    }
    #subscribe-form #newsletter:focus {
        background-color: #F5F2D3;
        border: 1px solid #000000;
    }
    #subscribe-form .btn {
        background-color: #7EB4CF;
        border: 1px solid #2F6A89;
        box-shadow: 3px 3px 0 #6DA5C1 inset, -3px -3px 0 #6DA5C1 inset;
        color: #FFFFFF;
        cursor: pointer;
        display: inline;
        float: right;
        font-size: 12px;
        font-weight: 900;
        line-height: 12px;
        padding: 5px 8px;
        position: relative;
        text-shadow: 0 1px 0 #000000;
        z-index: 999;
    }
    #subscribe-form .btn:hover {
        background-color: #4E9CC4;
    }
    #subscribe-form span {
        background-color: #F5F5F5;
        display: inline;
        float: left;
        margin-right: 10px;
        padding: 3px;
    }

    h3 {
    font-family: MgOpenModata;
    
        font-weight: 400;
    }
    #sidebar .widget .head p {
        color: #999999;
        font-size: 11px;
        line-height: 15px;
        padding: 0;
    }
    </style>

Créditos: Blogging How

»»Leia mais...

Instalar hack para postagens expandidas ou em grade

Coisinhas diferentes no blog, inovações, surpresas para nossos leitores, facilidades...É sempre bom, não é mesmo ? E sair pelo blog clicando em botões, abrindo postes é gostoso, vai dizer que não é ? E que tal se eu te disser que tem como instalar um hack que, ao entrar em seu blog o leitor verá uma grade com seus posts e com um simples clique, abrirá seus posts e o lerá sem precisar ir para outra página. Bom, né ? Legal a bessa. Já estou usando em meu blog de decoração, festas e receitas, o Festa, Sabor e Decoração. Vá lá dar uma olhadinha pra ver como funciona a bagaça, depois, volte aqui e se gostou, instale-o em seu template. :-)

Para que o hack fique completo, a primeira coisa a fazer é implementar este código, caso queira que apareça também os posts em forma de lista. Então primeiro, implemente este hack depois, volte aqui e dê continuidade com essa dica.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Substitua então pelo código abaixo:

]]></b:skin>
<style>
.date-header span {display:none}.post-header-line-1{display:none;}
</style>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
    font-family:&#39;PT Sans Narrow&#39;;
    font-style:normal;
    font-weight:400;
    src:local(&#39;PT Sans Narrow&#39;),local(&#39;PTSans-Narrow&#39;),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format(&#39;woff&#39;);
}
/* CSS Switch*/
.switch {
 border-bottom: 6px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:$(link.color);
}
.switch-right {
 width:135px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(http://2.bp.blogspot.com/-7BeF7FZiHo0/T6vZzVSzTzI/AAAAAAAABJs/FlrWN7ZRxmk/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(http://1.bp.blogspot.com/-43EW3Gjakwc/T6vZz6K4N_I/AAAAAAAABJ0/hi2LK0zc4JQ/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    width:30%;
    height:240px;
    float:left;
    border:1px solid #000;
    display:inline;
    list-style:none;
    margin:5px 0 0 5px;
    overflow:hidden;
    padding: 2px;
    position:relative;  
}
.bar img{
    width:98%;
    float:left;
    height:175px;
    margin:3px  3px;
    }
.bar iframe {
    width:98%;
    float:left;
    height:183px;
    margin:3px 3px;
    }
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
   width:98%;
    background:none;
    height:245px;
    overflow:hidden;
    padding:0;
    margin:0 0 .3cm;
}
</style>
</b:if></b:if>

Procure por:

  </head>


Acima dele, cole todo este próximo código e depois salve.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

/*jslint browser: true */ /*global jQuery: true */

/**
 * jQuery Cookie plugin
 *
 * Copyright (c) 2010 Klaus Hartl (stilbuero.de)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */

// TODO JsDoc

/**
 * Create a cookie with the given key and value and other optional parameters.
 *
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Set the value of a cookie.
 * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
 * @desc Create a cookie with all available options.
 * @example $.cookie('the_cookie', 'the_value');
 * @desc Create a session cookie.
 * @example $.cookie('the_cookie', null);
 * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
 *       used when the cookie was set.
 *
 * @param String key The key of the cookie.
 * @param String value The value of the cookie.
 * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
 * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
 *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
 *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
 *                             when the the browser exits.
 * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
 * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
 * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
 *                        require a secure protocol (like HTTPS).
 * @type undefined
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */

/**
 * Get the value of a cookie with the given key.
 *
 * @example $.cookie('the_cookie');
 * @desc Get the value of a cookie.
 *
 * @param String key The key of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/klaus.hartl@stilbuero.de
 */
jQuery.cookie = function (key, value, options) {
   
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);

        if (value === null || value === undefined) {
            options.expires = -1;
        }

        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }
       
        value = String(value);
       
        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }

    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/**
 * jQuery switch
 *
 */
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});
//]]>
</script>

Depois de ter salvado as modificações acima, agora clique em "Expandir modelos de widgets"

Procure agora por:

<b:section class='main' id='main' showaddelement='no'>

Acima dele, cole o próximo código:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Postagens</span> Recentes
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grade</a>
    <a class='dat_view' href='#'>Lista</a>
  </div>
</div>
</b:if></b:if>

Procure por:

<b:includable id='nextprev'>

Abaixo dele cole o seguinte código:

<div class='clear'/>

Procure então por

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

 Ou por

 <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

E troque-o por:

  <div class='post bar  hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Salve as modificações e veja como ficou.

Crédito: http://fobbleup.blogspot.com.br/

»»Leia mais...

Alinhar várias imagens no post com tabela

Me perguntaram como poderia alinhar várias imagens nos posts do blog. Aí está uma solução. Antiga, em desuso, mas ainda assim uma solução. O ruim é ter que sempre ficar colando esse código no HTML da área de postagem do Blogger, trocar código, inserir links...ufa, quanto trabalho ! Mas quem gosta de um blog bem cuidado, com tudo em seu devido lugar, acha que isso nem é tão trabalhoso assim.


Copie  o código e cole no editor de postagens no Modo HTML

<table border="0" bordercolor="”blue”" style="height: ”80%”px;" whidth="”">

<tbody>
<tr>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 1" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 1" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 2" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 2" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 3" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 3" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 4" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 4" height="130" width="200" /></a></div>
</td>


</tr>
<tr>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 5" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 5" height="130" width="200" /></a></div>
</td>


<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 6" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 6" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 7" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 7" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 8" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 8" height="130" width="200" /></a></div>
</td>


</tr>
<tr>


<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 9" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 9" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 10" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 10" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 11" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 11" height="130" width="200" /></a></div>
</td>

<td><div class="separator" style="clear: both; text-align: center;">
<a href="ENDEREÇO DO LINK 12" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="ENDEREÇO DA IMAGEM 12" height="130" width="200" /></a></div>
</td>

</tr>
</tbody></table> 

»»Leia mais...

Não deixar que vídeos do You Tube saiam do post

Conforme publiquei no post anterior, onde ensino a inserir código que não deixa as imagens sairem do post, agora eis aqui um código para não deixar que vídeos do You Tube saiam do post.

Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Acima dele cole este código abaixo:

.post-body iframe{
max-width:98%;
 padding: $(image.border.small.size);
  background: $(image.background.color);
  border: 1px solid $(image.border.color);
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

»»Leia mais...

Imagens passam da área dos posts, como resolver ?

O template Simples do Blogger vem com um probleminha que acho detestável: as imagens ultrapassam a área da postagem. Mas resolver isso é bem simples. Basta copiar o código abaixo e cola-lo acima de em seu blog



Vá até o "Modelo de seu blog", clique em "Editar HTML"

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Cole então este próximo código acima dele.

.post-body img{
max-width:98%;  
line-height: 1.4;
position: relative;
}

»»Leia mais...

Colocar a data abaixo do título das postagens

Mude a data das postagens de seu blog para debaixo do título do post. Fica mais discreto e mais alinhado.



Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Clique em "Expandir modelos de widgets"

Procure então por:




 <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
        <div class='post-outer'>



Apague o seguinte trecho !

 <h2 class='date-header'><span><data:post.dateHeader/></span></h2>


Agora procure por:

   <div class='post-header'>
 

Cole então o código abaixo depois dele.

<span class='date-header'><data:post.dateHeader/></span>

Está pronto !

Agora se você quer dar um estilo para suas datas proceda da seguinte forma:

Procure por :


.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}



E troque-o por:
(Código em azul representa a cor de fundo da data.)

.date-header span {
background: #2A0C0C;
float: left;
margin: 2px -10px 2px  -70px;
padding: 40px 8px 0 8px;
width: 60px;
height: 60px;
}

Agora para modificar o modelo proceda da seguinte forma:


Vá até
1-> Configurações
2-> Idioma e formatação
3->Clique na pequena seta ao lado da data, como mostra a imagem
4-> Procure o modelo de postagem, como na imagem

»»Leia mais...

Imagens que invadem as colunas do Blogger. Como resolver

Se você usa o novo modelo do Blogger já deve ter notado que quando se usa imagens em tamanho original ou imagens muito grandes essas mesmas imagens acabam por invadir as colunas. Isso pode ser resolvido.



Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por: ]]></b:skin>  

Acima dele cole o código abaixo:

img {
max-width: 98%;
height: auto;
width: auto\9; /* ie8 */
}

Salve

»»Leia mais...

Combo 2: diminuir espaço entre sidebar e posts, colocar cor de fundo e deixar as imagens dos posts em mesmo tamanho

Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

A primeira coisa a fazer é diminuir o espaço entre as postagens e a sidebar. Para isso, procure por:


 <Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="15px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="15px" value="15px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="30px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="30px"/>

E troque por:

   <Variable name="main.section.margin" description="Main Section Margin" type="length" default="5px" value="5px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="5px" value="5px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="3px" value="3px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="3px" value="3px"/>

Salve

Agora vamos retirar as bordas.

Procure por:

border-right: 1px solid $(body.rule.color);

E troque por:

border-right: 0px solid $(body.rule.color);

Agora troque:

border-left: 1px solid $(body.rule.color);

por:

border-left: 0px solid $(body.rule.color);

Procure por:

border-$startSide: 1px solid $(body.rule.color);

Troque por:

border-$startSide: 0px solid $(body.rule.color);

Agora que tiramos as bordas de cada elemento da sidebar, vamos dar estilo, dininuindo os espaços entre cada widget.



SE VOCÊ TEM 3 COLUNAS NO FOOTER

Acima de:

/* Headings


Cole o código abaixo

/*Sidebar---------------------------------------------------*/
#sidebar-left-1,  #sidebar-left-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-1,  #sidebar-right-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-2-1, #sidebar-left-2-1 {
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#sidebar-left-2-2,  #sidebar-right-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-1{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-1{
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-2 {
margin: 5px 2px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

#footer-2-3 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;

}


SE VOCÊ TEM 2 COLUNAS NO FOOTER O CÓDIGO ENTÃO É ESTE

Acima de:

/* Headings

/*Sidebar---------------------------------------------------*/
#sidebar-left-1,  #sidebar-left-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-1,  #sidebar-right-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #ccc;
}
#sidebar-right-2-1, #sidebar-left-2-1 {
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#sidebar-left-2-2,  #sidebar-right-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-1, #footer-3{
margin: 5px -20px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-1{
margin: 5px 2px 5px -20px;
padding: 10px 5px 10px 5px;
background: #eee;
}
#footer-2-2 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

#footer-2-3 {
margin: 5px -20px 5px 2px;
padding: 10px 5px 10px 5px;
background: #eee;
}

Salve.


Prontinho. Agora vamos dar um espaço entra a postagem e regular o tamanho das imagens.

Procure por:


.main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}

E troque por:

.main-inner .column-center-inner .section {
  margin: 5px 10px 10px 10px;
 background: #eee;
 padding: 10px 10px 10px;
}

.post-body img {
width: 280px;
height: 200px;
}

»»Leia mais...