Hiển thị các bài đăng có nhãn Thủ Thuật Blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Thủ Thuật Blogspot. Hiển thị tất cả bài đăng

Thứ Hai, 29 tháng 7, 2013

Hướng dẫn tạo form liên hệ cho Blog

CÁCH LÀM:
Để có code cơ sở cho Form liên hệ các bạn vào đây  rồi làm như các hình dưới:


Chú ý: các bạn thay đổi dòng Background Color(màu nền của form);Font color(màu chữ);Font(font chữ);Font size(kích thước chữ) theo ý muốn của mình.Sau đó là điền địa chỉ email của bạn vào ô your email address.Cuối cùng các bạn nhấn vào Create Formular để tạo.



     Để dùng được Form liên hệ câc bạn làm như sau:
Cách 1- Tạo một Widget (tiện ích) trong Blog của mình với nội dung là code cở sở  hay là code đã được cá nhân hóa (cách đơn giản nhất)
Nhược điểm của dùng trực tiếp Widget làm Form liên hệ luôn là nó nằm chiếm chỗ luôn trên Blog trông không đẹp và không được bắt mắt lắm !
Cách 2- Tạo một trang riêng cho blog của mình như bài hướng dẫn ở đây 
   Cách này là cách tôi đã làm. Cách này Form liên hệ  được mở ra ở một cửa sổ mới độc lập với Blog của ta. Cách này có vẻ "Pro" hơn,
Tôi chia sẽ để các bạn cùng làm cho mình một  Form liên hệ  để độc giả của mình có thể gửi tin nhắn trao đổi với mình trực tiếp ngay trên Blog nhé (không phải độc giả nào cũng quen biết để có hộp thư của mình mà gửi, phải không ?)
   Còn đây là form liên hệ mình đã tạo,các bạn có thể sử dụng tùy thích
