® Thiết kế Blogspot giá rẻ: Thủ thuật blogpost

Home » Thủ thuật blogpost

Chia widget Label ở footer thành nhiều cột cho blogspot.

Với các blogger có quá nhiều nhãn thì việc kích hoạt (Displaying) tất cả các nhãn trong thanh bên (sidebar) không phải là một lựa chọn hoàn hảo vì nó sẽ mất quá nhiều diện tích của sidebar. Vậy giải pháp đặt ra là nên đặt tiện ích này ở đâu và làm thế nào để tiện ích này trong bắt mắt gọn nhẹ hơn mà vẫn đầy dủ các nhãn của bạn. Thủ thuật này namkna sẽ liệt kê tên các nhãn theo thứ tự bảng chữ cái và chia thành 5 cột đặt ở dưới chân trang blog (phần footer). cho độc giả đễ tìm kiếm các nhãn này.

Bạn có thể xem demo hoặc hình minh họa bên dưới:

VIEW DEMO

Chia label ở footer thành nhiều cột cho blogspot. (How To Add Footer Columns On Blogger To Display Labels )

Thủ thuật này được namkna dựa trên ý tưởng của Ipietoon và Myherro . Bạn chỉ cần thực hiện một vài bước đơn giản để áp dụng tiện ích này cho blog.

» Thêm Like, Subscription box vào blogspot của bạn!

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn Chỉnh sửa HTML (Edit HTML)

4. Tìm kiếm thẻ ]]></b:skin> . Và dán code bên dưới vào trước thẻ vừa tìm được.

/*Start Category Wrapper Css*/
#category-wrapper {
width:900px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:0px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0 8px;
}
.cat ul li {
float:left;
width:18%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 12px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQeIlppMz67-pCJkF5eNOtxLL0X-bJTv-Zv7G51bPiUqJaOXJrTnrkc1xTl0-yrH49OhoUECBzgwMpP4T7COQK0SxOE__AzRPYSlNMV3rIEBnCD7x1xyRRAbYYCZ1JvYIkm5GXc7XOgi-A/s1600/bullet-suyb-namkna-blogspot-com-0001.gif) no-repeat left center;
}

.cat .widget {
border-bottom:0px dotted #ddd;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}
/* End Category Wrapper Css Info @ http://namkna.blogspot.com/ */

Tùy chỉnh CSS.

Width 900px; là chiều rộng tổng của các cột.
width:18%; chiều rộng của từng cột nhỏ. Ở đây mình dùng số tương đối. Nếu muốn chia thành 4 cột bạn sửa thành 23%, và để chia thành 3 cột sửa thành 31%.
Link ảnh màu xanh là link ảnh icon trước mỗi nhãn. bạn có thể thay đổi thành link ảnh khác nếu bạn muốn,

5. Tìm mã HTML sau đây:

<div id='footer-wrapper'>

Lưu ý: thẻ bên dướicó thể khác nhau với mỗi blog, tùy vào người thiết kế) .nếu bạn không tìm thấy vui lòng comment địa chỉ blog của bạn ở cuối bài viết này mình sẽ hướng dẫn cụ thể
Với mẫu simple của blogger bạn có thể chèn ngay trước thẻ <footer> hoặc <div class='footer-outer'>.

- Dán đoạn mã bên dưới vào trước thẻ vừa tìm được.

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label99' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

6- Lưu mẫu lại và quay lại blog bạn sẽ tháy phần chân blog có 5 cột nhãn./

Hướng dẫn khách hàng sử dụng dịch vụ

Để xem được các thủ thuật hay nhất quý khách hãy lick vào button bên dưới, xem xong quý khách thấy hài lòng hãy liên hệ nhanh với chúng tôi để sở hữu bộ code bản quyền ưng ý nhất!

ĐĂNG KÝ MUA CODE

Quý khách muốn đăng ký mua templates bản quyền thiết kê tinh xảo đẹp mắt hãy liên hệ nhanh với chúng tôi để đặt hàng Trân trọng cảm ơn quý khách đã sử dụng dịch vụ của chúng tôi!

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Ẩn 2 cột sidebar và hiển thị cột sidebar thứ 3 khi xem bài viết (dùng cho template 3 cột)

