Một số cấu trúc bài viết thường dùng trong Blogspot giúp chúng ta định hướng bố cục bài viết khi cần chia nội dung và thêm hình ảnh.

Dưới đây là những mẫu phổ biến được chon lọc các bạn có thể tham khảo.

Bước 1: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head> => Dán đoạn code dưới đây vào phía trên thẻ </head> => Lưu lại chủ đề.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.blogger-row:after,.blogger-row:before {display: table;content: " ";}.blogger-row:after {clear: both;}.text-center {text-align: center;}.blogger-row p {margin: 0 0 10px;}.blogger-row img {border: 3px solid #eee;}.blogger-row img {max-width: 100%;vertical-align: middle;}hr {margin-top: 20px;margin-bottom: 20px;border: 0;border-top: 1px solid #eee;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-weight:400;line-height:1;color:#777}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small{font-size:65%}
.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small{font-size:75%}.h1,h1{font-size:36px}.h2,h2{font-size:30px}.h3,h3{font-size:24px}.h4,h4{font-size:18px}.h5,h5{font-size:14px}.h6,h6{font-size:12px}.lead {margin-bottom: 20px;font-size: 16px;font-weight: 300;line-height: 1.4;}.blogger-row a.btn {text-decoration: none !important;}.blogger-row .btn{border-radius:0;margin:0 5px 5px 0;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s}.blogger-row .btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}.blogger-row .btn{display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent}.blogger-row .btn-success:focus{color:#fff;background-color:#449d44;border-color:#255625}.blogger-row .btn-success:hover{color:#fff;background-color:#449d44;border-color:#398439}
.blogger .row{margin-left:-20px;margin-right:-20px;padding:0 5px}.blogger .row{margin-right:-15px;margin-left:-15px}.stn-lg-1,.stn-lg-10,.stn-lg-11,.stn-lg-12,.stn-lg-2,.stn-lg-3,.stn-lg-4,.stn-lg-5,.stn-lg-6,.stn-lg-7,.stn-lg-8,.stn-lg-9,.stn-md-1,.stn-md-10,.stn-md-11,.stn-md-12,.stn-md-2,.stn-md-3,.stn-md-4,.stn-md-5,.stn-md-6,.stn-md-7,.stn-md-8,.stn-md-9,.stn-sm-1,.stn-sm-10,.stn-sm-11,.stn-sm-12,.stn-sm-2,.stn-sm-3,.stn-sm-4,.stn-sm-5,.stn-sm-6,.stn-sm-7,.stn-sm-8,.stn-sm-9,.stn-xs-1,.stn-xs-10,.stn-xs-11,.stn-xs-12,.stn-xs-2,.stn-xs-3,.stn-xs-4,.stn-xs-5,.stn-xs-6,.stn-xs-7,.stn-xs-8,.stn-xs-9{position:relative;min-height:1px;padding-right:15px;padding-left:15px}.stn-xs-1,.stn-xs-10,.stn-xs-11,.stn-xs-12,.stn-xs-2,.stn-xs-3,.stn-xs-4,.stn-xs-5,.stn-xs-6,.stn-xs-7,.stn-xs-8,.stn-xs-9{float:left}.stn-xs-12{width:100%}.stn-xs-11{width:91.66666667%}.stn-xs-10{width:83.33333333%}.stn-xs-9{width:75%}.stn-xs-8{width:66.66666667%}.stn-xs-7{width:58.33333333%}.stn-xs-6{width:50%}.stn-xs-5{width:41.66666667%}.stn-xs-4{width:33.33333333%}.stn-xs-3{width:25%}.stn-xs-2{width:16.66666667%}.stn-xs-1{width:8.33333333%}}
@media (min-width:768px){.stn-sm-1,.stn-sm-10,.stn-sm-11,.stn-sm-12,.stn-sm-2,.stn-sm-3,.stn-sm-4,.stn-sm-5,.stn-sm-6,.stn-sm-7,.stn-sm-8,.stn-sm-9{float:left}.stn-sm-12{width:100%}.stn-sm-11{width:91.66666667%}.stn-sm-10{width:83.33333333%}.stn-sm-9{width:75%}.stn-sm-8{width:66.66666667%}.stn-sm-7{width:58.33333333%}.stn-sm-6{width:50%}.stn-sm-5{width:41.66666667%}.stn-sm-4{width:33.33333333%}.stn-sm-3{width:25%}.stn-sm-2{width:16.66666667%}.stn-sm-1{width:8.33333333%}}
@media (min-width:992px){.stn-md-1,.stn-md-10,.stn-md-11,.stn-md-12,.stn-md-2,.stn-md-3,.stn-md-4,.stn-md-5,.stn-md-6,.stn-md-7,.stn-md-8,.stn-md-9{float:left}.stn-md-12{width:100%}.stn-md-11{width:91.66666667%}.stn-md-10{width:83.33333333%}.stn-md-9{width:75%}.stn-md-8{width:66.66666667%}.stn-md-7{width:58.33333333%}.stn-md-6{width:50%}.stn-md-5{width:41.66666667%}.stn-md-4{width:33.33333333%}.stn-md-3{width:25%}.stn-md-2{width:16.66666667%}.stn-md-1{width:8.33333333%}}
@media (min-width:1200px){.stn-lg-1,.stn-lg-10,.stn-lg-11,.stn-lg-12,.stn-lg-2,.stn-lg-3,.stn-lg-4,.stn-lg-5,.stn-lg-6,.stn-lg-7,.stn-lg-8,.stn-lg-9{float:left}.stn-lg-12{width:100%}.stn-lg-11{width:91.66666667%}.stn-lg-10{width:83.33333333%}.stn-lg-9{width:75%}.stn-lg-8{width:66.66666667%}.stn-lg-7{width:58.33333333%}.stn-lg-6{width:50%}.stn-lg-5{width:41.66666667%}.stn-lg-4{width:33.33333333%}.stn-lg-3{width:25%}.stn-lg-2{width:16.66666667%}.stn-lg-1{width:8.33333333%}}@media (min-width: 768px) {.stn-sm-6 {width: 50%;float:left}}
</style>
</b:if>

