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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbeJVYDSBtH4JNzPGLtD-XrHn0U5qHKhYS6KAXR2WzMC2TFmTKh6bInkyOTAM9h1B2J80wOquku3XMlQMrqVHld6dcONxyW_-ytPfrb6GkbA7jRf9E8qMnglmtqKl9qbrRc7jQCVLlwT5g/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisirv1uvydFcirWPaIhW9opozJ_PsLqnv5vP7Ua_z4V3S0aYx83WIiI13FBsbTs0UZ5Cvwe6zLS4ldJtveOkNSLZUKgMRD0CW7Y6aDGDCDdeteU4GCCtBMs1RXbBu_op5Myj5eHz8B1QPR/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/