Showing posts with label Read more. Show all posts

Tạo Readmore trong Blogger ves 1

Để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ  được chèn vào vị trí đó. Khi đó, phần phía trên thẻ  này sẽ được hiển thị ở trang chủ và các trang category, phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.

Chức năng Scrip:

- Nếu trong bài viết của bạn có thẻ  (), nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ , thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5. Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
    function createSummary(id) {
        var p = document.getElementById(id), content = p.innerHTML;
        if (/<!--\s*more\s*-->/.test(content)) {
            p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
        } else {
            var imgTag = '', img = p.getElementsByTagName('img');
            if (img.length >= 1) {
                imgTag = '<img class="thumb" src="'+img[0].src+'" />';
            }
            p.innerHTML = imgTag + strip(content, 125) + '...';
        }
    }
    //]]>
    </script>
</b:if>

6. Thêm đoạn CSS dưới vào trước thẻ ]]></b:skin>.

.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}

- Bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

7. Tìm thẻ <data:post.body/> và thay thế bắng đoạn mã sau:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
    <script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
    <a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
    <data:post.body/>
</b:if>

Lưu template lại và xem kết quả

- Hiện nay đã có bản cập nhất mới hơn và load ổn định hơn các bạn xem Tại đây

Chú thành công!

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

Đối với Blogger thì thủ thuật tóm tắt bài viết tự động với nútRead 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.

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
5. Tìm đến dòng code sau (Ctrl F)

<div class='post-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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;'/> <!-- clear for photos floats -->
</div

=> Không phải template nào cũng có đoạn code như trên, chỉ tìm tương tự thôi. Chủ yếu là có 3 dòng tô đỏ.

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

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

7. Và thêm thẻ đóng </b:if> vào trước dòng <div style='clear: both;'/>
- Nếu không có dòng thì tìm dòng:

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

- Và thêm vào trước (hay sau nó cũng được) thẻ đóng </b:if>

=> 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 == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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;'/> <!-- clear for photos floats -->
</div>

Những dòng đánh dấu màu xanh 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 để.

Chúc thành công!

Auto readmore với thumbnail trên Blogger dùng Script - Style 1

Trong bài này namkna sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Thêm 1 điểm nữa là tiện ích lấy ảnh trong Album Picsa làm ảnh thumbnail, Với những hình ảnh không thuộc host Picasa của google sẽ không lấy được thumbnail. Do vậy bạn hãy Upload trực tiếp ảnh của mình lên blog khi post bài nha.

Ảnh minh họa:

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (process)
4- Click chọn Mở rộng tiện ích mẫu ( Expand Template Widgets) => Xem vdeo:

5- Tìm (Ctrl +F) thẻ bên dưới:

<data:post.body/>

- Và thay nó bằng đoạn mã sau đây:

<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;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:

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).

7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.

Tạo Auto Readmore với Cutter.js cho Blogger

Cutter.js giúp ta giữ lại được mô tả gốc với các thẻ HTML như in đậm, in nghiêng, màu chữ...

☼ Các bước thực hiện thủ thuật :

1. Vào bố cục
2. Vào chỉnh sửa HTML
3. Chọn mở rộng mẫu rồi chèn đoạn sau phía trên </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/cutter.js'/>
</b:if>

Trong đó:

width:100px: là chiều rộng ảnh đại diện
height:100px là chiều cao của ảnh đại diện

Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:

<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if></b:if>
</div>

Thay snippet, 40 thành số ký tự mô tả muốn hiển thị
Lưu ý: Cutter.js sẽ lấy 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ do vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.

Auto readmore phong cách video cho blogspot

Từ trước đến nay các blog về phim ảnh chư có tieenmj ích read mỏe riêng. bài viết này namkna giới thiệu tiện ích Auto readmore dành riêng cho các blog chuyên về phim ảnh.

=> Tiện ích này có gì đặc biệt?

1- Tự động biến link video thành trình chơi nhạc mà không cần phải lấy mã nhúng embeb ở trên trang youtobe (tiết kiệm thời gian phải không nào)

2- Tự động lấy ảnh mặc định của video thành ảnh thumbnail (không lấy ảnh upload trên blog và các host ngoài trang youtobe nha)
3- Tích hợp nút like cho từng video trên trang chủ. Bạn có thể xem ở demo hoặc hình ảnh minh họa bên dưới. (rất tiện phải không)

=> Cách tiến hành:

1- Đăng nhập vào blog

2- Chọn Mẫu

2- Chọn thêm tiện ích => Chọn mở rộng tiện ích mẫu

3- Tìm thẻ:

<data:post.body/>