<!-- Do not change the code! -->
<a href="http://www.foxyform.com/" id="foxyform_embed_link_453904">foxyform</a>
<script type="text/javascript">
(function(d, t){
   var g = d.createElement(t),
       s = d.getElementsByTagName(t)[0];
   g.src = "http://www.foxyform.com/js.php?id=453904&sec_hash=c87d50da7dc&width=350px";
   s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
<!-- Do not change the code! -->
Chúc các bạn thành công!

Hướng dẫn tạo thêm Trang cho blogger

Trang giúp bạn thêm các mục như liên hệ, đăng ký hay hướng dẫn, giúp độc giả dễ dàng tiếp cận với các dịch vụ trên blog bạn.
Tạo một Trang mới
B1. Đăng nhập vào tài khoản Blogger
B2. Vào Trang (Trang)
B3. Chọn Trang mới => Trang trống


4. Bạn nhập tiêu đề cho trang và tạo bài viết vào khung bên dưới, hoàn thành bấm xuất bản trang.
- Như vậy bạn đã tạo được một trang cho blog. Bạn cũng có thể chỉnh sửa hoặc xóa trang mình muốn.
- Bạn có thể thay đổi vị trí các trang bằng cách bấm và kéo thả!
- Bạn có thể di chuyển các trang theo hình dọc hoặc ngang trên Blog bằng cách tại mục Hiển thị trang dưới dạng bạn chọn hình thức hiển thị. Bạn cần bật hiển thị lên thì trong bố cục mới hiển thị trang của bạn

Chỉnh sửa hiển thị các Trang ra trang chủ
1. Đăng nhập vào Blogger => Bố cục (Layout)
2. Trong phần bố cục đã hiển thị các Trang bạn tạo ở trên bạn có thể thay đổi vị trí Trang bằng cách kéo Trang đến nơi bạn muốn đặt hoặc ẩn/hiển trang bằng cách bấm vào chỉnh sửa của thẻ trang để thay đổi
- Bạn có thể chọn các nhãn bạn muốn hiển thị cho mọi người thấy khi vào web của bạn.
- Nếu bạn để các trang theo chiều ngang trên Blog sẽ tạo cho Blog giống như các trang Web, bạn cũng có thể thay đổi màu của Tab bằng cách vào Mẫu (Template) => Tùy chỉnh => Tại đây bạn có thể thay đổi màu của chữ, màu của Tab để phù hợp hơn với Blog của mình.

Thứ Năm, 25 tháng 7, 2013

10 cách để website thường trực trên công cụ tìm kiếm

Bí quyết để website thường trực trên công cụ tìm kiếm

10 cách giúp website của bạn thường trực trong danh sách kết quả tìm kiếm của Search Engine
Dưới đây là 10 cách có thể giúp website của bạn không chỉ thường xuyên có tên trong danh mục kết quả tìm kiếm mà thậm chí còn được liệt kê ở vị trí trong tốp danh sách dẫn đầu.

Không cách nào được đánh giá cao hơn so với những phương pháp khác mà tốt nhất chúng ta cùng kết hợp để có thể thu được kết quả cao hơn.


1. Hãy là người đi tiên phong đăng ký URL của website tại các nhà cung cấp dịch vụ tìm kiếm


Cách thức kinh doanh của các hãng cung cấp công cụ tìm kiếm tương tự như hình thức quảng cáo có sử dụng xuất bản định kỳ: Tập hợp các nội dung chắt lọc để thu hút người xem, rồi sau đó bán nó cho các nhà đi quảng cáo. Rõ ràng là các công cụ tìm kiếm nên để các nhà thiết kế nội dung đệ trình URL, bởi làm vậy sẽ tăng cường thêm giá trị của việc thu thập các trang chủ của công cụ tìm kiếm, việc này giúp cho trang công cụ tìm kiếm có thêm được một thành viên mới trong hộ khẩu của mình và rồi họ sẽ dễ dàng bán được quảng cáo.

Đối với các công ty qui mô nhỏ, việc đi tiên phong gửi đăng ký URL của một vài website là một quá trình khá dễ dàng, chỉ đơn giản là nhắp chuột vào nút “gửi đường link URL”. Những đường link như trên có thể dễ dàng tìm thấy ở một dạng hình thái hay site khác của các công cụ tìm kiếm thông dụng.

Lưu ý, hãy cảnh giác với những website tuyên bố ba hoa rằng họ có thể gửi URL của bạn tới hàng trăm nhà cung cấp công cụ tìm kiếm. Trên thực tế, hiện có chưa đầy 10 nhà cung cấp công cụ tìm kiếm có tiếng mà bạn có thể tin tưởng như yahoo.comgoogle.com, ở Việt Nam có vinaseek.com hoặc panvietnam.com.

2. Thứ hạng tỉ lệ thuận với mức chi phí

Trên thực tế, có những lý do có cơ sở để bạn có thể bỏ tiền đầu tư vào khoản quảng cáo website của mình trên các site cung cấp dịch vụ tìm kiếm. Dennis Buchheim – giám đốc phụ trách nguồn thu tài chính của trụ sở chính hãng Inktomi tại Sunnyvale, California giải thích rằng những khoản phải đóng góp sẽ giúp cho khách hàng được ưu tiên hơn về thứ hạng trong việc hiển thị danh sách kết quả tìm kiếm, không những thế, họ còn cam đoan chắc chắn rằng doanh nghiệp của bạn sẽ nằm trong danh sách kết quả tìm kiếm theo thuật toán. Và tất nhiên, khoản chi phí bạn đóng góp càng cao thì độ ưu tiên cho website của bạn càng cao. Thường thì các nhà cung cấp dịch vụ tìm kiếm đưa ra các mức giá khác nhau cho từng thứ hạng ưu tiên khác nhau.

Ví dụ, dịch vụ trên cho phép một khách truy cập có thể nhận được các báo cáo bao gồm thông tin về các từ khoá được những người tìm kiếm đưa ra. Nếu như website của bạn được ưu tiên hiển thị ra một trong số những trang liệt kê kết quả tìm kiếm đầu tiên thì xác suất người tìm kiếm thông tin click chuột vào địa chỉ đường links của website là rất cao. Thông tin này rất đáng giá bởi nó cho phép các chủ nhân của các website điều chỉnh mức chi phí đóng góp để nâng hoặc giảm vị trí của website trong bảng thứ tự xếp hạng của nhà cung cấp dịch vụ tìm kiếm.

3. Biến đổi nội dung để lọt vào phần mềm lọc thông tin và liệt kê

Các chương trình phần mềm liệt kê kết quả tìm kiếm, có tên hiệu “con nhện” (spiderbot), phản hồi cách chúng lướt qua các trang web ra sao, ghi lại một số thông tin, diện mạo của từng trang, trong đó có cả text. Trong bản ghi, danh sách các thông tin được tạo ra và liệt kê lại, “con nhện” nhận dạng tần số của các từ đặc thù trong một trang và đây sẽ là một phần của thuật toán phức tạp tính giá trị của trang, và sau cùng là xếp hạng.

Con nhện” có thể sẽ làm việc theo cách như sau: Nếu như một trang có từ “Internet” được lặp lại 4 lần và ở trang khác cũng có 12 từ “Internet”, thêm nữa cả hai trang đều có từ “Internet” trong thẻ meta và phần tiêu đề trang thì trang thứ hai sẽ được xếp lên vị trí cao hơn. Thuật toán “con nhện” cũng tính toán và xếp hạng những từ được ghép với từ khác, ví dụ như từ “ôtô”, “phụ tùng ôtô”, “ôtô con”…của trang web một công ty bán ôtô.

Vì vậy, để trang web của bạn có độ ưu tiên cao trong bảng xếp hạng bạn hãy chèn thêm các từ khoá thông dụng và phổ biến. Ví dụ, tên công ty của bạn là Hồng Hà, hoạt động trong lĩnh vực thủ công mỹ nghệ, khi làm trang web, phần trang chủ cũng như các trang trong bạn nên chèn thẻ meta có dạng text như: "handicraft, fineart, hongha handicraft, hongha-fineart"…. Như thế, phần mềm đọc và xếp hạng của các trang công cụ tìm kiếm sẽ tìm đến trang web của bạn dễ hơn.

Trên thực tế, có rất nhiều webmaster đã chèn thêm vô tội vạ những từ không liên quan tới lĩnh vực cũng như nội dung thông tin trang cung cấp để giành lấy cơ hội có được thứ hạng cao trong bảng xếp hạng liệt kê kết quả tìm kiếm của các search engine. Một số tác giả của những trang web khác còn quỉ quyệt hơn, họ chèn hàng trăm, hàng nghìn từ khoá để font chữ trắng trên nền trang web màu trắng ở cuối trang, hoặc chữ cùng màu với màu nền để đọc giả không thể nhận biết được. Người truy cập sẽ không nhìn thấy gì, “con nhện” thì bị “mù màu”, và biện pháp này đã qua mắt được các phần mềm tìm kiếm theo từ khoá của các search engine.

Bên cạnh phương pháp lọc tìm theo từ ngữ dạng text, “con nhện” còn xếp hạng trang web theo dạng mã HTML, các file ảnh và audio. Vì vậy, khi đặt tên cho ảnh bạn cũng nên chọn những tên thông dụng và phổ biến. Ví dụ, bạn xây dựng trang web bán ôtô, những ảnh được dùng cho trang bạn nên đặt là car1.jpgcar.jpg, không nên đặt là anh.jpganh1.jpg.

4. Hãy nhớ rằng: "Tiêu đề trang (Page Title) là yếu tố sống còn"

Tiêu đề trang thường bị mọi người nhầm lẫn với tên của trang web. Để tránh tình trạng này, bạn nên biết rằng tên của trang tương đương với tên của file, ví dụ: "i.e., abcdefg.htm" - ngược lại tiêu đề trang là một hoặc nhiều từ được hiển thị trên thanh tiêu đề của trình duyệt web. Tiêu đề trang phải được đặt thật cẩn thận. AltaVista gợi ý đó là phần mà những người sử dụng công cụ tìm kiếm nhìn thấy trước tiên khi họ nhìn lướt qua danh sách liệt kê kết quả tìm kiếm, và Buchheim của Inktomi lưu ý rằng yếu tố này vẫn chưa đủ để trang web của bạn được xếp hạng cao tại search engine. “Tiêu đề phải được đặt hấp dẫn để có thể thu hút người đọc nhấp chuột. Bên cạnh những từ ngữ lôi cuốn của tiêu đề thì những từ ngữ miêu tả đi kèm cũng phải hấp dẫn”.

Cũng cần phải cân nhắc rằng có nhiều trang cỡ lớn và trung bình hợp thành chưa đầy ảnh, flash, khung và các tính năng khác mà “con nhện” không dễ gì nhận dạng được. AltaVista cho rằng tiêu đề trang thậm chí có tầm quan trọng hơn một trang cá biệt (ví dụ trang có khung) có ít nội dung dạng text.

5. Chú tâm tới thẻ meta của bạn

Có một vài loại thẻ meta, tuy nhiên đứng trên quan điểm của người quản lý thì chỉ có 2 loại chính: thẻ meta miêu tả và thẻ meta từ khoá.

Thẻ meta miêu tả là những cụm từ, câu văn được soạn cẩn thận, có thể được xuất hiện dưới phần tiêu đề trang khi hiển thị trong danh sách kết quả tìm kiếm. Bởi sức hấp dẫn của những từ ngữ có thể định đoạt việc khách hàng tìm kiếm thông tin có nhắp chuột vào đường link website của bạn hay không. Việc nghĩ ra những từ ngữ dạng text hấp dẫn vô cùng quan trọng. Một số webmasters làm những trang web cho những công ty có sản phẩm tiêu dùng cạnh tranh cao thuê các nhà tư vấn viết thẻ meta miêu tả với hy vọng đọc giả sẽ bị lôi kéo viếng thăm website của công ty.

Thẻ meta từ khoá chứa những từ khoá và cụm từ mà các webmasters đặt vào mã nền tại vị trí đầu trang web. Vào cuối thập niên 1990, “con nhện” thường sử dụng loại thẻ này - chúng được đặt tại phần đầu trang HTML ở phần đầu mỗi trang web.

Tuy nhiên, có khá nhiều tác giả các trang web trình bày sai nội dung website của họ bằng việc chèn thêm những từ khoá giả mạo nên việc sử dụng các thẻ từ khoá meta bây giờ không còn vai trò quan trọng trong việc xác định giá trị và sắp xếp thứ hạng. Ông Buchheim của Inktomi cho biết giờ dịch vụ tìm kiếm thông tin của công ty ít chú trọng tới thẻ meta từ khoá, mà đề cao các yếu tổ bổ xung khác như tiêu đề và số đường link. Tương tự, www.webrankinfo.comkhuyên Google không nên tiếp tục duy trì phương thức tìm kiếm dựa vào thẻ meta từ khoá. Cùng với Google, một số search engine khác như AOL Search cũng không sử dụng phần mềm sử dụng thuật toán tìm kiếm dựa vào thẻ meta từ khoá.

6. Thiết lập các đường link 2 chiều

Chất lượng và số lượng website liên kết tới website của bạn có ảnh hưởng tới thứ hạng tại các search engines”, theo lời ông Detlev Johnson – một chuyên gia nổi tiếng đánh giá các search engine. Ông Johnson lưu ý rằng, quá trình thu thập các đường link không đơn giản như việc thuyết phục một số lượng lớn các website liên kết tới website của bạn. Những website này phải có chất lượng cao bởi thế trang được tìm đến được search engines coi là “quan trọng”.

Việc thuyết phục các website chất lượng cao liên kết tới site của bạn cũng có nghĩa mọi người sẽ có thể tìm thấy website của bạn mà không cần phải nhờ đến search engine. Đây là một lợi thế bởi mục tiêu chủ đạo của bạn là muốn mọi người biết đến website của mình - được xếp ở thứ hạng cao trong search engine không phải là cách duy nhất để site của bạn được mọi người biết đến.

Quá trình thuyết phục các website khác đặt đường link liên kết tới một domain mới sẽ gặp nhiều khó khăn. Tuy nhiên, nếu bạn có lý do chính đáng và thuyết phục để có được các đường link tới URL của bạn thì cơ hội thành công sẽ cao hơn. Đơn giản hơn là việc “có đi có lại”, bạn cũng sẽ đặt đường liên kết tới các website khác mà bạn muốn nhờ đặt đường link tới site của bạn.

Việc có được các đường link “khứ hồi” cũng sẽ giúp cho bạn có được mối quan hệ khách hàng mật thiết: Các công ty có thể đưa yêu cầu rằng các khách hàng có website sẽ đặt đường liên kết tới website của họ. Hơn nữa, nếu bạn có mối quan hệ với hiệp hội công nghiệp hay phòng thương mại thì bạn có thể đề nghị các tổ chức này đặt đường link trên website của họ liên kết tới domain của công ty bạn. Các đường link từ các site của khách hàng và các tổ chức, bạn ngành sẽ được ưu đãi trong việc tính thứ hạng của website.

Để biết xem trang web của bạn đã được liên kết tới các website khác hay chưa, hãy gõ dòng chữ “link:www.tênmiềncôngtybạn.com” vào trang cung cấp dịch vụ tìm kiếm. Ở trang hiển thị kết quả, nhà cung cấp công cụ tìm kiếm sẽ liệt kê tất cả các website có đặt đường link tới URL của bạn. Nhiều trang trong số đó có thể là những đường link nội bộ (từ website của bạn), tuy nhiên bạn cũng sẽ phải ngạc nhiên vì có nhiều website khác cũng có đường liên kết tới website của bạn. Quá trình kiểm tra này về cơ bản bạn nên thường xuyên tiến hành. Nếu như các website được liệt kê có chất lượng cao, bạn nên liên hệ với họ để “trả ơn”, và tiếp đến là thiết lập mối quan hệ “hai chiều”, trao đổi, thiết lập đường link trên 2 website để tăng thứ hạng của bạn trong lần lướt tiếp theo của “con nhện”.

7. Tập trung vào sự trao đổi lẫn nhau

Những đường link 2 chiều thường được các search engines đánh giá cao hơn những đường link một chiều, không tương hỗ lẫn nhau. Một điều mà các nhà quản lý cần cân nhắc là khoảng thời gian yêu cầu để liên hệ với các cơ quan tổ chức khác nhau, đặt vấn đề thiết lập mối quan hệ trao đổi lẫn nhau.

Ví dụ, có thể mất một vài ngày hoặc một vài tuần mới thiết lập được một mối quan hệ tương tác, và tất nhiên bạn phải gọi nhiều cuộc điện thoại cũng như gửi nhiều bức thư điện tử để liên hệ và trao đổi công việc. Bởi vì có thể hiệu rộng rằng việc thiết lập các đường link qua lại là việc tiêu tốn thời gian và bao hàm một số mức độ của mối quan hệ giữa đôi bên, các search engines định giá trị cao các đường link như vậy hơn là các đường liên kết một chiều thuần tuý.

Nếu như bạn không biết rõ về các công ty kinh doanh trực tuyến mà bạn có thể đối thoại, có lẽ bạn nên xem xét bàn luận về vấn đề thanh toán cho dịch vụ trao đổi đường link và các trang cung cấp dịch vụ danh bạ đường link. Có một số người coi việc trao đổi đường link là hữu ích nhưng cũng có những đối tượng có suy nghĩ theo chiều ngược lại.

Michael Wong của website www.mikes-marketing-tools.com cảnh báo rằng: “Đừng bao giờ sử dụng những đường link từ những website trao đổi đường link và các trang cung cấp dịch vụ danh bạ đường link”. Theo kinh nghiệm của Wong: “các trang cung cấp dịch vụ danh bạ đường link ở một hoặc nhiều website thường có thiên hướng cập nhật thêm số lượng đường link tới các trang và website khác. Trong khi đó, các search engines hàng đầu coi các đường link như vậy là spam, bởi vậy không nên quá chú trọng vào những đường link kiểu như vậy”.

Glick - một quan chức của trang tìm kiếm AltaVista xác nhận rằng những đường link từ những trang cung cấp dịch vụ danh bạ đường link thường bị coi là spam, và nếu như website sử dụng những đường link như vậy một cách thái quá thì có thể tất cả sẽ bị đánh tụt hậu trong danh sách xếp hạng của AltaVista.

8. Đánh giá quãng thời gian tồn tại

Nếu bạn muốn một trang web thông thường được xếp hạng cao trong danh sách kết quả tìm kiếm, điều đó có thể được nếu như trang đó được post lên website và tồn tại một quãng thời gian đủ lâu để các search engines có tiếng tăm lọc được và chọn lên hàng đầu. Khối lượng và tính phức tạp của nội dung website đang tăng với tốc độ nhanh hơn tốc độ mà các “con nhện” của các search engine có thể phân loại và liệt kê. Vì vậy, một tiêu chí để các search engine đánh giá website là quãng thời gian mà trang tồn tại trong thế giới internet. Những trang tồn tại được 1 năm hoặc hai năm trở nên luôn được tốp 10 search engine hàng đầu thế giới “tìm thấy”, và vì thế những trang web mới được upload cách đây một vài tuần cũng sẽ được hưởng lợi theo.

9. Cập nhật thường xuyên

Đối với những kết quả liệt kê bao gồm đoạn thuyết minh mang tính nhân văn về nội dung của website, thường xuyên cập nhật thông tin được mọi người đánh giá cao hơn những website tĩnh, không có sự thay đổi về nội dung. Tuy nhiên, kết quả tìm kiếm sẽ bị vuột mất nếu thuật toán tìm kiếm không tính đến thông tin và ngày cập nhất cuối cùng trong bảng ghi điểm xếp hạng. Bởi vậy, khi cập nhật website của bạn thường xuyên mà quên lưu tâm tới 9 điều khác liệt kê trong bài này thì bạn sẽ lãng phí thời gian, website của bạn sẽ không được tính đến bởi bất kỳ thuật toán tìm kiếm xếp hạng nào. Mặt khác, khi update một trang nên tạo các đường link và chèn thêm các từ khoá để trang của bạn sẽ được cộng dồn giá trị trong việc xếp hạng website.

10. Tạo các url "thân thiện" với các search engines

Thông thường các url của các trang web động (dynamic content - trang web có nội dung động được lưu trong CSDL và được quản lý bằng một hệ thống quản trị nội dung) sẽ chứa các ký tự đặc biệt như "?" hoặc "&" trong quá trình website hoạt động. Nhưng tiếc là các trang web động này thường bị các công cụ tìm kiếm bỏ qua hoặc xếp vào hạng đợi để đánh chỉ mục (index) rất chậm vì nhiều lý do kỹ thuật. Vậy, cần tạo ra các url trong website mà không chứa các ký tự "?" và "&" để các search engine có thể dò tìm và đánh chỉ mục một cách nhanh chóng.

Do đó, một số webmaster đã "làm mẹo" bằng cách tạo các trang web tĩnh theo chủ đề để hạn chế vấn đề này. Lấy ví dụ trường hợp bạn bán nhiều loại thiết bị điện tử để bàn và cầm tay. Bằng cách tạo một trang web tĩnh (một trang web “bình thường” không được tạo từ cơ sở dữ liệu) cho thiết bị để bàn và một trang khác cho thiết bị cầm tay, webmaster có thể sử dụng các từ khóa quan trọng trên các trang này và vẫn kết nối đến các trang động để trưng bày từng sản phẩm. Công cụ tìm kiếm không hiểu được các trang động nhưng sẽ hiểu được trang tĩnh theo chủ đề mô tả và kết nối đến hàng loạt sản phẩm khác nhau.

Tuy vậy, đây là cách làm tốn sức và "không thông minh". Với các thành phần đưa thêm vào máy chủ web, webmaster có thể tạo ra các trang web động mà không chứa các ký tự "?" và "&" thông qua phương pháp được gọi là "viết lại đường dẫn" (url rewrite). Với phương pháp này, các nội dung động vẫn được quản lý và hiển thị một cách nhanh chóng đồng thời lại "thân thiện" với các search engines, và điều đó tạo điều kiện cho các search engines đánh chỉ mục rất sâu vào website, mang đến khả năng website có thể xuất hiện tốt tại các kết quả tìm kiếm (vì nội dung được đánh chỉ mục nhiều và sớm).
quangcaogoogles.com

Thứ Tư, 24 tháng 7, 2013

Magazine recent post trang trí homepage

Magazine recent post trang trí homepage cho blogspot V3

Magazine recent post for homepage v3 blogspot
Bấm vào hình để xem ảnh với kích thước gốc
Hôm nay mình giới thiệu cho ccs bạn cách thiết kế giao diện trang chủ của bạn theo phong cách báo trí (magazine) cho blogspot của bạn. Blog của bạn sẽ chuyên nghiệp hơn ves 2 với các mục bài viết mới nhất và bài viết hiển thị theo nhãn (label) mà bạn muốn hiển thị. Chỉ với 1 file Javarscript dùng chung cho tất cả.


»Một số đặc điểm nổi bật của Recent post hompage Magazine ves 3?

- Giao diện đẹp, bắt mắt. cải tiến hơn so với ves2
- Khả năng tùy biến cao thông qua CSS.
- Sử dụng 1 file javascripts duy nhất cho tất cả các nhãn nhằm hạn chế ảnh hưởng tới tốc độ load của blog khi sử dụng scripts.
- Thêm thanh menu cho phần  nhãn theo các chuyên mục khá đẹp.

Hãy xem demo hoặc ảnh minh họa bên cạnh để thấy rõ hơn nha.:


» Thêm Magazine Recent post home page

1- Đăng nhập vào blog
2- Chọn mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn mã bên dưới vào trước thẻ </head>.
<b:if cond='data:blog.url == data:blog.homepageUrl'>      
<script type="text/javascript">
//<![CDATA[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
//]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
<style type='text/css'>
#blog1{display:none}
</style>
</b:if>
5- Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin> .
/* ------ main home -- namkna blog ------ */
.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1,.box2{background:#fff;border:1px solid #ddd}
.box1{overflow:hidden;}
.box1-left{width:380px; float:left; height:390px; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:280px; width:380px;}
.box1-right{height:45px; width:240px; float:right; line-height:18px; padding: 10px}
.box2-right:hover, .box1-right:hover {background:#3B5998}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:45px; width:72px; margin-right:10px}
.box2{margin-top:20px; overflow:hidden; }
.box2-left{width:390px; float:left; height:150px; padding:5px}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:30px; width:250px; float:right; line-height:15px; padding:5px}
.box2-right img {float:left; height:30px; width:48px; margin-right:5px}
.box1-left-info, .box2-left-info{ text-align:justify;}
.box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;}
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}
- Phần này mình để độ rộng của khung là 680px. Nếu độc rộng blog của bạn khác bạn sẽ phải chỉnh lại toàn bộ code để cho phù hợp nha. Bạn có thể tham khảo thuộc tính bên dưới:
  • width:680px độ rộng của cả khung. 
  • width:380px độ rộng khuing bên trái của ô bài viết mới nhất cho cả blog.
  • height:390px độ cao của khung bên trái ô bài viết mới nhất cho cả blog.
  •  height:280px; width:380px; Độ cao và độ rộng của ảnh thumbnail bên phải ô bài viết mới nhất cho cả blog.
  • height:45px; width:240px; độ cao và độ rộng của mục bài viết cột bên phải  ô bài viết mới nhất cho cả blog.
  • height:45px; width:72px; Độ cao và độ rộng của ảnh thumbnail bên trái  ô bài viết mới nhất cho cả blog.
6- Tìm đoạn mã bài viết như bên dưới (Mẹo: Tìm với từ khóa Blog1):
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
- Chèn vào sau nó đoạn code sau:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='boxhome'>

<div class='box1'>
<script src='/feeds/posts/default?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Magazine Template</a></li>
<li><a href='#'>Shopping Template</a></li>
<li><a href='#'>Movie Tempalte</a></li>
</ul>
<script src='/feeds/posts/default/-/Label1?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>CSS - HTML</a></li>
<li><a href='#'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-/Label2?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

<div class='box2'>
<ul class='menu-rp-namkna'>
<li><a href='#'>Thủ Thuật Blog</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>CSS - HTML</a></li>
<li><a href='#'>Tổng Hợp</a></li>
</ul>
<script src='/feeds/posts/default/-/Label3?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

</div>
</b:if>
Trong đó:
  • Thay Label1Label2Label3 thành tên nhãn mà bạn muốn hiển thị. Lưu ý là tên nhãn phải chính xác cả dấu cách và các chữ in hoa hoặc in thường nếu sử dụng trong tên nhãn nha.
  • max-results=5 là số bài hiển thị ở cột bên trái của phần nhãn.
  • max-results=7 là số bài hiển thị ở cột bên phải mục bài viết mới nhất.,

» Cập nhật.

Mình cung cấp thêm cho các bạn một giao diện khác của tiện ích này bằng cách thay đoạn code ở bước 5 bằng đoạn code này:
Ảnh minh họa: Bấm vào hình để xem ảnh gốc nha.
Magazine recent post trang trí homepage cho blogspot V3

.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:0px;}
.box2{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:380px;border-right: #ABABAB 1px dashed; padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px; height:250px; width:300px}
.box1-right{height:50px; width:330px; float:right; padding:9px;line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#6CD0DD}
.box1-right a {padding:-5px 0px;margin:-5px 0px}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:50px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px;}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px; height:100px; width:160px;float:left}
.box2-right{height:35px; width:285px; float:right; border-left:#ABABAB 1px dashed; border-bottom:#ABABAB 1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:35px; width:48px; margin-right:5px}
.box1-left-info{ text-align:justify;}
.box2-left-info{height:170px; text-align:justify;margin:10px 0px 0px 0px; padding:10px 0px 0px 0px}
.box3{margin-bottom:10px; width:640px;}
.box1-googlesearch{width:650px;float:left}
.box1 img, .box2 img {box-shadow: 0.5px 0.5px 0.5px 0.5px #EEE;border-radius:4px;max-width: 600px; }
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: &quot;&quot;; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}
- Chúc thành công!

Slider bài mới nhất trượt ngang với thumbnail

Slider bài mới nhất trượt ngang với thumbnail cho blogger

Hôm nay namkna sẽ hướng dẫn các bạn cách tạo một tiện ích mang phong cách của tiện ích bài viết mới nhất (recent post) nhưng hiển thị dưới dạng một slider trượt ngang với các ảnh thumbnail và tiêu đề bài viết. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery. Tiện ích được phát triển bởi maskolis.
[Ves1] Slider bài mới nhất trượt ngang với thumbnail cho blogger

VIEW DEMO

¤ Slider bài mới nhất trượt ngang với thumbnail cho blogger!

1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin>
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1IRbppoIO3QeO3ylV5fuaHTDrOMkoxcONDDNhSD8aFkq8kjHZ-BTb5Bu6gJNTSv73O7HuMQ__AiQywolElq3pLFkb3zTY9DruMpFE4dguCoqlNQyuY82AOMjmCvQhcHz5CZTLhCEaXoI/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrmnSeu3IoJmeXipnZbdRl_G3sl9R5m0deZ3R4MPKNUwvaCcBSUZlt2nPwz10jsQENZVLZFy-POYzXGWGX-75nuDKXL_2sGzoJ_zc_oFSIs5Ysw5DB9g80NXdgLDn1J4MZQs7P_DqDT4/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2rBd8FdzvoTB1xDNElUug5cea7e4oF3oeV7v2vxaPZ5j7JHl-k4W_hODCLcAulhyphenhyphenz6q0ENM7AyyPq0r0Lo2j3a2rnDO3QJHDIViMgRMehDvAHKmPRyVzpPvdPIqjcBSw0DX-k1zHD1K0/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaU54ElPv4sNwgcjhQX1-gjfqjnFMwZ5f6QpiEwCozzw4aIkYWsJDs5AzilsZriCwn8s85Pu7xy5mzFKaGdFBi-TtSoIrN3cKChLHeyGfUh0qd0eiZ9F255uHCCRLn91-7w9sueEhDu70/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsohjYdyddJti-p4cBKALViUgF1jshf2gJrIMeziZ3rfREmWlb9KdAC_xANDnlmaJLINY1XhHazovJJhfU-5cmenzmlMGIAScL3m4ImkNcC-H3N6pfYl3bzefwIXOvUrpfUuZgw6Ty55w/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhEck3UBRc_avXtxxaj9HE2BfrZicK3aWGoy_J0GuCatQ0PJ71eqyd71reJA7enVQAsUlsNNwIkxxXn1zfjdfaAjusi_yCygwYqXsIcaVT_snjuCu-eZIHilwGbdGpyZIUK2m11mWMRg/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
5- Dán code bên dưới trước thẻ </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_KPM6NHxsTcC5Rcf59LNLS47cUMwoFiNoP_NdDpttulMBz5EMFEq5lpGI5KHiuQIDeIaX2vgmYiLJCCTIz2JSyMSMaCCzvV7X4l0iiwV_7kIO9flfd-szipocCVmPMKJajy5__yjR8E/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
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);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
» Tùy chỉnh:
  • numposts1 = 15; là số bài sẽ được gọi từ feed..
  • label1 = "news"; là tên của nhãn muốn gọi.
  • summaryPost = 140; là số ký tự mô tả
  • summaryTitle = 25; là số ký tự phần tiêu đề ngay bên dưới hình ảnh.
  • width="145" height="100" là chiều rộng và chiều cao của ảnh thumbnail.
  • showRandomImg = true; là lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.
