Tin Công nghệ, Mạng máy tính, Điện Thoại, iPhone, Thủ thuật Bloger: Post

Showing posts with label Post. Show all posts

4/4/14

Chèn quảng cáo Google Adsense...vào bài viết trong Blogger

8:46 AM Blogger, javascript, Post, Thủ Thuật Blogger, Tips No comments

Bài viết sau đây sẽ hướng dẫn các bạn thủ thuật blogger cách chèn mã quảng cáo của Google Adsense vào Blogger, cách này cũng áp dụng với một số quảng cáo khác như: Adnet.vn, Bidvertiser...để các bạn có thể thiết kế website chuyên nghiệp. Với thủ thuật này thì sẽ giúp bạn SEO website được tốt hơn vì được ưu ái từ Google.

<script type="text/javascript"><!-- google_ad_client = "pub-2130301322121363";

/* 250x250, Được tạo ra 20/03/2011 */

google_ad_slot = "4280005562";

google_ad_width = 300;

google_ad_height = 250; //-->

</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

1. Chèn trực tiếp vào tiện ích HLMT/ JavaScript

Vào Quản trị - Bố cục - Thêm tiện ích - chọn HTML/JaveScrip và dán đoạn mã quảng cáo Adsense vào.

Cách này đơn giản, dễ quản lý nhưng không thay đổi được kích thước và không hiện thị được trong bài đăng

2. Chèn vào Template của Blog

Đây là cách được nhiều blogger sử dụng vì quảng cáo sẽ hiện thị trong bài đăng, có thể thay đổi được kích thước và hiển thị được ở nhiều vị trí tối ưu trên blog. Trước khi chèn mã Adsense vào Blog bạn phải chuyển đổi (converter) Google Adsense Converter.

Sau khi chuyển đổi bạn nhận được một mã mới, sử dụng mã này mới có thể chèn vào Template

a/ Chèn trên đầu và dưới tiêu đề bài đăng nhưng dưới tiêu đề blog.

Vào Mẫu (Design) - Chỉnh sửa HTML (Edit HTML) - Chọn Mở rộng tiện ích mẫu (Expand Widget Templates).
- Tìm đoạn code sau:

<div class='post-header-line-1'/>

- CHèn ngay vào dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

b/ Chèn vào dưới cuối mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-body entry-content'> <p><data:post.body/></p> <div style='clear: both;'/> </div>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads'> Mã Adsense đã chuyển đổi </p> </b:if>

c/ Hiện quảng cáo bên trái mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:

<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:left'> Mã Adsense đã chuyển đổi </p> </b:if>

d/ Hiện quảng cáo bên phải mỗi bài đăng.

- Bấm (Ctrl + F): Tìm đoạn code tương tự sau:
<div class='post-header-line-1'/>

- Chèn vào ngay dưới nó đoạn mã sau:

<b:if cond='data:blog.pageType == "item"'> <p class='ads' style='float:right'> Mã Adsense đã chuyển đổi </p> </b:if>

Thủ thuật tạo Slide bằng JQuery ở trang chủ cho Blogger

8:40 AM Blogger, Page, Post, Slide, Thủ Thuật Blogger, Tips No comments

Slide - Thủ thuật Slide JQuery bài viết ở trang chủ cho Blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào sau thẻ <head>

