Tạo mầu nền riêng cho bài đăng mới nhất

Chúng ta bắt gặp đâu đó những blog mà ở trang chủ bài đăng mới nhất có mầu nền khác biệt so với những bài đăng còn lại. Việc làm này phần nào gây sự chú ý cho độc giả đối với bài đăng đó.
first post

Hôm nay mình sẽ hướng dẫn các bạn tạo mầu nền riêng cho bài đăng mới nhất trong Blogger.

Bước 1: Tạo id first-post quy định mầu nền cho bài đăng mới nhất. Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#first-post{background:#DDD}

Bước 2: Tìm thẻ <b:include data='post' name='post'/> và thay thế nó bằng đoạn mã dưới đây.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <div id='first-post'>
   <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

Thủ thuật trên thêm thuộc tính background là mầu nền với giá trị #DDD, tùy vào từng template mà bạn thay đổi cho phù hợp.

Bạn có thể thêm những thuộc tính khác cho id first-post để bài đăng mới nhất có nhiều sự khác biệt hơn.

Bài viết liên quan có hình ảnh cho Blogger [Hàng Dọc and Hàng Ngang]



related postsKhi đặt bút viết bài này (chính xác hơn là đặt tay lên bàn phím) mình băn khoăn không biết có nên viết không. Đây là chủ đề không mới và có thể 1 số bạn không xem xét kỹ code mà chỉ lướt qua tiêu đề rồi cho rằng mình lấy code ở 1 nơi khác rồi xào lại. Ở bài Bài viết liên quan cho Blogger - Related Posts mình có nói thủ thuật được phát triển bởi một blogger người Ấn Độ. Thực ra code ban đầu mình xem ở 1 template tại Btemplates và nó có nhược điểm là vẫn hiển thị tên bài đang xem ở danh sách bài viết liên quan. Khi tình cờ vào blog của Harish mình để ý thấy lỗi này đã được fix và mình cho rằng Harish đã sửa được lỗi đó. Tuy nhiên blog này có viết bài về phân trang và sử dụng code của Abu Farhan nhưng đề bản quyền bởi Harish thì mình tự hỏi điều tương tự có xảy ra với Related Posts?

Quay lại bài viết này. Khi chưa có widget Popular Posts thì ảnh ở feed có kích thước với ảnh trên blog nên mình không quan tâm đến Related Posts with thumbnails vì cho rằng nó làm giảm tốc độ của blog. Hiện nay ảnh ở đây có kích thước 72x72 pixels, vấn đề dung lượng không còn quan trọng và mình bắt đầu thêm hiển thị ảnh. Khi test với bài viết có hơn 2 nhãn mình mới phát hiện ra hình ảnh không còn đúng với bài viết, nguyên nhân do chưa khai báo biến này trong hàm removeRelatedDuplicates (đây là hàm loại bỏ nội dung trùng lặp, khi mà 1 bài viết xuất hiện ở 2 nhãn). Như vậy ở bài Bài viết liên quan cho Blogger - Related Posts lâu nay đã bị lỗi hiển thị ngày tháng đăng bài khi ở bài viết gắn với hơn 1 nhãn. Qua bài viết này mình cũng muốn thông báo và xin lỗi đến những bạn đã áp dụng thủ thuật đó, mình đã update lại code.

Những thủ thuật mình giới thiệu nếu chủ đề không mới thì có nghĩa mình đã thêm một vài tính năng nào đó, Related Posts with thumbnails cũng vậy. Thừa hưởng từ thủ thuật trước là loại bỏ bài viết đang xem ở danh sách bài viết liên quan thì ở bản này mình thêm hình ảnh, ngày tháng đăng bài và số lượng comments trong bài viết đó, đây là những thông tin mà mình cảm thấy cần thiết. Ngoài ra thì mình có thêm 2 tính năng nữa là hiển thị thông báo không có bài viết liên quan (điều này xảy ra khi trong 1 nhãn chỉ có 1 bài viết và bài viết đó cũng chỉ gắn với 1 nhãn) và lựa chọn có hiển thị số lượng comments hay không (dành cho blog chỉ đơn giản như 1 trang tin và không bật commnet hoặc là blog không sử dụng comment mặc định của Blogger).

Ở đây mình giới thiệu 2 kiểu là hiển thị theo hàng dọc và hiển thị theo hàng ngang.

1. Hiển thị Related Posts theo hàng dọc.