Theo yêu cầu của bạn Hiệp Cò (www.hiepco.com)

[FD's BlOg] - Như theo yêu cầu, bài viết sẽ hướng dẫn làm ẩn 2 cột sidebar khi xem bài viết, thêm vào đó là tạo thêm 1 cột sidebar thứ 3 sẽ hiển thị bên phải, còn phần bài viết bên trái. Và cột sidebar thứ 3 này sẽ chỉ hiện thị duy nhất ở trang bài viết mà thôi. Hay nói cách khác, cột sidebar thứ 3 này và 2 cột sidebar cũ sẽ không thể hiện thị cùng 1 lúc.

Có thể nói thủ thuật này là 1 thủ thuật thay đổi bố cục blog theo trang, với trang bài viết thì sẽ hiển thị dạng template 2 cột, còn ở các trang khác trang bài viết sẽ hiển thị dạng 3 cột. Và ta có thể xem đây là 1 template 4 cột, và ta chỉ thấy được điều này trong Bố cục » Phần tử trang.

Đây là hình ảnh minh họa thủ thuật

Giả sử ta có 1 template có các phần main, sidebar1, sidebar2 có tên tương ứng là :main-wrapper, newsidebar-wrapper, sidebar-wrapper (do là thủ thuật yêu cầu của bạn HC, nên mình lấy tên các id này trùng với các id trong code template của bạn HC)

Bây giờ ta vào Bố cục » Chỉnh sửa code HTML (không cần nhấp chọn mở rộng mẫu tiện ích), và tìm các đoạn code CSS và HTML của 3 phần trên, nó sẽ trông như bên dưới:
Code CSS:

#main-wrapper {
background: #ffffff;
width: 540px;
margin-left: 10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Code HTML:

☼ Bây giờ ta bắt đầu thủ thuật (Lưu ý save template lại trước khi thực hiện - nếu cho chắc chắn hãy tạo 1 blog mới và test trước khi thực hiện với blog của mình)
A. Bước 1 : chỉnh sửa code CSS
- ở bước này ta sẽ có 2 điều phải làm, 1 là thay đổi style cho phần main khi hiển thị ở trang bài viết, và tạo 1 đoạn code CSS mới cho cột sidebar thứ 3
- Với đoạn code CSS ở trên, ta sẽ xóa phần code CSS của main (phần code bị xóa này sẽ được chỉnh sửa thêm và dán vào bên dưới sau dòng code ]]></b:skin>) và tạo thêmcode CSS cho cột sidebar thứ 3. Ta sẽ đặt tên cho nó là rightsidebar-wrapper và code CSS sẽ trông như bên dưới:

#sidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

#newsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#rightsidebar-wrapper {
background: #77aa77;
-moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px; -moz-border-radius-topright:15px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float*/
}

- Như vậy đã tạo xong code CSS cho cột thứ 3, bây giờ ta tùy chỉnh CSS cho phần main, hãy dán đoạn code bên dưới vào trước dòng code ]]></b:skin>

- Chú ý đoạn code màu đỏ :
+ width: 760px; : đây là độ rộng của phần main khi hiển thị ở trang bài viết (các bạn có thể bỏ dòng code này, tức là không gán độ rộng cho nó). Giá trị này được tính bằng(540px + 220px + 220px) - 220px = 760px, tức là độ rộng của 3 cột ban đầu trừ đi độ rộng của cột sidebar thứ 3 được thêm vào.
+ width: 540px; : đây là độ rộng của phần main khi hiển thị ở các trang khác trang bài viết.

Như vậy đã xong phần code CSS, bây giờ ta sang phần Code HTML của các phần

B. Bước 2 : thêm cột thứ 3 vào trong code template .
- Tiếp tục ở bước 1 (bước 1 vẫn chưa save template) tiếp tục xuống phía dưới, ta sẽ thấy code HTML như bên dưới :

- Và ta thay đổi nó như bên dưới :

