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 != "index"'>
<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
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 5
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ô 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
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!
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
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 8
Tiê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! Nội dung văn bản! Nội dung văn bản! Nội dung văn bản!
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! 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!
Tiêu đề 3
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!
Tiêu đề 4
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 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
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!
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! 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 11
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>
Tags:
Thủ thuật