related posts thumbnails style 1

  • Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
    #related-posts{float:left}
    #related-posts ul{margin:0;padding:0;list-style-type:none}
    #related-posts ul li{padding:10px 0}
    #related-posts ul li:hover img{width:42px;height:42px;padding:0}
    #related-posts img{float:left;border:1px solid #BBB;margin-right:10px;width:36px;height:36px;background:#FFF;padding:3px}
    #related-posts h3{margin:0;font-size:16px}
  • Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'>trong template của bạn.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='clear:both'/>
    <div id='related-posts'>
    <script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
    <script type='text/javascript'>
    //<![CDATA[
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSx-FfpYQWePJDxUz0J-M7LIi6P_ME_Vbzs-0vCcod6fxNU9nBfxXJRr5ETLV-24rC7GyHpH_GKAg_tkT-xSK_V9BHAlqf1QhJAkFvgoljSOiCouD7pCp8z805PbWzLuS2AtKKkkjim3LZ/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><img alt="'+titles[c]+'" src="'+thumb[c]+'"/><div><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+timeR[c].substring(8,10)+'/'+timeR[c].substring(5,7)+'/'+timeR[c].substring(0,4)+comments[c]+'</span></div></li><div style="clear:both"></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]>
    </script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
    </div>
    <div style='clear:both'/>
    </b:if>

2. Hiển thị Related Posts theo hàng ngang.



related posts thumbnails style 2

  • Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
    #related-posts{float:left}
    #related-posts ul{margin:5px 0;width:524px;padding:0;list-style-type:none}
    #related-posts ul li{position:relative;float:left;border:0 none;margin-right:11px;width:76px}
    #related-posts ul li:hover{z-index:98}
    #related-posts ul li:hover img{border:3px solid #BBB}
    #related-posts ul li:hover div{position:absolute;top:40px;left:10px;margin-left:0;width:200px}
    #related-posts ul li img{border:3px solid #DDD;width:70px;height:70px;background:#FFF}
    #related-posts ul li div{position:absolute;z-index:99;margin-left:-999em}
    #related-posts ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}
  • Bước 2: Thêm đoạn mã dưới đây vào sau thẻ <div class='post-footer'>trong template của bạn.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='clear:both'/>
    <div id='related-posts'>
    <script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có Bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
    <script type='text/javascript'>
    //<![CDATA[
    var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSx-FfpYQWePJDxUz0J-M7LIi6P_ME_Vbzs-0vCcod6fxNU9nBfxXJRr5ETLV-24rC7GyHpH_GKAg_tkT-xSK_V9BHAlqf1QhJAkFvgoljSOiCouD7pCp8z805PbWzLuS2AtKKkkjim3LZ/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h3><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h3><span>'+time[c].substring(8,10)+'/'+time[c].substring(5,7)+'/'+time[c].substring(0,4)+comments[c]+'</span></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]>
    </script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
    </div>
    <div style='clear:both'/>
    </b:if>

maxresults là số bài viết liên quan được hiển thị, mình đặt là 6. Mặc định số lượng comments sẽ được hiển thị, nếu bạn không muốn hãy thay ký tự yes màu tím thành ký tự khác, no chẳng hạn. Số lượng bài viết ở mỗi nhãn được tải về từ feed lấy theo mặc định là 25 bài mới nhất, nếu nhiều hơn mình nghĩ sẽ làm chậm tốc độ blog.

Về CSS cũng như bao thủ thuật khác mình không chú trọng đến giao diện mà quan tâm đến việc hiển thị trên các trình duyệt nhiều hơn. Ngoài ra mặc dù thông tin hiển thị bằng Javascript nhưng mình vẫn thêm thẻ alt cho ảnh, tiêu đề đặt trong cặp thẻ H3và thuộc tính rel=nofollow cho thẻ liên kết. Mình nhận thấy Google vẫn hiển thị thông tin viết bởi Javascript trong kết quả tìm kiếm.

Bài viết mới có hình ảnh cho Blogger