<b:if cond='data:blog.pageType != "item"'>
<div id="newsidebar-wrapper">
<b:section class="sidebar section" id="newsidebar" preferred="yes">
...
...
...
</b:section>
</div>
</b:if>

<div id="main-wrapper">
<b:section class="main section" id="main" preferred="yes">
...
...
...
</b:section>
</div>

<b:if cond='data:blog.pageType != "item"'>
<div id="sidebar-wrapper">
<b:section class="sidebar section" id="sidebar" preferred="yes">
...
...
...
</b:section>
</div>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<div id="rightsidebar-wrapper">
<b:section class="sidebar section" id="rightsidebar" preferred="yes">

</b:section>
</div>
</b:if>

- Đoạn code màu cam là code của cột sidebar thứ 3
- Các đoạn code màu đỏ là để thiết lập bố cục hiển thị của blog ở các trang.

C. Bước 3: cuối cùng là save template.

Chúc các bạn thành công.

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Cách ẩn widget tại trang chủ hay trang riêng biệt

Thủ thuật blog cho phép ẩn widget (tiện ích) tại trang chủ, trang nhãn, trang lưu trữ, hay một trang riêng biệt nào đó. Tùy theo nhu cầu của bạn muốn ẩn ở trang nào.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được ID hoặc class của nó. Các ID thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, …

Các ID khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, …

Các class khi đưa vào CSS có dấu “.” (dấu chấm) ở phía trước, ví dụ: .header-outer.

CÁCH THỰC HIỆN

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng ]]></b:skin>

Bước 2: Thêm vào sau nó một trong các đoạn code sau:
(Nhớ thay chữ “ID widget” thành ID của widget bạn muốn ẩn)

1. Ẩn widget ở trang chủ

<!--Ẩn widget ở trang chủ-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

2. Ẩn nhiều widget ở trang chủ

<!--Ẩn nhiều widget ở trang chủ -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#ID_widget , #ID_widget, #ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

3. Ẩn widget ở bài viết

<!-- Ẩn widget ở bài viết -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

4. Ẩn widget ở trang chủ, trang nhãn

<!-- Ẩn widget ở trang chủ, trang nhãn -->
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

5. Ẩn widget ở các trang lưu trữ

<!-- Ẩn widget ở các trang lưu trữ -->
<b:if cond='data:blog.pageType == "archive"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

6. Ẩn widget ở các trang tĩnh

<!-- Ẩn widget ở các trang tĩnh -->
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

7. Ẩn widget ở một trang riêng biệt nào đó

<!-- Ẩn widget ở một trang riêng biệt nào đó -->
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

8. Chỉ hiện widget ở trang bài viết

<!-- Chỉ hiện widget ở trang bài viết -->
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại - nghĩa là không ẩn mà chỉ hiện các widget ở các trang lựa chọn ở trên và ẩn ở các trang còn lại.

Bước 3: Save template. (Lưu mẫu)

THE END.

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Ẩn hiện Sidebar với JQuery cho Blogspot

Bài viết này namkna sẽ hướng dẫn các bạn cách bật tắt Sidebar bằng cách sử dụng các lệnh từ thư viện Jquery. Với tiện ích này bạn chỉ cần bấm vào nút xem và ẩn để ẩn hoặc hiển thị siderbar. bạn có thể xem Demo để tháy rõ hơn.

VIEW DEMO

¤ Các bước để ẩn hiện Sidebar cho blogger với Jquery.

1. Đăng nhập vào tài khoản Blogger

2. Vào Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới ngay trước thẻ </head> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này):

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper').toggleSidebar({
        expand: "#main-wrapper"
    });
});
//]]>
</script>

