Giao diện blog rút gọn chuẩn nhất để bắt đầu thiết kế blog


[blog]

Chia sẻ tới các bạn mẫu giao diện blog rút gọn chuẩn nhất để thiết kế mẫu blogspot bán hàng.

Thông tin về Layout như sau:

default widget version = '2'
layouts Version = '3'
responsive = 'true'
template Version = '1.3.0'


Các bạn tạo mới blog và copy toàn bộ code bên dưới dán đè lên html của giao diện cũ. Như vậy là bạn đã có một mẫu blogspot rút gọn trắng tinh mới nhất 2020.

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  <head>

    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

    <title>

      <data:blog.title/>

    </title>

    <b:if cond='data:view.isLayoutMode'>

      <b:template-skin>

        <![CDATA[

body#layout ul{list-style-type:none;list-style:none}

body#layout ul li{list-style-type:none;list-style:none}

/* Chỉ viết CSS cho Layout Blog */

]]>

      </b:template-skin>

    </b:if>

    <b:if cond='!data:view.isLayoutMode'>

      <b:skin version='1.3.0'>

        <![CDATA[

/*

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="$(main.color)" value="#ec5f1a"/>

<Variable name="followByEmail" description="Follow By Email Text" type="string" default="Get all latest content delivered straight to your inbox." value="Get all latest content delivered straight to your inbox."/>

<Group description="Theme Colors" selector="body">

<Variable name="main.color" description="Theme Color" type="color" default="#ec5f1a" value="#ec5f1a"/>

<Variable name="main.dark.color" description="Dark Color" type="color" default="#202020" value="#202020"/>

<Variable name="menu.color" description="Menu Color" type="color" default="#ffffff" value="#ffffff"/>

<Variable name="title.color" description="Title Color" type="color" default="#333333" value="#333333"/>

<Variable name="title.hover" description="Title Color on Hover" type="color" default="$(main.color)" value="#ec5f1a"/>

<Variable name="footer.color" description="Footer Color" type="color" default="#f1ffff" value="#f1ffff"/>

</Group>

<Group description="Theme Body" selector="body">

<Variable name="body.background.color" description="Body Background Color" type="color" default="#f8f8f8"  value="#f8f8f8"/>

<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) url() repeat fixed top left" value="$(color) url() repeat fixed top left"/>

<Variable name="body.text.color" description="Text Color" type="color" default="#656565"  value="#656565"/>

<Variable name="body.link.color" description="Link Color" type="color" default="$(main.color)"  value="#ec5f1a"/>

</Group>

<!-- Extra Variables -->

<Variable name="body.text.font" description="Font" hideEditor="true" type="font" default="13px Poppins,sans-serif"  value="13px Poppins,sans-serif"/>

<Variable name="posts.background.color" description="Post background color" hideEditor="true" type="color" default="#ffffff"  value="#ffffff"/>

<Variable name="tabs.font" description="Font 2" hideEditor="true" type="font" default="13px Poppins,sans-serif"  value="13px Poppins,sans-serif"/>

<Variable name="posts.title.color" description="Post title color" hideEditor="true" type="color" default="#333333"  value="#333333"/>

<Variable name="posts.text.color" description="Post text color" hideEditor="true" type="color" default="#656565"  value="#656565"/>

<Variable name="posts.icons.color" description="Post icons color" hideEditor="true" type="color" default="$(main.color)"  value="#ec5f1a"/>

<Variable name="labels.background.color" description="Label background color" hideEditor="true" type="color" default="$(main.color)"  value="#ec5f1a"/>

*/

]]>

      </b:skin>

    </b:if>

  </head>

  <body>

    <b:if cond='data:view.isHomepage'>

      Nội dung ở trang chủ viết ở đây

    </b:if>

    <b:if cond='data:view.isLabelSearch'>

      Nội dung cho trang search/label/

    </b:if>

    <b:if cond='data:view.isError'>

      Nội dung trang Lỗi 404

    </b:if>

    <b:if cond='!data:view.isHomepage'>

      <b:if cond='!data:view.isLabelSearch'>

        <b:if cond='!data:view.isError'>

          <b:section class='main' id='mainpost' showaddelement='yes'>

          </b:section>

        </b:if>

      </b:if>

    </b:if>

  </body>

</html>

Đây là mẫu blog rút gọn sử dụng phiên bản mới nhất của blog hiện tại. Dùng để bắt đầu một quá trình thiết kế blogspot.

[/blog]