Nhãn

Template Blogger (37) Thủ Thuật (12) Template Video (6) Template Nhạc (4) Template Phim (4)

Thứ Bảy, 12 tháng 12, 2015

Lấy dữ liệu Blogspot khác và Bảo vệ dữ liệu blogspot bản thân.
XEM BÀI VIÊT
TOÀN MÀN HÌNH
Cách lấy toàn bộ data dữ liệu blogspot.Cách hack toàn bộ data dữ liệu của một blog khác  . Cách khắc phục để không bị lấy cắp toàn bộ data cho blogspot của bạn.

Xin chào các bạn hôm nay Forum Bẽo xin hướng dân các bạn Cách lấy toàn bộ data dữ liệu blogspot và cách khắc phục để không bị lấy cắp dữ liệu của blog của bạn.

Như các bạn biết Blogspot là một dạng web 2.0 của Google. Do 1 số blogger lười nhác không chịu viết bài mà nghĩ ra việc đi ăn cắp và Forum Bẽo mình cũng không phải là 1 ngoại lệ. Mình không khuyến khích các bạn làm việc này vì nó là một việc không hay ho gì cả, nó là ăn cắp công lao của người khác

Điều kiện để hack data từ blog khác là blog đó phải để Cho phép nguồn cấp dữ liệu blog ở dạng Đầy đủ thì mới hack data theo cách này được.

Cách lấy toàn bộ data dữ liệu blogspot

Đầu tiên các bạn cần  kiểm tra xem blog mà các bạn cần lấy có bao nhiêu bài viết để nhập thông số cho hợp lý bằng cách nhập đoạn mã sau vào công cụ kiểm tra

<script style="text/javascript">
function showpostcount(json) {
document.write('<center>Tổng số bài: <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b></center>');}</script>
<script src="http://chiase78.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script style="text/javascript"></script>
Copy đoạn mã trên và nhập vào bảng kiểm tra html : Tại đây

Các bạn hãy nhớ là bao nhiêu bài viết nhé để phục vụ cho bước sau.
Bây giờ chúng ta bắt đầu lấy data  bằng cách vào link sau :

http://chiase78.blogspot.com/atom.xml?redirect=false&start-index=m&max-results=n


Trong đó bạn thay các thông số như sau:

start-index=m bắt đầu bài đăng mới nhất (thường bạn sẽ ghi là 1)
max-result=n lấy n bài, bắt đầu từ bài từ bài thứ m (n là số bài viết mà bạn sẽ lấy)
http://chiase78.blogspot.com: là địa chỉ blog cần lấy Data. bạn thay nó thành blog bạn cần lấy

Ví dụ: Bạn muốn lấy bài từ 1 blog bất kỳ, ví dụ ở đây tôi muốn lấy 10 bài đầu tiên từ http://chiase78.blogspot.com/ thì tôi sẽ nhập link như sau:

http://chiase78.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=10

Nếu muốn lấy thêm 20 bài nữa thì bạn chỉ việc thay chỉ số cho phù hợp như sau:

http://chiase78.blogspot.com/atom.xml?redirect=false&start-index=11&max-results=20

Sau đó bạn copy link này và bật IDM lên rồi nhấn vào Add URL của IDM paste link vào đó và download về máy dạng atom.xml rồi nhập dữ liệu đó lên blog của bạn là được

Lưu ý: Mỗi lần bạn lấy nên lấy tối đa tầm 400 bài là cùng thôi. và khi  bạn Nhập blog

Cách chống lấy toàn bộ data dữ liệu blogspot

Cách 1: Để tránh bị mất, bị hack data thì các bạn nên làm như sau: Đăng nhập Bloger => Cài đặt => Khác => Cho phép nguồn cấp dữ liệu blog => chọn Cho đến dấu ngắt

Cách chống lấy toàn bộ data dữ liệu blogspot


