Livefyre comment cho blog

     Sau disqus, hôm nay mình sẽ giới thiệu cho các bạn livefyre, một đối thủ xứng tầm với disqus và nó thân thiện với SEO hơn disqus. Các bạn vào trang chủ tại địa chỉ: http://web.livefyre.com, đăng ký một tài khoản.

Top bình luận cho blogspot
Disqus comment cho blog

     Xong, các bạn vào http://web.livefyre.com/comments/ để bắt đầu nhé. Các bạn nhấn "Get start", và điền địa chỉ blog vào.

     Sau khi nhận được code, các bạn tìm đến đoạn: <b:include data='post' name='post'/> và dán nó vào bên dưới như hình:

     Vậy là xong, chúc các bạn thành công.

Read More

Disqus comment cho blogspot

     Trong bài này mình sẽ chỉ các bạn cách thêm comment disqus vào blog, disqus khá phổ biến, hầu hết các web đều sử dụng nó. Việc tích hợp nó khá đơn giản.

Top bình luận cho blogspot

     Trước tiên, các bạn vào trang chủ: https://disqus.com, các bạn có thể đăng nhập bằng tài khoản Facebook hay Google+. Các bạn kéo xuống một chút và nhấn "Add Disqus to Your Site", điền đầy đủ thông tin vào và "Finish registration"

     Tiếp theo các bạn chọn blogger, chọn "Add nadblog94.blogspot.com to my Blogger site"

    Cuối cùng, các bạn chép code, bỏ vào một cái widget HTML bất kỳ nào đấy và tận hưởng thôi.

Chúc các bạn thành công và có blog đẹp.

Read More

IntenseDebate comments cho blogger

     Hôm nay mình sẽ chỉ các bạn thêm cái IntenseDebate comments vào blog thay thế cho cái khung comment cũ rích của blog.

Top bình luận cho blogspot

     Trước tiên các bạn phải sao lưu lại blog đã, các bạn vào "Mẫu", "Sao lưu và khôi phục" ở bên trên góc bên trái hướng 1h, các bạn tải xuống file xml của blog.

     Các bạn vào trang chủ của IntenseDebate tại địa chỉ: https://intensedebate.com/home, tạo tài khoản mới hoặc các bạn có thể đăng nhập với tài khoản Wordpress.com. Các bạn nhìn lên thanh Dashboard , chọn "Sites", chọn "Add blog/site", điền địa chỉ blog vào.

     Như vậy là các bạn có thể lấy code được rồi nhưng mình sẽ chỉ các bạn chỉnh sửa một chút phần "Settings" đã. Các bạn vào "Plugins", tại đây có một số plugin, các bạn có thể thêm vào nếu thích, "Activate" là chưa được thêm còn "Deactivate" là đã được thêm.

     Các bạn vào tiếp phần "Layout", tại đây các bạn có thể chọn kích thước ảnh Thumbnail và style của redly button,.... Các bạn chọn xong thì "Save" lại. Các bạn chọn tiếp "Comments", ở đây có nhiều tùy chọn, mình xin nói qua như sau:

• Login Services: Cái này là đăng nhập bằng mạng xã hội, các bạn có thể chọn Facebook hay Twitte
• Comment Settings: Cái này khá nhiều nên mình chỉ khuyên các bạn nên tích vào cái 1,2,3,4,5,6,8,9,10. Các bạn cũng có thể thử để xem rõ nó là gì và lựa chọn cho phù hợp.

     Các bạn cũng có thể code CSS thêm cho nó ở phần "Custom CSS".

     Cuối cùng, khi đã xong xuôi, các bạn chọn "Reinstall", ở đây các bạn up cái file *.xml vừa sao lưu ở trên lên, nó sẽ tự động sửa cho bạn và khi xong việc thì các bạn copy code mới dán vào "Mẫu" của mình.

     Vậy là xong, chúc các bạn có blog đẹp.

