Trai Xinh Gái Đẹp

Thứ Tư, 7 tháng 12, 2011

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

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:

<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="#">

<span>

</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

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

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:

<b:if cond='data:blog.pageType == "index"'>
<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:

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

<style type='text/css'>
.thumbnailimg IMG {
max-width:186px;
width: expression(this.width > 186 ? 186: true);
max-height:120px;
height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
nofloat: left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
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(//)[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 (//.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='"comment-author " + 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