Thứ Ba, 6 tháng 12, 2011

Tùy chỉnh số bài viết hiển thị ở trang Label (Nhãn)

Giới thiệu: Thông thường khi load một nhãn nào đó từ một bài viết, mặc định blogger sẽ hiển thị kết quả là 20 bài viết. Bài viết này sẽ hướng dẫn bạn điều chỉnh lại số bài viết này. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 


Bước 1: Tìm dòng
expr:href='data:label.url'

- Thay thế nó bằng dòng code sau:

expr:href='data:label.url +  "?max-results=10"' 

Thay số 10 thành số bài mà bạn muốn hiển thị.


Tìm được bao nhiêu kết quả thì thay bấy nhiêu. (Thông thường là 3)


Bước 2: Save template. (Lưu mẫu)

Nguon: http://kenhdaihoc.com/forum/forumdisplay.php?f=251

Chèn thêm khung Add a gadget (Thêm tiện ích) cho phần Header và Main




Giới thiệu: 
Thông thường mặc định mỗi theme của Blogspot là chỉ có cho phép "Thêm tiện ích" ở Sidebar (2 bên blog) và ở phần footer (phía dưới blog). Vì thế mà mỗi khi ta muốn chèn thêm các widget (tiện ích) cho phần Main hoặc Header thì ta phải tạo các widget ở Sidebar hoặc ở Footer rồi di chuyển tới chỗ cần hiển thị. Như vậy rất rườm rà, thủ thuật sau sẽ giúp bạn thêm tiện ích này ở cả Header và Main. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Chèn cho phần Header

- Tìm dòng code có dạng (hoặc tương tự) sau:


<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>


- Sau đó thay no bằng yes là OK.


Bước 2: Chèn cho phần Main

- Tìm dòng code có dạng (hoặc tương tự) sau:

<b:section class='main' id='main' showaddelement='no'>


- Sau đó thay no bằng yes là OK.


Bước 3: Save template. (Lưu mẫu)
Nguồn: http://kenhdaihoc.com/forum/forumdisplay.php?f=251

Tạo phân trang Paper script 2.0


 Giới thiệu: Mỗi kiểu phân trang đều có ưu điểm và vẻ đẹp riêng của nó. Mỗi blogger đều có sở thích riêng và tất nhiên sẽ lựa chọn kiểu phân trang riêng để cài đặt cho blog của mình. Đây là kiểu phân trang đơn giản cả về giao diện và thủ thuật.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)
4. Chèn script 

Bước 1: Tìm dòng <b:include name='nextprev'/>

- Thay thế nó bằng đoạn code sau:

 <!-- Tạo phân trang Paper script 2.0 -->
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.blogpager {
font-size:12px;
color: #060;
font-weight:bold;
padding:0px 2px;
}
</style>
<div align='center' style='margin:5px;'>
<form action='#' name='pager20'>
<span id='vwg-pager-first'/> <span id='vwg-pager-prev'/> <input name='showingpage' onfocus='this.select()' size='4' title='Gõ vào số trang mà bạn muốn đến'; type='text' value='init...'/>/<input disabled='disabled' name='pagestotal' size='4' type='text' value='init...'/> <input onclick='checkpager()' type='button' value='Go'/> <span id='vwg-pager-next'/> <span id='vwg-pager-last'/>
</form>
</div>
<script type='text/javascript'>
var blogID = "
2273867814436170597"; // ID blog bạn
var home_page = "http://chiase-vanthuc.blogspot.com"; // Địa chỉ blog bạn
var pager_max_main = 10;  // Số bài hiện trên trang chủ
var pager_first_text = "Đầu trang";
var pager_last_text = "Cuối trang";
var pager_prev_text = "Trang trước";
var pager_next_text = "Trang kế";
<script type='text/javascript'>
//<![CDATA[
var pager_max_results = 20;
if(location.href.match("max-results=")){
 pager_max_results = parseInt(location.href.substring(location.href.indexOf("max-results=")+12).split("&")[0]);
} else if(!location.href.match("/search/label/")){
 pager_max_results = pager_max_main;
}
var per_page = pager_max_results ;
if(!location.href.match('/search/label/')) {
 pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary";
 pager_pageurl = home_page+"search";
 }