Read More

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 9 ) - footter

     Footer là phần cuối cùng của một trang web, và một điều đáng buồn là có rất ít độc giả ghé thăm trang web mà kéo tới cuối trang tức tới thanh footer, và hiển nhiên các đường link ở vị trí này cũng vậy nhưng mặc cho điều đáng buồn đó, footer vẫn có một vị trí quan trọng không thể thiếu của một trang web. Vậy bạn nên đặt cái gì vào footer?

1.Công cụ Navigation

     Nghe có vẻ điên rồ. Theo truyền thống, mọi người thường đặt navigation ở đầu. Việc đặt navigation ở footer ngược lại với thường lệ. Tuy nhiên, nếu làm đúng cách, navigation ở footer sẽ giúp dễ dàng sử dụng theo một cách hoàn toàn mới, bạn vẫn đăt navigation ở header nhưng cũng rất tuyệt nếu có một nav nữa ở footer, điều quan trọng là đừng để nội dung của chúng giống nhau, hãy sáng tạo! Ví dụ trên sử dụng một footer lớn. Bạn có thể đặt phía trên thanh cuốn. Thậm chí bạn có chuyển thêm phần menu giúp xem đầy đủ nội dung của trang web.

2.Thêm nút “Back to Top”

     Một tính năng mà tôi thật sự thích đặt ở footer là nút giúp bạn trở lại đầu trang. Với những trang có nội dung dài, bạn khá mất thời gian cho việc di duyển hoặc dùng thanh cuốn. Bạn có thể khắc phục điều này bằng mộtJavaScript button để thiết lập vị trí di chuyển. Các bạn bỏ code vào bất cứ HTML/JavaScript nào đấy:


<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

3. Tạo sự tương phản

     Nếu bạn muốn một footer mạnh mẽ, không nên phức tạp hóa . Dùng một đường kẻ đơn giản hoặc đồ họa để phân biệt phần nội dung chính và phần footer nhưng cho phần footer một màu tối hơn. Ví dụ thực tế trên sử dụng cả hai kỹ thuật này. Nền footer tối hơn tạo sự tương phản độc đáo và phần nội dung chính có nền trắng làm nổi bật các chi tiết đồ họa. Hơn nữa bạn có thể thêm một số chức năng cho phần Footer.

5. Tổng hợp nội dung

     Tổng hợp nội dung cơ bản ở phần footer. Có rất nhiều nội dung có liên quan và được lưu trữ trên blog của bạn, và người xem có thể xem mà không bị rối khi xem ở trang chính. Một footer lớn sẽ thuận tiện cho việc tổng hợp nội dung.

     Phần lưu ý ở các ví dụ trên cũng là nơi tuyệt vời để đặt danh sách các nguồn tham khảo miễn phí. Việc cung cấp danh sách các nguồn tham khảo miễn phí sẽ làm tăng giá trị trang web của bạn đối với người truy cập.

6. Đính kèm thông tin

     Bạn không nghĩ ra điều gì cho Footer. Hãy viết một thông tin ngắn, dí dỏm trên trang web có thể làm nó trở nên vui nhộn và cá tính hơn hay địa chỉ liên hệ, số điện thoại liên hệ, các trang mạng xã hội mà người dùng có thể tìm thấy sự giúp đỡ từ bạn. Rõ ràng thông tin liên lạc cũng rất cần thiết.

7. Không gì là không thể, hãy sáng tạo!

     Chúc các bạn có một blog đẹp!!!

Read More

Facebook comment cho blogspot

     Mạng xã hội facebook chắc hẳn không còn xa lạ gì với các bạn nữa, với sự phổ biến của nó thì các bạn cũng đoán được phần nào lợi ích khi đưa comment facebook vào blog rồi. Vì vậy trong bài viết này mình sẽ chỉ các bạn cách thêm khung comment facebook vào blog.

Top bình luận cho blogspot

     Trước tiên, các bạn truy cập vào: https://developers.facebook.com. Các bạn chọn "Apps", "Create a New App"

     Các bạn đặt tên cho ứng dụng.

      Các bạn chọn thẻ "Settings". Click "Add Platform" và chọn "Website"

     Cuối cùng các bạn trở về "Dashboard", copy lấy cái ID.

     Vào "Chỉnh sửa HTML", thêm đoạn sau vào thẻ <html>: 'xmlns:fb='https://www.facebook.com/2008/fbml'