- Thay thế thẻ đầu tiên tìm thấy thành:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>[postlink]
<data:post.url/>[/postlink]
<data:post.body/>
</div></b:if> 
<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;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>createVideoThumb(&quot;summary<data:post.id/>&quot;);</script>
<div id='viewers'>
<div class='download-link'>
<a class='uiBtn' expr:href='data:post.url'>Watch now &#187;</a>
</div>
<span style='float:left;padding:1px 0;height:21px;width:80px;overflow:hidden;border:none;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;+ data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=80&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</span>
 </div>
</b:if></b:if> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4- Thêm đoạn code ben dưới trước thẻ ]]></b:skin>

.uiBtn{font-family:"lucida grande",tahoma,verdana,arial,sans-serif;word-wrap:break-word;color:#b69786;cursor:pointer;display:inline-block;font-size: 11px;font-weight:bold;line-height:normal !important;padding:3px 6px 4px 7px;text-align:center;text-decoration:none;vertical-align:top;-webkit-border-radius:2px;-moz-border-radius:2px;
border-radius:2px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
.uiBtn:hover{color:#3671b2;text-decoration:none}
.download-link{float:right;padding:0px 0px 1px;margin-bottom:0;}
#viewers{float:left;width:100%;font:normal 12px Arial;margin:0;padding:0}

5- Thêm đoạn code ben dưới vào sau thẻ ]]></b:skin>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#main-wrapper{width:640px}
.feed-links{display:none}
h2.date-header{margin:.2em 0 .4em}
.post h3{height:23px;font:14px Oswald;line-height:1.1em;margin:0 0 8px;padding:0;}
.post{margin:10px 6px 0 4px;padding:5px 8px; width:180px;height:202px;float:left;border:1px solid #ccc;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;padding:5px 10px 10px;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
.post:hover{border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;filter:alpha(opacity=80);opacity:.8}
.post-body{margin:7px 0 0 0;float:right;border-top:none;padding-top:0px;}
.play-button{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYgXzFRaRnWCLp7VJMAByJ87NcXGTihcXIE8tIItApnyuj6y1ywnbbj9BiYyDAe0-eZdSHyRg_RHnvWoiTu-g4HZytTLfwB6K5tptwItUyzK1Z6zgzbP4P6-C79QbnE2qsbg1GJuWyTZ0s/s1600/play.png) no-repeat 65px 42px;cursor:pointer;height:147px;filter:alpha(opacity=75);opacity:.75;position:absolute;width:196px}
.play-button:hover{filter:alpha(opacity=40);opacity:.4}
#blog-pager{float:center;margin:6px;padding:8px 0}
</style>
</b:if></b:if>

6- THêm code bên dưới trước thẻ </head>

<script type='text/javascript'>
//<![CDATA[
var thumbnail_mode = 'float' ; summary_noimg = 0; summary_img = 0; img_thumb_height = 130; img_thumb_width = 180;

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://i930.photobucket.com/albums/ad145/whitebook_diary/novideo.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></a>'}else{var imgvid='<a href="'+postlink+'"><span class="play-button"></span><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="600" height="450"><param name="movie" value="http://www.youtube.com/v/'+vidid+'&hl=en_US&fs=1&border=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vidid+'&hl=en_US&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="600" height="450"></embed></object>'}var summary=embedvid+'<div class="content">'+textinside+'</div>';div.innerHTML=summary}
//]]></script>

Khi đăng bài bạn chỉ cần dán link youtobe vào bài viết thgeo cấu trúc sau:

Link + endofvid

Ví dụ mình có link là:

http://www.youtube.com/watch?v=De4Cl6f4VJs

thì ta sẽ dán link như sau vào bài viết:

http://www.youtube.com/watch?v=De4Cl6f4VJsendofvid

Auto readmorre với thumbnail cho blogspot sử dụng javarscipt - Style 2

Hôm nay Viettin365giới thiệu các bạn thủ thuật auto readmore (Tự động tóm tắt bài viết cho Blogspot) với cách hiển thị hoàn toàn khác so vớiThủ thuật lần này sẽ giúp các bạn có thể tùy chỉnh vị trí ảnh thumbnail, tiêu đề bài viết, ngày tháng đăng bài, tên tác giả và phần mô tả theo ý bạn. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.

Ảnh minh họa:

