Cực HOT

Thêm Automatic Read-More Widget Cho Blogger


Nếu bạn chỉ muốn hiển thị tóm tắt các bài đăng trên frontpage của  blog, không may bạn không có bất kỳ tùy chọn theo mặc định trong bảng điều chỉnh. Bạn sẽ cần một đoạn code bên ngoài để làm cho nó blog của bạn thêm ấn tượng. Sự thật là, đã có nhiều hackers phát hành nhiều Read-more widget vào Blogspot. Vấn đề với những widget đó là bạn không thể chọn điểm giới hạn cho bài viết và cũng không có hỗ trợ cho thumbnail lúc ban đầu. Đây là một đoạn mã mà có thể giải quyết cả hai vấn đề. Đoạn mã này tự động tạo ra hình thu nhỏ thumbnail cho các bài viết dựa trên những hình ảnh bên trong các bài viết rất là ấn tượng.
Các bước:
Bước # 1 Đăng nhập vào Blogger, vào Thiết kế -> Edit HTML và đánh dấu vào ô chọn "Expand Widget Templates"
 Bước # 2: Nhấn (Ctrl + F) tìm đoạn mã này trong  mẫu:
</head>
Trước nó, bạn copy và add đoạn mã dưới vào
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Sau đó bạn tìm đoạn mã này
<data:post.body/>
 Bạn xóa và thay đoạn mã trên bằng đoạn mã dưới đây

 <b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://3.bp.blogspot.com/-PHK2dd8APS0/TWH2-OPIQQI/AAAAAAAAAMM/ExvjPIVtwA0/s1600/Read+more.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now Click Save Template

Thay đổi http://3.bp.blogspot.com/-PHK2dd8APS0/TWH2-OPIQQI/AAAAAAAAAMM/ExvjPIVtwA0/s1600/Read+more.png Với những widget bạn thích dưới đây. Chúc vui vẻ, nếu có câu hỏi bạn cứ để lại ở muc comment


http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/black.png
http://i643.photobucket.com/albums/uu153/nirav07/black1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/blue.png
http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif
http://i643.photobucket.com/albums/uu153/nirav07/bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/brown.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png
http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif
http://i643.photobucket.com/albums/uu153/nirav07/green.png
http://i643.photobucket.com/albums/uu153/nirav07/green1.gif
http://i643.photobucket.com/albums/uu153/nirav07/greenish.png
http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/grey.png
http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif
http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png
http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif
http://i643.photobucket.com/albums/uu153/nirav07/orange.png
http://i643.photobucket.com/albums/uu153/nirav07/original.gif
http://i643.photobucket.com/albums/uu153/nirav07/pink.png
http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/purple.png
http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif
http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif
http://i643.photobucket.com/albums/uu153/nirav07/red.png
http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

Recent Post

Related Posts Plugin for WordPress, Blogger...