else {
 label = location.href.split("/")[5];
 label = label.split("?")[0];
 label = label.replace(/ /g,"%20");
 pager_feedx = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/-/"+label;
 pager_pageurl = home_page+"search/label/"+label;
}
var pager_opening = 1;
if(location.href.match("popening=")){
 pager_opening = parseInt(location.href.substring(location.href.indexOf("popening=")+9).split("&")[0]);
}
var num_pages = 1;
function createBlogPager(){
 var script = document.createElement('script');
 script.src = pager_feedx+"?start-index=1&max-results=0&alt=json-in-script&callback=countnumpost";
 script.type = "text/javascript";
 document.getElementsByTagName('head')[0].appendChild(script)
}
function countnumpost(json) {
 var posts  = json.feed.openSearch$totalResults.$t;
 num_pages = (posts%per_page == 0) ? posts/per_page : Math.floor(posts/per_page)+1;
 //////////////////////////////
 var a1 = document.createElement("a");
  a1.className = "blogpager";
  a1.title = "Jump to page: (1)";
  a1.href = "javascript:page(1)";
  a1.innerHTML = pager_first_text;
  document.getElementById("vwg-pager-first").appendChild(a1);
 var a4 = document.createElement("a");
  a4.className = "blogpager";
  a4.title = "Jump to page: ("+num_pages+")";
  a4.href = "javascript:page("+num_pages+")";
  a4.innerHTML = pager_last_text;
  document.getElementById("vwg-pager-last").appendChild(a4);

 var prev = (pager_opening!=1) ? pager_opening-1 : 1;
 var a2 = document.createElement("a");
  a2.className = "blogpager";
  a2.title = "Jump to page: ("+prev+")";
  a2.href = "javascript:page("+prev+")";
  a2.innerHTML = pager_prev_text;
  document.getElementById("vwg-pager-prev").appendChild(a2);

 var next = (pager_opening!=num_pages) ? pager_opening+1 : num_pages;
 var a3 = document.createElement("a");
  a3.className = "blogpager";
  a3.title = "Jump to page: ("+next+")";
  a3.href = "javascript:page("+next+")";
  a3.innerHTML = pager_next_text;
  document.getElementById("vwg-pager-next").appendChild(a3);

 document.pager20.showingpage.value = pager_opening;
 document.pager20.pagestotal.value = num_pages;
}
function checkpager(){
 var uinput = parseInt(document.pager20.showingpage.value);
 if((uinput <= num_pages)&&(uinput >= 1)) {
  page(uinput);
 }
 else {
  alert("Invalid page number. Please try by another!");
  document.pager20.showingpage.focus() ;
  document.pager20.showingpage.select();
 }
}
function getDateAndGo(json){
 var date2 = json.feed.entry[0].published.$t;
 ss = parseFloat(date2.substring(17,19));
 if(ss<59) ss++;
 if(ss<10) { ss = "0"+ ss; }
 date4  = encodeURIComponent(date2.substring(0,17)+ss+date2.substring(23,date2.length));
 location.href = pager_pageurl+'?updated-max='+date4+'&max-results=' + per_page + '&popening=' + pager_opening;
}
function page(startindex) {
 pager_opening = startindex;
 var i = per_page*(startindex-1)+1;
 var script2 = document.createElement("script");
 script2.src =  pager_feedx+"?start-index="+i+"&max-results=1&alt=json-in-script&callback=getDateAndGo";
 document.getElementsByTagName('head')[0].appendChild(script2)
}
createBlogPager();
//]]>
</script>
   </b:if>

Những chữ tô đỏ: Có thể tùy chỉnh lại theo ý của bạn.

Các phần cần phải sữa lại:

-2273867814436170597: Thay thành số ID của blog bạn.
- http://chiase-vanthuc.blogspot.com: Thay thành địa chỉ blog của bạn. 
- var pager_max_main = 10: Thay số bài đăng bằng với số bài đăng hiện trên trang chủ mà bạn chỉnh cho blog. 


Bước 2: Save template. (Lưu mẫu)

Nguồn: http://kenhdaihoc.com/forum/forumdisplay.php?f=251

Tạo Read More (Đọc tiếp) một cách tự động V4





Giới thiệu: Với thủ thuật này bài viết sẽ không hiện đầy đủ nguyên bài ở các trang nhãn, trang chính trang lưu trữ,… (nghĩa là chỉ hiển thị một phần) và khi muốn xem đầy đủ ta phải lick vào nút “Đọc tiếp” để xem.

Tuy đã tự động Readmore cho blog nhưng blog vẫn sẽ tải toàn bộ nội dung của các bài viết. Để giảm thời gian tải của blog, bạn nên kết hợp thêm chức năng “Read more” có sẵn của Blogspot. Thực hiện việc này cũng có nghĩa là sẽ ngăn chặn được việc hay mất bài viết trên blog. 


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm dòng <data:post.body/>

- Thay thế nó bằng đoạn code sau:

- Thay thế nó bằng đoạn code sau:

<!-- Tạo Read More (Đọc tiếp) một cách tự động V4 (1) -->
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>
 ĐỌC TIẾP »
</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Thay chữ ĐỌC TIẾP » thành chữ khác nếu bạn muốn. Hoặc nếu muốn dùng hình ảnh thì bạn thay chữ ĐỌC TIẾP » trên bằng dòng code sau:

<img src="Link_ảnh"/>


Bước 2: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn code sau:

<!-- Tạo Read More (Đọc tiếp) một cách tự động V4 (2) -->
<style type='text/css'>
.thumbnailimg IMG {
   max-width:186px;
   width: expression(this.width &gt; 186 ? 186: true);
   max-height:120px;
   height: expression(this.height &gt; 120 ? 120: true);
}
.thumbnailimg {
nofloat: left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
var classicMode = true; // Dùng kiểu mới chọn flase, true là kiểu cũ
var summary_noimg = 60; // Số từ tối đa khi bài viết không có ảnh nào
var summary_img = 60; // Số từ tối đa khi bài viết có ảnh
var indent = 3; // Số kí tự thụt vô đầu dòng
</script>
<script type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--s*mores*-->/)[0];
}
function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(</{1}p>)|(</{1}div>)/gi
   var re4 = /(<style.*?/{1}style>)|(<script.*?/{1}script>)|(<table.*?/{1}table>)|(<form.*?/{1}form>)|(<code.*?/{1}code>)|(<pre.*?/{1}pre>)/gi
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
var post2 = new Array();
for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != 'n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
  indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
} else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--s*mores*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="left"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + ' ... </div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>

Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau: 

- 186 và 120 lần lượt là chiều rộng và chiều cao của ảnh thumbnail. Nếu thay, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần. Dùng max- phía trước là để giữ nguyên tỷ lệ ảnh khi thumbnail. Nếu muốn đồng nhất như nhau thì bạn bỏ chữ max- phía trước đi. 

- no-float là chế độ hiển thị ảnh theo kiểu Gallery (ảnh nằm trên, chữ nằm phía dưới). 

Bạn có thể đổi no-float thành float để cho ảnh của bạn hiện dồn về trái (hoặc phải), và chữ nằm ở phần ngược lại. 


Bước 3: Save template. (Lưu mẫu)


Một số mẫu button Readmore


   
   
   
   


THE END.
Nguồn: http://kenhdaihoc.com/forum/forumdisplay.php?f=251

Sữa lỗi không hiện Avatar comment




Giới thiệu: Với những template cũ, có thể không hiện avatar comment. Để khắc phục việc này, ta phải sữa lại code trong template. Sau khi thực hiện xong thủ thuật này, chắc chắn blog bạn sẽ hiện avatar comment.


CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script

Bước 1: Tìm khối đoạn code có dạng như sau:


Bước 1: Tìm khối đoạn code có dạng như sau:


<dl id='comments-block'>
...
<b:loop values='data:post.comments' var='comment'>
......   ......
</dl>


- Đôi khi có code lại có dạng:


<ol class='commentlist'>  <b:loop values='data:post.comments' var='comment'>.......   .......</ol>


Bước 2: Sau khi tìm được khối code đó thì thay thế toàn bộ bằng đoạn code sau:


<dl expr:class='data:post.avatarIndentClass' id='comments-block'>        <b:loop values='data:post.comments' var='comment'>          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>            <b:if cond='data:comment.favicon'><img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/></b:if><a expr:name='data:comment.anchorName'/><b:if cond='data:blog.enabledCommentProfileImages'><div expr:class='data:comment.avatarContainerClass'><data:comment.authorAvatarImage/></div></b:if>            <b:if cond='data:comment.authorUrl'>              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> vào <data:comment.timestamp/>            <b:else/>              <data:comment.author/>            </b:if>            <data:commentPostedByMsg/>          </dt>

          <dd class='comment-body'>            <b:if cond='data:comment.isDeleted'>              <span class='deleted-comment'><data:comment.body/></span>            <b:else/>              <p><data:comment.body/></p>            </b:if>          </dd>

          <dd class='comment-footer'><span class='comment-timestamp'>  
              <b:include data='comment' name='commentDeleteIcon'/>            </span>          </dd>        </b:loop>      </dl>



Bước 3: Save template. (Lưu mẫu)

THE END.
Nguồn:  http://kenhdaihoc.com/forum/showthread.php?t=2032

Thứ Hai, 5 tháng 12, 2011

Tích hợp ANCMusic Player cho Blogspot

Mọi người chắc đã khác quen thuộc với theme Dj - Bay68.com. Vậy đã có ai hiểu hết tính năng post nhạc trong đó chưa ? Chắc các bạn chưa dùng theme đó sẽ tưởng tượng và đặt câu hỏi cho mình, theme đó có gì mà thú vị vậy. Thứ nhất, theme đó rất đẹp, công nhận điều đó luôn đi nhé. Thứ hai, theme này đã được sử dụng một tính năng post nhạc : Shortcode . Rất nhanh và gọn.


 Plugin đó được mình viết cách đây cũng không lâu và được chia sẻ trên freecode. Giờ mình muốn đưa nó vào FD Blog chia sẻ với mọi người, để plugin đươc sử dụng nhiều hơn, nhiều ý kiến cho nó để mình có thể phát triển thành một Plugin tối ưu.