» Bắt đầu thủ thuật

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) - tiếp tục
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates) => Xem video:

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;line-height:1.4;margin:0;padding:6px 8px}
.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:100px;width:120px;padding:2px}
.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}
.sumpost h2 a{color:#160}
.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}
.sumpost .postinfo .numcm{margin:0 2px 0 2px}
.sumpost .postinfo .author{margin:0 2px 0 0}
.sumpost .postinfo .numcm .num{color:#f80}
.sumpost .postinfo .label{margin:0 2px 0 2px}
.sumpost .postinfo .label a{color:#b0039a}
.readmore{float:right;margin:8px 0 0;padding:0 0 0 0}
.readmore a{color:#d7034e;padding:0}
.readmore a:hover{color:#00f}
.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}

Trong đó:

font-size:16px: Là tiêu đề của bài viết trong auto readmore
color:#d7034e là màu chữ đọc thêm (đọc tiếp, readmore)

6. Chèn tiếp code bên dưới vào trước thẻ </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9vQBL0S5DueJLOrK06KANu4DSeS-90M4PL7SXiHvyo_TR5OnN0NM3JWkf4SL91RxyT89dZDhseyKFpdZFvRfJZOvE763Zd2MPLprWkXYosLfqOpqI7or1kcIaLvWso2PWea61oTrw1_SC/s1600/no-image-quangvietmkt-blogspot-com.PNG";
sumposts = 500; 
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A C(5,8){k(5.t("<")!=-1){4 s=5.D("<");E(4 i=0;i<s.e;i++){k(s[i].t(">")!=-1){s[i]=s[i].B(s[i].t(">")+1,s[i].e)}}5=s.L("")}8=(8<5.e-1)?8:5.e-2;K(5.G(8-1)!=\' \'&&5.t(\' \',8)!=-1)8++;5=5.B(0,8-1);H 5+\'...\'}A J(w,j,d,g,n,h,o,r,m,q){4 3=M.F(w);4 l="";4 j=j;4 d=d;4 g=g;4 n=n;4 h=h;4 o=o;4 r=r;4 m=m;4 q=q;4 7=3.I("7");k(7.e==0){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+O+\'"/></a></3>\'}k(7.e>=1){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+7[0].u+\'"/></a></3>\'}4 x=l+\'<3 6="N"><v><a f="\'+d+\'">\'+j+\'</a></v><3 6="W"><9 6="g">\'+n+\'<b> \'+g+\'</b></9> | <9 6="V"><9 6="T">\'+h+\' </9>\'+o+\'</9> | <9 6="P">\'+m+\'<a f="\'+q+\'"> \'+r+\'</a></9></3> \'+C(3.y,U)+\'...<3 6="Q"><a f="\'+d+\'">Đọc Rếp...</a></3></3><3 6="S"></3>\';3.y=x}',59,59,'|||div|var|strx|class|img|chop|span||||urltitle|length|href|author|numcms||title|if|imgtag|Labelslabel|authorLabel|numLabel||urllabel|labelpost||indexOf|src|h2|pID|summary|innerHTML|post|function|substring|removeHtmlTag|split|for|getElementById|charAt|return|getElementsByTagName|createSummaryAndThumb|while|join|document|sumpost|no_image|label|readmore|ti|borderline|num|sumposts|numcm|postinfo'.split('|'),0,{}))
//]]>
</script>
<style><b:if cond='data:blog.pageType == "index"'>.post-footer,.post h3,h2.date-header{display:none;}</b:if></style>

Trong đó:
+ Thay 500 là số ký tự hiển thị.
+ Link ảnh màu xanh là ảnh sẽ xuất hiện khi bài viết của bạn không có ảnh đại diện. Bạn có thể thay thế bằng link ảnh khác. Nếu vẫn dùng ảnh đó thì hãy tải về Tại đây (hoặc Tại đây) sau đó Upload lên blog và thay link vào để tránh ảnh bị die khi mình xóa.
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>

8. Thay thế code vừa tìm được thành đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.author/>&quot;,&quot;<data:top.authorLabel/>&quot;,&quot;<data:post.numComments/>&quot;,&quot;<data:top.commentLabelPlural/>&quot;,&quot;<data:label.name/>&quot;,&quot;<data:postLabelsLabel/>&quot;,&quot;<data:label.url/>&quot;);
</script>
</b:loop>
</b:if>
</b:if>

9. Cuối cùng là save lại và kiểm tra thành quả nha.

Tạo Auto readmore không sử dụng javascript cho Blogger

Blogger đã có readmore tuy nhiên nó khá thủ công, với blog đã có nhiều bài viết thì việc tạo readmore cho từng bài là rất vất vả và blogger thường tìm đến với auto readmore javascript. Auto readmore javascript thực ra chỉ hiển thị một phần bài viết qua hàm document.write, nội dung cả bài viết vẫn được trình duyệt tải về. Nhược điểm của nó là không thân thiện với các bộ máy tìm kiếm và các công cụ dịch trực tuyến, ngoài ra với bài viết dài nếu không dùng thêm readmore của Blogger thì sẽ gặp lỗi phân trang do Blogger tự ngắt trang. Thủ thuật auto readmore mình giới thiệu sau đây hoàn toàn mới, không sử dụng javascript mà dùng các câu lệnh do chính Blogger cung cấp. Nó sẽ cải thiện tốc độ blog của bạn khi duyệt các trang kiểu index, archive do chỉ tải về trích đoạn nội dung của bài viết.

Hình minh họa

Cách thực hiện: Mình sẽ giới thiệu 2 cách thực hiện về cơ bản đều gốngn hau cả. các bạn xem bên dưới nha:

Cách 1: Theo Duypham

Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh. Có 2 dạng hiển thị hình ảnh là bên trái hoặc bên phải.

1. Hiển thị hình ảnh bên trái:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin> :

.post-thumbnail{float:left;margin-right:20px}

2. Hiển thị hình ảnh bên phải:

Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin> :

.post-thumbnail{float:right;margin-left:20px}

Bước 2: Thêm đoạn mã auto readmore. Có 4 dạng auto readmore để lựa chọn.
1. Auto readmore với hình ảnh:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div>
   <b:if cond='data:post.thumbnailUrl'>
    <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
   <b:else/>
    <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-4s21XyKxxrrSsP3_6vVAYTPyVzc14bLHf_aHhSH6TK7781fLxZDDhYlbYBKAI6KQRLnTVyPC3feurjNvyETQvmAPNsBh6HFWiAjjcR_F64Sr5h4HPalFv0TeTdB60XP-DUKNLyQyCUE/' width='72px' height='72px'/>
   </b:if>
   <data:post.snippet/>
  </div>
  <div class='jump-link'>
   <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
  </div>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-4s21XyKxxrrSsP3_6vVAYTPyVzc14bLHf_aHhSH6TK7781fLxZDDhYlbYBKAI6KQRLnTVyPC3feurjNvyETQvmAPNsBh6HFWiAjjcR_F64Sr5h4HPalFv0TeTdB60XP-DUKNLyQyCUE/' width='72px' height='72px'/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
   </b:if>
  <b:else/>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-4s21XyKxxrrSsP3_6vVAYTPyVzc14bLHf_aHhSH6TK7781fLxZDDhYlbYBKAI6KQRLnTVyPC3feurjNvyETQvmAPNsBh6HFWiAjjcR_F64Sr5h4HPalFv0TeTdB60XP-DUKNLyQyCUE/' width='72px' height='72px'/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
  </b:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Việc hiển thị trích đoạn nội dung bài viết là thông qua thẻ <data:post.snippet/> của Blogger. Như đã từng đề cập tới ở bài đăng trước đoạn trích dẫn của Blogger chỉ gồm 140 ký tự (Blogger vừa update, số lượng ký tự của thẻ <data:post.snippet/> ở widget Blog giờ đây ít hơn số lượng ký tự của thẻ <data:post.snippet/> ở widget PopularPosts), khá là ngắn và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Hình ảnh được lấy thông qua lệnh data:post.thumbnailUrl. Đây là đường dẫn ảnh thứ nhất trong bài viết đã được Blogger resize về kích thước 72x72 pixels. Cần chú ý là ảnh của bài viết phải được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...thì công cụ resize của Blogger mới hoạt động, khi đó ảnh mới xuất hiện. Thủ thuật trên đã thêm thuộc tính alt là tiêu đề bài viết cho hình ảnh, nó giúp tăng khả năng SEO cho blog của bạn.

Trước khi thực hiện thủ thuật auto readmore này bạn cần loại bỏ đoạn mã auto readmore javascript nếu đang dùng nhé.

Cách 2: theo thuthuatblogger.

- Cách này có ưu thế là căn đều 2 bên của văn bản nhìn xẽ đẹp hơn.

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}

- Thay float:left; thành float:right; nếu muốn nó hiển thị bên phải

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 != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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.

Điểm chú ý trong code cách 2 có 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).

Chúc thành công!

Breaking

Business

Thursday, March 28, 2013

Tuesday, March 26, 2013

Monday, November 12, 2012

Tuesday, October 9, 2012

Wednesday, June 6, 2012

Tuesday, March 20, 2012

Technology

About & Social

Aplha Blog

Popular

Sponsor

Categories

Labels

Breaking News

Top Featured

Top Ad unit 728 × 90

পরিসংখ্যান

Post Top Ad

আর্কাইভ

মন্তব্য

Find Us On Facebook

Subscribe Here

সাম্প্রতিক প্রকাশনা

Random Posts

Advertise

Column1

Social Share

SOCIAL WIDGET

Recent Posts

Recent comments

Food

আমার সম্পর্কে

Biểu mẫu liên hệ

=> Tiện ích này có gì đặc biệt?

=> Cách tiến hành:

Advertise

YOUR_PROFILE_DESCRIPTION

About

Recent Comments

Most Popular

Tags

Categories

Popular Posts