kienthucngaynay

Hiển thị các bài đăng có nhãn Read More. Hiển thị tất cả bài đăng

Home » Posts filed under Read More

Tạo Auto Readmore cho blog chuyên về phim

Người đăng: ngaybennhau on Thứ Năm, 24 tháng 2, 2011

Đối với các blogspot chuyên giới thiệu về phim hay video được upload lên hoặc lấy từ Youtube.com thì để có được chế độ Readmore tự động lấy hình đại diện cho youtube video và đoạn trích dẫn thì cần phải sử dụng thủ thuật riêng chứ không dùng script tạo Auto Readmore cho các blog thông thường được.

Bạn có thể xem một ví dụ về một blogspot như vậy tại đây.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code bên dưới vào trước thẻ </head>.

Trong đoạn code trên, bạn có thể điều chỉnh các con số trong phần code được đánh dấu màu đỏ, lần lượt là số ký tự khi không có ảnh đại diện, số ký tự khi có ảnh đại diện, chiều cao ảnh đại diện, chiều rộng ảnh đại diện (px).

Bước 2. Tìm dòng code <data:post.body/> (hoặc <p><data:post.body/></p>) và thay nó bằng đoạn code bên dưới.

<div expr:id='"summary" + data:post.id'>[postlink]<data:post.url/>[/postlink]<data:post.body/></div>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>createVideoThumb2("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>createVideoThumb("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>

Bước 3. Để đăng youtube video lên blogspot trong trường hợp này thì bạn phải tạo tài khoản Youtube trên Youtbube.com hoặc nếu không thì bạn có thể tìm trên Youtube.com để lấy URL nguồn cho video. Để lấy URL, khi bạn xem một video nào đó trên Youtube.com hãy nhấp vào nút Share rồi copy URL trong khung. Bên dưới là một ví dụ.

http://www.youtube.com/watch?v=7g6jc_9OzhI

Bước 4. Trong bảng điều khiển Blogger, vào Settings (Cài đặt) >> Formatting (Định dạng), kéo xuống khung Post Template (Mẫu bài đăng) rồi dán đoạn mẫu sau đây vào khung Post Template.

endofvid
[starttext]
Nội dung bài đăng đặt ở đây
[endtext]

Nhấp SAVE SETTINGS để lưu cài đặt.

Trong đoạn mẫu ở trên thì, "endofvid" được dùng để cho Template hiểu rằng URL video hoàn thành, để bạn dán URL video ngay trước nó mà không có khoảng cách. [starttext] và [endtext] là các phần bao nội dung bài viết, nếu bạn cần viết mô tả nội dung video thì đặt vào giữa hai dòng này.

Bước 5. Vào Posting (Đăng bài) ở chế độ Compose. Trong phần nội dung, bạn đặt URL của video vào trước dòng endofvid, phần nội dung bài đăng thì đặt vào giữa 2 dòng [starttext] và [endtext]. Bên dưới là hình minh họa.

Lưu ý thủ thuật này chỉ áp dụng cho video được upload lên hoặc lấy từ Youtube.com.

Nguồn tham khảo: Xem >>

More about →

Tạo Read More tự động không dùng Javascript

Người đăng: ngaybennhau on Thứ Hai, 24 tháng 1, 2011

Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript. :68)

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.

Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).

More about →

Tùy biến Read More tự động với hình đại diện

Người đăng: ngaybennhau on Chủ Nhật, 19 tháng 12, 2010

Chúng ta đã biết đến cách tạo Read More tự động với hình đại diện (Auto Readmore with Thumbnails) khá phổ biến trong cộng đồng Blogger vì nó là một trong những thủ thuật cần thiết nhất.

Hôm nay tôi xin giới thiệu một cách mà tôi đã xào nấu chế biến từ thủ thuật và có những tùy biến như tạo trường hợp ảnh đại diện float và không float, nếu ảnh đại diện được float thì có thể sang trái hoặc sang phải và nếu không được float thì được căn nằm giữa phần tóm tắt bài viết.

Xem Demo.