6- Tìm thẻ:
<div id='main-wrapper'>
- Dán vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>
</b:if>
» Tùy chỉnh: 
  • Nếu muốn lấy toàn bộ các nhãn thay vì một nhãn cụ thể thì xóa phần màu đỏ đi nha.
  • auto:4000,
  • scroll: 1,  số bài viết cuộn mỗi lần.
  • speed: 800, Thời gian chuyển ảnh (tính bằng phần nghìn giây).
  • visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính.
  • start: 0,
  • circular: true, 
  • Đây là link download các file ảnh và javarscrip. Các bạn có thể  tải về và upload lên host riêng để sử dụng lâu dài nha: Download now.
  • Mẫu SIMPLE đặt sau dòng: <div class='columns-inner'>
7- Lưu mẫu lại và xem kết quả nha.

¤ Cập nhật!

Hiện tại mình đã ra phiên bản 2 của tiện ích này với giao diện có nhiều cải tiến các bạn hãy xem tại đây:

Tiện ích Slider bài mới trượt ngang thumbnail

Slider bài mới trượt ngang thumbnail cho blogger

Tiện ích Slider ves 2 này  được phát triển trên vesion 1 của maskolis, Với đôi chút cải biến về giao diện như: nó lấy ngẫu nhiên một ảnh thumbnail từ các bài viết mới nhất (recent post)  và  hiển thị dưới dạng một slider trượt ngang. Hiệu ứng chuyển ảnh mượt mà dựa trên thư viện JQuery
Các bạn có thể xem ảnh minh họa hoặc demo bên dưới:
Slider bài mới trượt ngang thumbnail cho blogger ves2

