Tùy chỉnh phần hiển thị nội dung trong blogspot

Tự làm Blogger - Sau khi web đã có phần header và menu có vẻ nhìn đã khá giông web rồi. Giờ chúng ta sẽ làm sao để các bài đăng hiện lên trên web nhé. Tùy chỉnh phần hiển thị nội dung của Blogspot mình sẽ kèm thêm luôn một số chú ý và thêm CSS để cho web nhìn chuyên nghiệp hơn nhé.

Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:

Như trong phần bố cục, nội dung của web sẽ hiển thị ở phần Thân web trái, tức là khi các bạn click vào một link thì nội dung sẽ chỉ hiển thị ở trong phần Thân web trái mà thôi các phần khác sẽ được giữ nguyên theo cấu trúc ban đầu.
Để làm được điều này, các bạn không cần phải lo lắng đâu vì chỉ cần thêm một đoạn code ngắn vào trong nơi bạn muốn hiển thị nội dung là ok. Ở đây mình sẽ cho hiển thị ở Thân web trái, đầu tiên các bạn vào Chỉnh sửa HTML, tìm <div id='than-web-trai'> rồi xóa code bên trong của thẻ div thân web trái đi thay bằng code sau (nếu chưa có thì paste code sau vào):

<b:section class='than-web-trai' id='Thân web trái' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Sau khi thêm thì code sẽ thành như thế này:

<div id='than-web-trai'><b:section class='than-web-trai' id='Thân web trái' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>

Chú ý: id='Blog1' các bạn không được đổi tên nhé nênú không sẽ bị lỗi đấy.
Vào lại blog và hưởng thụ thành quả nào. Giờ thì bài viết đã hiện lên trên trang chủ rồi đấy:

Tuy nhiên phần nội dung hiện ra rất chi là rối mắt. Giờ chúng ta sẽ tìm cách làm cho nó đẹp hơn nhé:

Vào Chỉnh sửa HTML, tìm thẻ </head>

Hãy copy đoạn code sau và chèn vào trước thẻ </head> vừa tìm được:

<script type="text/javascript">
var summaryConf = {
showImage: true,
imgFloat: 'left',
imgWidth: 130,
imgHeight: 100,
defaultThumb:'http://1.bp.blogspot.com/-A7K0Ugz3jKc/Uf0leijlp0I/AAAAAAAACsQ/w29f6zRMSbA/s1600/no-thumb.jpg',
words: 65,
wordsNoImg: 80,
skip: 0,
showHome: true,
showLabel: true
};
</script><script type="text/javascript">
//<![CDATA[
function summary(h) {
summary.count = summary.count || 0;
summary.count++;
var g = location.href.indexOf("/search/label/") == -1 && location.href.indexOf("/search?") == -1,
c = location.href.indexOf("/search/label/") != -1;
if (summary.count <= summaryConf.skip) {
return
}
if (g && !summaryConf.showHome) {
return
}
if (c && !summaryConf.showLabel) {
return
}
var e = document.getElementById(h),
f = e.getElementsByTagName("img"),
a = "";
if (summaryConf.showImage) {
if (summaryConf.defaultThumb != "none") {
a = '<img width="' + summaryConf.imgWidth + '" height="' + summaryConf.imgHeight + '"';
if (summaryConf.imgFloat != "no") {
var b = ' style="float:' + summaryConf.imgFloat + ';margin:0 5px 5px 0;padding:0"';
a += b
}
a += ' src="' + (f.length > 0 ? f[0].src : summaryConf.defaultThumb) + '" />'
} else {
if (f.length > 0) {
a = '<img width="' + summaryConf.imgWidth + '" height="' + summaryConf.imgHeight + '"';
if (summaryConf.imgFloat != "no") {
var b = ' style="float:' + summaryConf.imgFloat + ';margin:0 5px 5px 0;padding:0"';
a += b
}
a += ' src="' + f[0].src + '" />'
}
}
}
if (a != "") var d = summary.strip(e.innerHTML, summaryConf.words)
else var d = summary.strip(e.innerHTML, summaryConf.wordsNoImg);
e.innerHTML = a + d + "..."
}
summary.strip = function(a, b) {
return a.replace(/<.*?>/ig, "").split(/\s+/).slice(0, b - 1).join(" ")
};
//]]>
</script>

