Bách Khoa Tri Thức: Thủ Thuật

Thứ Hai, 23 tháng 9, 2013 | 09:42

Muốn tạo mục recent comment cho blog thật đơn giản. chỉ cần thêm một mục java/html với đoạn mã như sau vào là được. lưu ý các bạn thay địa chỉ blog của mình cho phù hợp. code được tổng hợp từ nhiều nguồn trên internet.

Mẫu 1
Code mẫu 1

<style type="text/css">ul.latest_recent_comments{list-style:none;margin:0;padding:0} .latest_recent_comments li{position: relative;background:none !important;margin:7px 0 3px !important;padding:0 2px 5px 0 !important;display:block;clear:both;overflow:hidden;list-style:none} .latest_recent_comments li a{float:right;width:275px;font:12px Arial;color:#000!important;margin-top:9px;padding:11px 7px 5px;border-right:3px solid #fff} .latest_recent_comments li a:hover{color:#004D99!important} .latest_recent_comments li .avatarImage{float:left;margin:0 6px 0 0;position:relative;overflow:hidden} .avatarRound{width:34px;height:34px} .latest_recent_comments li img{padding:0;position:relative;overflow:hidden;display:block} .latest_recent_comments li span{position: absolute;left:42px;top:-3px;padding:3px 3px 1px;color:blue;display:block;font:12px Arial} .latest_recent_comments span{display:none} </style> <script type='text/javascript'>function latest_recent_comments(e){var t;t='<ul class="latest_recent_comments">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+=" <li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiirykJfbZjZLsZikkCekkXMn5U2kmwaG50sP03tDzFRpeO5SSG9Rjx1k9CZ4yuNtUGS8ya1j8_OMBKQLRG3zlvLWlMGcNVqJCoEPxRos7nUuANNiRjmV8V6LPgjMFeBXl25rDl2NrUJmQt/"+avatarSize+"/md_blogger_logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw7syIGKj63yDdvbT4VahxpAQ9YxHbqIxDt5rWNctT0hATpZywwAmLdokUk2fKEKx21-dvfQVUq04-EtRQh9s3mFpHIxl-guuzlzTYepzroyKGoPxqJmyqjRFt3bbJTcsi2Jz-H0-W9uKX/"+avatarSize+"/md_openid_logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||5,avatarSize=avatarSize||34,characters=characters||43,defaultAvatar=defaultAvatar||"https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar </script> <script type="text/javascript" src="http://doanthanhtrung.blogspot.com/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>

Mẫu 2
Code mẫu 2

Mẫu 3
Code mẫu 3

<style type="text/css">    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}     .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}     .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}     .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}     .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}     .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style><script type="text/javascript">//<![CDATA[     // Recent Comments Settings     var 	numComments 	= 5, 	showAvatar 	= true, 	avatarSize 	= 60, 	roundAvatar	= true, 	characters 	= 40, 	showMorelink	= true, 	moreLinktext	= "Đọc Thêm »", 	defaultAvatar 	= "http://www.gravatar.com/avatar/?d=mm", 	hideCredits	= true; //]]></script><script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script><script type="text/javascript" src="http://doanthanhtrung.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Mẫu 4

Code mẫu 4:

<style type="text/css">    </style><script type="text/JavaScript"></script>

Đọc tiếp...

Xem bài viết trên phiên bản di động

Công Nghệ,Thủ Thuật

Thứ Bảy, 21 tháng 9, 2013 | 17:09

Thông thường đối với 1 video nào đó được đăng tải lên Youtube thì Youtube sẽ tự động tạo ra 4 ảnh đại diện (thumbnail) có kích thước và chất lượng ảnh từ thấp đến cao, tùy thuộc vào mục đích sử dụng khác nhau của người dùng.

Để hiển thị ảnh đại diện (thumbnail) của một Youtube Video nào đó thì các bạn chỉ cần lấy được Youtube Video ID và chèn theo mẫu dưới đây:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg

Trong đó,