Khi đăng bài các bạn nhớ dùng biểu tương  Cho đến dấu ngắt nhé ( trong bài viết của bạn, chỗ nào bắt đầu đến chỗ quan trọng không cho người ta lấy bài thì nhấn vào biểu tượng 

Cách chống lấy toàn bộ data dữ liệu blogspot


Cách 2: Hãy để kệ cho họ lấy cắp và hãy tận dụng họ đề họ giúp đẩy từ khóa cho bạn

- Khi bạn viết bài bạn nên chèn link và ghi rõ nguồn bài viết được viết từ blog của bạn như vậy kẻ lấy cắp dữ liệu của bạn khi up lên blog của họ thì coi như họ đã chia sẻ bài viết của bạn ==> tăng độ uy tín bài viết trên blog của bạn 

Chúc các bạn thành công.

Thứ Sáu, 11 tháng 12, 2015

Hiển Thị Widget Ở Những Trang Nhất Định Trong Blogspot
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Với thẻ điều kiện if, bạn có thể đưa ra điều kiện để hiển thị một đoạn code, một nội dung nào đó tại trang mà bạn muốn trong blog. Thẻ này cũng giúp cho việc tối ưu Seo.



I. Cú pháp của thẻ điều kiện if

<b:if cond='Điều_kiện'>
Nội dung hiển thị
</b:if>


II. Danh sách các thẻ điều kiện dùng trong blogspot


1. Hiển thị trên trang chủ (HomePage), trang nhãn (Label), trang lưu trữ (Archive)

<b:if cond='data:blog.pageType == "index"'>
// Nội dung hiển thị
</b:if>

2. Hiển thị trên trang bài viết (Post)

<b:if cond='data:blog.pageType == "item"'>
// Nội dung hiển thị
</b:if>

3. Hiển thị trên trang tĩnh (Page).

<b:if cond='data:blog.pageType == "static_page"'>
// Nội dung hiển thị
</b:if>

4. Hiển thị trên trang lưu trữ (Archive)

<b:if cond='data:blog.pageType == "archive"'>
// Nội dung hiển thị
</b:if>

5. Hiển thị trên trang chủ (HomePage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
// Nội dung hiển thị
</b:if>

6. Hiển thị trên một trang URL bất kỳ

<b:if cond='data:blog.url == "PUT_URL_HERE"'>
// Nội dung hiển thị
</b:if>

7. Hiển thị trên trang tĩnh (Page) và trang bài viết (Post)

<b:if cond='data:blog.url == data:post.url'>
// Nội dung hiển thị
</b:if>

8. Hiển thị các nhãn (Label)

<b:if cond='data:blog.searchLabel'>
// Nội dung hiển thị
</b:if>

9. Hiển thị cho nhãn (Label) được chỉ định

<b:if cond='data:blog.searchLabel == &quot;Thủ Thuật Blogger&quot;'>
// Hiển thị nội dung cho nhãn 'Thủ Thuật Blogger'
</b:if>

10. Hiển thị cho bài viết đầu tiên

<b:if cond='data:post.isFirstPost'>
// Nội dung hiển thị
</b:if>

11. Hiển thị trên mobile

<b:if cond='data:blog.isMobile'>
// Nội dung hiển thị
</b:if>

12. Hiển thị khi có Backlink

<b:if cond='data:post.showBacklinks'>
// Nội dung hiển thị
</b:if>

13. Hiển thị với tác giả bài viết

<b:if cond='data:displayname == "DX Oan"'>
// Hiển thị nội dung với tác giả 'DX Oan'
</b:if>

14. Hiển thị trên trang có số comments bằng một giá trị nào đó

<b:if cond='data:post.numComments == 3'>
// Hiển thị nội dung với bài viết có 3 bình luận
</b:if>

<b:if cond='data:post.numComments > 1'>
// Hiển thị nội dung với bài viết có nhiều hơn 1 bình luận
</b:if>

15. Hiển thị trong tất cả các trang khi chức năng comment được kích hoạt

<b:if cond='data:post.allowComments'>
// Nội dung hiển thị
</b:if>

16. Hiển thị trên trang tìm kiếm

<b:if cond='data:blog.searchQuery'>
// Nội dung hiển thị
</b:if>

17. Hiển thị cho kết quả tìm kiếm

<b:if cond='data:blog.searchQuery == &quot;blogger CS78&quot;'>
// Hiển thị nội dung cho kết quả tìm kiếm 'blogger CS78' (http://Chiase78.blogspot.com/search?q=blogger%20CS78)
</b:if>

18. Hiển thị trên các trang lỗi 404

<b:if cond='data:blog.pageType == "error_page"'>
// Nội dung hiển thị
</b:if>

III. Ví dụ minh họa

VD1: Hiển thị đoạn code hay nội dung trên trang bài viết

<b:if cond='data:blog.pageType == "item"'>
Nội dung hiển thị
</b:if>

VD2: Nếu là trang bài viết thì hiển thị nội dung 1, còn không phải thì hiển thị nội dung 2 ( Nghĩa là: Nội dung 1 hiển thị trên trang bài viết, nội dung 2 hiển thị trên các trang còn lại )

<b:if cond='data:blog.pageType == "item"'>
Nội dung 1, nếu điều kiện là đúng
<b:else/>
Nội dung 2, nếu điều kiện trên sai
</b:if>

VD3: Sử dụng kiểu so sánh khác "!="

Nội dung được hiển thị trên tất cả các trang ngoại trừ trang chủ (HomePage)

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Không hiển thị nội dung trên trang chủ
</b:if>
Hiển thị ảnh/icon ngoài trang chủ theo nhãn của bài viết
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Bài viết giúp bạn hiển thị ảnh/icon bạn mong muốn khi bài viết nào có nhãn đó thì mới hiển thị ảnh ra. Cách này giúp các bạn có thể dùng vào nhiều mục đích khác nhau như đánh dấu thủ thuật, đánh dấu template free, premium,...
Trong lúc mày mò RIP template bán hàng thì với 30 phút mình đã mò ra đoạn code này, không biết trên mạng có chưa nhưng mình cũng post để cho anh em nào cũng đang tìm kiếm thủ thuật này có thể tìm được :D - Tìm đến đoạn code <b:includable id='post' var='post'> và thêm code sau dưới nó

CODE HTML HIỂN THỊ ẢNH THEO NHÃN

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;NEW&quot;'>
<div style='width:100px;height:38px;display:inline;position:absolute;margin-top:15px;margin-left:-122px;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8kP-niSjltDJRINXp_hQQijuuB7YGqq6bjZbkeQJF8vRiXk5aqziEuSXznONrbX8VVoADswQvog37oN2FGaIgdh7LMtk43IInR65az0jRHf1vGyRwB0qS3drR_oH2QvU-NLRYSXWa1nr/s1600/terbaru_badge.png'/></div>
</b:if>
</b:loop>
</b:if>

 TRONG ĐÓ

- Thay NEW bằng label mà hình ảnh sẽ hiển thị khi bài đăng trên trang chủ có nhãn này. - Điều chỉnh kích thước và nơi ảnh hiện thị cho phù hợp - Thay https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8kP-niSjltDJRINXp_hQQijuuB7YGqq6bjZbkeQJF8vRiXk5aqziEuSXznONrbX8VVoADswQvog37oN2FGaIgdh7LMtk43IInR65az0jRHf1vGyRwB0qS3drR_oH2QvU-NLRYSXWa1nr/s1600/terbaru_badge.png bằng link ảnh bạn muốn hiển thị.

LƯU Ý:

- Template của bạn phải có Font-awesome - Các đoạn code trên là code hiển thị, ♥Nếu muốn hiển thị ở trang chủ và trang search label thì chèn đoạn code trên vào trong đoạn code <b:if cond='data:blog.pageType == "index"'></b:if> . ♥Nếu muốn hiển thị ở trang bài viết thì chèn  đoạn code trên vào trong đoạn code <b:if cond='data:blog.pageType == "item"'></b:if>
Xóa "Hiển thị các bài đăng có nhãn" cho blogspot
XEM BÀI VIÊT
TOÀN MÀN HÌNH


"Hiển thị các bài đăng có nhãn ... Hiển thị tất cả bài đăng" sẽ xuất hiện trong các template khi các bạn xem một nhãn nào đó. Bạn cảm thấy gò bó và muốn xóa/thay đổi dòng chữ này? Bạn chỉ cần làm theo những hướng dẫn đơn giản sau đây.

XÓA "Hiển thị các bài đăng có nhãn..."

Cách 1:

- Vào Mẫu > Chỉnh sửa HTML
- Dán đoạn code sau vào trên thẻ ]]></b:skin>
.status-msg-wrap {
display: none;
}