và đoạn này vào trước thẻ </head>: <meta content='ID' property='fb:app_id'/>

     Thêm đoạn mã bên dưới vào trước thẻ </body>:

<div id='fb-root'/>
   <script>
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
        fjs.parentNode.insertBefore(js, fjs);
      }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
   </script>

     Thêm đoạn code bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="15" data-width="800"></div>';
//]]>
</script>

Lưu ý:

• data-num-posts="15": Số nhận xét được hiển thị.
• data-width="800": Độ rộng của khung bình luận.

     Chèn khung nhận xét facebook vào vị trí thích hợp trong blogspot.Thông thường ta sẽ chèn ngay phía bên dưới bài viết. Các bạn tìm đoạn code sau:

<b:include data='post' name='post'/>

Thêm đoạn code sau vào bên dưới đoạn vừa tìm được:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

Lưu ý: Để xem và quản lý các bình luận, ta vào https://developers.facebook.com/tools/comments, chọn app vừa tạo.

Read More

Top khung bình luận cho blogger

     Chắc hẳn các bạn rất khó chịu với khung comment của blogspot, thực sự mà nói nó rất xấu, các bạn cũng đã nghĩ tới các phương án thay thế nhưng cũng không tìm ra.Vì vậy hôm nay, mình xin giới thiệu với các bạn những khung comment đẹp thay thế cho khung comment xấu xí, ít chức năng của blogspot.

1. Facebook comment box

     Mọi người đều biết Facebook là một trang mạng xã hội thực sự rất rất phổ biến, với hơn một tỷ người sử dụng, một trang web được coi là rất có ảnh hưởng phương tiện truyền thông xã hội. Do đó, nó sẽ là một động thái thông minh nếu bạn chuyển sang dùng Facebook Comment Box.
     Các plugin có sẵn từ Facebook cho phép người dùng bình luận về trang web hoặc blog sử dụng hồ sơ cá nhân Facebook của họ mà sau đó bạn bè của họ sẽ thấy đoạn comment này trong Facebook. Điều này giúp tăng số lượng người biết tới blog của bạn và cũng làm tăng giá trị xã hội của trang web.
     Điểm yếu của hệ thống này là bạn không có khả năng can thiệp vào vào giao diện do facebook quy định. Bạn không thể nào kiểm soát được các bình luận, không thể chặn, hoặc block một người nào đó bình luận trên blog của bạn. Ngoài ra Facebook sử dụng Iframe để nhúng khung bình luận vào trong trang weblob nên khả năng SEO của nó là cực kỳ tệ hại.Và nếu người không muốn chia sẻ những điều này lên facebook thì sao? Có lẽ họ sẽ không để lại những comment, điều này cũng gây nên sự bất tiện cho người dùng.
     Các bạn có thể xem bài hướng dẫn ở đây.

2. Google Plus

     Google Plus là các trang web mạng xã hội lớn thứ hai sau Facebook và đã có hơn 500 triệu người sử dụng trên toàn thế giới (số liệu thống kê là tính đến cuối năm 2012). Đây cũng là ứng dụng sử dụng nhiều nhất thứ tư trong điện thoại thông minh. Do đó, điều quan trọng là các quản trị web và các blogger phải nghĩ về Google Plus một cách nghiêm túc.
     Cũng giống như Facebook, Google giúp ý kiến của người dùng được chia sẻ đi mọi nơi. Các nội dung comment được đăng tải trực tiếp lên tường Google Plus của người sử dụng và cũng có sẵn trong trang cộng đồng Google+. Nhưng sử dụng Google có những lợi thế nhất định về SEO mà làm cho blog của bạn lên top ở các trang tìm kiếm đặc biệt là của Google.

3. Disqus

     Disqus là dịch vụ lưu trữ, quản lý bình luận phổ biến nhất trên các trang web và các cộng đồng trực tuyến. Disqus hoạt động tốt với nhiều trang web như Blogger, WordPress , tumblr, Dupal,... và làm cho nó trở thành một trong những hệ thống quản lý bình luận được yêu thích nhất. Ngoài hơn 750.000 blog và các trang web, các ấn phẩm hàng đầu như CNN, Daily Telegraph và IGN cũng đang sử dụng nó.