Bước 2: Chèn một trong các mẫu code dưới đây vào phần HTML của trang, bài viết Blgospot.

Mẫu 1

Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!

Mẫu 2

Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!

Mẫu 3

Hình 1

Mô tả

Hình 2

Mô tả

Hình 3

Mô tả

Hình 4

Mô tả

Hình 5

Mô tả

Hình 6

Mô tả

`Tiêu đề`

Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!

Mẫu 4

Xây dựng thương hiệu

Mô tả ngắn

Thiết kế web

Mô tả ngắn

SEO

Mô tả ngắn

Ứng dụng di động

Mô tả ngắn

Mẫu 5

Tiêu đề

Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!

Mô tả hoặc văn bản

Hình 2

Mô tả

Hình 3

Mô tả

Mẫu 6

Mẫu 7

Tiêu đề 1

Tiêu đề 2

Nội dung văn bản! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!

Tiêu đề 3

Mẫu 8

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Mẫu 9

Tiêu đề

Nội dung văn bản! Nội dung văn bản!

Nội dung văn bản! Nội dung văn bản!
Nội dung văn bản! Nội dung văn bản!
Nội dung văn bản! Nội dung văn bản!

Mẫu 10

Tiêu đề 1

Tiêu đề 2

Mẫu 11

Tiêu đề 1

Mô tả

Buton

Tiêu đề 2

Mô tả

Tiêu đề 3

Mô tả

Code 1

<div class="blogger-row">
<div class="stn-md-4">
<a>
<img border="0" src="Link hình ảnh="1">
</a>
</div>
<div class="stn-md-4">
<a>
<img border="0" src="Link hình ảnh="1">
</a>
</div>
<div class="stn-md-4">
<a>
<img border="0" src="Link hình ảnh="1">
</a>
</div>
</div>
<br />
Nội dung văn bản!

Code 2

<div class="blogger-row" style="background:#00B366;color:#fff">
<br>
<div class="stn-md-4">
<a style="padding:0 0 20px;display:inline-block">
<img border="0" src="Link hình ảnh="1">
</a>
</div><div class="stn-md-8">
<p>
Nội dung văn bản!
</p>
</div>
</div>

Code 3

<div class="blogger-row text-center">
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Hình 1</h4>
<p>
Mô tả
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Hình 2</h4>
<p>
Mô tả
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Hình 3</h4>
<p>
Mô tả
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>            
</div>
<div class="galeri-details">
<h4>Hình 4</h4>
<p>
Mô tả
</p>
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Hình 5</h4>
<p>
Mô tả
</p>   
</div>
</div>
</div>
<div class="stn-md-4 stn-sm-6 stn-xs-12">
<div class="galeri-item">
<div class="galeri-thumb">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="galeri-details">
<h4>Hình 6</h4>
<p>
Mô tả
</p>   
</div>
</div>
</div>
</div>
<br>
<hr>
<br>
<div class="blogger-row" style="background:#C0393B;color:#fff">
<div class="stn-md-12">
<h3><code><b><span style="color: white; ">Tiêu đề</span></b></code></h3>
<p>
Nội dung văn bản!
</p>
<br>
</div>
</div>

Code 4

<div class="blogger-row">
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-pencil" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Xây dựng thương hiệu</h3>
<p>
Mô tả ngắn
</p>
<br>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-code" style="font-size: 32px; color:#3c763d;" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Thiết kế web</h3>
<p>
Mô tả ngắn
</p>
<br>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-search" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">SEO</h3>
<p>
Mô tả ngắn
</p>
</div>
</div>
<div class="stn-md-6 stn-sm-12 stn-xs-12">
<div class="stn-xs-2">
<i class="fa fa-mobile" style="font-size: 32px; color:#3c763d" aria-hidden="true"></i>
</div>
<div class="stn-xs-10">
<h3 style="margin-top:0">Ứng dụng di động</h3>
<p>
Mô tả ngắn
</p>
</div>
</div>
</div>
<br>
<hr>
<br>
<div class="blogger-row text-center">
<div class="stn-md-12">
<p>
Nội dung văn bản!
</p>
<br>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
</div>