<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.5.1.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/Jquery.min.1.3.js"></script>
<script language="javascript" type="text/javascript" src="http://thietkewebplus.googlecode.com/files/script.js"></script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.main-slider{width:414px;  /*độ rộng của phần bên trái*/
height:300px; /*chiều cao của phần bên trái*/
border-right:#ccc solid 1px;}
.lof-slidecontent { width:710px;  /*độ rộng của cả tiện ích*/
height:300px; /*chiều cao của cả tiện ích*/
background:#eee;position:relative; overflow:hidden; border:#ccc solid 3px;}
.preload{ height:100%; width:100%; position:absolute; top:0; left:0; z-index:100000; text-align:center; background:#FFF}
.preload
 div{ height:100%;width:100%; background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89i-kspLLDJ1OuLBT42BNzygFZ7uYma9n-5PFC4Y8pYQkuz0vCcXxZHO7GNx17woSfZodTixa6fe9tLmNHRxt81srOd_1q7uFri37cwCvi-saMv5CVBoMHzVHl-RPhtsqTkIqFKKCht9p/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%;}
.sliders-wrapper{position:relative; height:100%; z-index:3px; overflow:hidden; }
ul.sliders-wrap-inner{overflow:hidden;
 background:transparent 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj89i-kspLLDJ1OuLBT42BNzygFZ7uYma9n-5PFC4Y8pYQkuz0vCcXxZHO7GNx17woSfZodTixa6fe9tLmNHRxt81srOd_1q7uFri37cwCvi-saMv5CVBoMHzVHl-RPhtsqTkIqFKKCht9p/s1600/load-indicator-namkna-blogspot-com.gif)
 no-repeat scroll 50% 50%; padding:0px; margin:0; position:absolute; 
overflow:hidden;}
ul.sliders-wrap-inner li{overflow:hidden;float:left; padding:0px;margin:0px; position:relative;}
ul.sliders-wrap-inner li img{ padding:0px;
width:414px; /*độ rộng của ảnh bên trái*/
height:300px; /*chiều cao của ảnh bên trái*/
}
.slider-description a{ color:#000; }
.slider-description{
font-size:12px;
z-index:100px;
position:absolute;
bottom:0px;
left:0px;
width:400px; /*độ rộng của phần mô tả hay phần tóm tắt nội dung*/
background:#000;
height:100px; /*chiều cao của phần mô tả hay phần tóm tắt nội dung*/
padding:0px 8px 5px 8px;
color:#fff;
opacity:0.8;
line-height:1.5em;
}
ul.navigator-wrap-inner h2,.slider-description h2{background:none; }
.slider-description h2{line-height:1.1em;margin: 5px 0 5px 0;}
.slider-description h2 a{font-size: 14px;margin: 0; padding: 0; color:#fff}
.navigator-content {position:absolute;right:0;top:0px;z-index:9;height:300px;color:#FFF
}
ul.navigator-wrap-inner h2{line-height:1.3em;padding:0 0 0 8px;font-size:14px;margin-left:85px;color:#fff;}
.navigator-wrapper{ z-index:10;
height:180px; /*chiều cao của list bài viết bên phải*/
width:310px;  /*độ rộng của list bài viết bên phải*/
overflow:hidden;
color:#FFF;
}
ul.navigator-wrap-inner{ top:0; padding:0; margin:0; position:absolute; width:100%; }
ul.navigator-wrap-inner
 li{ cursor:hand;  cursor:pointer; list-style:none; padding:0; 
margin:0px; overflow:hidden; display:block; text-align:center;}
ul.navigator-wrap-inner
  
li.active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjNaAmfJ_sobKphhgO1HG-42ilkuIYMSTPJto0rvNWNX1PetpzDPx3-ALEf6KDituzZpGeVWCkJ4Ds705-UAEVlXFL9mEEk91s-P3TriyKKpZnv7MU-rXb846A1Hd40a4w6BppPJXDsfV7/s1600/arrow-bg-namkna-ngoctra.png)
 no-repeat scroll left center; color:#FFF
}
ul.navigator-wrap-inner
 li.active 
div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYigbKdkPHfQo9NDvXVGzqkxZdl0DWdUNavhhoj8af2WG3WShj3YPXGOB-79n2STRwZ4CPay4ovORJPUv4X5bfTxVcarKFFP4lNUxLUmiT4d0i6b0VDXUTstUx3TaWwSDaQXbTiEJUibJe/s1600/grad-bg-namkna-ngoctra.gif);
color:#FFF;}
ul.navigator-wrap-inner  li >  div{
background:#333;
color:#FFF;
height:100%;
position:relative;
margin-left:15px;
padding-left:15px;
border-top:1px solid #E1E1E1;
text-align:left
}
.navigator-wrap-inner img{
height:75px;  /*chiều cao của ảnh thumb ở list bài viết bên phải*/
width:75px;   /*độ rộng của ảnh thumb ở list bài viết bên phải*/
margin:8px 8px 8px 0px;
float:left;
padding:2px;
border:#C5C5C5 solid 1px;
}
.button-next,
.button-previous{
display:block;
width:40px;
color:#FFF;
cursor:pointer;
position:absolute;
height:100%;
z-index:40;
top:0;
text-indent:-999px;
}
.button-next {
right:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQawE5v38gma7Bv7HcpctwkD9q0KtcOlWjyV3B2OZpmEAgJVhonIs3mxDbOoFF9VoiXid-E7xVTnyquC-SeWe2Xt2OGmOFJvcduUWDi-fYlAz25h8K2XCWpMMEQuJZ38IWz1FURVUG6neu/s1600/next-namkna-ngoctra.png)
 no-repeat right center;
}
.button-previous {
left:0px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho59kcfs96xLEXiwpKDJpJTIXnKoZ_P1zIBcnzhU7zv9KN5kgrMWfpd0pWzqjeks5viujIquJt4lp_re8o0A0QWQ-OTqLP4SDr58M2Q8_KGUoPFkcsPkIfJQYL84QkZbNG3POcGkWCwnee/s1600/previous-namkna-ngoctra.png)
 no-repeat left center;
}
.button-control {
background:#333;
position:absolute;
top:10px;
right:48%;
height: 20px;
width: 20px;
cursor:hand; cursor:pointer;
}
.button-control span { display:block;  width:100%; height:100%;}
.action-start span  {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBEX778vM8k26dz0Im1F8wRhLNLhXtH1HsvC_HiPHc4QRF0JEzzK50V_WYOxNIViqaUdIBifG1c0Hr0qKLKvGBvzeOZmLUO36zicgLeAj9yzK96GywFBOxAWgrxojoHg_Z-B-PIAsmaSVh/s1600/play-namkna-blogspot-ngoctra.png)
 no-repeat center center;
}
.action-stop span {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz40gzUB4psAENZda8l7N-kday9U2yuPl9qX0kyvP22E_K_7TCp3fDJGWeU30sYXHXZTiXWbKdTM2RXHAz0Pq3-HkGNZdWxostbeWB9Yhg1tNgajVZSwhUhFSBZBNIwb9R9CAh9HBZPdro/s1600/pause-namkna-ngotra.png)
 no-repeat center center;
}