• Nó có thiết kế responsive, sạch, hoạt động rất tốt trên máy tính để bàn, máy tính bảng và điện thoại di động.
• Tính năng bao gồm: threaded replies, theo dõi qua RSS, cập nhật qua email và đăng nhập thông qua tài khoản Facebook, Google+, Twitter. Nó cũng hỗ trợ tuyệt vời cho hình ảnh và video.
• Có giao diện trực quan dễ tương tác, hỗ trợ quản lý bình luận thời gian thực. Ban có thể bật tắt chế độ thông báo qua email và trả lời bình luận thông qua email mà không cần phải đăng nhập vào disqus.
• Độc giả có thể đăng nhập nhấn nút like chia sẻ bình luận qua các dịch vụ mạng xã hội như Facebook, Twitter. Thực ra bản thân Disqus đã tạo ra một cộng đồng tương tự như mạng xã hội trong đó các thành viên có thể theo dõi các hoạt động của nhau trên các trang web khác nhau.
• Disqus cung cấp các công cụ quản lý để chống spam, chống các bình luận thô tục bằng bộ lọc từ khóa. Ngoài ra còn cho phép người dùng tạo danh sách độc giả  hạn chế… ban hoặc block ip của độc giả

Tuy nhiên, vẫn có rất nhiều nhược điểm trong việc sử dụng. Một số trong số đó là sự bất lực của nơi hotlinks trên tên (vì thế mà không thể tìm ra cách liên hệ với họ), và không có khả năng liên kết trên các mạng xã hội.

4. Livefyre

     Đối thủ chính của Disqus là LiveFyre. Nó được sử dụng bởi nhiều trang web hàng đầu như Mashable, Engadget, The Sun, The New York Times, AOL, và Bloguin. Theo các chuyên gia nó là một trong những nền tảng bình luận tốt nhất và thân thiện với SEO nhất. LiveFyre cung cấp bình luận ​​thời gian thực, hỗ trợ điện thoại di động, đăng nhập bằng tài khoản mạng xã hội, hỗ trợ đa phương tiện, thông báo khi có bình luận mới và tùy chọn đăng ký tuyệt vời.

• SocialSync: Đăng comment của bạn lên Facebook hay Twitter tức thời khi bạn thao tác trên khung comment.
• SocialSignin: Bạn có thể sử dụng các tài khoản MXH như Facebook,Twitter ,Linkedin, hay là tài khoản OpenID(link blog bạn đó ;))
• Friend Tagging: Tag tên bạn của bạn vào comment, bắt đầu bằng dấu"@".
• Comment Sharing: Chia sẻ comment của một ai đó lên MXH(rất giông Disqus).
• Comment Liking: Bạn like một comment nào đó(như facebook ).
• Richtext Editor: Livefyre hỗ trợ bạn công cụ định dạng văn bản khi comment.
• Linkback: Khuyến khích người khác comment trên blog bằng cách hiển thị lnk bài đăng mới nhất trên blog của họ.
• Media Embeding: Nhúng các link/file hình ảnh và Video vào comment.

5. IntenseDebate

     IntenseDebate có thể được coi là sự thay thế tốt nhất cho disqus. Nền tảng này được ​​thiết kế bởi Automattic, Inc cung cấp một số tính năng nổi bật nhất mà làm cho nó là một trong những bên thứ ba tốt nhất. Intense Debate sở hữu các tính năng như: luồng ý kiến, thông báo qua email, trả lời qua email, hỗ trợ mạng xã hội và nhiều hơn nữa. Điều này giúp người quản trị web và các blogger hoặc ngay cả những khách để đánh giá những bình luận trên cơ sở đó loại bỏ một số bình luận vô ích. Các tính năng khác bao gồm việc gửi email để bình luận, bất cứ khi nào, có là một phản ứng bình luận. Nền tảng này cũng cho phép người sử dụng báo cáo bất kỳ bình luận không phù hợp bằng cách nêu rõ lý do tại sao những nhận xét được đánh giá không phù hợp giúp loại bỏ những bình luận khiếm nhã, spam.