Code 5

<div class="blogger-row" style="background-color:#16A095;color:#fff">
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h2><b><span style="color: white; ">Tiêu đề</span></b></h2>
<p>
Nội dung văn bản!
</p>
<p>
Nội dung văn bản!
</p>
<p>
Nội dung văn bản!
</p>
</div>
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a style="padding:20px 0 20px 20px;display:block">
<img border="0" src="Linh hình ảnh" imageanchor="1"/>
</a>
</div>
</div>
<br>
<p>
Mô tả hoặc văn bản
</p>
<br>
<div class="blogger-row text-center" style="background:#16A095;color:#FFF">
<br>
<div class="stn-md-6">
<a>
<img border="0" src="Linh hình ảnh" imageanchor="1">
</a>
<h4><span style="color: white; ">Hình 2</span></h4>
<p>
Mô tả
</p>
<br>
</div>
<div class="stn-md-6">
<a>
<img border="0" src="Linh hình ảnh" imageanchor="1">
</a>
<h4><span style="color: white; ">Hình 3</span></h4>
<p>
Mô tả
</p>
<br>
</div>
</div>

Code 6

<img src="Link hình ảnh" width="300" align="left" style="clear: margin-bottom: 15px; margin-right: 15px;" /> Nội dung văn bản!

Code 7

<div class="blogger-row">
<div class="stn-md-8 stn-sm-12">
<h2>Tiêu đề 1</h2>
<p>
Nội dung văn bản!
</p>
</div>
<div class="stn-md-4 stn-sm-12">
<h2>Tiêu đề 2</h2>
<p>
<strong>
Nội dung văn bản!
</strong>
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h2>Tiêu đề 3</h2>
<p>
Nội dung văn bản!
</p>
</div>
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1">
</a>
</div>
</div>

Code 8

<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Tiêu đề 1</h4>
<p>
Nội dung văn bản!
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Tiêu đề 2</h4>
<p>
Nội dung văn bản!
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Tiêu đề 3</h4>
<p>
Nội dung văn bản!
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-lg-4 stn-md-5 stn-sm-12">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1">
</a>
</div>
<div class="stn-lg-8 stn-md-7 stn-sm-12">
<h4>Tiêu đề 4</h4>
<p>
Nội dung văn bản!
</p>
</div>
</div>

Code 9

<div class="blogger-row">
<div class="stn-md-7">
<h3>Tiêu đề</h3>
<p>
Nội dung văn bản!
</p>
<ul>
<li>Nội dung văn bản!</li>
<li>Nội dung văn bản!</li>
<li>Nội dung văn bản!</li>
</ul>
</div>
<div class="stn-md-5">
<a>
<img border="0" src="Link hình ảnh" imageanchor="1"/>
</a>
</div>
</div>

Code 10

<div class="blogger-row">
<div class="stn-md-6 stn-sm-6">
<a>
<img class="img-responsive" src="Link hình ảnh">
</a>
</div>
<div class="stn-md-6 stn-sm-6">
<h3>Tiêu đề 1</h3>
<p>
Nội dung văn bản!
</p>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-md-6 stn-sm-6">
<h3>Tiêu đề 2</h3>
<p>
Nội dung văn bản
</p>
</div>
<div class="stn-md-6 stn-sm-6">
<a>
<img class="img-responsive" src="Link hình ảnh"/>
</a>
</div>
</div>

Code 11

<div class="blogger-row">
<div class="stn-md-6">
<a>
<img src="Link hình ảnh" border="0">
</a>
</div>
<div class="stn-md-6">
<h1>Tiêu đề 1</h1>
<p class="lead">
Mô tả
</p>
<a href="#" class="btn btn-success">
Buton
</a>
<br>
<br>
<div class="blogger-row">
<div class="stn-sm-6">
<h4>Tiêu đề 2</h4>
<p>
Mô tả
</p>
</div>
<div class="stn-sm-6">
<h4>Tiêu đề 3</h4>
<p>
Mô tả
</p>
</div>
</div>
</div>
</div>
<br>
<div class="blogger-row">
<div class="stn-sm-6 stn-sm-6">
<a>
<img data-selector="img" class="img-responsive" src="Link hình ảnh">
</a>
</div>
<div class="stn-sm-6 stn-sm-6">
<a>
<img data-selector="img" class="img-responsive" src="Link hình ảnh">
</a>
</div>
</div>

Một số cấu trúc bài viết thường dùng trong Blogspot

Hình 1

Hình 2

Hình 3

Hình 4

Hình 5

Hình 6

Tiêu đề

Xây dựng thương hiệu

Thiết kế web

SEO

Ứng dụng di động

Tiêu đề

Hình 2

Hình 3

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Tiêu đề 4

Tiêu đề

Tiêu đề 1

Tiêu đề 2

Tiêu đề 1

Tiêu đề 2

Tiêu đề 3

Code 1

Code 2

Code 3

Code 4

Code 5

Code 6

Code 7

Code 8

Code 9

Code 10

Code 11

Post a Comment

`Tiêu đề`