VTC2

VTV6

VTV4

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

Hôm nay viettin24h iớ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ới thủ thuật trước đây. Thủ 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/AVvXsEhQHECXWfaYTng4zwVfTwY3mCm0akU_2ouSKDBW0zuOAd8kutYSUABdt26Pm8mbsCu8kr-LH7IPOXpsm0XBdsvXesoxVJIVBqQ-kmC9BxtWuW0_DNsaPS3hB1yJlteq3y-qs0Vd0xzN5dvp/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 tiế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 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ủ.

iTV

Truyền hình trực tuyến

VTV1

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ó  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:

 Tìm đến thẻ :  ]]></b:skin> và dán code bên dưới trên nó 

<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!

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ẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ <!--more--> 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ẻ <!--more--> (), 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ẻ <!--more-->, 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!

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 nút button bằng css

Nút button được ứng dụng khá nhiều trên các blog có thể làm nút home link, nút RSS... bạn cũng có thể sử dụng để làm menu cho blog. Có nhiều cách để tạo nút bạn có thể dùng phần mềm hoặc tạo trực tuyến từ các trang web. Hôm nay không cần phần mềm hay hổ trợ của web, mình xin chia sẻ cách để bạn có thể tạo nút bằng css dùng để ứng dụng cho blog mình. Thủ thuật này sẽ hình thành nên một nút dạng hình chữ nhật và có hiệu ứng khi rê chuột.

☼ Cách tiến hành:

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

2- Vào Mẫu

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

4- Chèn code bên dưới vào trước thẻ  ]]></b:skin>

.button{
background: #00ccff; /*màu nền của nút*/
border: 3px #00ccff outset;
padding: 0 2px;
text-decoration: none;
font: bold 10px Verdana; /*kích thước của text*/
color:#ff0000; /*màu text*/
}

.button:hover {
border-style: inset;
background: #33ffff; /*màu nền của nút khi rê chuột*/
padding: 2px 3px 0 5px;
color:#000099; /*màu text khi rê chuột*/
}

.button:visited {
background: #00ffff; /*màu nền của nút sau khi click chuột*/
color:#ff6600; /*màu text khi đã click chuột*/
}

.button:active{
color: white;
}

- Bạn chỉ việc dựa vào chú thích và chỉnh sửa lại cho phù hợp, sau khi chỉnh sửa xong nhớ xóa đi các dòng chú thích màu xanh để không bị lỗi code.

- Bạn có thể xem bảng mã màu TẠI ĐÂY

5- Save template lại

Để tạo nút cho link trong bài đăng hay trên blog, bạn chỉ việc thêm và link đó lệnh "class="button" như bên dưới.

<a class="button" href="http://quangvietmkt.blogspot.com/2011/12/tao-nut-button-bang-css.html">Blog Namkna</a>

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

VTV2

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/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' 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/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' 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/AVvXsEhN8Wovx-0PqLmu5XIbHRfGZ0ffSN67E1MvlYCK6IPZJtWgRI_3h7-0S4Rrh2FmBBl_rx8ohFMI-u-FQTOXsDFpn2dzqSJUNKyaRlXNkLwFXVLNwWSg631rq40czgG2jv65XfbYCLFlfgMr/' 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!

Tạo cửa sổ popup sử dụng Javascript

Đôi khi bạn phải sử dụng Popup window để tạo liên kết đến một trang web khác. Popup window thường xuyên được sử dụng trong thiết kế web. Bạn hãy click chuột vào liên kết Demo dưới đây để thấy tác dụng của thủ thuật này.

Xem Demo:

XXEM DEMO

☼ Bắt đầu thủ thuật
1. Đầu tiên bạn hãy vào tài khoản blogger
2. Vào Thiết kế chọn Chỉnh sửa HTML
3. Bạn tìm thẻ.

</head>.

4. Dán code bên dưới vào sau thẻ trên.

<script type="text/javascript">
//<![CDATA[
function OpenPopup(Url,WindowName,width,height,extras,scrollbars) {
var wide = width;
var high = height;
var additional= extras;
var top = (screen.height-high)/2;
var leftside = (screen.width-wide)/2; newWindow=window.open(''+ Url + 
'',''+ WindowName + '','width=' + wide + ',height=' + high + ',top=' + 
top + ',left=' + leftside + ',features=' + additional + '' + 
',scrollbars=1');
newWindow.focus();
}
//]]>
</script>

Tiếp theo thiết lập cấu trúc HTML như sau và đặt tại vị trí muốn hiển thị liên kết đến một trang web khác.

<a href="javascript: void(0);" onclick=" javascript:OpenPopup('http://quangvietmkt.blogspot.com/','WindowName','510','280','scrollbars=1');">Tên Hiển Thị</a>