VIEW DEMO

¤  Slider bài mới nhất trượt ngang với thumbnail ves 2 cho blogger!

1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin>.
#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjt0pdG6Um_9bklVncr-Atf2il9TGAs67bcag1FRjsN5rAriC1-sfWNEkxp5GIFFdoO2mpJNQ-EXRK9Pl0969fAVVN8JovkntigijROxaodzRlTGTKjp8ILldZqpYXWQk48jc2e3pL494/s1600/previous_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnN8d4eo_tpGBrgikF40ltIX2tmLB5epU6C5Q3Ri5TDKhZH452ZuQCXLd88YEHtqwm9iiEQ6fWVGPTYADVdtbGSesafrvn7WiyTDgvRvDslryW13S756NnFymANL2P4PtvRbhgij_RC5I/s1600/next_namkna-blogspot-com.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
» Tùy chỉnh:
  • width:980px; là độ rộng của slider
  • height:125px; là chiều cao của slider
5- Dán code bên dưới trước thẻ </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1_KPM6NHxsTcC5Rcf59LNLS47cUMwoFiNoP_NdDpttulMBz5EMFEq5lpGI5KHiuQIDeIaX2vgmYiLJCCTIz2JSyMSMaCCzvV7X4l0iiwV_7kIO9flfd-szipocCVmPMKJajy5__yjR8E/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

