20 de jan de 2013

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/

6 comentários:

  1. ficou super legal no meu blog e personalizei cada detalhe e alinhei tudo. tenho só uma duvida: qdo coloco o gadget com o slide, ele fica abaixo da barra de postagens recentes. como faço para colocar um gadget acima e a barra ficar para baixo, exatamente acima (somente) das postagens. bjs e parabens!!!

    ResponderExcluir
  2. ah, nao precisa se preocupar, eu coloquei o codigo do gadget acima de <b:section class='main' id='mai... e deu certo! bjao

    ResponderExcluir
  3. Como faz pra quando passar o mouse em cima dela, fika com akele PLAY , TIPO ESSE AKI DA FOTO http://www.redefilmesonline.net/wp-content/themes/redefo/images/bga.png

    ResponderExcluir
  4. parabéns!!!
    Ótimo post...fiquei confusa na ultima parte, mas deu certo!
    valeu mesmo!

    ResponderExcluir
  5. não estou encontrando o ultimo codigo oque eu faço?

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube