Thứ Năm, 8 tháng 12, 2011

Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh hơn

Giới thiệu: Kéo tới đâu ảnh mới bắt đầu load tới đó, giảm thời gian tải ảnh. Mặc định blog khi load, sẽ load tất cả các ảnh và thành phần có trong blog. Điều này sẽ làm chậm blog nếu web, hay blog có nhiều ảnh. Nhưng với lazyload thì chỉ load những ảnh lọt trong tầm mắt người nhìn.

Ngoài ra, còn có thêm hiệu ứng tải ảnh kiểu “Fade in”, khi hiện ảnh trông rất đẹp và chuyên nghiệp.

Lưu ý: Lazyload sẽ được load sau cùng, sau khi đã load hết các mã Java, js, HTML của website hay 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. 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ẻ <head>

- Thêm vào dưới nó đoạn code sau:
<script src='http://kenhdaihoc.com/blogger/jquery.min1.4.3.js' type='text/javascript'/>



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

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

<!-- Lazy load -->
<script type='text/javascript'>
//<![CDATA[

(function($) {

$.fn.lazyload = function(options) {
var settings = {
threshold : 0,
failurelimit : 0,
event : "scroll",
effect : "show",
container : window
};

if(options) {
$.extend(settings, options);
}

/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {

var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)) {
/* Nothing. */
} else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
$(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}

this.each(function() {
var self = this;

/* Save original only if it is not defined in HTML. */
if (undefined == $(self).attr("original")) {
$(self).attr("original", $(self).attr("src"));
}

if ("scroll" != settings.event ||
undefined == $(self).attr("src") ||
settings.placeholder == $(self).attr("src") ||
($.abovethetop(self, settings) ||
$.leftofbegin(self, settings) ||
$.belowthefold(self, settings) ||
$.rightoffold(self, settings) )) {

if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
} else {
$(self).removeAttr("src");
}
self.loaded = false;
} else {
self.loaded = true;
}

/* When appear is triggered load original image. */
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});

/* When wanted event is triggered load original image */
/* by triggering appear. */
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});

/* Force initial check if images should appear. */
$(settings.container).trigger(settings.event);

return this;

};

/* Convenience methods in jQuery namespace. */
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */

$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};

$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};

$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};

$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
/* Custom selectors for your convenience. */
/* Use as $("img:below-the-fold").something() */

$.extend($.expr[':'], {
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})"
});

})(jQuery);
//]]>
</script>


<script type="text/javascript" charset="utf-8">
$(function() {

$("img") // img là áp dụng với cả blog. Nếu chỉ muốn áp dụng cho một class nào đó thì thêm class đó vào trước img. Ví dụ: .post img, #content img, .comments img,…

.lazyload({
placeholder : "LINK_HÌNH", /*Hình thay thế khi ảnh chưa load xong*/
effect: "fadeIn" /* Hiệu ứng mờ khi ảnh xuất hiện. Có thể sử dụng các hiệu ứng khác như: slideUp, slideDown,…*/

});
});
</script>

* Các tính năng thêm. Thêm vào sau dòng: effect: "fadeIn"

threshhold:100 /*Số pixel của ảnh được tải trước*/
container: $("class") /*Dùng cho class scroll được. Thay thành class bạn muốn áp dụng.
Ví dụ: #container, #scroll, .imagescroll,…*/



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


Một số mẫu hình thay thế 

         

Thủ thuật Tạo số đếm thứ tự cho các comment




Giới thiệu: Tạo số đếm thứ tự cho các comment trên blog. Comment đầu tiên sẽ mang số 1, kế đến là số 2, và cứ thế đếm tiếp tục. Việc này sẽ giúp dễ theo dõi và tìm lại comment cũ hơn, vì chỉ cần nhớ số là dễ dàng tìm được.

Dùng thủ thuật này sẽ không hiển thị được tốt thủ thuật Tạo màu nền riêng biệt cho các comment – Nghĩa là sẽ không hiển thị được nhiều hình nền xen kẽ nhau, mà chỉ hiển thị được một màu nền đầu tiê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. Đá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:loop values='data:post.comments' var='comment'>

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

<!-- Tạo số đếm thứ tự cho các comment (1)-->
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>

Bước 2: Tiếp tục tìm dòng <data:commentPostedByMsg/>

- Thêm vào sau nó đoạn code sau:

<!-- Tạo số đếm thứ tự cho các comment (2)-->
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Bước 3: Kế đến kéo xuống dưới một chút sẽ thấy đoạn code:

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

- Thêm vào sau đoạn code trên thẻ đóng </div> 


Bước 4: Tìm dòng ]]></b:skin>

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