6. Save template lại

7- Về Bố cục (Lay out) => Thêm 1 HTML/Javascript và thêm vào code bên dưới.

<script type="text/javascript">
$(document).ready( function(){ 
var buttons = { previous:$('#jslidernews .button-previous') ,
next:$('#jslidernews .button-next') };
$('#jslidernews').lofJSidernews( { interval:5000,
easing:'easeOutBounce',
duration:1200,
auto:true,
mainWidth:414, 
mainHeight:300,
navigatorHeight : 100,
navigatorWidth : 310,
maxItemDisplay:3,
buttons:buttons});  
});
summaryposts = 30;
numposts = 15;
label = "Blogspot-tips";
home_page = "http://vnbtips.blogspot.com/"; 
</script>

<div id="jslidernews" class="lof-slidecontent">
<script src="http://thietkewebplus.googlecode.com/files/jqslidernews.js" type="text/javascript">
</script></div>

easeOutBounce, là tên của hiệu ứng bạn có thể chọn kiểu trình diễn khác bằng cách thay (easeOutBounce) thành một trong các tên sau: easeInOutExpo,easeInOutQuad.
mainWidth:414, Là độ rộng của phần trình diễn bên trái
mainHeight:300, Là chiều cao của phần trình diễn bên trái
navigatorHeight : 100, Là chiều cao của list bài viết bên phải
navigatorWidth : 310, Là độ rộng của list bài viết bên phải
summaryposts = 30; là số ký tự của nội dung phần mô tả
numposts = 15; là số bài viết hiển thị
label = "Blogspot-tips"; thay Blogspot-tips thành tên nhãn muốn hiển thị tronmg blog của bạn nếu bạn chọn hiển thị cho một nhãn cụ thể.
home_page = "http://vnbtips.blogspot.com/"; thay thành địa chỉ blog của bạn
Ở trên mình cho tiện ích hiển thị tất cả bài viết trên blog không theo từng nhãn riêng nên bạn không cần quan tâm đến phần (label = "Blogspot-tips";), phần đó mình thêm phụ để bạn nào muốn hiển thị theo nhãn thì sẽ phải quan tâm đến biến này. Để hiển thị theo từng nhãn riêng biệt thì bạn cần thay file JS bên dưới
http://thietkewebplus.googlecode.com/files/jqslidernews_2.js
thành file JS sau
http://thietkewebplus.googlecode.com/files/jqslidernews_label.js