- Nếu blog của bạn đã có thư viện JQuery rồi thì hãy xóa đoạn code màu xanh đi. Lưu ý là file JQuery phải từ phiên bản 1.7 trở lên nha. bởi vì ở đây (và từ bây giờ) Namkna không còn mặc định sự kiện .click() thay vì .on("click") Nếu phiên bản JQuery bạn đang sử dụng dưới phiên bản 1,7 thì hãy thay đổi nó để blog của bạn hoặt động tốt hơn.
- Bạn hãy tải các file js về sau đó upload lên host riên để dùng lâu dài nha. (nếu chưa có host thì hãy xem cách đăng ký host miễn phí tại đây)
- Thẻ #sidebar-wrapper được lấy từ ID của Sidebar sẽ xuất hiện và thực hiện lệnh ẩn hiện, trong khi bộ chọn #main-wrapper là yếu tố mà cột bài viết sẽ được mở rộng và thu hẹp để trải kín vị trí do mất thanh Sidebar.

$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"});

- Với một số mẫu phần id này có thể khác bạn vui lòng sửa nó. Nếu không thể xác định được id của nó hãy để lại URL blog của bạn ở phần commnet ở cuối bài viết này mình sẽ chỉ giúp.

5. Dán code bên dưới trước thẻ ]]></b:skin>.

#sidebar-toggler-wrapper {
  clear:both;
  position:relative;
}

#sidebar-toggler-wrapper a.sidebar-toggler {
  color:white;
  font:normal bold 11px/100% Arial,Sans-Serif;
  text-decoration:none;
  margin:0 0;
  padding:4px 10px;
  background-color:#123;
  border-left:4px solid #789;
  outline:none;
  position:absolute;
  bottom:0;
  right:0;
}

#sidebar-toggler-wrapper a.active {
  color:black;
  background-color:#789;
  border-left-color:#123;
}

6. Lưu mẫu lại.

¤ Tìm hiểu nâng cao!

- Có nhiều cách tùy biến có thể được thực hiện trên plugin này. Bao gồm thiết lập ghi nhớ cookie cho trình duyệt. Vì vậy, kịch bản cookie.js mà tôi thêm trong file jquery-toggle-sidebar.js không cần thiết phải thêm vào/có thể loại bỏ nếu bạn vô hiệu hóa các tính năng ghi nhớ cookie cho trình duyệt. Dưới đây là mã mở rộng của nó :

$('#sidebar-wrapper').toggleSidebar({
    expand: "#main-wrapper",
    hideText: "&rArr; Hide Sidebar",
    showText: "&lArr; Show Sidebar",
    animated: false,
    animateSpeed: 400,
    easingType: null,
    extraWidth: 0,
    enableCookie: false,
    defaultHidden: false
});

- Bảng có thể xem kỹ các thuộc tính của đoạn code trên ở bảng bên dưới:

Tùy chọn	Thông tin
expand	Yếu tố để được mở rộng và thu hẹp để lấp đầy khoảng trống kể từ khi thanh Sidebar được ẩn đi.
hideText	Nhấn nút Hide Sidebar khi thanh Sidebar đang hiển thị để ẩn nó đi. bạn có thể thay chữ màu vàng thành chữ bạn muốn.
showText	Nhấn nút Show Sidebar khi thanh Sidebar đã bị ẩn để hiển thị lại. bạn có thể thay chữ màu vàng thành chữ bạn muốn.
animated	Nếu giá trị true thì hiệu ứng chuyển động (trượt) sẽ được áp dụng trong quá trình ẩn hiển thanh sidebar và phần bài đăng.
animateSpeed	Được sử dụng để xác định tốc độ của các hiệu ứng chuyển động nếu tùy chọnanimated ở trên mang giá trị là true
extraWidth	Được sử dụng để xác định chiều rộng thêm của cột bài viết. Về cơ bản, khi thanh sidebar bị ẩn đi nó sẽ để lại một khoảng trống, lúc này chiều rộng của phần bài đăng sẽ thay đổi để lấp khoảng trống do thanh sidebar để lại khi nó được ẩn hi. Tùy chọn này là rất quan trọng và chỉ được sử dụng nếu độ rộng bài viết sau khi mở rộng không lấp hết hoảng trống do phần sidebar bên phải để lại. Tùy các sử dụng mà nó mang nghĩa tích cực hay tiêu cực. Tích cực thì độ rộng cột tiêu chuẩn sẽ tăng lên, trong khi theo chiều hướng tiêu cực sẽ làm giảm chiều rộng của bài đăng khi thanh bên Sidebar bị ẩn.
easingType	Được sử dụng để xác định các loại hiệu ứng chuyển động (trượt) nếu tùy chọnanimated giá trị true.
enableCookie	Nếu giá trị là true, chuyển động của Sidebar sẽ được trình duyệt ghi nhớ.
defaultHidden	Nếu giá trị là true, Sidebar sẽ được ẩn ở trạng thái bình thường. Tức là nó sẽ ẩn khi độc giả truy cập vào trang của bạn và muốn xem nội dung thanh sidebar bạn sẽ phải bấm vào button Show Sidebar.