Sau đây là hướng dẫn cách cài đặt cho trường hợp ảnh đại diện float sang phải.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<style type='text/css'>
.readmore {float:left}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.center-image {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = summary_img;
}
else {
imgtag = '<img class="center-image" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Bước 2. Tìm dòng <data:post.body/> hoặc dòng <p><data:post.body/></p> và thay nó bằng đoạn code sau đây.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'>Đọc thêm »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Lưu Template là OK.

Tùy biến: Nếu muốn ảnh đại diện float sang trái thì ở Bước 1 tại phần code CSS chỉnh lại như sau:

.readmore {float:right}
.post-thumbnail {
float:left;
margin:0px 10px 10px 0;
}

Nếu không cho ảnh đại diện float mà được căn giữa phần tóm tắt bài viết thì ở Bước 2 tại phần cuối đoạn code Javascript, thay dòng var thumbnail_float = true; thành var thumbnail_float = false;.

More about →

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Người đăng: ngaybennhau on Thứ Năm, 18 tháng 11, 2010

Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nút Read More và ảnh đại diện là một phần quan trọng tạo nên diện mạo đẹp cho Blog của bạn. Tuy nhiên kể từ khi Blogger phát hành đặc tính tạo trang tĩnh (New Page/ static page) thì thủ thuật Read More gặp vấn đề đối với các trang tĩnh. Thông thường các trang tĩnh dùng để tạo các trang About, Contact… Khi bạn mở trang tĩnh thì nó hiển thị Read More, khi click chuột vào liên kết Read More vẫn không hiển thị toàn bộ nội dung bài viết. Để giải quyết vấn đề này thì cần phải loại bỏ chức năng Read More có ảnh đại diện ra khỏi các trang tĩnh.

Để làm được điều này, bạn thực hiện theo các bước sau đây:

1. Đăng nhập Blogger Dashboard >> Design >> Edit HTML chọn Expand Widget Templates. Dùng tổ hợp phím Ctrl + F tìm dòng mã như bên dưới.

<div class='post-body'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> 
</div>

2. Thêm đoạn mã dưới đây vào sau dòng <div class='post-body'>.

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>

Toàn bộ phần mã sau khi thực hiện có dạng như sau:

<div class='post-body'>

<b:if cond='data:blog.pageType == "static_page"'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> Read more … "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

<div style='clear: both;'/> 
</div>

Những dòng đánh dấu màu đỏ là phần được thêm vào theo thủ thuật này.

Ý nghĩa của toàn bộ phần mã này như sau: Đối với các trang tĩnh (static page) thì hiển thị toàn bộ nội dung bài viết; không hiển thị chức năng Read more ở các trang bài viết (item) và đối với các trang bài viết (item) thì hiển thị toàn bộ nội dung bài viết. Như vậy chức năng Read more đã được loại bỏ hoàn toàn khỏi các trang tĩnh một cách triệt để.

More about →

Tạo Read More tự động với hình đại diện trên Blogger

Người đăng: ngaybennhau on Thứ Năm, 14 tháng 10, 2010

Tạo liên kết Read More (đọc thêm) cho bài viết trên Blogger một cách tự động mà không cần thao tác thủ công dùng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần đăng bài đầy đủ như cách cũ, ngoài ra còn hỗ trợ hình đại diện (thumbnail) khá chuyên nghiệp, lấy hình đầu tiên trong bài viết làm hình đại diện.

Hướng dẫn cài đặt:

Bước 1: Vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML), chọn Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn mã sau đây:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Bước 2: Thêm đoạn mã dưới đây vào phần HEAD (giữa 2 thẻ <head> ... </head>) của template:

Lưu ý các thông số màu đỏ trong đoạn mã phía trên:
summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.

summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.

img_thumb_height chiều cao của hình đại diện (pixel).

img_thumb_width chiều rộng của hình đại diện (pixel).

More about →

Tạo Auto Readmore cho blog chuyên về phim

Tạo Read More tự động không dùng Javascript

Tùy biến Read More tự động với hình đại diện

Loại bỏ chức năng Read more khỏi các trang tĩnh (static page)

Tạo Read More tự động với hình đại diện trên Blogger

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts