Como Criar um Blog de Filmes

hot, amazing, b&w, beautiful

Olá meus amores, como vão? Hoje eu vim postar um tutorial simples para vocês montarem um blog sobre filmes. Filmes, sim, nossos queridinhos filmes. Vocês já devem ter visto por aí muitos blogs se especializando no design para este fim. Vamos saber como eles fazem isso? Clique em Leia Mais e confira!

DICAS

Para ter um blog de filmes (assistir online, downloads, séries, resenhas e etc), é importante você ter organização e saber pesquisar. Porque? Porque é importante postar os filmes classificando-os (é mais fácil de achar seu blog nas buscas) e você deve pesquisar a respeito deles. A ficha deles deve conter informações como as abaixo:

Nome do Filme:
Ano do Filme:
Atores Principais:
Sinopse:
Categorias:
Direção:
Fonte:

 Esses são só alguns exemplos. Porque é importante colocar estas informações? Porque assim você classifica o filme. Colocando a fonte, você também se livra de problemas com direitos autorais.

 Você pode carregar os filmes, ou pesquisar em sites de vídeos e colocá-los em seu blog. Recomendamos o player do site VK, pois no youtube é bem difícil deixar um filme todo (jamais poste um filme por partes no blog).

 Coloque um gadget com os filmes mais assistidos ou procurados. Algumas pessoas pesquisam a respeito de lançamentos sem saber o nome do filme e assim, é bem fácil de seu blog se tornar uma referência para essas pessoas.

 Crie uma página no facebook para divulgar seus posts e ouvir seus leitores. Você tem mais contato com o que eles estão curtindo ou não no blog.

 Tente disponibilizar vários players para assistir o mesmo filme, assim se um deles der erro, sempre há outro.

 Busque parceria com outros blogs para divulgar o seu!


TUTORIAIS

Comece criando o layout do seu blog. No link abaixo, o link de download do modelo travel pré-editado para você:

Clique aqui para fazer o download (abre em uma nova guia).

Você pode também colocar páginas personalizadas no seu blog:

 Clique aqui para ver o tutorial (abre em uma nova guia).

Como colocar o gadget do facebook e twitter no blog:

 Facebook (abre em uma nova guia) &  Twitter (abre em uma nova guia).

Com um Menu Suspenso, você pode colocar as categorias de filmes ou séries!

 Clique aqui para ver o tutorial (abre em uma nova guia).

Com dois backgrounds (fundo), seu blog fica show!

 Clique aqui para ver o tutorial (abre em uma nova guia).

Você pode colocar uma Ask.Fm no blog para saber a opinião das pessoas que acessam o blog!

 Clique aqui para ver o tutorial (abre em uma nova guia).

Tutorial para postagens em forma de grade ou lista:

Modelo > Editar HTML

Procure por: ]]></b:skin>

ABAIXO dessa tag, cole:

<style>
.date-header span {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;
    box-shadow:0 0 0 1px #333;
    -moz-box-shadow:0 0 0 1px #333;
    -webkit-box-shadow:0 0 0 1px #333;
    -o-box-shadow:0 0 0 1px #333;
    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>


Depois, procure por </head>

ACIMA desta tag você cola o script abaixo:

<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>

Salve. Agora, marque a opção Expandir Modelos Widgets.


Procure por: <b:section class='main' id='main' showaddelement='no'> (ou algo parecido com isto).

E acima dele, cole:

<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-right'>
    <a class='bar_view' href='#'>Grade</a>
    <a class='dat_view' href='#'>Lista</a>
  </div>
</div> 
</b:if></b:if>

Agora procure por: <b:includable id='nextprev'>, e logo abaixo, cole isto: <div class='clear'/>.

Por fim, procure por:

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

e substitua por:

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


Salve e visualize. Veja se está tudo bem, se não, faça upload da cópia de seu template e tente novamente.

O objetivo é esse:



Fotos do blog Terror Brasil. Clique aqui para visitar-lo.

Tutorial de Postagens em Grade ou Lista do blog Templates e Acessórios



Espero que tenham gostado do tutorial e das dicas gente, até o próximo post então ;D