Home » Blogspot

[Blogger-TT] Recent Comments Widget


Để làm được Recent Comment như hình trên, mọi người làm theo cách sau:
1. Tạo 1 Widget HTML/JavaScript .




2. Chèn đoạn code sau:

 <style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out; }
.rc-ico img:hover {-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
#rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;}
</style>
<script type="text/javascript">
var numRecentComments = 5;
var maxCommentChars = 67;
var trueAvatars = true;
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 50;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_0aSaAlcNKgbai2BCqxkWfLAGmQGTl1xQfWgc9V8KEqGchIAnwasrgnHkVZkuyJsF9pMynN_9kE55ZOZL3jPQr_BUovLrHYSafj1sd3MAsTfqENxMl9B3WXjVWTqp-dZbv-azXbtal7DX/"+sizeAvatar+"/anonymous-Icon.jpg";
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = 'commented:';
var txtAnonymous = '';
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40;
var getTitles = true;
var maxResultsPosts = "";
var txtTooltip = '[user] on &quot;[title]&quot; - [date MM-dd-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'&quot;'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'"><div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">'+imgcode+'</div><a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '...</div>');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'"><a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>');
}
}
document.write('<div style="clear:both;"></div></div>');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>
<span id=rcw-cr><a href=http://helplogger.blogspot.ro/2013/03/recent-comments-widget-with-hide-author.html>Recent Comments Widget</a></span>

Chúc mọi người thành công !
http://helplogger.blogspot.com/2013/03/recent-comments-widget-with-hide-author.html
Xem thêm…

[Bloger-TT] CSS Button cho Blogspot

Sử dụng button cho Blogspot dễ dàng hơn với CSS Button.


1. Chèn code CSS vào trước ]&gt;&lt;/b:skin&gt;    

Download CSS Button

2. Sử dụng bằng cách chuyển Bài đăng sang HTML sau đó chọn một trong các mẫu sau:



<a href="#" class="button big blue">Big Button</a>
    <a href="#" class="button big green">Big Button</a>
    <a href="#" class="button big orange">Big Button</a>
    <a href="#" class="button big gray">Big Button</a>
<br/>
<br/>
    <a href="#" class="button blue medium">Medium Button</a>
    <a href="#" class="button green medium">Medium Button</a>
    <a href="#" class="button orange medium">Medium Button</a>
    <a href="#" class="button gray medium">Medium Button</a>
    <br/><br/>
    <a href="#" class="button small blue">Small Button</a>
    <a href="#" class="button small green">Small Button</a>
    <a href="#" class="button small blue rounded">Rounded</a>
    <br/><br/>
    <a href="#" class="button small orange">Small Button</a>
    <a href="#" class="button small gray">Small Button</a>
        <br/><br/>
    <a href="#" class="button small green rounded">Rounded</a>
<br/><br/>
http://www.webdesignshock.com/CSS-buttons/
Xem thêm…

[Bloger Themes] Boutique Blogger Template

Template name : Boutique

Platform: Blogger / Blogspot

Release date : Sep 2013

Author :  www.soratemplates.com

Designer :  www.elegantthemes.com

Xem thêm…

[Bloger-TT] Khung chứa Code đẹp cho Blogspot

 Khung chứa Code đẹp cho Blogspot

1. Đăng nhập blog

2. Vào Mẫu (Template)
3. Vào chỉnh sửa HTML (edit HMTL). Tìm 1 trong các đoạn code tương tự. (Mẹo: Bấm Ctrl + F để tìm với từ khóa pre hoặc code hoặc pre,code)


Xem thêm…

[Bloger Themes] Cong Ly Blogger Template


Platform type: Blogger / Blogspot

Theme name: Cong Ly

Basic Instructions: How to install a Blogger XML template

Theme author: nguagovt

Designer: http://www.helloximo.com/

Xem thêm…

[Blogspot Themes] Download themes Blogspot


http://btemplates.com

http://vi-template.blogspot.com/
http://besttheme.net/freebies/
http://www.vinathemes.com/search/label/Blogger?max-results=6
http://www.designrazzi.com/2013/free-blogger-templates/
Xem thêm…

Tạo trang tìm kiếm bằng Google Search

Công cụ tìm kiếm trên Blogspot đơn điệu, không toàn diện đối với những người khó tính.Tại sao chúng ta không tạo ra 1 công cụ tìm kiếm như của Google,Yahoo,...Nhưng  tạo ra là điều không dễ....heee.Do đó,Google dã cung cấp cho chúng ta 1 công cụ là Google Search Engine.
Với bộ công cụ này việc tìm kiếm trên trang web bạn sẽ trở nên mạnh mẽ và linh hoạt hơn.
Xem thêm…

[Bloger-TT] Tổng hợp Code Cho Bài Viết

Để bài viết hoàn chỉnh trong Blogger bắt buộc ta phải dùng thêm 1 số tiện ích khác cho phù hợp với nội dung bài viết hiển thị.
Mình tổng hợp lại 1 số code mình thường dùng cho bài viết.Các code này nhiều nguồn khác nhau do các Blogspotter Design.
Xem thêm…

[Bloger- TT] Bảng mã màu dành cho Blogger

Trong quá trình thiết kế Blog, ngoài chỉnh sửa bố cục thì việc phối màu để make-up giao diện là công việc thường xuyên của các Blogger.
Xem thêm…

[Bloger-TT] Cách hiển thị code và khung thông báo

 Hiển thị code trong Blogger thật dễ dàng hơn .