recent postsTiện ích Recent Posts với hình ảnh thu nhỏ - đây là tiện ích mà mình không dùng vì muốn xem bài viết mới mình thường có thói quen quay về trang chủ. Tiện ích được viết ra chỉ cho đủ bộ tiện ích về Bài đăng bởi cũng không tìm được thêm tính năng nào được coi là mới. Có chăng là tính năng nhận biết bài viết nào đã tắt Nhận xét, hình ảnh hỗ trợ cho cả video trên Youtube và gần đây mình thấy ảnh ở Photobucket cũng được lưu trữ, số lượng bài viết được tải về từ feed lấy đủ cho số bài viết bạn muốn hiển thị để tránh dư thừa. Những tính năng này đều đã có trong các tiện ích Related Posts và Random Posts.


Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
Nếu đã áp dụng tiện ích Bài viết ngẫu nhiên tốc độ cao cho Blogger thì bạn bỏ qua bước này và thay #random-posts img{ thành #random-posts img,#recent-posts img{ cho đồng bộ khi muốn chỉnh sửa.

Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Recent Posts. Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Nhận xét';
var rcp_disable='Tắt Nhận xét';
function recent_posts(json){var dw='';dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSx-FfpYQWePJDxUz0J-M7LIi6P_ME_Vbzs-0vCcod6fxNU9nBfxXJRr5ETLV-24rC7GyHpH_GKAg_tkT-xSK_V9BHAlqf1QhJAkFvgoljSOiCouD7pCp8z805PbWzLuS2AtKKkkjim3LZ/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>

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.

Bài viết ngẫu nhiên tốc độ cao cho Blogger



random postsMộ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.
#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ỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.
<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){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;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/AVvXsEiSx-FfpYQWePJDxUz0J-M7LIi6P_ME_Vbzs-0vCcod6fxNU9nBfxXJRr5ETLV-24rC7GyHpH_GKAg_tkT-xSK_V9BHAlqf1QhJAkFvgoljSOiCouD7pCp8z805PbWzLuS2AtKKkkjim3LZ/"}}};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.

Chiến thuật bóng đá mini 5 người

Đối với bóng đá nói riêng hay tất cả các môn thể thao nào người chơi cần phải có thể lực, trước khi nói đến kỷ thuật, chiến thuật. Khi bạn có thể lực bạn mới có khả năng trình diễn lối chơi kỷ thuật.
Trong bóng đá mini, đòi hỏi người chơi phải có thể lực kỷ thuật và chiến thuật (phối hợp đồng đội).
Hôm nay tôi mở thêm chủ đề này để anh em nào yêu thích bóng đá có những ý tưởng hay đưa lên để mọi người cùng tham gia bàn luận, mong rằng tìm ra được những bài tập phù hợp cho bản thân và tập thể của mình.
Bài tập đầu tiên nhằm nậng cao thể lực và phối hợp nhóm 3 người:


Có 3 cầu thủ: 1, 2 và 3
Có 4 vị trí: I, II, III, IV. 4 đỉnh hình vuông cạnh 10m.
Ở hình 1: cầu thủ số 3 di chuyển từ vị trí III ----> vị trí IV, bóng từ chân cầu thủ số 1 chuyền tới cầu thủ số 3 đã ở vị trí IV, cầu thủ số 3 bật tường lại cho cầu thủ số 1, Lúc đó cầu thủ số 2 đã di chuyển từ vị trí II ----> vị trí III.




Cầu thủ số 1 chuyền bóng cho cầu thủ số 2 ở vị trí III. số 2 chuyền bóng cho số 1 ở vị trí II.
Cầu thủ số 1 di chuyển từ vị trí số I ---> vị trí số II. nhận bóng từ cầu thủ số 2, bật tường trở lại số 2.




Cầu thủ số 3 di chuyển từ vị trí IV ---> I.
Cầu thủ số 2 chuyền bóng cho cầu thủ số 3 ở vị trí I.





Lúc này hết 1 chu kỳ, các cầu thủ đã thay đổi vị trí. và chu kỳ lập lại.
Bài tập này tạo cho cầu thủ, quen phối hợp bật tường 2 người, và phối hợp tam giác 3 người.
3 người nhưng 4 vị trí, chuyền và di chuyển chỗ trống, tạo cho cầu thủ quen cách di chuyển trong phối hợp.
Nhìn bài tập thấy đơn giản, nhưng nếu tập đúng sức, cầu thủ có thể lực lắm cũng khó tập hơn 15'.

----------------------------------------
Áp dụng bài tập 1 :





Cầu thủ số 2 khi nhận đường chuyền số 3 từ cầu thủ số 1, có 3 phương án:
- Sút vào cầu môn.
- Chuyền cho cầu thủ số 4.
- Chuyền cho cầu thủ số 1.


------------------------


Bài tập số 2: Với 4 người và 5 vị trí:




Ghí chú: đường màu đen số màu đỏ là đường di chuyển. đường màu đỏ số màu đen là hướng chuyền bóng.

- 4 cầu thủ ở vị trí I, II, III, IV. bóng từ cầu thủ ở vị trí I.
- Cầu thủ ở vị trí III di chuyển đến vị trí V nhận bóng từ cầu thủ ở vị trí I (đường chuyền 1).
- Cầu thủ ở vị trí V chuyền bóng cho cầu thủ ở vị trí IV (đường chuyền 2).
- Cầu thủ ở vị trí II di chuyển đến vị trí III, nhận bóng từ cầu thủ ở vị trí IV (đường chuyền 3).
- Cầu thủ I di chuyển đến vị trí II, nhận bóng từ cầu thủ ở vị trí III (đường chuyền 4).
- Cầu thủ IV di chuyển đến vị trí I nhận bóng từ cầu thủ ở vị trí II ( đường chuyền 5).
- Cầu thủ V di chuyển đến vị trí IV. Hết 1 chu kỳ trở lại vị trí ban đầu và chu kỳ được lập lại.

---------------------
Nếu bị mất bóng, tùy tình huống:
Theo như sơ đồ bài tập 1:
- Nếu mất bóng từ cầu thủ số 1 chuyền cho cầu thủ số 2 (đường chuyền số 3): Lúc này chúng ta còn 3 cầu thủ 1, 3 và 4 bên phần sân nhà.
- Nếu mất bóng từ đường chuyền số 4, hoặc 5 chúng ta còn 1 cấu thủ số 3 ở sân nhà. cầu thủ số 1 ở vị trí giữa sân. Với sân mini, khi tấn công chúng ta cố gắng có 3 cầu thủ khi phòng thủ cũng vậy. vấn đề là phải di chuyển cho hợp lý.
Theo sơ đồ bài tập số 2 cũng vậy:
- Lúc tấn công luôn có 3 cầu thủ. Nếu mất bóng ngay từ đường chuyền 1, hoặc 2, 3 chúng ta vẫn còn 3 cầu thủ ở sân nhà. chỉ tới dường chuyền 4 hoặc 5 ta mới còn 1 cầu thủ phòng thủ và 1 cầu thủ giữa sân.
Vì vậy các đường chuyền 4, 5 phải rất cẩn thận, thường là các vị trí trí đó đã có khả năng sút thành bàn.
Sơ đồ 1 là chơi với đội hình 1- 2- 1.
Sơ đồ 2 với đội hình 2 -2.
Chiến thuật 1 -2 -1 dành cho các đội phong trào. chiến thật 2 -2 cao hơn một ít.
Mục đích 2 bài tập trên nhằm tạo cho các cầu thủ quen với mọi vị trí trên sân. Vì trong bóng đá mini mọi vị trí đều có thể hoán chuyển với nhau.
Rất cám ơn bạn đã có góp ý. Mong nhận được nhiều hơn nữa các ý kiến của các bạn.
Các bài tập trên do mình tổng hợp từ các bài tập cơ bản, có chọn lọc cho phù hợp với trình độ của đội bóng

----------------

Các Bạn xem hình này:



Khi cầu thủ số 1 có bóng, Đối phương chắn bóng trước mặt.
Vùng màu đỏ là vùng nguy hiểm của đối phương, vùng màu xanh lá là vùng cầu thủ số 1 không thể chuyền bóng.
Vùng màu vàng là vùng cầu thủ số 1 chuyền bóng không thuận lợi.
Vùng màu xanh nhạt là vùng cầu thủ số 1 chuyền bóng thuận lợi nhất.
Khi phòng thủ các cầu thủ (màu đỏ) sẽ tìm cách bít các đường chuyền của cầu thủ tấn công, như hình trên.
Thường khi tấn công, anh em mình ham bóng, cứ nghĩ áp sát khu vực màu đỏ càng nhanh càng có cơ hội ghi bàn.
Điều này chúng ta biết và... cầu thủ phòng ngự cũng biết, vì vậy họ đã bít đường chuyền của đồng đội.
Trong trường hợp này các cầu thủ số 2,3,4 phải di chuyển vào khu vực có màu xanh nhạt.
Lúc đó các cầu thủ phòng ngự phải di chuyển theo để tiếp tục bít đường chuyền của cầu thủ số 1.
Khi đó bên nào chủ động hơn, nhanh, chính xác hơn bên đó sẽ thắng.
Vậy các cầu thủ tần công sẽ di chuyển thế nào để đạt tối ưu?
Các bạn xem hình sau:



Cầu thủ số 2 di chuyển sang bên phải càu thủ số 1. Vào vùng thuận lợi để nhận bóng từ cầu thủ số 1.
Cầu thủ số 4 di chuyển sang bên trái cầu thủ số 1, vào vùng thuận lợi để nhận bóng từ cầu thủ số 1.
Cầu thủ số 3 di chuyển thay vào vị trí của cầu thủ số 2, vị trí áp sát và đe dọe cầu môn đối phương.
Trong khoảng thời gian thật ngắn nếu cầu thủ số 1 không chuyền bóng liền. đối phương sẽ di chuyển như hình sau:



Khi đó diện tích các vùng thuận lợi để cầu thủ số 1 chuyền bóng được ít và khác đi. buộc các cầu thủ 2.3.4 phải di chuyển qua vị trí khác.
Chúng ta thấy: muốn tấn công các cầu thủ tấn công phải di chuyển rất. nhiều. trong khi các cầu thủ phòng thủ chỉ cần di chuyển một đoan ngắn (độ dài quãng đường cầu thủ phòng thủ di chuyển ngắn hơn).
Cầu thủ có bóng càng giữ bóng lâu cáng mất dần diện tích thuận lợi để chuyền bóng. điều này buộc cầu thủ có bóng phải dùng kỹ thuật dẫn bóng qua người đối phương. Nhưng như vậy đồng đội mình sẽ phải di chuyển theo và sẽ tốn nhiều sức, điều này không có lợi bằng chuyền đúng vào lúc đồng đội di chuyển vào khoảng thuận lợi (khó đó! nhưng tập nhiều sẽ quen).
Trong đá bóng các bạn hay cãi nhau ở điểm này. Người thì nói sao không chuyền cho tôi mà cứ dẫn bóng? người trả lời: có thấy ai đâu mà chuyền?
Nếu chúng ta biết được vị trí của từng cá nhân thì sẽ không có những tranh cãi như trên.
Chắc chắn sẽ có một số bạn thắc mắc: sao cầu thủ số 2 phải di chuyển qua bên trái cầu thủ số 1, rồi cầu thủ số 3 phải di chuyển vào vị trí cầu thủ số 2 để lại? mà không phải là cầu thủ số 3 lui về phía bên phải cầu thủ số 1, cầu thủ số 2 đứng yên?

Tiện ích bài viết ngẫu nhiên với ảnh thumbnail (random posts with thumbnail)

  Tiện ích bài viết ngẫu nhiên đã được giới thiệu từ lâu, nhưng có rất ít người dùng, 1 phần là do làm trang blog của bạn load chậm, 1 phần là do giao diện của tiện ích hiển thị không được bắt mắt lắm. Vì lý do đó hôm nay mình sẽ giới thiệu cho các bạn tiện ích random posts khác sẽ khắc phục được 2 vấn đề trên. Và cũng vì 1 lý do nữa là đã từng có 1 bạn yêu cầu xem 1 tiện ích random posts với ảnh thumbnail, nhưng tiện ích bạn đó đưa nhờ mình xem bị lỗi trên IE, tức không hiển thị được ảnh thumbnail.
Bản tiện ích này mình đã làm mới lại từ bản cũ mà đã được giới thiệu từ trước. Như ở trên mình có nói, bản cũ load hơi lâu. Tuy ở bản này thời gian load không được cải thiện, nhưng với 1 chút thủ thuật nhỏ thì việc load tiện ích này sẽ không ảnh hưởng tới việc load các thành phần khác trong blog.
Xem DEMO : Random posts with thumbnail
Hình ảnh minh họa:
random posts thumb - mothuthuat.com
* Sau đây là các bước thực hiện :
1. vào bố cục
2. Vào phần tử trang và tạo 1 widget HTML/javascript và dán đọan code bên dưới vào :


<style type="text/css">
#random-posts {
width:300px;
}
#random-posts h3 {
background:url(http://data.fandung.com/blog/demo/rd-post-thumb/img-bg-rd1.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
img#rd-thumb {
float:left;
width: 40px;
height:40px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

img#rd-thumb0 {
float:left;
width: 80px;
height:80px;
margin-right:5px;
border:1px solid #ccc;
padding:2px;
}

