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

Đố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>.

<script type='text/javascript'><!--//--><![CDATA[//><!--
var thumbnail_mode = 'float' ; summary_noimg = 50; summary_img = 50; img_thumb_height = 120; img_thumb_width = 192;


function createVideoThumb(pID){
var div = document.getElementById(pID);
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};

var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
if (vidid ==""){var imgvid ='<a href="'+ postlink + '"><img class="thumbnail" src="http://i195.photobucket.com/albums/z105/dantearaujo/novideo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a>';
}else{
var imgvid ='<a href="'+ postlink + '"><img class=thumbnail src="http://i2.ytimg.com/vi/'+vidid+'/default.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a>';
};

var summary = imgvid ;
div.innerHTML = summary;
}

function createVideoThumb2(pID){
var div = document.getElementById(pID);
var imgtag = "";
var summ = summary_noimg;
if (div.innerHTML.indexOf("http://www.youtube.com/watch?v=")!=-1){
var vidid = div.innerHTML.substring(div.innerHTML.indexOf("http://www.youtube.com/watch?v=")+31,div.innerHTML.indexOf("endofvid"));
}else {var vidid =""};

var textinside = div.innerHTML.substring(div.innerHTML.indexOf("[starttext]")+11,div.innerHTML.indexOf("[endtext]"));
var postlink = div.innerHTML.substring(div.innerHTML.indexOf("[postlink]")+10,div.innerHTML.indexOf("[/postlink]"));
var embedvid = "";
if (vidid!="") {
embedvid = '<object width="654" height="393"><param name="movie" value="http://www.youtube.com/v/'+ vidid + '&hl=en&fs=1&rel=0&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+ vidid + '&hl=en&fs=1&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="654" height="393"></embed></object>'
}
var summary = embedvid + '<div class="content">' + textinside + '</div>';
div.innerHTML = summary;
}

//--><!]]></script>

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='&quot;summary&quot; + data:post.id'>[postlink]<data:post.url/>[/postlink]<data:post.body/></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>createVideoThumb2(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>createVideoThumb(&quot;summary<data:post.id/>&quot;);</script>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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 >>