8. Cuối cùng bạn save tiện ích lại là xong

Mặc Định Kích Thước Ảnh Bài Đăng Lên Blogspot

5:43 PM Blogger, Post, Thủ Thuật Blogger, Tips No comments

1. Đăng nhập vào blog
2. Chọn Mẫu
3. Chọn Chỉnh sửa HTML
4. Để cố định hình ảnh hiển thị trong blogger, với hình ảnh to hơn giá trị MAX thì sẽ tự động điều chỉnh về giá trị MAX, nếu ảnh nhỏ hơn giá trị min thì sẽ tự điều chỉnh về kích thước min, bạn đặt trước ]]></b:skin> đoạn mã sau:
.post img { max-width:500px; min-width:200px; padding : 10px; clear: both; }
- Điều chỉnh lại max-with và min-with cho phù hợp với phần bài đăng của bạn nha.

5. Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500 x 400 thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img { width:500px; height:400px; padding:10px; }

- Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.

Lưu ý: Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Mẫu (Template) >> Chỉnh sửa HTML và chỉnh sửa chúng.

Cách Hiển Thị Bài Viết Mặc Định Ở Trang Chủ Blogger

5:40 PM Blogger, Post, Thủ Thuật Blogger No comments

Một số tùy chỉnh để bạn không muốn blog của mình mặc định hiển thị bài đăng mới nhất ra ngoài trang chủ.

Vậy làm thế nào để thực hiện được cách ẩn bài viết mới nhất ngoài trang chủ blogspot. Thủ thuật dưới đây sẽ hướng dẫn các bạn che đi bài viết mới nhé

Cách ẩn bài viết mới nhất ngoài trang chủ blogspot !

Trước tiên thực hiện bạn phải xác định id của widget "Bài đăng trên blog", thông thường nó đều có id là "Blog1".Với một số blog có thể khác. Các bạn xác định theo các bước bên dưới:

1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed): => Tìm đoạn code sau :

<b:widget id="Blog1" locked="true" title="Bài đăng trên Blog" type="Blog">
Sau đó ta vào: Mẫu (template)chỉnh sửa HTML (Edit HTML) và dán code ngay bên dưới sau thẻ </b:skin>

<style>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
#Blog1 {
display:none;
visibility:hidden;
}
</b:if>
</style>

Chú ý phần chữ màu đỏ phải giống nhau .

Sửa lỗi không phân trang khi xem theo Nhãn

4:11 PM Blogger, Navigation, Page, Post, Thủ Thuật Blogger, Tips No comments

Sửa lỗi không phân trang khi xem theo Nhãn
Chắc hẳn mỗi người dùng Blogger đều tạo phân trang để blog tải nhanh và trông gọn gàng hơn. Tuy nhiên khi click vào tên nhãn ở widget label hay là ở thanh trạng thái breadcrumb của mỗi bài đăng thì số bài đăng hiển thị trên 1 trang lại lên đến 20 theo mặc định.

Thực ra việc hiển thị số bài đăng trên 1 trang là thêm vào sau địa chỉ dòng ?&max-results=5 để ngắt trang. Vì vậy để sửa lỗi này ta chỉ việc thay tất cả dòng:

expr:href='data:label.url'

Thành

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

Thay 5 thành số bài đăng bạn muốn hiển thị trên 1 trang

Lỗi không hiện đủ bài viết (Blogger)

5:38 PM Blogger, Post, Thủ Thuật Blogger, Tips No comments