- Dưới đây là file js mình đã tích hợp thêm cookie.js bạn có thể tải về sau đó upload lên host riên để dùng lâu dài nha. (nếu chưa có host thì hãy xem cách đăng ký host miễn phí tại đây)

JQuery Toggle Sidebar .... JQuery Toggle Sidebar Minified

Theo: Namkna.blogspot.com

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Tùy chỉnh số bài viết hiển thị ở trang Label

Thủ thuật yêu cầu : Tùy chỉnh số bài viết hiển thị ở trang Label

Đây là một trong những thủ thuật cơ bản của blogger. Thông thường khi load 1 nhãn nào đó từ 1 bài viết, mặc định blogger sẽ hiển thị kết quả là 20 bài viết. Bài viết này sẽ hướng dẫn bạn điều chỉnh lại số bài viết này.

Khi bạn tạo 1 liên kết tới 1 nhãn nào đó trong blog, mặc định khi hiển thị bài viết ở nhãn đó sẽ là 20 bài, nếu bạn muốn tùy chỉnh số bài viết hiển thị cho link liên kết này thì bạn chỉ cần thêm đoạn code nhỏ vào link liên kết như bên dưới.

http://YOURBLOG.blogspot.com/search/label/labe1?max-results=10

- Với giá trị 10 là số bài viết hiển thị.

Trên đó là việc bạn tùy chỉnh cho 1 liên kết mà bạn tự tạo tới nhãn đó. Nếu muốn tùy chỉnh số bài viết cho link nhãn nằm ở footer của bài viết thì sao? Để làm việc này bạn phải tùy chỉnh lại code template.
1. Đầu tiên vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đoạn code bên dưới (hoặc tương tự):
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

5. Thêm đoạn code màu đỏ vào như bên dưới:

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + "?max-results=20"' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>

- Thay đổi giá trị 20 thành số bài viết mà bạn muốn hiển thị.

Chúc các bạn thành công.

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Bài viết liên Quan gồm danh sách ảnh và bài viết

Ghé thăm blogger http://namkna.blogspot.com
- Mình có yêu cầu thủ thuật bài viết liên quan có ảnh đại diện và bài viết.
- Mình chỉ thay đổi phần css cho hợp với màu nền blog mình.
- Để hiểu rõ hơn bạn có thể xem hình minh họa hoặc xem ngay trên blogger namkana tại link nguồn bên dưới bài đăng !

- Cách thực hiện như sau:
Bước 1: Các bạn vào Thiết Kế, Chỉnh sửa HTML, sau đó dán đoạn Code bên dưới lên trên thẻ</head>