Giới thiệu qua về nó thế có lẽ là đủ rồi. Mình qua sử dụng nhỉ ?


Plugin của mình có tên : ANCMusic (Nằm trong số các Plugin hỗ trợ giải trí)

1. Cài đặt

  Trong Template của các bạn, hãy thêm <div id="anc_pl"/> , thẻ div chứa id "anc_pl" là nơi hiển thị player của bạn.

  Tiếp đó dán đoạn code sau trước thẻ </body>

<script src="http://anhnc.googlecode.com/svn/trunk/cl/zi.js"></script>
<script>
var z = { width: "100%", id1: "wrap2", id2: "anc_pl", auto: "true", };
ANCMusic.call(z);
M.p(M.r());
</script>

Giải thích các thuộc tính :
   width: độ dài của player trong trang của bạn, có thể đặt là px, % (đơn vị)
   id1:      tên id chứa Short code (bạn có thể dùng là Blog1, wrap2,outer-wrapper...v..v)
   id2:      tên id chứa trình player của bạn. (chính là phần mình đã chỉ ở trên, bạn có thể thay tên id cũng được)
   auto:   chế độ chơi nhạc (tự động, không tự động)  


  Plugin cho phép bạn lấy nhạc từ các trang sau đây:

mp3.zing.vn, nhaccuatui.com, nhacso.net, musik.soha.vn, nhac.vui.vn, zippyshare và tất cả các link nhạc có đuôi *.mp3
Bạn nào có trang nhạc hay, comment ở dưới nhé, mình thử lấy xem sao. Cảm ơn các bạn.  

2. Sử dụng

* Cách post nhạc như sau : 

Zing:                 [m]http://mp3.zing.vn/bai-hat/Gio-Lanh-Cao-Thai-Son/ZWZD7EO0.html[/m]

Nhaccuatui:      [m]http://www.nhaccuatui.com/nghe?M=eYY7QIkAx4[/m]

Nhacso.net:      [m]http://nhacso.net/nghe-nhac/honey-honey.WVBZVktX.html[/m]

Zippyshare:      [m]http://www29.zippyshare.com/v/84705837/file.html[/m]

Nhac.vui.vn      [m]http://hn.nhac.vui.vn/em-luon-o-trong-tam-tri-anh-the-men-m198386c3p5314.html[/m]

Musik.soha.vn  [m]http://musik.soha.vn/mp3/decv89hwexo/Be-My-Baby-Wonder-Girls.html[/m]

*.Mp3               [m]http://s1.chacha.vn/audio/mp3/0/0/85/87785.mp3[/m]
Đây là phần quan trọng của bài viết (đối với site Dj), bạn có thể sử dụng cách bảo mật cho Blogger tại đây.

3. Kết

*Sắp tới mình sẽ cố gắng viết bài về các công cụ mình mới viết, chắc sẽ có nhiều điều hấp dẫn, mong phản hồi nhiều từ mọi người.
*Các phiên bản tới sẽ nâng cấp add thêm video clip, playlist từ các trang trên (không rõ có thời gian ngồi làm nữa không, chưa thể sớm xuất bản được.)



Thứ Bảy, 3 tháng 12, 2011

Vuaphim Blogger - Blogger Theme

Ai dùng thì up các bản AncPlay mới tại đây: www.fandung.com/2011/12/ancmedia-v3.html
Vẫn câu cũ: ai dùng vui lòng ko xóa Design ^^

DEMO | DOWNLOAD

Về cách post phim ai chưa biết thì xem lại bài trước.
Mình dùng thẻ blockquocte để ẩn link.
Nên khi post phim đặt thẻ [id]... trong thẻ blockquocte thì khi load phim có nhiều link thì sẽ không thấy nữa, đẹp hơn rất nhiều.

Widget : Bạn đã xem chưa các bạn vào site DEMO Ctril+U mà lấy script đó nhé, mình ko up đc script lên đây ( ko PM hỏi mấy cái widget này nha, google đi )

Mục Phim Đề Cử ở Sidebar các bạn tìm :
document.write("<script src=\"/feeds/posts/default/-/Phim HD?max-results="+4+"&orderby=published&alt=json-in-script&callback=showrecentposts22\"><\/script>");
Thay Phim HD bằng nhãn muốn hiện thị nhé
Mục Phim HD - Phim chất lượng cao và Phim Võ Thuật cũng thay tương tự theo ý thích

Cơ bản chỉ có thế . Có gì thắc mắc Repply