Có nhiều bạn sử dụng Blogger (blogspot) hay thắc mắc là tại sao lượng bài viết hiển thị trên trang chủ lại ít hơn so với số bài viết đã được thiết lập trong bảng điều khiển. Ví dụ, mặc dù đã thiết lập hiển thị 10 bài đăng trên trang chính, nhưng trang chủ blog chỉ thấy hiển thị có 4,5 bài...
Và trong bài viết này mình sẽ giải thích rõ vì sao blog của bạn lại bị lỗi không hiện đủ bài viết như trên và hướng dẫn cách khắc phục.
1. Blog hiển thị không đủ bài đăng là do đâu?
Để bảo đảm thời gian tải trang, chức năng auto-pagination của Blogger sẽ tự động cắt bớt lượng bài viết khi tổng dung lượng bài đăng trên trang vượt quá giới hạn cho phép. Như vậy, với những bài viết quá dài, đặc biệt là những bài viết có chứa nhiều hình ảnh thì khả năng bị lỗi là rất lớn.
2. Vậy làm sao để khắc phục?
Trước khi hướng dẫn cách khắc phục, mình xin lưu ý với các bạn đang sử dụng chức năng tự động tạo trích dẫn cho Blogger (Auto Readmore): Chức năng Auto-Readmore này sẽ đưa bài viết của bạn hiển thị về dạng trích dẫn cho gọn gàng hơn, thế nhưng Blog của bạn vẫn phải tải hết nội dung bài viết. Vì vậy, chức năng Auto Readmore không có tác dụng khắc phục lỗi trên!.
Để khắc phục lỗi hiển thị bài đăng, các bạn nên sử dụng dấu ngắt sẵn có trên trình soạn thảo văn bản (chức năng tạo Readmore của Blogger). Với việc chèn dấu ngắt này, sẽ giúp blog của bạn chỉ tải từ đầu cho đến dấu ngắt trong mỗi bài viết. Cho nên sẽ giảm đáng kể thời gian tải trang và khắc phục được lỗi trên.
Hướng dẫn cụ thể:
- Nếu bạn viết bài ở chế độ Viết:
Bạn hãy đặt con trỏ tại vị trí bạn muốn ngắt, sau đó bấm vào biểu tượng dấu ngắt nhảy là được (hình minh họa)

- Nếu bạn viết bài ở chế độ HTML:
Bạn hãy chèn  vào ngay vị trí bạn muốn ngắt trang là được (hình minh họa)

Kinh nghiệm nhỏ: Cách chèn dấu ngắt trang đối với Blog có chức năng Auto Readmore:
Ta biết rằng Auto Readmore sẽ lấy hình ảnh đầu tiên trong bài để làm hình đại diện cho bài đăng, và đồng thời cũng sẽ lấy phần text đầu tiên trong bài viết để trích dẫn.
Vì vậy, ta nên chèn dấu ngắt trang ngay dưới hình ảnh và phần text đầu tiên trong bài viết để đảm bảo hiển thị tốt hình ảnh và đoạn trích dẫn của bài viết, lỗi không hiện đủ bài viết được khắc phục, và tốc độ tải trang được cải thiện tối đa.

Tự động tạo trích dẫn có hình thu nhỏ Blogger

1:59 PM auto, Blogger, Post, Tips No comments

Mặc định với những bài viết trên Blogger (blogspot) nếu bạn muốn cho bài viết ngắn lại ở dạng trích dẫn, bạn sẽ sử dụng dấu ngắt của trình soạn thảo văn bản. Tuy nhiên, làm như vậy sẽ khá thủ công và lượng kí tự hiển thị mỗi bài viết không đều, không thẩm mỹ. Hôm nay mình sẽ hướng dẫn các bạn cách tạo trích dẫn bài viết tự động với hình thu nhỏ cho Blogger.

Tự động tạo trích dẫn có hình thu nhỏ Blogger (Blogspot)

- Đầu tiên, các bạn vào Thiết kế, chọn Chỉnh sửa HTML, check vào ô Mở rộng mẫu tiện ích.
- Bấm Ctrl+F để tìm đến mã:

</head>

Chèn đoạn mã dưới đây ngay sau mã vừa tìm được:

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //chọn yes để hiển thị ảnh thu nhỏ, ngược lại chọn no
summary_noimg = 430; //chiều dài trích dẫn với bài viết ko có hình
summary_img = 340; //chiều dài trích dẫn với bài viết có hình
img_thumb_height = 100; // chiều cao hình thu nhỏ
img_thumb_width = 120; // chiều rộng hình thu nhỏ
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

- Tiếp tục, tìm đoạn mã:

<data:post.body/>

Thay đoạn mã vừa tìm được bằng đoạn mã bên dưới:

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Đọc tiếp ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

- Các bạn bấm Lưu mẫu để hoàn thành!
Chúc các bạn thành công!

Bài viết ngẫu nhiên (Random Posts) với hình đại diện

