[Tips] - Thu gọn bài viết blogspot với thumbnail đẹp

Thu gọn bài viết hay còn gọi là rút ngắn bài viết ở trang chủ hay ở bất kỳ trang nào cần hiển thị thu gọn bài viết là một cách đơn giản giúp blog của bạn trở nên chuyên nghiệp và dễ sắp xếp hơn. Hôm nay Khám Phá Blog chia sẻ cho các bạn một số cách thu gọn bài viết cho blogspot đẹp.

Cách thu gọn bài viết blogspot

1. Thêm Javascripts

Các bạn đăng nhập vào quản trị Blogger > Mẫu (templates) > Chỉnh sửa HTMl. Tiếp đó bạn bấm Ctrl + F và tìm đến thẻ </head>, thêm all code bên dưới ngay dưới thẻ này.

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSCwQrFB9uWViXthlW8frFwhBHnKrKJA2U_KqTcTkAhyxsaRpkfCbs5jWMv3zIlwniZwdTAFy_qJ8pNLSPArFgyj0PIOESVLlsZUMobBY6COBAUuZgnPhdQ9NXC_Nt7noDmtNH_QLmbF_8/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

2. Chỉnh sửa bài viết

Tiếp tục các bạn tìm đến đoạn code 

<data:post.body/>

Thay thế thẻ này bằng đoạn code bên dưới nhé.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/>
</a>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>

3. Thêm css

Hai bước trên áp dụng cho tất cả các mẫu bên dưới, bay giờ việc chọn mẫu thì các bạn chỉ cần thêm đoạn code tương ứng mẫu với mà bạn chọn vào trước thẻ </head> nhé. 

3.1 Mẫu 1:

Code :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}
.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#777;
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

3.2 Mẫu 2 :

Code : 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#111;
padding:0;
}
h3.post-title {
text-align:center;
height:22px;
position:absolute;
bottom:23%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
border-bottom:3px solid #00C8BD;
border-top:3px solid #558ABB;
}
.posts-thumb:hover {
border-top:3px solid #FF664E;
border-bottom:3px solid #FEBE36;
}
.post-body {
border-radius:2px;
box-shadow:0 0 6px 1px rgba(0,0,0,0.1);
position:relative;
height:auto;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#555;
background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJnTBo2-qNcCjnOYAIzgAIQYMhZc9NzcO2TPXbTvUHt9v617DZIcU8PVwKFD3IAaX3ER0N7ZTn5HEbpi7DGrG4XIwDh7Pq3ZJC48uWnvYTHSr24iIq7tRc74nmR8Dzi4Cw8lFU1iU2yHi/s1600/blueprint.png);
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:17% 10% 6%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:110%;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
}
a.comment-bubble:before {
content: &quot;Comments: &quot; url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQZpl54GpwDOatVdYSLCTOueNZMCcmijcg_Wr4dkd5go6zwEfRBwEemkryu3h1kv9Cl5oLzMVy3LPFQpySebEt5eOC8vFwakkiArTu60u5LdbprWoJAXtFvWSDhBDthjUZWYKDbSb-ANV/s1600/heart-active.png);
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

3.3 Mẫu 3 :

Code :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

 3.4 Mẫu 4 :

Code :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear: both;
position: absolute;
bottom: 0px;
left: 0px;
}
.blog-feeds {
display: none;
}
.post {
height: auto;
width: 100%;
padding: 0px !important;
margin: 0px 0px 30px;
display: inline-block;
text-decoration: none;
}
h3.post-title a{
font-size: 95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform: uppercase;
padding: 0px;
color: #fff;
text-shadow: 3px 2px 2px #222;
font-weight: bold;
}
h3.post-title, .comments h4 {
margin: 0px !important;
text-align: center;
padding: 10px 0px;
position: absolute;
top: 10px;
width: 100%;
z-index: 200;
}
.post-header {
display: none;
}
.date-header {
visibility: hidden;
height: 0px !important;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
}
.posts-thumb {
width: 100%;
height: auto;
overflow: hidden;
clear: both;
}
.post-body {
overflow: hidden;
position:relative;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: none;
min-width: 100%;
min-height: auto;
margin: 0px;
padding: 0;
border: none;
outline: none;
position: relative;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
.post-footer {
display: none;
}
a.comment-bubble {
color: #fff;
text-decoration: none;
font-size: 120%;
right: 5px;
z-index: 222;
position: absolute;
top: 5px;
text-shadow: 1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQZpl54GpwDOatVdYSLCTOueNZMCcmijcg_Wr4dkd5go6zwEfRBwEemkryu3h1kv9Cl5oLzMVy3LPFQpySebEt5eOC8vFwakkiArTu60u5LdbprWoJAXtFvWSDhBDthjUZWYKDbSb-ANV/s1600/heart-active.png);
}
.main-inner .column-center-inner {
-moz-column-count: 3;
-moz-column-gap: 1px;
-webkit-column-count: 3;
-webkit-column-gap: 1px;
column-count: 3;
column-gap: 1px;
width: 100%;
padding: 0px !important;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

 Sau khi thêm xong các bạn lưu mẫu lại và kiểm tra thành quả nhé. Nói chung là những mẫu trên na ná nhau cả, chỉ khác nhau ở cách bố trí phần tiêu đề và hình ảnh 1 tý. Chúc các bạn thành công nhé. Không hiểu cứ comments mình sẽ giúp.

Bài Viết Cùng Chủ Đề

• [Tips] - Đặt backlink như thế nào là đúng?Chào các bạn khi chúng ta nói đến backlink thì hầu như seoer nào cũng dùng tới nó vì đây là một lối seo blogspot nói ri ...
• [Tips] - Bài viết liên quan đơn giản cho blogspotBài viết liên quan hay nó còn được các blogger gọi nó là Related Posts, đây là một tiện ích khá cần thiết cho bất kỳ mộ ...
• [Tips] - Cách xóa hoặc ẩn icon chỉnh sửa nhanh cho widgetIcon chỉnh sửa nhanh cho widget là icon dành cho người quản trị blogspot khi muốn chỉnh sửa một widget nào đó thì ở tra ...
• [Tips] - Menu ghim cố định khi lăn chuột cho blogspot Menu ghim cố định còn có tên gọi khác là sticky menu, là menu được cố định trên top của blogspot, khi lăn chuột lên xu ...
• [Tips] - Tối ưu css và js cho blogspot Trong việc seo blogspot thì tối ưu css và js là một điều khá cần thiết cho một blogger. Trong cộng đồng blogger việc n ...