function removeHtmlTag(strx,chop){
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);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
» Tùy chỉnh:
  • width="100" height="90" Lần lượt là chiều rộng và chiều cao của ảnh thumbnail.
  • summaryPost = 140;  Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.
  • summaryTitle = 25; Là số ký tự tiêu đề tối đa hiển thị trên slider. bạn nên để vừa phải không nên quá nhiều ký tự sẽ làm sấu slider.
  • numposts1 = 12; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. bạn không nên cho quá nhiều sẽ ảnh hưởng tới tốc độ load.
  • showRandomImg = truelà lấy ảnh thumbnail ngẫu nhiên trong bài viết. Nếu muốn lấy ảnh đầu tiên thì hãy sửa true thành false.
  • Nếu blog của bạn đx có thư viện Jquery rồi thì xóa phần màu cam đi nha.
6- Tìm thẻ:
<div id='main-wrapper'>
- Dán vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Namkna-label?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 5,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>
</b:if>
» Tùy chỉnh:
  • Thay Namkna-label thành tên nhãn bạn muốn hiển thị trên slider.
  • Nếu muốn hiển thị cho toàn blog xóa phần màu xanh đi.
  • visible: 5, Số bài viết (ảnh thumbnail và tiêu đề) hiển thị trên trang chính. 
  • scroll: 1,  số bài viết cuộn mỗi lần. 
  • speed: 800, Thời gian chuyển ảnh (tính bằng phần nghìn giây).
  • Mẫu SIMPLE đặt code sau dòng: <div class='columns-inner'>
Chúc thành công!

Bài đăng phổ biến