- Lưu mẫu và kiểm tra kết quả.

Cách 2:

- Vào Mẫu > Chỉnh sửa HTML
- Ấn Ctrl + F và tìm từ 'top' name - Nếu tìm thấy từ này nằm trong đoạn code như trong khung dưới thì có thể vô hiệu hóa nó bằng cách thêm vào vài ký tự (làm cho đoạn code trở thành vô nghĩa) hoặc xóa hẳn cả dòng code đó đi. 
<b:include data='top' name='status-message'/> 
- Lưu mẫu và kiểm tra kết quả.

THAY ĐỔI "Hiển thị các bài đăng có nhãn..."

- Vào Mẫu > Chỉnh sửa HTML
- Dán đoạn code sau vào trên thẻ ]]></b:skin>
.status-msg-body {    /* Thay đổi kiểu chữ và màu chữ  */
font-family: 'Roboto Condensed', sans-serif;
color: #ff4f00;
text-transform: uppercase;
font-weight: bold;
}
.status-msg-bg { /* Thay đổi màu nền thanh trạng thái */
background-color: #fff;
}
.status-msg-border { /* Thay đổi màu đường viền */
border: 1px #e9d8d9 solid;
}

- Tìm đến thẻ <data:navMessage/>
- Đoạn code đầy đủ như sau 
<div class='status-msg-body'>
<data:navMessage/>
</div>

