Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn)

17:17 |
Nguồn: Sưu tầm


Giới thiệu: Thông thường khi bạn truy cập vào các label (nhãn) hay các mục lưu trữ của blog (archive) thì các bài viết sẽ hiển thị đầy đủ, tiêu đề lẫn nội dung, nếu vì một lý do nào đó, các bài viết quá nặng, nó sẽ làm chậm tốc độ load của các trang Label và Archive này. Vì thế một giải pháp làm tăng tốc độ load đó chính là chỉ cho phép các bài viết hiển thị tiêu đề. 


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 code <b:include data='post' name='post'/>

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

<!-- Chỉ cho phép hiển thị tiêu đề bài viết ở trang Archive (Lưu trữ) và Label (Nhãn) -->
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>

<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

!= data:blog.url': Không áp dụng thủ thuật này trên trang chủ.
!= "item"': Không áp dụng thủ thuật này trong trang bài viết.


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


Xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=2065

Bỏ đường viền ảnh khi chèn hình vào blog

17:10 |


Nguồn: Sưu tầm 



Giới thiệu: Nếu bạn đăng hình lên blog và thấy có đường viền bao quanh ảnh. Điều này khiến bạn không hài lòng, nhất là với những ảnh trong suốt, xuất hiện đường viền thật không đẹp tí nào, và lúc này bạn muốn bỏ nó đi. Thủ thuật đơn giản sau sẽ giúp bạn loại bỏ đường viền đáng ghét ấ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 .post img {

- Đoạn code có dạng như sau:

.post img {
max-width: 480px;
min-width: 10px;
clear: both;
padding: 0px;
border:1px solid #343434; /*Viền ảnh*/
}

- Cũng có template code có dạng khác, nếu không tìm thấy thì:

- Tìm dòng img {

- Đoạn code có dạng như sau:

img {
border:0px;
padding:0px;
max-width: 570px; /*not working in IE6*/
min-width: 1px;
border:1px solid #343434; /*Viền ảnh*/
}

border: Là code tạo viền bao quanh ảnh. Bỏ nguyên dòng border đi thì không còn viền ảnh nữa.


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

Tạo cửa sổ Popup khi rê chuột vào ảnh

17:04 |


Giới thiệu: Với vài đọan code CSS nhỏ ta có thể tạo một cửa sổ popup để hiển thị ảnh rất chuyên nghiệp mà không cần tới javascript. Thủ thuật cho phép hiện thị của sổ popup của ảnh gốc khi ta rê chuột vào.

Nếu blog có cố định size max của ảnh thì khi dùng thumbnail, ảnh tuy có phóng to ra nhưng vẫn bị thu nhỏ lại cho vừa với giá trị tối đa cho phép của blog (nghĩa là không tràn ảnh ra blog, hoặc bị mất ảnh). 

Thứ hai là: Nếu ảnh nằm dưới cuối bài thì khi ảnh phóng to ra, ảnh sẽ không hiện đủ (bị mất khúc đuôi), nguyên do là vì khoảng trống dưới bài viết không đủ để ảnh hiện hết.

Nên nhớ, vì ảnh cũng chỉ nằm trong chu vi bài viế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. 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: Tìm thẻ đóng </head>

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


       <!-- Tạo cửa sổ popup khi rê chuột vào ảnh -->

<style type='text/css'>.img-thumbnail{position: relative;z-index: 0;}
.img-thumbnail:hover{background-color: transparent;z-index: 50;}
.img-thumbnail span{position: absolute;background-color: transparent;padding: 0px;left: -1000px;border: 0px solid #000;visibility: hidden;color: #000;text-decoration: none;}
.img-thumbnail span img{border-width: 0;padding: 2px;}
.img-thumbnail:hover span{visibility: visible;/*Vị trí hiển thị ảnh popup*/top:0px;left:0px;}</style>

Bạn có thể điều chỉnh vị trí popup hiển thị để có được vị trí thích hợp nhất trên blog của bạn ở dòng thứ 3 và thứ 4 từ dưới đếm lên của đoạn code:


top:0px;left:0px;

Ở đây mình để 0px, bạn có thể túy chỉnh lại.


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


Bước 3: Chèn hình ảnh vào bài viết với đoạn code sau:

[CODE]<a class="img-thumbnail" href="#">
<img src="LINK_HÌNH" border="0" height="120" width="120"/>
<span>
<img src="LINK_HÌNH"/>
</span>
</a>[/CODE]

LINK_HÌNH: Thay chữ LINK_HÌNH thành link ảnh của bạn.
height="120" width="120" - Chiều cao, bề rộng ảnh muốn để thumbnail. 

Nếu muốn ảnh thumbbail vẫn giữ nguyên tỷ lệ khi thu nhỏ thì nên điền mặc định một chiều cao hoặc chiều rộng ảnh thumbnail, còn phần kia bỏ trống, thì khi thumbnail, ảnh sẽ tự điều chỉnh phần còn lại.

OK đã xong, các bạn có thể xem thêm tại đây: 
http://kenhdaihoc.com/forum/showthread.php?t=2063

Ẩn ngày đăng bài viết

16:53 |

Giới thiệu: Nếu bạn không muốn hiện ngày đăng trên mỗi bài viết, thì thủ thuật đơn giản sau sẽ giúp ta xóa bỏ nó. 


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. Chèn script 

Bước 1: Tìm dòng code CSS có dạng sau:



h2.date-header {
margin:1.5em 0 .5em;
}
Bước 2: Thêm dòng code display:none; vào trước vào trước dấu }

- Ta được đoạn code có dạng sau:



h2.date-header {
margin:1.5em 0 .5em;
display:none; /* Ẩn ngày đăng bài viết*/
}

Bước 3: Save template. (Lưu mẫu)
xem thêm tại đây: http://kenhdaihoc.com/forum/showthread.php?t=206

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

23:50 |
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

23:41 |



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

23:35 |

 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