Gắn hình ảnh cho bài đăng mới nhất

Có nhiều cách để tạo sự khác biệt cho bài đăng mới nhất. Trước đây mình đã hướng dẫn Tạo mầu nền riêng cho bài đăng mới nhất nhưng có vẻ nó khó thực hiện với những bạn chưa biết nhiều về Blogger template. Hôm nay mình sẽ hướng dẫn một cách khác để tạo sự khác biệt cho bài đăng mới nhất bằng cách sử dụng một hình ảnh hiển thị bên cạnh bài đăng này. Cách thực hiện khá đơn giản cũng gồm 2 bước.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

Code:

#Blog1{position:relative}

Bước 2: Tìm thẻ

Code:

<a expr:name='data:post.id'/>

và thêm vào sau nó 1 trong những đoạn mã sau, mỗi đoạn mã ứng với 1 hình ảnh hiển thị bên cạnh bài đăng mới nhất.

Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <img alt='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK82hHUNu3wNvMTM9pOAlG3ZXximmuwhicmvejcaWsh681UHK82k1DZeiwVaZs-lgd107nYpjzK3rtVN9Eyixik1ZttOP3gsqsewQFfVFJGWi0dHnaEkqKuY6w8MAQhs9q4It_LYTh6M-K/s1600/new-red.png' style='display:block;position:absolute;top:24px;left:-24px;border:0 none'/>
 </b:if>
</b:if>

Thay thế link ảnh
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK82hHUNu3wNvMTM9pOAlG3ZXximmuwhicmvejcaWsh681UHK82k1DZeiwVaZs-lgd107nYpjzK3rtVN9Eyixik1ZttOP3gsqsewQFfVFJGWi0dHnaEkqKuY6w8MAQhs9q4It_LYTh6M-K/s1600/new-red.png
Bằng 1 trong các ảnh sau:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9F1km55bPDfUyppL-BSpQYvLXufCFce5ptnpTN6bnFjozBapAOP4EAfSDe4S7uNNx4I5EyRVcdPPvjHbNf7pqghfWzIvoWhk7cHHNrzrm-fS86KHRuqNPAC19rMEyMXpIWfVwT_vm4QYx/s1600/new-gray.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYMWr7z4jCFITIbxKdTmjhO9qkhwQ8dQuOIVGLJDfJ-FDD1JC4BWX9g3IHQvto6Zi4VGPwwjuuTT_lVyozjENPP_5ZmAvHFF1NHOwqB9oab_MkFyVmOo0QUlXQqU2e5bywfOi_aeYnRJW/s1600/new-black.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK82hHUNu3wNvMTM9pOAlG3ZXximmuwhicmvejcaWsh681UHK82k1DZeiwVaZs-lgd107nYpjzK3rtVN9Eyixik1ZttOP3gsqsewQFfVFJGWi0dHnaEkqKuY6w8MAQhs9q4It_LYTh6M-K/s1600/new-red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOv-F9poYFlajjgTkYDr5U0GZH74SNxDiN3ays2QdiiEQXD0MT1j3F8CxmGIFNRDCEjBRRSM8wHQ6eK62pxCnSv9-ZH0I28rGb_kBLwsIg4XeVKOpx051hrIt9euoWBVzBL3WK8DzswD1N/s1600/new-yellow.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUg9Gy_cOzFte4CnLdXzSWP_ATRrt57c4i2p6QiDjX7xTVpkwK1t2JtrGRKDZDU5pbhuknnQgeOY9MjQzrMDoqzz-6xVPsq6vmURQRl7CpGrIp7ZGiSJSg4LTniJyD2ZUnxAkEoDN4tAcY/s1600/new-blue.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje-SGVSww3rEg55XOlUPMAcL5ttTk-lwTHNExoZkvk2K5SLG5xD9jo5CYS59vh7_aPae-_CUwWhMPHU2kGb7rvWXJPR3S7LSz2qFs-4IYAbuQ2MI7O_D1NgRq7YaVjrJ4_mwHi3W8Vh_fY/s1600/new-blue-light.pngẢnh được hiển thị góc trên bên trái của bài đăng mới nhất. Bạn cần chỉnh lại giá trị của thuộc tính top và left ở bước 2 để hình ảnh được hiển thị phù hợp với template đang dùng. Nếu có thể, hãy design một hình ảnh cho riêng mình và thay thế cho hình ảnh của thủ thuật trên.