- Thay <data:navMessage/> bằng đoạn code sau 
<b:if cond='data:blog.searchLabel'>
BẠN ĐANG XEM TẤT CẢ BÀI VIẾT TRONG CHUYÊN MỤC <font color='#ff4f00'><data:blog.searchLabel/></font><b:else/>
<data:navMessage/>
</b:if>

- Lưu mẫu và kiểm tra kết quả.
Thay đổi Backgrounds tùy biến trong mỗi Pages của Blogger
XEM BÀI VIÊT
TOÀN MÀN HÌNH
Backgrounds là một trong những điều quan trọng là thu hút ngày càng nhiều khách truy cập vào blog của bạn. Hầu hết nhiều Blogger chỉ sử dụng 1 Background cho toàn trang Blog, Website của mình, trên nhiều nền Website khác như Wordpress...mình cũng đã thấy nhiều themes có chức năng thay đổi nhiều hình nền này. Blogspot có làm được như thế không? Có đấy bạn, chỉ cần tùy biến 1 đoạn CSS là làm được điều ấy, và hôm nay Forum Bẽo chia sẻ với bạn về cách tùy biến ấy.Thủ thuật liên quan: Hiển thị Widget chỉ ở trang chủ hoặc trang riêng biệt

Bạn xem Demo tại 2 pages bài viết:Ở demo mình chỉ sử dụng màu nền, hướng dẫn sẽ có tùy nến thêm ảnh nền.

Hướng dẫn: Thay đổi Backgrounds tùy biến trong mỗi Pages của Blogger