6. Echo

     Echo không phải là một nền tảng phổ biến như Disqus hoặc Livefyre. Tuy nhiên, nó là người đầu tiên và nền tảng web thời gian thực lớn nhất. Echo đã có hơn 20 nền tảng và đã phục vụ trên 15 tỷ dòng thời gian thực chỉ trong năm nay. Một số khách hàng đáng chú ý của Echo bao gồm SONY, Washington Post, ESPN, WebMD, NASDAQ, Travel Channel,... Echo ngày nay không chỉ cung cấp hệ thống bình luận mà còn cung cấp nền tảng web, diễn đàn, hệ thống đánh giá (polls) và nhiều thứ khác nữa.
     Ngoài những tính năng tiêu chuẩn của hệ thống bình luận, Echo còn cung cấp công cụ tracking analytics tuyệt vời. Tuy nhiên Echo dường như có một hướng đi khác khi mặc dù vẫn để cho người dùng sử dụng nhưng không phát triển các dịch vụ miễn phí của mình nữa. Trang web của hãng cũng không đưa ra bất kỳ một mức nào cả, người dùng cần phải liên lạc để biết thêm chi tiết.
     Các bạn có thể tìm hiểu thêm tại trang chủ: http://www.aboutecho.com/ và xem thử cái demo của nó tại: http://www.aboutecho.com/demos/comments

7. BurnZone

     Cũng như các trang web trên, BurnZone cũng đáng để các ban chú ý tới và hầu như nó cũng chẳng thua kém ai. Các bạn có thể tìm hiểu thêm tại: http://www.theburn-zone.com/

8. Vicomi

     Vicomi là một trong những hệ thống bình luận thay thế ít được biết đến, cho phép người dùng đăng ký bằng cách sử dụng email hoặc Facebook. Thật đáng tiếc, các mạng xã hội khác không được hỗ trợ. Vicomi có thiết kế thân thiện với nền tảng di động, ​phân​ luồng ý kiến, các công cụ kiểm duyệt tuyệt vời và hỗ trợ hồ sơ trực tuyến.Nó có thể được dễ dàng nhận ra bởi tính năng biểu tượng cảm xúc độc đáo, cho phép bạn đánh giá bình luận của những người dùng khác như: intellectual, worrisome, funny, a question hay maddening. Các bạn có thể tìm hiểu thêm tại: http://www.vicomi.com/ và xem demo tại: http://www.vicomi.com/demo

Read More

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 8 ) - random post

     Trong bài hôm nay, mình sẽ chỉ cho các bạn một số widget khác cho blog của mình, cụ thể như: random post, bài viết mới nhất. Cũng chẳng dài dòng làm gì, mình sẽ đi luôn vào code nhé!!!

[TUT+] Hướng dan tao, chinh sua template blogspot ( phan 9 ) - footer
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 7 ) - feedburner

     Trước hết là cái random post, cái này giúp người đọc có thể xem được những bài cũ mà họ chưa đọc. Các bạn tạo một cái HTML/JavaScript, chèn code này vào:

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

<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/AVvXsEh0RlzX2BivZIk3ZOwZxTiyq3FLM-Mj_1amDAbBok1B3-P_RXcOtvyu9h15PKJ4jI1TpVDZm0nzOK0tIfC_XgEYlBWL6-Cppb3EuWJRfeWdxsfjNy0GsKSzkXx8UwqwDtpXYxo24i0aOMMn/"}}};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>
Trong đó:

• 5 là 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.
• Link màu đỏ là link ảnh thay thế cho bài viết không có ảnh thumbnail.

Việc còn lại là ở các bạn thôi, các bạn có thể tùy chỉnh sao cho vừa ý thì thôi.

     Còn đây là code của thằng "Bài viết mới nhất", đọc tới bài này rồi thì các bạn cũng đã quen với blogspot rồi nên mình không hướng dẫn kỹ nữa:

<style type='text/css'>
img.recent_thumb {padding:1px;width:60px;height:60px;border:0;
float:left;margin-right:10px;border:1px solid #999;}
.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript'>
function showrecentpostswiththumbs(json){document.write('<ul class="recent_posts_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More -></a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script style='text/javascript'>
var numposts = 5;     // số bài
var showpostthumbnails = true;     // hiện ảnh thumbnail
var displaymore = false;     // không hiển thị read more
var displayseparator = true;
var showcommentnum = false;     // hiển thị số comment
var showpostdate = false;     // hiển thị ngày tháng
var showpostsummary = true;     // hiển thị trích dẫn
var numchars = 100;     //số ký tự trích dẫn
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

     Mình xin dừng phần widget ở đây, các bạn có thể tìm kiếm thêm nhiều widget hay code HTML hay ở trên mạng hay có thể tìm trong web của mình. Trong bài tiếp theo mình sẽ chỉnh sửa cái comment và cái footer, các bạn chú ý theo dõi nhé.

     Chúc các bạn thành công và có blog đẹp.

Read More

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 7 ) - feedburner

     Chắc hẳn khi vào bất kỳ một trang web nào các bạn cũng thấy một hộp đăng ký mail, cái này có tác dụng gì? Nhiều bạn cũng đã biết nhưng mình xin nói qua ở đây cho những ai chưa biết thế này: khi bạn điền địa chỉ mail vào đó và gửi đi tức là bạn đã đăng ký nhận mail từ blog đó, các bạn có thể nhận các bài viết từ blog qua mail và bạn có thể đảm bảo rằng người dùng chắc chắn đã nhận được bài vì vậy bạn luôn giữ chân được người đọc nhưng một nhược điểm rất lớn của nó là nó gửi toàn bộ bài đăng của bạn, thế thì họ còn vào web của bạn làm quái gì khi đã đăng ký nhận mail. Nhưng rất may là mình đã có cách, hehe, nhưng trước hết hãy biết cách tạo hộp đăng ký đã, phải không nào!!!

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 8 ) - random post
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 6 ) - search box

     FeedBurner, một tiện ích của Google, cái này đã làm tất cho bạn rồi, các bạn vào: Feedburner.google.com để đăng ký cho blog của mình nha. Sau khi đăng nhập bằng tài khoản google thì đây là giao diện trang chủ của nó:

Các bạn điền địa chỉ blog vào và nhấn "Next".

Các bạn chọn RSS rồi cứ "Next".

     Tới đây là đã xong một nửa rồi, các bạn copy code bỏ vào một cái HTML/JavaScript. Trong đó, code thứ nhất là hộp thoại đăng ký nhưng hơi thô, cần thêm code CSS nữa mới đẹp được, còn đoạn code thứ hai là một button hay đường link, khi bạn nhấn vào thì một cửa sổ mới mở ra và người dùng có thể đăng ký, còn cái "Sen me an email whenever people unsubscribe (will be sent to your “from” address)." là bạn có muốn biết những người đã hủy đăng ký blog của bạn không, nếu muốn thì bạn tích vào.

     Tiếp theo, các bạn chọn "Communication Preferences", ở phần này các bạn sẽ chỉnh sửa nội dung mail xác nhận được gửi tới cho người dùng khi đăng ký. Cụ thể:

-Email “From” Address: Địa chỉ người gửi thư, mặc định sẽ là hộp thư gmail của bạn. Tuy nhiên bạn có thể chỉnh sửa địa chỉ này lại thành bất cứ gì bạn muốn.

-Confirmation Email Subject: Tiêu đề của lá thư xác nhận, một tiêu đề ưa nhìn sẽ giúp lá thư xác nhận không bị thất lạc.

-Confirmation Email Body: Nội dung lá thư, bạn nên viết một đoạn ngắn với những lời cám ơn đến người đọc vì đã đăng ký nhận bài viết. Bên cạnh đó có một đoạn text “${confirmlink}” đoạn text này sẽ được thay thế bằng link xác nhận trong lá thư thật, do đó bạn tuyệt đối không được xóa nó đi. Hoàn tất ấn "Save" để lưu.

     Các bạn chọn tiếp "Email Branding", cái này giúp bạn chỉnh sửa một số thứ liên quan tới những mail bài viết của blog khi bạn đăng một bài nào đó.Cụ thể:

Ở phần tiêu đề Email Subject/Title, bạn có thể sử dụng hàm hỗ trợ của google để cho tiêu đề thêm hấp dẫn, cụ thể như:

${latestItemTitle} -> sẽ được thây thế cho tên của bài viết cuối cùng (bài mới nhất)

Đôi khi trong một là thứ sẽ có nhiều hơn 1 bài viết, do đó nếu muốn thay đổi nội dung theo số lượng bài viết bạn hãy check vào “Change Subject when an email has 2 or more items” và có thể dùng thêm các chuỗi đặc biệt sau cho tiêu đề lá thư:

${n} -> thay thế bằng tổng số bài viết có trong lá thư

${m} -> thay thế bằng số bài viết mới nhất trong lá thư trừ ra bài cũ nhất (tức là = ${n} – 1)

Một số tiêu đề mẫu để bạn tham khảo:

“Bài viết mới từ nadblog: ${latestItemTitle}”

“nadblog: “${latestItemTitle}” và ${m} bài nữa đang chờ bạn đọc”

“nadblog: có ${n} bài viết mới”

Hãy sáng tạo theo cách của bạn . Nếu bạn muốn hiển thị logo thì điền vào phần “Logo URL:” nhé, file ảnh nhỏ nhỏ thôi. Kích thước chừng 200×200 định dạng JPG là được rồi. Ngoài ra còn các tùy chỉnh khác như:

-Headline Font: Font cho tiêu đề

-Headline Size: Kích thức chữ tiêu đề

-Body Font: Font cho nội dung lá thư

-Body Size: Kích thước

-Body Color: Màu chữ

-Item Headline/Body Link Color: Màu cho liên kết.

Xem ở phần "preview", nếu thấy ưng ý thì ấn vào "Save" để lưu lại.

     Cuối cùng, các bạn chọn "Delivery Options", ở đây các bạn có thể chỉnh thời gian gửi mail, nhưng trước hết bạn hãy chỉnh múi giờ đã, còn cái thời gian gửi mail thì mình nghĩ nên chọn từ 9pm - 11pm vì thời gian này là thời gian nghỉ ngơi và lướt web của mọi người hoặc các bạn có thể tùy chỉnh theo ý mình.

     Vậy các bạn đã biết cách đăng ký feedburner cho blog của mình và mình hi vọng các bạn vẫn còn nhớ cái nhược điểm mà mình nói tới ở trên và cách khắc phục của mình là chúng ta sẽ tạo một blog phụ khác và đăng ký feedburner cho blog phụ này, code thì các bạn lại chèn vào blog chính của mình. Vậy là khi các bạn đăng bài trên blog chính thì bài viết này sẽ không được gửi cho người đọc, bạn cũng tạo một bài viết khác trên blog phụ với nội dung ngắn gọn mang tính giới thiệu kèm theo đường link dẫn tới bài ở blog chính, các bạn có thể đặt vài bài cùng chủ đề trong một bài viết ở blog phụ, điều này có hai cái lợi là người đọc có thể biết trước nội dung bài viết và quyết định có nhấn đường link không là ở họ tránh được sự khó chịu ở người đọc khi gửi những bài mà họ không muốn đọc, cái lợi nữa là tránh được việc bài viết được gửi toàn bộ qua mail và không ai thèm ghé tới blog của bạn nữa, và bạn cũng có thể gửi những cái khác nữa chứ, ví dụ: một khóa học hữu ích mà bạn biết, chia sẻ bộ sách mà bạn sưu tập được hay top bài đăng trên blog mà bạn nghĩ sẽ có ích cho người đọc...Các bạn thấy thế nào, không tệ chứ, mong được mọi người góp ý.

     Chúc các bạn có nhiều độc giả và nhớ đọc bài tiếp theo nhé!!!

Read More