#random-posts ul {list-style:none;}
#random-posts li {
height:50px !important;
padding:5px 3px 0 5px;
list-style:none;
}
li#li-rd a, li#li-rd-chan a, li#li-rd-le a {text-decoration:none;}
li#li-rd a:hover, li#li-rd-chan a:hover, li#li-rd-le a:hover {text-decoration:underline;}
li#li-rd {border:1px solid #ddd; background:#f6f6f6;height:90px !important;font-weight:bold;}
li#li-rd-chan {background:#f6f6f6;}
</style>

<div id="random-posts"><h3>Random Posts</h3>
<div id='rd-posts-loading'>
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>
</div>

3. Save widget lại.
- Để có thể tùy chỉnh dễ dành code CSS, các bạn xem ảnh minh họa bên dưới :
random posts thumb 2- mothuthuat.com
4. Vào chỉnh sửa code HTML
5. Dán đọan code bên dưới vào trước thẻ đóng </body>

- Đọan code : /feeds/posts/default/-/Label nó sẽ cho phép hiển thị các bài viết radom từ 1 nhãn, và cụ thể ở đây là nhãn mang tên Label, nếu các bạn muốn hiển thị cho cả blog thì thay đọan code đó thành /feeds/posts/default
- đọan code ở bước 5 là muốn để cho tiện ích được load sau cùng.
- Chú ý :
+ nếu blog càng có nhiều bài viết thì tiện ích load càng lâu, vì thế nếu load cho 1 nhãn thì sẽ nhanh hơn là cho cả blog.
+ Ngòai ra để muốn hiển thị được ảnh thumbnail thì bạn phải điều chỉnh trang feed ở dạng xem đầy đủ