Bước 1: Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)Bước 2: (Ctrl + F) tìm tới </head> và dán code dưới đây ngay trên nó<b:if cond='data:blog.url == "Link Page của bạn"'> <style> body { background-color:#Mã màu;background-position: center; background-repeat:repeat; background-attachment: fixed; } </style> </b:if>Trong đó: Mã màu HTML bạn có thể tham khảo lấy tại: Bảng mã màu HTML đẹpNếu bạn muốn sử dụng hình ảnh thay cho mã màu thì ta có code<b:if cond='data:blog.url == "Link page của bạn"'> <style> body { background-image:url(Link ảnh nền);background-position: center; background-repeat:repeat; background-attachment: fixed; } </style> </b:if>Còn nữa, nếu bạn muốn nhiều page có hình nền khác nhau thì lặp lại đoạn code trên nhé.Chúc các bạn vui vẻ !
Xóa ký tự đặc biệt sau link URL Website, Blog
XEM BÀI VIÊT
TOÀN MÀN HÌNH
HTML xuất hiện thêm #ký tự lạ. Điều đó xảy ra khi mình chỉnh sửa cái gì?
Chắc hẳn bạn cũng sẽ gặp khá nhiều Website hoặc Blogspot có những ký tự lạ sau cái link. Vậy phải làm sao để xóa nó?
- Trước hết chúng ta hiểu rằng, ký tự ấy xuất hiện khi các bạn sử dụng Widget share, like, G+ của Addthis. 


Để xóa đoạn này các bạn chỉ cần thao tác đơn giản như sau
Vào Source. Đối với Blogger thì vào bảng điều khiển => Mẫu (Template) => Chỉnh sửa HTML(Edit HTML) và tìm tới đoạn: {&quot;data_track_addressbar&quot;:true}
trên nền Web thì chắc nó là đoạn: {"data_track_addressbar":true}
sau đó thay thế true bằng false lưu lại là được.
Chúc các bạn vui vẻ!

Thứ Năm, 10 tháng 12, 2015

Hiệu ứng màu chạy lấp lánh trong chữ
XEM BÀI VIÊT
TOÀN MÀN HÌNH
Hiệu ứng màu chạy lấp lánh trong chữ còn được gọi là neon Text Color. Đây là 1 hiệu ứng khá đẹp thường được dùng trong Website, Blog với những câu chào hoặc giới thiệu làm điểm nhấn.


Thủ thuật blogger hôm nay giới thiêu các bạn cách thêm thủ thuật này với việc sử dụng 1 đoạn mã Javascript khá đơn giản. Điều đáng nói hơn là đoạn Javascipt này thích hợp với cả trình duyệt củ chuối IE6...Hướng dẫn thủ thuật:1. Vào bảng điều khiển blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript/2. Dán đoạn code dưới đây vào tiện ích HTML /Javascript vừa thêm:<style> .neonlight{font-weight:bold; font-family:times; font-size:38px; /*cở chữ*/ } </style> <script language="JavaScript1.2"> var message="Forum Bẽo" //thay thành dòng tin của bạn var neonbasecolor="#000099" //màu của text var neontextcolor="#FFFC17" //màu của hiệu ứng neon 1 var neontextcolor2="#FBB117" //màu của hiệu ứng neon 2 var flashspeed=120 // tốc độ chạy của màu neon 1 và neon 2, số càng nhỏ tốc độ càng nhanh var flashingletters=2 // độ rộng của màu neon 1 var flashingletters2=1 // độ rộng của màu neon 2 var flashpause=0 var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span class="neonlight" id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ if (n==0){ for (m=0;m<message.length;m++) crossref(m).style.color=neonbasecolor } crossref(n).style.color=neontextcolor if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2 if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",flashpause) return }} function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> Trong đó:Forum Bẽo :là đoạn chữ bạn muốn thể hiện.Còn lại những thuộc tính khác mình đã ghi chú ngay ở code. các bạn tùy chỉnh theo ý mình nhé.
noavatar
XEM BÀI VIÊT
TOÀN MÀN HÌNH
Hôm nay mình tiếp tục mang đến cho các bạn một hiệu ứng động được làm từ CSS3, hiệu ứng này đơn giản thôi, nhưng chắc chắn một điều là các bạn sẽ có thể học và hiểu rất nhiều từ việc tạo những hiệu ứng động từ CSS3.
tao-hieu-ung-logo-dong-cuc-hap-dan-voi-css3
HTML
Trước hết, chúng ta sẽ cần khung chuẩn html như sau :
<div class="mrloader">
<div class="inner-loader">
<div class="side"></div>
</div>
</div>
CSS
Sau đó chúng ta sẽ dùng đoạn css sau để tạo logo động :
body{
background-color:#111;
}

.mrloader .inner-loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-perspective: 100px;
perspective: 100px;
}