File ảnh 0.jpg có kích thước là 480 x 360, là ảnh thumbnail mặc định với kích thước lớn.
3 File ảnh còn lại (1.jpg, 2.jpg và 3.jpg) đều có kích thước chung là 120 x 90, là 3 phân cảnh trong video được Youtube cắt ngẫu nhiên để làm thumbnail. Nếu các bạn để ý thì sẽ thấy file 2.jpg sẽ giống file 0.jpgnhưng có kích thước nhỏ hơn.

Giả sử tôi có một đường link Youtube là http://www.youtube.com/watch?v=VhPxL7kF9dU

SaveFrom.net

thì khi đó Youtube Video ID sẽ là VhPxL7kF9dU. Nếu tôi chèn Video ID đó vào các đường dẫn ở trên thì tôi sẽ có được những ảnh thumbnail sau đây:

1) http://img.youtube.com/vi/VhPxL7kF9dU/0.jpg (480 x 360)

Youtube Thumbnail Video 0

2) http://img.youtube.com/vi/VhPxL7kF9dU/1.jpg (120 x 90)

Youtube Thumbnail Video 1

3) http://img.youtube.com/vi/VhPxL7kF9dU/2.jpg (120 x 90)

Youtube Thumbnail Video 2

4) http://img.youtube.com/vi/VhPxL7kF9dU/3.jpg (120 x 90)

Youtube Thumbnail Video 3

Mở rộng,

Ngoài ra, nếu các bạn lấy thumbnail mặc định có kích thước khác nhau thì có thể dùng các đường link sau đây

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg
http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

Trong đó,

File ảnh default.jpg là thumbnail mặc định với kích thước nhỏ (kích thước là 120 x 90).
File ảnh mqdefault.jpg là thumbnail mặc định có kích thước là 320 x 180 với chất lượng ảnh trung bình.
File ảnh hqdefault.jpg là thumbnail mặc định có kích thước là 480 x 360 với chất lượng ảnh cao.
File ảnh maxresdefault.jpg là thumbnail mặc định có kích thước là 1280 x 720 với độ phân giải lớn nhất.

Hoặc các bạn có thể tham khảo bài viết này để lấy ảnh đại điện khi phân tích thông tin của Youtube Video.

Hi vọng bài viết giúp ích cho các bạn. Thân ái!

Đọc tiếp...

Xem bài viết trên phiên bản di động

Công Nghệ,Thủ Thuật

16:57

Đọc tiếp...

Xem bài viết trên phiên bản di động

Công Nghệ,Thủ Thuật

14:44

Để bài viết dễ dàng xuất hiện trong kết quả tìm kiếm chúng ta cần phải bật mô tả tìm kiếm, và tối ưu hóa thẻ meta trong bài viết, làm theo 2 bước sau ta sẽ tối ưu hóa được thẻ meta và bật được mô tả tìm kiếm trong từng bài viết trên blog.

Bật nó lên như sau:

Bật mô tả tìm kiếm, tối ưu hóa thẻ meta

Và đây là kết quả khi vào cài đặt cho từng bài viết

Kết quả trên mỗi bài viết

..............................................................................................
Bài viết được viết ngắn ngọn dựa trên kết quả trong quá trình làm blog, tìm hiểu trên internet. Góp nhặt những kinh nghiệm cho cá nhân.

Đọc tiếp...

Xem bài viết trên phiên bản di động

Blog Kinh Nghiệm,Công Nghệ,Thủ Thuật

Thứ Sáu, 20 tháng 9, 2013 | 20:43

Đây là 2 mẫu mình download của người khác, không có nhiều kiến thức, nên cũng chỉ góp nhặt của người khác bổ sung chỉnh sửa thêm thôi. ko phần nào của mình làm ra hết :D chỉ là con ong đi hút mật ! các bạn có thể xem mẫu qua 2 trang:
http://doanthanhtrung.blogspot.com và
http://daophuthanphong.blogspot.com

Mẫu Helloximo với menudropdown
Mẫu đao phủ thần phong

Đọc tiếp...

Xem bài viết trên phiên bản di động

Công Nghệ,Thủ Thuật