6. Save template.
- Lưu ý chung: để an tòan, các bạn nên download các hình ảnh và file js về, phòng trường hợp host của mình gặp vấn đề
Chúc các bạn thành công
<script type="text/javascript">
var maxEntries = 7;
nocmtext = "Chưa có nhận xét nào";
cmtext = "Nhận xét";
</script>
<script src="http://data.fandung.com/blog/demo/rd-post-thumb/rd-post-thumb.js" type="text/javascript"></script>
<script src="/feeds/posts/default/-/Label?alt=json-in-script&callback=getRandomPosts&max-results=999999" type="text/javascript"></script>

Menu nằm ngang với hiệu ứng thay đổi ảnh

- Bài viết trước mình có giới thiệu cách tạo menu nằm ngang có sổ dọc với hiệu ứng thay đổi màu nên. Hôm nay mình xin giới thiệu 1 style khác, đó là hiệu ứng dùng hình ảnh. Bài này mình sẽ giới thiệu 11 style khác nhau cho các bạn lựa chọn.

☼Các bước chuẩn bị:
- Đầu tiên các bạn download file này về: CSSMenu.zip
- Sau đó giải nén ra, ta sẽ thấy 22 file ảnh, có tên tương ứng từ A --> K (mỗi lọai 2 file), và 1 file menus.htm .
- Các bạn có thể mở file menus.htm để xem offline các bản demo của các style, rồi lựa chọn style mình thích. (xem hình bên dưới)