.mrloader .inner-text {
top: 50%;
}

.mrloader .side {
background: url("https://dl.dropboxusercontent.com/u/88633080/icon-android.png");
height: 100px;
width: 100px;
background-size: cover;
-webkit-animation: rotate-side 3s infinite ease-in-out;
animation: rotate-side 3s infinite ease-in-out;
}

@-webkit-keyframes rotate-side {
0% {
-webkit-transform: rotateX(0deg) rotateY(0deg);
}

40% {
-webkit-transform: rotateX(735deg) rotateY(0deg);
}

47%,50% {
-webkit-transform: rotateX(720deg) rotateY(0deg);
}

90% {
-webkit-transform: rotateX(720deg) rotateY(735deg);
}

97%,100% {
-webkit-transform: rotateX(720deg) rotateY(720deg);
}
}

@keyframes rotate-side {
0% {
transform: rotateX(0deg) rotateY(0deg);
}

40% {
transform: rotateX(735deg) rotateY(0deg);
}

47%,50% {
transform: rotateX(720deg) rotateY(0deg);
}

90% {
transform: rotateX(720deg) rotateY(735deg);
}

97%,100% {
transform: rotateX(720deg) rotateY(720deg);
}
}

Thế là xong, các bạn đã có thể áp dụng vào các logo trên trang web hay blog của các bạn, cũng như tự sáng tạo thêm nhiều hiệu ứng động cho riêng mình.
Hiển thị tên tác giả - ngày đăng - nhãn bên dưới tiêu đề bài viết trong blogger
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Đôi dòng giới thiệu

Đa phần những template có sẵn mà khi bạn download về sẽ có sẵn những mục này nhưng lại không thể theo ý muốn riêng của bạn. Hoặc những template đó thiếu đi những thông tin này, làm cho bài viết có bạn thiếu đi sự chuyên nghiệp cũng như người đọc khó lòng biết được thông tin chung của bài viết.


Ví dụ như ở blog của chúng mình, vốn dĩ có sẵn một <div> chứa những thông tin này nhưng nó lại được đặt dưới cùng của bài viết nhưng tụi mình không thể chỉnh sửa nó theo ý muốn và đôi khi các icon bị lỗi. Lý do là tác giả template này đã khéo léo chèn một đoạn code phức tạp khiến cho mình không thể sửa nó. Nhằm khắc phục nhược điểm này, mình cố tình ẩn đi thẻ này và làm một thẻ mới mà khi đó mình có thể tự do chỉnh sửa. Cách làm tham khảo từ trang thủ thuật blogger nổi tiếng - Help Blogger.

Cách làm

1 Từ Blogger Dashboard > Template > Edit HTML