Thủ thuật này không dựa vào giá trị thời gian nên khi duyệt theo label sẽ không gắn hình ảnh cho bài đăng mới nhất, có vẻ còn gượng ép khi nói "tạo sự khác biệt cho bài đăng mới nhất"!

Read More

Tùy chọn vị trí quảng cáo cho banner blogger

Banner 468x60 pixels là 1 trong những banner quảng cáo được sử dụng phổ biến trên weblog, thông thường nó được đặt ở header. Để gây sự chú ý cho độc giả mình sẽ hướng dẫn chèn nó ở 2 vị trí là ở giữa bài viết thứ nhất và thứ 2 khi duyệt trang kiểu index và ở phía trên bài viết khi duyệt trang kiểu item.


 Bước 1: Tạo hàm hiển thị quảng cáo.

Code:

Tìm thẻ <b:includable id='main' var='top'> và thêm vào trước nó đoạn mã dưới đây:

<b:includable id='ads' var='posts'>
 <div style='clear:both'/>
 <div style='background:#FFF;padding:10px 0;text-align:center;line-height:0'>
  <a href='http://mchiase.blogspot.com'  target='_blank'><img alt='ads' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNwyNLFazWTN0NcDO-PSKIe9jSktEbNrzTRzDp1qwJxc18w3ek2WHIXX3GZw62AYpptHVv6TRIDV9K_HfLPtvYhD70nM0BvPqh8Hl4xeupYSopanDuAgTjMF46z24gNWZuI99Hri1xm8U/s468/qc.gif'/></a>
 </div>
</b:includable>

Thay thế http://mchiase.blogspot.com bằng địa chỉ của website cần quảng cáo và https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNwyNLFazWTN0NcDO-PSKIe9jSktEbNrzTRzDp1qwJxc18w3ek2WHIXX3GZw62AYpptHVv6TRIDV9K_HfLPtvYhD70nM0BvPqh8Hl4xeupYSopanDuAgTjMF46z24gNWZuI99Hri1xm8U/s468/qc.gif bằng địa chỉ của banner quảng cáo.
Bước 2: Gọi hàm quảng cáo ở vị trí cần chèn.
Ở giữa bài viết thứ nhất và thứ 2 khi duyệt trang kiểu index:

Ở phía trên bài viết khi duyệt trang kiểu item:

Code:

Tìm thẻ <b:include data='post' name='post'/> và thêm vào trước nó đoạn mã dưới đây:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:include data='post' name='ads'/>
</b:if>

Hi vọng nó có ích cho những người muốn kiếm thêm tiền từ quảng cáo khi mà Google Adsense còn "e ngại" blog Tiếng Việt.

Read More

Hướng dẫn chèn ảnh, video, nhạc vào comment Blogspot

Điểm mạnh của blog là tính tương tác giữa người viết và người đọc. Những dẫn chứng dạng chữ chưa đủ tính thuyết phục thì người đọc còn muốn chèn thêm ảnh, video hoặc nhạc. Ở diễn đàn thì việc chèn ảnh, video hay nhạc được thực hiện dễ dàng với BB code, còn Blogger chỉ hỗ trợ 3 thẻ HTML là <b>, <i> và <a> - điều đó chưa đủ làm thỏa mãn bạn? Bài viết này sẽ giúp bạn làm việc đó dễ dàng cho khung comment của Blogger.

Ảnh được chèn từ link direct còn video và nhạc thì từ Youtube và Nhaccuatui dựa vào link trên thanh địa chỉ. Code để chèn cụ thể:

Chèn ảnh:
Link ảnh là http://domain.com/image.png thì code chèn sẽ là:

Code:

[img]http://domain.com/image.png[/img]

Chèn video từ Youtube:
Link video là http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related thì code chèn sẽ là:

Code:

[youtube]http://www.youtube.com/watch?v=0nbY7Mg_vMI&feature=related[/youtube]

Chèn nhạc từ Nhaccuatui:
Link nhạc là http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt thì code chèn sẽ là:

Code:

[nct]http://www.nhaccuatui.com/nghe?L=6g3kDUIYbvmt[/nct]

Bước 1: Mở template và chèn đoạn mã dưới đây trước thẻ

Code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\].*?'.*?\[\/img\]/gi, "");
theText = theText.replace(/\[nct\].*?'.*?\[\/nct\]/gi, "");
theText = theText.replace(/\[youtube\].*?'.*?\[\/youtube\]/gi, "");
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:590px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?L=/gi, "<div style='overflow:hidden'><embed style='margin-top:-250px;width:300px;height:400px' src='http://www.nhaccuatui.com/l/");
theText = theText.replace(/\[nct\]http:\/\/www.nhaccuatui.com\/nghe\?M=/gi, "<div style='overflow:hidden'><embed style='margin-top:-350px;width:300px;height:400px' src='http://www.nhaccuatui.com/m/");
theText = theText.replace(/\[\/nct\]/gi, "' quality='high' wmode='transparent' type='application/x-shockwave-flash'></embed></div>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Bước 2: Tìm thẻ và thêm trước nó thẻ

Code:

Tìm thẻ <b:loop values='data:post.comments' var='comment'> 

và thêm trước nó thẻ <div id='multimedia'>. Tìm thẻ đóng </b:loop> và thêm sau nó thẻ </div>.

Có thể bạn muốn thêm bước 3 là hướng dẫn cho người đọc biết được cách để chèn ảnh, video và nhạc vào nhận xét? Mình để mọi người tự làm bước này.

Read More

Tạo thông báo chỉ xuất hiện lần đầu truy cập blogger

Thủ thuật này hướng dẫn bạn tạo thông báo đăng ký đọc tin RSS và nó chỉ xuất hiện với người truy cập lần đầu tiên tới blog bạn. Dựa vào cookie được trình duyệt lưu lại, thông báo sẽ không xuất hiện cho những lần truy cập tiếp theo. Thông báo này được hiển thị ở bên trên nội dung bài viết của bạn.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

Code:

.feed-box{float:left;border:1px solid #E6DB55;margin:15px 0;background:#FFFBCC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-jj2HoOBxJ9EUwHFl54o0QnrOY84EP9RA-a2RgOcz8V0sq_bR6c-izoMoWF3PT6HbFjV8ZIxZMZ3I224kLvWIdQPYZfmKgO9FeWTnbevoCOUWl27KyRQ2az0EVxjpVKQkcAinZCBlswQ/) top left no-repeat;padding:10px 10px 10px 80px}

Bưới 2: Tìm thẻ và thêm đoạn mã dưới đây vào trước nó.

Code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='feed-box'>
<script type='text/javascript'>
//<![CDATA[
var contentfeedbox='Xin chào! Đây là lần đầu bạn ghé thăm Blog. Hãy <a href="/feeds/posts/default" rel="nofollow"><b>đăng ký đọc tin RSS</b></a> hoặc <a href="http://" rel="nofollow"><b>nhận tin qua email</b></a> để cập nhật các bài viết mới nhất.';
if(document.cookie.indexOf("dp=cookie-feed-box")==-1){var dw='';dw+='<div class="feed-box">'+contentfeedbox+'<div style="clear:bodth"></div></div>';document.getElementById('feed-box').innerHTML=dw;document.cookie="dp=cookie-feed-box"};
//]]>
</script>
</div>
</b:if>

Hãy thay nội dung thông báo cho phù hợp với blog của bạn.

Read More

Bài viết ngẫu nhiên load nhanh cho Blogger

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về. Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết. Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

Code:

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnh Tiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.

Code:

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Nhận xét';
var rdp_disable='Tắt Nhận xét';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxe4qDWgodJiorrXZe0UB5L-7v8Gg0nRsUOaTFn1JI7qciGthnfeKk5QAg4tcsryctIJSr9jCQqfqG9N2av4K6UnY327buc-MF2Qh5abKg6Jml2C8kIrN2LAOZd9mp3S5pnUNtJh1Iu3b/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Thay 5 bằng số bài viết bạn muốn hiển thị, 150 là số ký tự của đoạn trích dẫn nội dung bài đăng. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Read More

Đánh số thứ tự cho khung nhận xét cho Blogspot

Khung nhận xét cơ bản đã là trực quan, tuy nhiên một số bạn còn muốn thêm đánh số thứ tự cho nhận xét. Việc đánh số thứ tự cho nhận xét giúp chỉ đích danh nhận xét đó và bài viết này sẽ giúp bạn làm điều đó. Số thứ tự được ghi theo thời gian nhận xét, có nghĩa nhận xét nào có trước sẽ được đánh số trước, nhận xét nào có sau sẽ được đánh số sau. Vì khung nhận xét không sắp xếp theo thời gian nhận xét nên đương nhiên số thứ tự nhận xét cũng không xuất hiện tăng dần.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ]]></b:skin>trong template của bạn.

.comments-number{position:absolute;top:55px;left:-44px;border-radius:10px;background:#d80556;width:20px;height:20px;font-size:10px;line-height:2em;color:#fff;text-align:center}
.comments .comment-thread.inline-thread .comments-number{top:44px;left:-38px}

Bước 2: Thay thế đoạn mã(function() {trong template của bạn bằng đoạn mã dưới đây: 

var items_copy=[];
(function() {

Bước 3: Thay thế đoạn mãvar items = <data:post.commentJso/>;trong template của bạn bằng đoạn mã dưới đây: 

var items = <data:post.commentJso/>;
items_copy=items;

Bước 4: Thêm đoạn mã dưới đây vào sau thẻ<data:post.commentHtml/>trong template của bạn. 

<script type='text/javascript'>
//<![CDATA[
for(i=0;i<items_copy.length;i++){a=document.getElementById('c'+items_copy[i].id);b=a.innerHTML+'<span class="comments-number">'+(i+1)+'</span>';a.innerHTML=b}
//]]>
</script>

Số thứ tự nhận xét có thể khiến khung nhận xét của bạn trở nên rối mắt, hãy cân nhắc trước khi sử dụng.

Read More

Tạo Style khung bình luận bài viết cực đẹp cho Blogspot

Đây là một style dành cho khung nhận xét mặc định của Blogger. Với style này khung nhận xét của bạn trở nên trực quan hơn khi có sự phân biệt rõ ràng giữa nhận xét reply và nhận xét được reply. Nhận xét của tác giả bài viết được gắn thêm ribbon để phân biệt với các nhận xét khác. Style này được thiết kế theo đúng phong cách mình vẫn theo đuổi lâu nay: đơn giản, rõ ràng và hiện đại. Style này là thiết kế ban đầu dành cho những template của mình sau này vốn sẽ áp dụng Thread Comment làm mặc định, hi vọng nó phù hợp với style đại đa số blog.



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

#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhodZyGeBVaoxbnVoiPAbvHN9dzI2riMGHcDtQaAl72pbuAqqiaPyfWZX_15-412YVGH03w9HyMRSlfAfq-RlEFhsyCN6cNAL5oifLAhincssjiVWkEkesMigsjhzoChCEZZpNkZxquRMA/);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

d80556 là màu chủ đạo của style Thread Comment này, bạn có thể thay đổi nó theo ý muốn.

Read More

Tạo Style top bài viết cực đẹp cho Blogspot

Bài viết hướng dẫn bạn Tạo Style top bài viết cực đẹp cho Blogspot có giao diện như hình dưới. Ban đầu mình định sử dụng CSS 3 tuy nhiên vì muốn hiển thị cả trên IE7 nên lại chuyển về CSS 2, trong đó thì việc đánh số là CSS 2.1 nên trên IE7 không có đánh số thứ tự.

Trong bài viết này mình sẽ áp dụng cho Popular Posts cóidlà PopularPosts1.

Bước 1: Thêm đoạn mã dưới đây vào sau thẻ<b:skin><![CDATA[trong template của bạn.

/*
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#fa4242"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ee6107"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#f0f"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#ff0"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#0ff"/>
</Group>
*/

Bước 2: Thêm đoạn mã dưới đây vào trước thẻ]]></b:skin>trong template của bạn.

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#0a960a;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px} #PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Bước 3: Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>. Thay thế nó bằng đoạn mã dưới đây.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
  <b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxe4qDWgodJiorrXZe0UB5L-7v8Gg0nRsUOaTFn1JI7qciGthnfeKk5QAg4tcsryctIJSr9jCQqfqG9N2av4K6UnY327buc-MF2Qh5abKg6Jml2C8kIrN2LAOZd9mp3S5pnUNtJh1Iu3b/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img expr:alt='data:post.title' class='item-thumbnail' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxe4qDWgodJiorrXZe0UB5L-7v8Gg0nRsUOaTFn1JI7qciGthnfeKk5QAg4tcsryctIJSr9jCQqfqG9N2av4K6UnY327buc-MF2Qh5abKg6Jml2C8kIrN2LAOZd9mp3S5pnUNtJh1Iu3b/'/>
         </b:if>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.snippet'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
 </b:widget>

Bước 4: Quay trở lại Bố cục và chọn Chỉnh sửa widget Popular Posts. Chọn Hiển thị tối đa 5 bài đăng, các thông số còn lại lựa chọn theo ý bạn.

Để dễ dàng cho mọi người thay đổi màu nền mình đã sử dụng Trình thiết kế Mẫu của Blogger. Bạn vào Thiết kế → Trình thiết kế Mẫu → Nâng cao → PopularPosts Backgrounds và thay đổi lần lượt background color1, background color2, background color3, background color4, background color5 theo ý muốn.

Read More

Tạo phân trang page navigation cho Blogger

Hôm nay mình xin tiếp tục chia sẻ các bạn thanh điều hướng page navigation, nó sẽ giúp các bạn đánh số trang bài viết có trên trang chủ của mình, rất quan trọng nếu blog của bạn có số lượng bài viết lớn.

Thanh điều hướng page navigation cho Blogger

Cũng như hầu hết các bài trước, việc thêm thanh điều hướng page navi khá đơn giản, chỉ cần vài bước
Đăng nhập vào Blogger » Mẫu » Chỉnh sửa HTML
Bây giờ các bạn tìm đến thẻ sau

Code:

<b:includable id='post' var='post'>

Thêm đoạn mã này lên trên

Code:

<b:includable id='ksl-page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: &quot;Đầu&quot;,
lastText: &quot;Cuối&quot;,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>

<script src='https://googledrive.com/host/0B04m_ldP5JJzcFdOTkF0RGNXdzg' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Trong đó:
perPage: Số lượng bài viết có trên một trang
numPage: Số lượng trang trước khi xuất hiện nút Đầu hoặc Cuối
Tiếp tục thôi, giờ bạn tìm đến đoạn thẻ sau:

Code:

<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã này:

Code:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:include name='ksl-page-navi'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <b:include name='ksl-page-navi'/>
    </b:if>
    <b:else/>
    <b:include name='nextprev'/>
    </b:if>

Bước cuối cùng là tô điểm cho nó, các bạn tìm đến thẻ ]]></b:skin>  và thêm đoạn css sau lên trên:

Code:

#blog-pager, .pagenavi {
  clear: both;
  margin: 30px auto 30px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
  color: #ffffff;
  background-color: #2c3e50;
  border-color: #2c3e50;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1.42857143;
  border-radius: 0;
}
#blog-pager a:visited, .pagenavi a:visited {
  color: #fff;
}
#blog-pager a:hover, .pagenavi a:hover {
  color: #fff;
  text-decoration: none;
  background: #000;
}
.pagenavi .current {
  color: #fff;
  text-decoration: none;
  background: #000;
}
.pagenavi .pages, .pagenavi .current {
  font-weight: bold;
}
.pagenavi .pages {
  color: #fff;
  background: #2c3e50;
}

Đoạn CSS này bạn có thể tùy biến lại toàn bộ sao cho phù hợp với blog của mình.

Read More

Tạo hiệu ứng ứng tuyết rơi cho Blogger

Hướng dẫn tạo hiệu ứng ứng tuyết rơi cho Blogger/Website cực tuyệt đẹp. Hiệu ứng này với ưu điểm khá đơn giản tối ưu tốc độ tải trang của bạn.

Bạn truy cập blogger.com → Mẫu → Chèn đoạn Code sau vào bên trên thẻ </head>

Code:

<script src='http://static.tumblr.com/2w7y46r/xtmlvfnoc/snowstorm.js'/><script type="text/javascript">
snowStorm.snowColor = '#fff'; // Màu của tuyết rơi
snowStorm.flakesMaxActive = 96; // Số lượng tuyết tối đa trên màn hình
snowStorm.snowStick = true; // Nếu chuyển thành false thì tuyết sẽ không đọng ở cuối trang web
</script>

Chỉ cần cách đơn giản này thôi, là các bạn đã có ngay hiệu ứng bông tuyết rơi ngay trên trang blog của mình.

Read More

Hướng dẫn tạo hiệu ứng hoa mai rơi tuyết rơi lá rơi cho Blogger

Hôm nay mình hướng dẫn các bạn hiệu ứng hoa mai rơi giúp cho blog của bạn trở nên đẹp hơn trong không khí ngày Tết cổ truyền của dân tộc. Ngoài ra các hiệu ứng hoa anh đào rơi, hiệu ứng lá rơi (khi trời chuyển sang thu),hiệu ứng tuyết rơi, hiệu ứng sao rơi,…

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </head> và Lưu mẫu  lại.

Code:

<script type='text/javascript'>
//<![CDATA[
var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSk6YVdWd0iGFSASgqQWI2AEnYw_9qCNXsvPqbj7gW-WTeKcZLyXEEcZUrA4xbmJYLnNBRkqc5wTQGq8UteO4E55ocZFMJre3B1Me6TBlgZdqIiP_yvrSH0ZtZYluhg86BNh2rZ2C361M/s1600/hoamai.png"; //the location of the snowflakes
var pictureWidth = 15; //the width of the snowflakes
var pictureHeight = 15; //the height of the snowflakes
var numFlakes = 10; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side


if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }

//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>');
}
}

//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}

//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations. doing this every time allows for resizing and scrolling
if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}

//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}

window.setInterval('flakeFall();',100);
//]]>
</script> 

Trong đó:
Bạn muốn hoa anh đào rơi hay lá rơi hay tuyết rơi hay sao rơi,…Thì các bạn chỉ cần thay đổi hình ảnh này:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSk6YVdWd0iGFSASgqQWI2AEnYw_9qCNXsvPqbj7gW-WTeKcZLyXEEcZUrA4xbmJYLnNBRkqc5wTQGq8UteO4E55ocZFMJre3B1Me6TBlgZdqIiP_yvrSH0ZtZYluhg86BNh2rZ2C361M/s1600/hoamai.png
là xong. ·
15 Chiều rộng của bông.
15 Chiều cao của bông.
10 Số bông hoa xuất hiện cùng một lúc.
0,01 Tốc độ rơi của các bông hoa.

10 Tốc độ các bông hoa giao động từ bên trái sang bên phải và ngược lại.

Read More