- Các style được đặt tên theo thứ tự, từ A đến K, khi bạn đã lựa chọn được file nào thì copy 2 file hình của style tương ứng, và up lên host để lấy link.
- Ví dụ ở đây mình chọn style E, khi đó mình sẽ chọn 2 file ảnh :tableftE.giftabrightE.gif để up lên host.

☼Bây giờ ta bắt đầu tạo menu chính:
1. Đăng nhập blog
2. Vào Bố cục(layout)
3. Vào chỉnh sửa CodeHTML
4. Chèn đọan code CSS bên dưới lên trên dòng ]]></b:skin>


#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("LINK OF tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("LINK OF tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */

#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
Chú ý: thay code màu xanh bằng link hình mà bạn đã up, nhớ fải đúng thứ tự các file.
- Và 1 điều lưu ý nữa là : khi bạn thay đổi ảnh (tức là không sử dụng những hình ảnh mình đưa) thì bạn phải chỉnh code màu cam cho phù hợp với ảnh của bạn. Ở đây 42px chính là 1/2 chiều cao của ảnh.

5. Save template lại.
6. Tiếp tục vào Bố cục
7. Tạo một Widget HTML/Javascript.
8. Chèn đọan code bên dưới vào :

<div id="tabsE">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Link 4"><span>Link 4</span></a></li>
</ul>
</div>
Chú ý:
- Thay href="#" thành href="URL Liên kết"
- Thay code màu đỏ bằng thành tên menu của bạn.
- Thay Code màu xanhmô tả menu.

Như vậy ta đã thực hiện xong 1 menu nằm ngang dùng hiệu ứng thay đổi ảnh.

☼ Tạo thêm menu con cho menu chính với hiệu ứng sổ dọc.
- Đầu tiên để có hiệu ứng sổ dọc xuống bạn phải chèn đọan file javascript ngay sau dòng lệnh

1. Vào Bố cục - Chỉnh sửa code HTML - và dán đọan code bên dưới vào ngay bên dưới thẻ


<script src='http://vo1984.googlepages.com/dropdown2.js' type='text/javascript'/>
2. Khoan save template lại, tiếp tục chèn đọan code CSS của menu con lên trên dòng ]]></b:skin>
.submenu {
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid;
cursor:pointer;
}
3. Save template lại.
4. Và bây giờ bắt đầu tạo menu hòan chỉnh (ở đây mình chỉ ví dụ cho 2 menu chính và 2 menu con cho nó gọn, còn muốn nhiều hơn thì các bạn cứ thêm vào).
- Bây giờ tạo 1 widget HTML/JavaScript và dán code bên dưới vào:


<script type="text/javascript">
function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="submenu" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
</script>

<div id="tabsE">
<ul>
<li><a id="sub1" href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a id="sub2" href="#" title="Link 2"><span>Link 2</span></a></li>
</ul>
</div>

<script type="text/javascript">

otab("sub1_child");
submn('Label1','Label1');
submn('Label2','Label2');
ctab();
at_attach("sub1", "sub1_child", "hover", "y", "pointer");

otab("sub2_child");
submn('Label3','Label3');
submn('Label4','Label4');
ctab();
at_attach("sub2", "sub2_child", "hover", "y", "pointer");

</script>

☼Giải thích 1 chút về code:
- Các code màu tím của menu chính và con phải hòan tòan giống nhau.
- Các code màu xanh chính là các Nhãn trong của blog bạn mà bạn muốn hiển thị trên trên menu.
- Thay dòng YOURBLOG.blogspot.com thành blog của bạn
- onmouseover="this.style.background='#039'" : code màu đỏ chính là màu hiển thị khi bạn rê chuột lên 1 menu con.
- onmouseout="this.style.background='#F57900'" : code màu đỏ là khi ta không rê chuột vào 1 menu con.
- Hãy thay đổi các code màu đó theo ý bạn.

5. Save lại, như vậy đã xong.

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

Tạo Menu Thanh menu ngang có sổ dọc xuống


[FD BlOg] - Để cho khách viếng thăm có thể dễ dàng truy cập và tìm kiếm thông tin về bài viết trên blog của bạn thì phổ biến nhất là tạo 1 menu truy cập cho blog. Việc tạo menu sẽ giúp cho người truy cập dễ dàng tìm thấy thông tin mà mình muốn tìm.

Ở đây mình sẽ giới thiệu menu nằm ngang và có liên kết với các menu con khác, và hiển thị của các menu con này là sổ dọc xuống theo từng menu chính.

Trước tiên để tạo menu, bạn phải thống kê lại các nhãn, (giống như lập 1 bản đồ trong blog vậy) sau đó ta sẽ gôm các nhãn lại theo từng mục, ví dụ: giải trí , học tập... và các mục giải trí, học tập sẽ là 1 menu chính, còn các nhãn trong nó sẽ là 1 menu phụ.