2 Bạn để con trỏ chuột trong trình chỉnh sửa HTML, sau đó nhấn tổ hợp phím Ctrl+Fđể tiến hành tìm kiếm dòng lệnh sau:
div class='post-header-line-1'
Nếu không tìm thấy, hãy thử dòng lệnh sau:
div class='post-header'
Tuy nhiên có thể bạn tìm được một trong hai dòng lệnh trên và tiếp tục làm bước 3 vẫn không thành công thì hãy tìm đến dòng lệnh sau:
data:post.body
3 Nếu bạn đang áp dụng với hai dòng lệnh đầu của bước 2 thì dán đọan code sau đây vào SAU cái thẻ mà bạn tìm được:
<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;">
   <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQlu04tjDryK0Np6JhhNqi70VQ_IUQRat1aYCemYcKdomLxRtiQTHfEPOihfehtVZ0nz9QoouijbAfqSrNFpzp64ETfJONIogNVE1eMaRHHnCfPBxWnhUWSPsl9JBwMoCFPS7ZWG9mv2JO/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> |  
   <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfcw6TwmiPDI492zIjd1hOCh-mLmQrtoo0xUHeTGH86GVl_EIMg4WhenqxAO8ER-vLMW13cjJDsrxs3hLHsIJjqxDDPesGEOb7LJY6Q5KPv02PaEZARLxsa-gbUw65GDSWUSgYPG4VRya/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> |  
   <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJi20mAQahWtE4kqGweuW7VcSsKI5YWnPi5YZBd8TbHMRETKeQekx0h_yh_nnR0oMlAmlGSXuXKa-VWTQqBLXmxVjBKfjdiDxwzNZg_eATar-IKuQTL_CAROD58Y35iseyX4PCdoeU_y6u/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<span class='post-comment-link' style='Float:right;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq0f5QLj_IZcKFhZveJX30FHUj-3Ldz48prf7EkZVIC4PjmAfCZyhfFpfSJFmKQbIhbqHJpZzfnDRLucqU9O2bKSmvLpSq1B02_lMGO4OETxjQus3M-qluh2Uc_atbhL96jRP19EE88vna/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
</b:if>
</b:if>
</span></div>
Nếu bạn áp dụng với dòng lệnh thứ 3 trong bước 2 thì dán đoạn code ở trên vào
  • TRƯỚC nó nếu bạn muốn hiện thanh thông tin ở ngay dưới tiêu đề bài đăng.
  • SAU nó nếu bạn muốn hiện thanh thông tin này ở cuối bài viết.
[New] Lưy ý quan trọng:
  • Lúc tìm kiếm có thể bạn sẽ tìm được NHIỀU kết quả. Khi ấy hãy THỬ với TẤT CẢ các kết quả tìm được. Cái này được thì OK, không thì xoá và thử với cái khác.
  • Bạn lưu ý, từ khoá mình nêu ở trên là giúp bạn copy paste để tìm dễ hơn. Mình nói "dán vào sau nó" có nghĩa là vào sau CÁI THẺ chứa nó. Ví dụ bạn tìm được "data:post.body" thì dán vào sau nó có nghĩa là dán vào sau thẻ "<data:post.body />". Đại loại như vậy.
  • Nếu bạn tìm không có từ khoá, hãy thử với một phần trong từ khoá ở trên thôi, đừng copy hết. Ví dụ thay vì tìm "div class='post-header-line-1'", hãy thử chỉ tìm với "post-header-line" thôi.

Chỉnh sửa theo ý muốn

Bạn để ý trong đoạn code ở bước 3 có nhiều cái style để bạn có thể tự chỉnh sửa, ở đây mình liệt kê một số cái:
  • Các link hình (http://.../author.png, http://.../clock.png, http://.../folder.png) bạn thay bằng link hình của chính blog mình vào. Điều này để tránh trường hợp sau này mấy hình này hết băng thông cũng không ảnh hưởng đến blog của bạn.
  • Kích thước chữ (font-size: 13px;) bạn thay bằng kích thước chữ sao cho phù hợp với giao diện blog của bạn.
  • Lằn gạch ngang (boder-bottom: 1px ...) bạn thay bằng 0 nếu không muốn hiện lằn này.
  • Các thuộc tính trong thẻ div như margin, padding bạn cũng có thể tùy chỉnh để cho khoảng cách giữa hàng thông tin này với bài viết cũng như tiêu đề bài viết sao cho đẹp mắt nhất.
[Update] Nếu bạn muốn thêm liên kết ở tên tác giả, bạn hãy thay dòng <font>...</font>chứa thông tin tác giả bởi đoạn code sau
<font style='background:transparent url(https://lh5.googleusercontent.com/-epgpS7llSlk/U-4mmbvKJ-I/AAAAAAAAHHE/eVJ8H1Hz25I/s16-no/author.png) no-repeat scroll top left;padding-left:25px;font-size:13px;'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span> </a>
</font>