<style type='text/css'>
/* CSS THÊM: Bài viết liên Quan gồm danh sách ảnh và bài viết
----------------------------------------------- */
.baivietlienquan {
margin : 5px 5px 5px 5px;
padding : 1px;
clear : both;
list-style-type : none;
background : #adc7de url(http://www.vn520.org/@forum/gif/ok/201112182141001.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
color:#000;
font-weight: bold;
}
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding:0;margin:10px 0 5px 0;}
#related-posts h2{margin:0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiITbRuYp4rV5qwm6yVdeSjyiU82nmo4Weiw-qLRYlHt5-Hai2iUIZUF6TU0xW2mlKhQA3Re5UP1LWK8zH3yPgMJhUMwO2rTMxQKzFOS0IYXDRanC88hRIuIG-LnurEmAgNzAbFuhJPgOI/s1600/newslienquan.jpg) no-repeat scroll left 0 transparent;height: 16px;}
#related-posts a:hover {background-color:#d4eaf2}
.lienquan {background: #ddd;height:57px;float: left;padding-left: 1px;width: 173px;margin:1px;overflow:hidden;line-height:1.4em}
.related-posts {margin: 0;padding: 0}
.related-posts ul {margin: 0;padding-top: 5px}
.related-posts ul li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcTaGo2Qfvp5O0g7ph8eTESI7KhCvrD6BKU6EllKoMV78kcpLCcJgDIEKSuyCFmtN80kwJdE9uESbLLeyORhlHpoL3kxdxqu7aaViUtqj7HlUlQ3e15oc3xmoHZWA_F8yapSxSSSZncYsz/s1600/list.png) no-repeat top left;list-style-type: none;margin: 0 0 2px 5px;padding: 2px 0 0 18px;word-wrap: break-word}
</style>

<!-- Start Related posts by namkna.blogspot.com -->
<script src='http://namknablog.googlecode.com/files/related-img-by-namkna-nt.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[
var titles=new Array();var titlesNum=0;var urls=new Array();var time=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Không có bài vi?t liên quan</li>")}else{while(b<titles.length&&b<20&&b<maxresults){document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}}document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)};
//]]>

</script>
</b:if>
<!-- End Related posts by namkna.blogspot.com -->

Lưu Template lại.
Bước 2: Chọn Mở rộng tiện ích mẫu và dán Code sau bên dưới dòng:

<div class='post-footer-line post-footer-line-2'/>

hoặc code sau:

<div class='post-footer-line post-footer-line-1'/>

<!-- Related posts by namkna.blogspot.com --> 
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=9&quot;' type='text/javascript'/>

</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=9;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div> 
<div style='margin-bottom:5px;clear:both'/> 

<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhghTqiHmaLhz-1kPL4S6Y2Jt1NbNcUZMe24yt4KRqCn0DbZj5vSfnrVQ6iTMV9phczlOB_cHu1CNacmB9lHq9CK9TvyyEtmf3mOJUfjC9xdw-FytqguS2_ecuAXomkqrrSinad3ZxxwwU/s1600/cac-tin-khac-namkna-blogspot-com-ngoctra.jpg'/>
<div class='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=12;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</div>
<div class='clear'/>
<!-- Related posts by namkna.blogspot.com -->

Trong đó các bạn chú ý:

- max-results=9&quot là số bài ở dạng thumbnail

- var maxresults=12 là số bài ở dạng list.

Các bạn có thể xem hình ngay dưới sẽ thấy rõ hơn.

DOWNLOAD file js:
http://namknablog.googlecode.com/files/related-img-by-namkna-nt.js
or
http://www.4shared.com/rar/kPfAsMbv/related-img-by-namkna-nt.html
or
http://choiblogs-related-img-by.googlecode.com/files/related-img-by-namkna-nt.js

NGUỒN:
http://namkna.blogspot.com/2011/12/bai-viet-lien-quan-gom-danh-sach-anh-va.html?showComment=1325010021158#c2113074943228154446

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Chia Main Body thành 2 hay nhiều cột trong Blogger Template

Main Body là thành phần quan trọng nhất trong template Blogspot, là nơi chứa đựng gần như toàn bộ nội dung của một Blog, nhưng khả năng tùy biến lại rất hạn chế.

Blogger Template Layout

Để tránh sự nhàm chán và tạo nên sự độc đáo khác biệt, bài viết dưới đây iTechPlus sẽ hướng dẫn các bạn một vài thao tác đơn giản để chia Main Body thành 2 hay nhiều cột với kích thước tùy ý.

Hình minh họa :

Main Post body theo mặc định

Main Post body sau khi chia làm 2 cột

DEMO

Cách thực hiện :
1. Vào Thiết kế > Chỉnh sửa HTML
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type="text/css">
.post {position: relative;width: 265px;height: 250px;margin: 0 15px 0 0;padding:10px;float: left;overflow: hidden}
.post-body{margin: 0 auto;padding:0;line-height:1.6em}
.post h3{margin: 0 0 10px; padding:0; line-height:1.3em}
.post-footer{display:none}
.date-header{display:none}
</style>
</b:if></b:if>