/*Tạo số đếm thứ tự cho các comment (3)*/
.comment-number {
float: right;
background: url(LINK_HÌNH) no-repeat; /*Hình trang trí cho số đếm comment. Không dùng hình thì bỏ qua*/
margin-right: 4px; /*Vị trí số đếm comment*/
margin-top: 0px; /*Vị trí số đếm comment*/
text-align: center;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
}

.comment-number a:link, .comment-number a:visited {
color: #ADADAD !important; /*Màu số đếm comment*/
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}


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

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

Ẩn widget tại trang chủ hay trang riêng biệt

Untitled

Giới thiệu: Thủ thuật cho phép ẩn widget (tiện ích) tại trang chủ, trang nhãn, trang lưu trữ, hay một trang riêng biệt nào đó. Tùy theo nhu cầu của bạn muốn ẩn ở trang nào. 

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được ID hoặc class của nó. Các ID thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … 

Các ID khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, …

Các class khi đưa vào CSS có dấu “.” (dấu chấm) ở phía trước, ví dụ: .header-outer. 


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 dòng ]]></b:skin>

Bước 2: Thêm vào sau nó một trong các đoạn code sau:
(Nhớ thay chữ “ID widget” thành ID của widget bạn muốn ẩn)

1. Ẩn widget ở trang chủ

<!--Ẩn widget ở trang chủ-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

2. Ẩn nhiều widget ở trang chủ

<!--Ẩn nhiều widget ở trang chủ -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#ID_widget , #ID_widget, #ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

3. Ẩn widget ở bài viết

<!-- Ẩn widget ở bài viết -->
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

4. Ẩn widget ở trang chủ, trang nhãn

<!-- Ẩn widget ở trang chủ, trang nhãn -->
<b:if cond='data:blog.pageType == "index"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

5. Ẩn widget ở các trang lưu trữ 

<!-- Ẩn widget ở các trang lưu trữ -->
<b:if cond='data:blog.pageType == "archive"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

6. Ẩn widget ở các trang tĩnh 

<!-- Ẩn widget ở các trang tĩnh -->
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

7. Ẩn widget ở một trang riêng biệt nào đó 

<!-- Ẩn widget ở một trang riêng biệt nào đó -->
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

8. Chỉ hiện widget ở trang bài viết

<!-- Chỉ hiện widget ở trang bài viết -->
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#ID_widget {display:none !important;visibility:hidden !important}
</style>
</b:if>

Lưu ý: Nếu thay == thành != thì kết quả sẽ ngược lại - nghĩa là không ẩn mà chỉ hiện các widget ở các trang lựa chọn ở trên và ẩn ở các trang còn lại.


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


Theo: http://kenhdaihoc.com/forum/showthread.php?t=2082

Code tạo hiệu ứng Sao rơi theo trỏ chuột


Untitled


Giới thiệu: Rà chuột tới đâu, sao rơi lung linh tới đó. Một hiệu ứng có đã khá lâu nhưng dùng vẫn rất đẹp. Đây là hiệu ứng mình rất thích. 

Khuyết điểm duy nhất là không được mượt lắm trên IE. Thêm nữa là: sẽ làm giãn bề rộng hay chiều cao blog nếu ta rà chuột ra biên, hay mép blog.

Theo: http://kenhdaihoc.com/forum/showthread.php?t=2080

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 mã sau:

<!-- Sao tuyết rơi theo trỏ chuột -->
<script type='text/javascript'>
// <![CDATA[

var colour="#EF6B7B"; // Mã màu sao rơi
var sparkles=80;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);}set_width();

sparkle();}}

function sparkle() {var c;

if (x!=ox || y!=oy) {

ox=x;oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;}}for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);}

setTimeout("sparkle()", 40);}function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";}else {

star[i].style.visibility="hidden";

starv[i]=0;

return;}}else {tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"}}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";}else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;}}else tiny[i].style.visibility="hidden";}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;}}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);}
// ]]>
</script>



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


Chèn ảnh luôn hiện ở phía trước mặt Blog - Thích hợp cho quảng cáo

Untitled


Giới thiệu: Khi thực hiện điều này các hình ảnh được chèn sẽ luôn luôn xuất hiện ở phía trước mặt của blog của bạn, hình ảnh sẽ luôn luôn xuất hiện ngay cả khi người xem di chuyển chuột (lên, xuống) trong blog củ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. 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 dòng ]]></b:skin>

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

/*Chèn hình cố định (1)*/
#top_image {
position:fixed;
_position:absolute;

bottom:5px; /*Vị trí hình trên blog*/
left:5px; /*Vị trí hình trên blog*/

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

left:5px;  Nếu bạn muốn hiện bên phải thì thay bằng: right:5px;

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

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

<!--Chèn hình cố định (2) -->
<div id='top_image'>
<img src= "http://kenhdaihoc.com/forum/images/ads1.gif"/>
</div>

http://kenhdaihoc.com/forum/images/ads1.gif - Thay bằng link ảnh của bạn
Bước 3: Save template. (Lưu mẫu)