Đầu tiên , kiếm

]]></b:skin>

Xem thêm…

[Blogspot-TT]Tạo bài viết liên quan cho blogspot

Để thực hiện, bạn chỉ cần tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:

Trước tiên bạn vào Dashboard -> Layout -> Edit html

Tìm </head> Copy code sau dán vào phía trước thẻ <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 12px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuZpDcck1ENcGoa-q1esZX5crL9cPdhI1w0H0MG_fImmNWHxJcO4f2nwCop-sLHiA_jd3z1RRur-hTbpyb6l1XzRIXPKlP4j_DzSdgmYC5W3PpKe4iivXpC8JISrdR3kEZ9ybi594nLMo/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://livefuz.tk/images-blog/Related_posts_hack.js' type='text/javascript'/> Tìm <data:post.body/> Copy code sau dán vào sau thẻ trên <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?max-results=5&orderby=published&alt=json-in-script&callback=related_results_labels"' type='text/javascript'/> </b:if></b:loop> </font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div></b:if> Nhớ là thay dấu " bằng &_quot; (bỏ _ ra nha) http://blog.livefuz.com/
Xem thêm…

[Bloger-TT] Tạo bài viết liên quan cho blogspot

Tạo

Script tạo danh sách các bài viết liên quan cho Blogger ban đầu được Hoctro phát triển, sau đó được nhân rộng ra với khá nhiều chỉnh sửa. Các bản "bài viết liên quan" hiện nay đều cho phép cấu hình số bài viết hiển thị và số bài viết lấy theo mỗi label. Tuy vậy, trong trường hợp cần liệt kê số lượng lớn các bài viết liên quan thì chưa script nào có khả năng phân trang. Trong bài viết này, tôi sẽ hướng dẫn các bạn làm phân trang cho chúng.


Script này thích hợp với các blog cần liệt kê số lượng lớn các bài viết liên quan (VD như các tập trong 1 bộ truyện tranh). Nếu blog bạn không có nhu cầu này, hãy dùng các bản cũ mà bạn thấy phù hợp.

Xem thêm…

[Blogspot-TT] Thủ thuật bài viết ngẫu nhiên (Random Posts)

Đây là một thủ thuật hòan tòan tương tự với thủ thuật tạo các bài viết ngẫu nhiên cho blog, chỉ khác là mở rộng riêng cho từng nhãn. Nếu blog bạn có một đề tài, chuyên mục nào đó nổi bật, bạn có thể tạo 1 widget random các bài viết từ nhãn (chuyên mục đó).
Để thực hiện, bạn chỉ cần tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:
Trước tiên bạn vào Dashboard -> Layout -> Page Elements và Add a Gadget -> HTML/Javascript
Xem thêm…

[Bloger-TT] Đặt code trong khung bài viết trong blogspot

Thông thường, khi giới thiệu code , chúng ta hay đặt chúng ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn . Vậy phải làm sao để phần giới thiệu ở nền blog chính thức , còn đoạn code ở trong một khung có nền tùy chỉnh ? Chúng ta sẽ biết sau khi đọc xong bài viết sau đây !
Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ 



Xem thêm…

Chèn thêm Add a Page Element

Để chèn một widget cho các thành phần không có Add a Page Element bắt buộc bạn phải chèn trên sidebar hay footer sau đó kéo và thả nó vào các thành phần kia. Tùy thuộc vào Template mà bạn chọn, Add a Page Element chỉ hiển thị trên sidebar hay footer. Làm thế nào để hiển thị trên các thành phần còn lại của layout?


Trước hết bạn cần phải phân biệt các thành phần chính trên layout của bạn. Gồm: header-wrapper, content-wrapper, main-wrapper, sidebar-wrapper, footer-wrapper.

Bạn cần đăng nhập vào Blogger.com, click Edit HTML (Template | Edit HTML) kéo thanh trượt xuống.
Xem thêm…

Ẩn thanh navbar trong Blogger

Thanh Navbar của blogger đôi khi làm ta cảm thấy kho chịu.Nếu gỡ bỏ hẳn thì có thể vi phạm vào chính sách  sử dụng dịch vụ của Google Blogger.
Do đó có 1 cách ta có thể ẩn nó đi.
chèn vào trước thẻ

</head>

đoạn code sau :
#navbar-iframe { height: 0px; visibility: hidden; display: none;}
Xem thêm…

Chèn Nhạc vào Blog

Để blog của bạn thêm chút lãng mạn, phong phú, bạn có thể đưa cac đoạn phim (video), bài hát (music) vào blog. Bạn có thể lấy các đoạn phim từ các nguồn sau hoặc bạn tự thực hiện rồi post lên:

1. http://youtube.com
Bạn copy đoạn mã trong hàng Embed bỏ vào blog

Dua video phim cua youtube vao blog
Xem thêm…

Hướng dẫn Thống kê tại www.histats.com


Khi bạn lướt web, bạn tự hỏi tại sao mà trên những trang web, forum hay blog lại có những hình thống kê như hình bên. Nếu bạn muốn làm cho blog, website hay forum mình được như vậy thì với http://www.histats.com điều đó trở nên vô cùng đơn giản.


Đầu tiên, chúng ta hãy vào trang chủ của histats tại http://www.histats.com để đăng ký cho mình một Account.

Bạn hãy click vào link sau để bắt đầu tiến hành đăng ký http://www.histats.com/viewstats/?cnt=p_reg .
Công việc của bạn bây giờ là làm theo hướng dẫn sau đây:
Xem thêm…