* Các bạn lưu ý code in đậm màu đỏ và thay thế cho phù hợp
Ở ví dụ trên, Main Body được chia làm 2 phần có tổng chiều rộng là 600px, được tính theo công thức :

Main Body = 2x265px + 2x15px + 4x10px = 600px

Do vậy, để chia thành 3,4 hay n phần thì bạn cần áp dụng công thức trên để tính toán cho hợp lý.
3. Tìm trong template đoạn code bên dưới

#blog-pager {
text-align: center;
}

và thay thế thành

#blog-pager {
text-align: center;clear:both;padding-top:20px;
}

Lưu ý : Khi sử dụng thủ thuật này, nhất thiết bạn phải chèn JumpLink cho mỗi bài post, hoặc sử dụng Auto Readmore đã được giới thiệu ở đây.
4. Save Template và tận hưởng thành quả nào các bạn !
Chúc các bạn thành công !

Hướng dẫn khách hàng sử dụng dịch vụ

ĐĂNG KÝ MUA CODE

ĐĂNG KÝ MUA TEMPLATE

Xem thêm

Giới thiệu : Mời bạn đăng ký dịch vụ để download style templates đây là một sản phẩm được thiết kế bản quyền do trung tâm Vcupdesign kết hợp với giải pháp mạng Việt Nam -nsvina.com thực hiện

Tính chất dịch vụ : Chúng tôi sưu tầm các templates chất lượng trên mạng Internet và Download về fix lại tất cả các lỗi, code rác, virus nhằm cung cấp cho quý khách một templates chất lượng cao với phong cách hoàn toàn khác biệt nổi trội.

Cam kết sử dụng : Với tính chất như đã trình bày bên trên cho nên chúng tôi cam kết chỉ thu tiền của quý khách khi hoàn chỉnh bàn giao templates như trong hợp đồng.

Cho bạn niềm tin : Với đội ngũ Design chuyên nghiệp 6 năm kinh nghiệm và tầm nhìn thẩm mỹ...chúng tôi hứa hẹn mang lại cho quý khách một sản phẩm tốt nhất và ưng ý!

Quy định chung cần biết :

Chúng tôi chỉ cung cấp mã nguồn 1 lần duy nhất.

Chúng tôi không bảo hành khi quý khách làm trái quy định bảo lưu templates.

Chúng tôi không hoàn tiền khi quý khách hàng đổi ý chọn giao diện khác.

Chúng tôi chỉ có 1 địa chỉ duy nhất cho nên chúng tôi không chấp nhận việc khiếu nại không đúng bản quyền.

Xem nhiều trong tuần

Contact

Chia widget Label ở footer thành nhiều cột cho blogspot.

» Thêm Like, Subscription box vào blogspot của bạn!

Hướng dẫn khách hàng sử dụng dịch vụ

Ẩn 2 cột sidebar và hiển thị cột sidebar thứ 3 khi xem bài viết (dùng cho template 3 cột)

Hướng dẫn khách hàng sử dụng dịch vụ

Cách ẩn widget tại trang chủ hay trang riêng biệt

Hướng dẫn khách hàng sử dụng dịch vụ

Ẩn hiện Sidebar với JQuery cho Blogspot

¤ Các bước để ẩn hiện Sidebar cho blogger với Jquery.

¤ Tìm hiểu nâng cao!

Hướng dẫn khách hàng sử dụng dịch vụ

Tùy chỉnh số bài viết hiển thị ở trang Label

Thủ thuật yêu cầu : Tùy chỉnh số bài viết hiển thị ở trang Label

Hướng dẫn khách hàng sử dụng dịch vụ

Bài viết liên Quan gồm danh sách ảnh và bài viết

Hướng dẫn khách hàng sử dụng dịch vụ

Chia Main Body thành 2 hay nhiều cột trong Blogger Template

Hướng dẫn khách hàng sử dụng dịch vụ

Flicker Images