9:55 PM Blogger, Post, Random, Thủ Thuật Blogger No comments

1.Vào Bố Cục > Thêm Tiện ích > HTML/JavaScript và dán đoạn code dưới đây vào.

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:72px;height:72px;padding:3px}
-->
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=60;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuqaglY2viXEnMY3hmxpsYwC9-v7c85JLpNdyp7RpbpsV-YRIAzgDKi-5jqr6KNVsl2ggLfhOWQYHkXAKFYSqnKnspDM2pugozVPGsX-Z6TLmu0JMdmAF10afJ56tTQL8w35XBUicR2xw/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

2. Lưu mẫu

Tiện ích Recent Posts Widget với Thumbnails cho blogger

8:43 PM javascript, Post, Thủ Thuật Blogger No comments

1 -Đăng nhập vào Blogger. Đi tới bảng điều khiển > Bố cục > Phần tử trang> Thêm tiện ích > chọn HTML/JavaScript

2. Copy và dán đoạn mã dưới vào vào tiện ích HTML/Javascript

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.YOUR-BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/08/recent-posts-widget-with-thumbnails-for.html' target='_blank'>Recent Posts Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>

3 . Thay http://www.YOUR-BLOG-URL.blogspot.com bằng địa chỉ blog của bạn

4.Lưu mẫu

Tạo Random Post cho blogger

10:17 PM Post, Thủ Thuật Blogger No comments

1.Đăng nhập bảng điều khiển--> Bố cục- ->Phần tử trang
.2.Chọn 'Thêm tiện ích' trên sidebar.

3.Chọn 'HTML/Javascript' và dán đoạn mã bên dưới và lưu lại.
<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Are ya feeling lucky, punk?'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

4.Xong

Tiện ích Relate Post (Bài viết liên quan)

6:40 PM Post, Thủ Thuật Blogger No comments

1.Đăng nhập bảng điều khiển--> Bố cục - -> Chỉnh sửa HTML

2.Chọn "Mở rộng mẫu tiện ích"

3.Ấn tổ hợp phím Ctrl + F tìm thẻ </head> .

4.Dán đoạn mã bên dưới trước thẻ </head>.

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 10px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 15px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 10px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

Mẹo: nếu bạn muốn có thể thay đổi : font type, font size,width,.....

4. Tìm tiếp đoạn mã

<p><data:post.body/></p>

5.Dán đoạn mã bên dưới ngay sau dòng vừa tìm được

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Other Recommended Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

6.Clicklưu mẫu và xong

Kết quả:

Hướng dẫn tạo Recent Post với hình đại diện (Thumnail)

6:17 PM Post, Recent, Thủ Thuật Blogger No comments

1.Đăng nhập bảng điều khiển--> Bố cục- ->Phần tử trang

2.Chọn 'Thêm tiện ích' trên sidebar.

3.Chọn 'HTML/Javascript' và dán đoạn mã bên dưới và lưu lại.

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "YOUR BLOG ADDRESS";

</script>

4.Thay YOUR BLOG ADDRESS bằng địa chỉ blog của bạn !

4/4/14

Chèn quảng cáo Google Adsense...vào bài viết trong Blogger

Thủ thuật tạo Slide bằng JQuery ở trang chủ cho Blogger

3/11/14

Mặc Định Kích Thước Ảnh Bài Đăng Lên Blogspot

Cách Hiển Thị Bài Viết Mặc Định Ở Trang Chủ Blogger

Sửa lỗi không phân trang khi xem theo Nhãn

3/5/14

Lỗi không hiện đủ bài viết (Blogger)

3/11/13

Tự động tạo trích dẫn có hình thu nhỏ Blogger

1/30/13

Bài viết ngẫu nhiên (Random Posts) với hình đại diện

1/28/13

Tiện ích Recent Posts Widget với Thumbnails cho blogger

1/18/13

Tạo Random Post cho blogger

Tiện ích Relate Post (Bài viết liên quan)

Hướng dẫn tạo Recent Post với hình đại diện (Thumnail)

Labels

Blog Archive

Contact

Text link

Total Pageviews

4/4/14

3/11/14

3/5/14

3/11/13

1/30/13

1/28/13

1/18/13

Social Profiles

Labels

Blog Archive

Contact

Text link

Total Pageviews