Chèn ảnh luôn hiện ở phía trước mặt Blog - Thích hợp cho quảng cáo

Untitled


Giới thiệu: Khi thực hiện điều này các hình ảnh được chèn sẽ luôn luôn xuất hiện ở phía trước mặt của blog của bạn, hình ảnh sẽ luôn luôn xuất hiện ngay cả khi người xem di chuyển chuột (lên, xuống) trong blog củ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. 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 dòng ]]></b:skin>

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

/*Chèn hình cố định (1)*/
#top_image {
position:fixed;
_position:absolute;

bottom:5px; /*Vị trí hình trên blog*/
left:5px; /*Vị trí hình trên blog*/

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

left:5px;  Nếu bạn muốn hiện bên phải thì thay bằng: right:5px;

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

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

<!--Chèn hình cố định (2) -->
<div id='top_image'>
<img src= "http://kenhdaihoc.com/forum/images/ads1.gif"/>
</div>

http://kenhdaihoc.com/forum/images/ads1.gif - Thay bằng link ảnh của bạn
Bước 3: Save template. (Lưu mẫu)

Nguồn: 

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

Untitled


Giới thiệu: Thủ thuật chèn hình ảnh (icon) vào trước tiêu đề bài viết theo nhãn. Ví dụ như nhãn thể thao thì hình trái banh, nhãn hỏi đáp thì hình dấu hỏi, nhãn đọc truyện thì hình quyển sách,… Tùy theo bạn xếp hình gì cho nhãn thôi.


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

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

/* Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (1)*/
.post-icon img {
float:left;
margin-right:8px;
}

Bước 2: Tiếp tục tìm đến đoạn code có dạng sau:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Bước 3: Trong khối code đó tìm dòng <h3 class='post-title entry-title'>

- Thêm vào sau nó đoạn code sau:

<!-- Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (2)-->
<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "Tên_Label_1"'>
<img src='LINK_HÌNH'/>
</b:if>

<b:if cond='data:label.name == "Tên_Label_2"'>
<img src='LINK_HÌNH'/>
</b:if>
...
<b:if cond='data:label.name == "Tên_Label_N"'>
<img src='LINK_HÌNH'/>
</b:if>

</b:loop>
</b:if>
</div>

LINK_HÌNH // Link hình của nhãn.
Tên_Label // Tên nhãn của bạn muốn chèn hình.


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


Nguồn: sưu tầm

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng


Nguồn: [FD's BlOg] 



Giới thiệu: Thủ thuật chèn hình ảnh (icon) vào trước tiêu đề bài viết theo nhãn. Ví dụ như nhãn thể thao thì hình trái banh, nhãn hỏi đáp thì hình dấu hỏi, nhãn đọc truyện thì hình quyển sách,… Tùy theo bạn xếp hình gì cho nhãn thôi.


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

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

/* Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (1)*/
.post-icon img {
float:left;
margin-right:8px;
}

Bước 2: Tiếp tục tìm đến đoạn code có dạng sau:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Bước 3: Trong khối code đó tìm dòng <h3 class='post-title entry-title'>

- Thêm vào sau nó đoạn code sau:

<!-- Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng (2)-->
<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == "Tên_Label_1"'>
<img src='LINK_HÌNH'/>
</b:if>

<b:if cond='data:label.name == "Tên_Label_2"'>
<img src='LINK_HÌNH'/>
</b:if>
...
<b:if cond='data:label.name == "Tên_Label_N"'>
<img src='LINK_HÌNH'/>
</b:if>

</b:loop>
</b:if>
</div>

LINK_HÌNH // Link hình của nhãn.
Tên_Label // Tên nhãn của bạn muốn chèn hình.


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

Điều chỉnh bề rộng khung comment, thu hẹp khoảng cách dưới khung


Nguồn: Sưu tầm

Untitled

Giới thiệu: Trong Blogger, những khung comment mặc định thường nhỏ hơn nhiều so với chiều rộng của bài đăng. Khi thiết kế blog, bạn muốn khung comment to hơn cho phù hợp và làm đẹp cho blog của mình, thì thủ thuật đơn giản sau sẽ giúp 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. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích) 

4. Chèn script 

Cách 1: Tìm đến đoạn code có dạng sau:

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>

height='275' // Khoảng cách từ comment xuống đích trang blog.
width='100%' // Độ rộng khung comment. Có thể thay 100% thành số nhỏ hơn: 70%, 86%,… Hay cụ thể hơn là 600px, 500px,… tùy theo bố cục template của blog bạn.

Save template. (Lưu mẫu)


Cách 2: Tìm dòng ]]></ b: skin> 

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

.comment-form{
min-width: 100% !important; /*Mở rộng tối đa khung comment*/
}

Save template. (Lưu mẫu)