Thứ 2 là xác định nơi đặt menu, thông dụng nhất sẽ là ở trên phần header.Như vậy các bạn phải tạo 1 widget HTML/Javascript vào header rồi dán code của thủ thuật vào.

☼ Bây giờ ta bắt đầu vô chi tiết:
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Vào chỉnh sửa code HTML (không cần nhấp chọn mở rộng tiện ích)
4. Chèn đọan code sau vào ngay bên dưới thẻ mở <head>

<script src="http://data.fandung.com/js/dropdown2.js" type="text/javascript">
</script>

5. Save template lại.
6. Quay trở lại bố cục, vào phần tử trang, tạo 1 cái widget HTML/Javascript,sau đó dán đọan code bên dưới vào.

►CODE:

<style type="text/css">
.nav23{ // CSS của menu chính
height: 30px;
padding: 2px 0 0;
margin-right:5px;
}

.nav23 a, .nav23 a:visited {

color:#000;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;

text-decoration:none;
font-size:12px;
margin: 0 4px;
padding: 5px 4px;
display: block;
float:left;

}
.nav23 a:hover { // hiệu ứng của menu chính khi có chuột rê vào
background-color: #909090;
color:#FFF;
margin: 0 4px;
padding: 5px 4px;

}
.nav23sub
{ // CSS menu con (phụ)
background:#F57900;
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 5px 10px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border-top:1px #fff solid;
cursor:pointer;
}
</style>

<script type="text/javascript">

function otab()
{
document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}
function submn(submn_label,submn_text)
{
document.write('<tr><td onmouseover="this.style.background=\'#039\'" onmouseout="this.style.background=\'#F57900\'" class="nav23sub" onclick="window.location.href=\'http://YOURBLOG.blogspot.com/search/label/'+submn_label+'\'">'+submn_text+'</td></tr>');
}

function ctab(){
document.write('<\/table>');
}
function otab(child_id)
{
document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');
}

// end of define functions!

</script>
<div style="background-image: url(http://sites.google.com/site/fdblogsite/Home/fd.gif); width: 670px" class="nav23">
<a id="hoctap" href="#" >Học Tập</a>
<a id="thuthuat" href="#">Thủ thuật</a>
<a id="khampha" href="#">Khám Phá</a>
<a id="giaitri" href="#">GiảiTrí</a>
<a id="hinhanh" href="#">Hình Ảnh</a>
<a id="truyen" href="#">Truyện</a>
<a id="cuocsong" href="#">Cuộc sống<a>
</div>
<script type="text/javascript">
otab("hoctap_child");
submn('Study','Study');
submn('Ebooks','Ebooks');
ctab();
at_attach("hoctap", "hoctap_child", "hover", "y", "pointer");

otab("thuthuat_child");
submn('Thu%20Thuat%20Blog','Blog');
ctab();
at_attach("thuthuat", "thuthuat_child", "hover", "y", "pointer");

otab("khampha_child");
submn('Khoa%20Hoc','Khoa Học');
ctab();
at_attach("khampha", "khampha_child", "hover", "y", "pointer");

otab("giaitri_child");
submn('Chuyen%20La','Chuyện lạ');
submn('Truyen%20Cuoi','Truyện cười');
submn('Relax','Thư Giãn');
submn('Xe','Xe độ');
submn('Artists','Nghệ sĩ');
submn('Scandal','Scandal');
ctab();
at_attach("giaitri", "giaitri_child", "hover", "y", "pointer");

otab("hinhanh_child");
submn('Picture','All Pic');
submn('My%20Photo','My Photo');
ctab();
at_attach("hinhanh", "hinhanh_child", "hover", "y", "pointer");

otab("truyen_child");
submn('Truyen%20Ngan','Truyện ngắn');
ctab();
at_attach("truyen", "truyen_child", "hover", "y", "pointer");

otab("cuocsong_child");
submn('Nghe%20Thuat%20Song','Nghệ thuật sống');
submn('Loi%20Khuyen','Lời Khuyên');
submn('Love','Tình Yêu');
ctab();
at_attach("cuocsong", "cuocsong_child", "hover", "y", "pointer");
</script>

-Chú ý :

+ Các code cùng màu (đỏ, xanh dương, xanh, cam, đen, tím, xanh xám)sẽ liên kết với nhau (kiểu : cha - con)
+ Các code màu nâu chính là các nhãn(Label) trong blog của bạn(những nhãn có kí tự khỏang trắng sẽ thay bằng %20), và tên theo sau dòng code màu nâu chính là Tên hiển thị của menu con. Các bạn xem hình minh họa bên dưới sẽ rõ.

+ Thay đổi các nhãn tên các menu theo như blog của bạn.

Bạn nên đặt menu này ở trên head là đẹp nhất, nếu blog của bạn nào chưa có tạo thủ thuật "Thêm tiện ích" vào phần header thì có thể xem ở đây.

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

Create Tabbed Side Menu with jQuery