Tiếp tục tìm và thay thế <data:post.body/> trong HTML thành đoạn code sau (sẽ có 2 chỗ cần thay):

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<script type='text/javascript'>summary("<data:post.id/>")</script>
</b:if>
</b:if>

Ra ngoài trang chủ và xem thành quả nào. OMG, nó đã đẹp hơn nhưng vẫn củ chuối như xưa !!!!

Cứ yên tâm, chúng ta sẽ bỏ bớt vài thứ không cần thiết đi cho đỡ rối.

Lại vào Bố cục --> Layout Thân web trái --> Bài đăng trên Blog --> Chỉnh sửa

Bỏ hết các dấu đã tích trong các ô checkbox đi sau đó Lưu lại. Ra ngoài trang chủ và hưởng thành quả nào....

Đẹp roài, ... Ơ, sao vẫn còn cái chữ Trang chủ với Đăng ký: Bài đăng (Atom) vào trong nhãn Blogspot thì lại có cái Hiển thị các bài đăng có nhãn Blogspot (mình không thích điều này, xóa thôi)

Xóa cái Hiển thị các bài đăng có nhãn ... các bạn thêm đoạn CSS này vào trong <b:skin> nhé:

.status-msg-wrap {
display: none;
}

Xóa chữ Trang chủ, các bạn vào Chỉnh sửa HTML, tìm home-link. Ngay dưới chỗ tìm được các bạn sẽ thấy mấy đoạn code như sau, hãy xóa nó đi và Lưu mẫu là ok

<div class='mobile-link-button' id='blog-pager-home-link'><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></div>

<div class='mobile-desktop-link'><a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a></div>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Xóa dòng Đăng ký: Bài đăng (Atom)
Thêm đoạn CSS sau để ẩn nó đi là được rồi

.feed-links{display:none !important;}

Xóa dấu gạch chân trong tiêu đề bài viết trên trang chủ:
Thêm đoạn CSS sau:

h3 a {
text-decoration: none;
}

Thêm một vài CSS nữa nhìn trang chủ cho đẹp nào:
Thêm đoạn sau để cấu hình font chữ cho trang và căn lề vào giữa. Thẻ H3 định dạng cách test dòng dưới 10px nhìn đỡ díu mắt

body {
font-family: 'Tahoma';
font-size: 16px;
text-align: justify;
background: #e6e8e9;
}h3 {
padding-bottom: 10px;
padding-top: 15px;
}
/* unvisited link */
a:link {
color: #2e91ee;
text-decoration: none;
}
/* visited link */
a:visited {
color: #2e91ee;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: #2e91ee;
}
img {
max-width:100%;
border-radius: 4px;
border: 1px solid #d6dde1;
}

Phần Thân web trái cũng sửa lại CSS một chút như này nhé:

#than-web-trai {
width: 69%;
min-height: 300px;
background: white;
border: 1px solid #d6dde1;
border-radius: 4px;
float:left;
}
#than-web-phai {
width: 30%;
min-height: 300px;
border:1px solid #d6dde1;
border-radius: 4px;
background: white;
list-style: none;
float:right;
}

Nhìn giờ đã khá giống một trang hoàn thiện rồi đấy nhỉ:

Tạm thế thôi nhé, sau mình sẽ hướng dẫn các bạn trang hoàng toàn trang sau. Giờ kết thúc phần tùy chỉnh phần hiển thị nội dung trong blogspot (vì hơi dài).

Nếu có gì thắc mắc cứ comment nhiệt tềnh nhé!