Trong đoạn code HTML ở trên, bạn cần thay đổi những phần được đánh dấu màu đỏ cho phù hợp.

Tạo hình tam giác với CSS

Trong thiết kế blog/web site rất nhiều lần cần sử dụng các thuộc tính tạo tam giác bằng CSS mà không cần dùng hình ảnh. Bài viết này Viettin24h giới thiệu với các bạn sử dụng mẹo nhỏ với thuộc tính border trong css để tạo ra hình tam giác.

1- Đầu tiên tạo một thẻ div với id là demo:

<div id="demo">
.....
</div>

Sau đó bạn xem hình dưới để thấy được cách tạo ra hình tam giác.

Khi để width và height bằng 0 thì thẻ div với border-width bằng 10px sẽ là hình vuông kết hợp của 4 hình tam giác tương đương với 4 cạnh border-left ,border-right, border-bottomvà border-top.Để tạo ra hình tam giác ta sẽ ẩn 3 trong 4 border bằng cách để cho chúng màu trong suốt với giá trị transparent.

Bạn cũng có thể thay đổi kích thước của tam giác bằng cách thay đổi độ rộng của border ví dụ như :

#demo{
    .....
    border:10px solid transparent;
    border-top:15px solid red;
}

Hình tam giác thường được tạo bằng pseudo-class của một phần tử.Ví dụ như:

#demo{
    width:80px;
    height:80px;
    background-color:#232323;
    position:relative;
}

#demo:after{
    content:"";
    width:0;
    height:0;
    position:absolute;
    border:10px solid transparent;
    ...../*code thêm ở hình dưới*/.....
}

Xem hình dưới:

Tuy chỉ là một mẹo nhỏ nhưng nó lại có khá nhiều ứng dụng hữu ích giúp làm tăng thẩm mỹ của trang web. Ví dụ như tạo tooltip hay ribbon..

Tạo tooltip

Ảnh minh họa:

HTML code :

<span id="tooltip">Tooltip bằng CSS</span>

CSS code :

#tooltip{
    background-color:#232323;
    background-image:-moz-linear-gradient(top,#4a4a4a,#232323);
    background-image:-o-linear-gradient(top,#4a4a4a,#232323);
    background-image:-webkit-linear-gradient(top,#4a4a4a,#232323);
    background-image:linear-gradient(top,#4a4a4a,#232323);
    color:white;
    padding:8px 15px;
    font-size:14px;
    border-radius:5px;
    font-family:helvetica,sans-serif;
    position:Relative;
    text-shadow:0 1px 0 rgba(0,0,0,0.7);
}
 
#tooltip:after{
    content:"";
    width:0px;
    height:0px;
    position:absolute;
    border:9px solid transparent;
    border-top:9px solid #232323;
    left:45%;
    bottom:-16px;
}

Tạo ribbon

Ảnh minh họa:

HTML code:

<div id="demo">
    <h1 class="ribbon">Ribbon bằng CSS</h1>
    <p><!-- nội dung --></p>
</div>

CSS code:

#demo{
    background-color:#232323;
    width:200px;
    padding:50px 25px 20px 15px;
    position:relative;
    color:#c8c8c8;
    font-family:helvetica,sans-serif;
    line-height:20px;
}
 
.ribbon{
    position:absolute;
    height:30px;
    top:10px;
    left:-8px;
    background-color:#0072ff;
    padding:0 60px 0 15px;
    max-width:180px;
    color:white;
    line-height:30px;
    font-weight:400;
    font-size:14px;
    text-shadow:0 1px 0 rgba(0,0,0,0.5);
    text-transform:uppercase;
    letter-spacing:1px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.3);
}
 
.ribbon:before,.ribbon:after{
    content:"";
    position:absolute;
    z-index:-1;
    width:0;
    height:0;
    bottom:-6px;
    left:3px;
    border:6px solid transparent;
    border-bottom:6px solid #023a7f;
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
}

Tuy nhiên tại sao namkna lại sử dụng cả :before và :after.Lý do là tại vì ở trình duyệt firefox hiện nay có một lỗi nhỏ khi ta sử dụng thuộc tính transform với hình tam giác.Xem hình dưới đây hoặc các bạn có thể test ngay trên trình duyệt có thể nhìn thấy ngay.

Có thể thấy lỗi nhỏ này làm hình hiện thị trên màn hình trông không được đẹp mắt do vậy tôi sự dụng 2 hình tam giác chồng lên nhau bằng cả 2 lớp giả :before và :after để là mờ cái đường kẻ không mong muốn kia đi như hình dưới:

Trên chỉ là 2 ví dụ đơn giản về sự hữu ích của việc tạo hình tam giác bằng css,hi vọng mẹo nhỏ này sẽ giúp ích được cho các bạn.