[FD BlOg] - Một ứng dụng khác từ jQuery, bài viết sẽ hướng dẫn các bạn tạo tab menu, với 5 tab con chứa nội dung. Và tiêu để của các tab sẽ được biểu thị bằng hình ảnh.
Xem demo trực tiếp ở đây: http://data.fandung.com/blog/demo/jquery-tab-menu/index.html

Hình minh họa :



- Đầu tiên các bạn download gói hình ảnh của thủ thuật về máy, rồi up lên host để sử dụng cho thủ thuật. (images.rar)
Để đơn giản, ta sẽ chép tất cả code của thủ thuật vào 1 widget HTML/Javascript.
- Tạo widget HTML/Javascript ở nơi muốn đặt tab
- Dán tất cả code bên dưới vào:

//Code Javascript
<script src="http://data.fandung.com/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('.boxBody li').click(function(){
window.location = $(this).find("a").attr("href");
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

// Code CSS
<style>

#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

li.comments {background:url(images/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(images/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(images/tabFolder.gif) no-repeat 0 -32px;}
li.famous {background:url(images/tabHeart.gif) no-repeat 0 -32px;}
li.random {background:url(images/tabRandom.gif) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(images/boxTop.gif) no-repeat;height:11px;clear:both}
*html .boxTop {margin-bottom:-2px;}
.boxBody {background-color:#282828;}
.boxBottom {background:url(images/boxBottom.gif) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(images/arrow.gif)}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}
</style>

// Code HTML
<div class="box">

<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>

<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">
<ul>
<li>Post 1.</li>
<li>Post 2.</li>
<li>Post 3.</li>
<li class="last">Post 4.</li>
</ul>
</div>

<div id="comments">
<ul>
<li><a>Commet 1. <span> - Author 1</span></a></li>
<li><a>Commet 2. <span> - Author 2</span></a></li>
<li><a>Commet 3. <span> - Author 3</span></a></li>
<li class="last"><a>Commet 4. <span> - Author 4</span></a></li>
</ul>
</div>

<div id="category">
<ul>
<li><a href="#">css-html</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">logo</a></li>
<li class="last"><a href="#">Blogger</a></li>
</ul>
</div>

<div id="famous">
<ul>
<li>List famous 1.</li>
<li>List famous 2.</li>
<li>List famous 3.</li>
<li class="last">List famous 4.</li>
</ul>
</div>

<div id="random">
<ul>
<li>Random post 1.</li>
<li>Random post 2.</li>
<li>Random post 3.</li>
<li class="last">Random post 4.</li>
</ul>
</div>

</div>

<div class="boxBottom"></div>

</div>

- Chú ý : các class "posts, comments, category, famous, random" là các tiêu đề của 5 tab. Và để ý ta thấy ở class posts có thêm dòng selected, dòng này để mặc định tab "posts" sẽ hiển thị mỗi lần load.
- Dòng code : .box {width:227px} : là độ rộng của tab chính.

-Save widget.

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

Tạo menu thả xuống nhiều thư mục con

(Traidatmui.com) – Hôm nay mình sẽ hướng dẫn các bạn thực hiện một thủ thuật để tạo một menu ngay dạng thả xuống với nhiều cấp bậc con khác nhau. Với menu này bạn có thể tạo thêm rất nhiều thư mục trong menu, vì với một thư mục chính bạn có thể tạo thêm nhiều thư mục con khác. Menu này có sẽ làm cho blog bạn trông đẹp hơn đấy và cũng giúp bạn trong việc chia nhỏ các thư mục trong blog của bạn. Thủ thuật này cũng khá phức tạp, bạn hãy xem hình ảnh bên dưới sẽ thấy rỏ hơn.

Hình ảnh minh họa
☼ Bắt đầu thủ thuật

1. Đầu tiên đăng nhập vào blog của bạn
2. Vào bố cục chọn chỉnh sửa HTML
3. Chèn code bên dưới vào sau thẻ <head>
<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://traidatmui-tips.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://traidatmui-tips.googlecode.com/files/drop_menu.js' type='text/javascript'/>


4. Save template lại
5. Bây giờ bạn hãy thêm 1 HTML/Javascript và dán code bên dưới vào
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E; /* màu nền của menu*/
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{
display: inline-block;
}

/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/

.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul{
top: 0;
}

.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Cuộc sống</a></li>

<li><a href="#">Học tập</a></li>

<li><a href="#">Thủ thuật</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="#">Giải trí­</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul> </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>


</ul><br style="clear: left" />
</div>


Chỉnh code:
- Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
- Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
- Code màu xanh dương là tên của những thư mục con cấp 1 của menu chính
- Code màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
- Code màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
- Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục

Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:
<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.2.2</a></li>
</ul>
</li>
</ul></li>

Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:
<li><a href="#">Học tập</a></li>

<li><a href="#">Công cụ</a></li>

6. Save lại
Chúc bạn thành công

Nguồn: TRAIDATMUI.com

 
259/3 Lê Thị Riêng | Khu Phố 6 - Tổ 16 - P.Thới An - | Quận 12