Hiển thị các bài đăng có nhãn Tutorial. Hiển thị tất cả bài đăng

[Tut] Tiện ích Các bài viết liên quan có hình

Đây là một tiện ích tự động đưa link những bài viết liên quan (bài viết có cùng Tag) xuống cuối mỗi bài viết. Nhờ vậy, người đọc có thể dễ dàng tìm thêm các bài viết hữu ích khác cùng chủ đề. Với LinkWithin, bạn sẽ dễ dàng làm được điều này, và các bài viết liên quan còn được hiển thị cùng với hình ảnh trong bài.


 Đầu tiên bạn vào trang chủ http://www.linkwithin.com/learn
1. Các bạn sẽ thấy 1 bảng, như bên dưới

- Các bạn điền mail và trang blog của bạn vào. Ở phần platform chọn blog mà bạn xài. Ở đây mình chọn Blogger cho blogspot. Nhấn Get Widget để chuyển sang bước tiếp theo.
2. Một trang khác xuất hiện, và bạn sẽ thấy ngay đầu trang nút “install widget”, nhấn vào đó để bắt đầu cài.


3. Sau đó một hộp thọai xuất hiện, và nhấn Add Widget để thêm tiện ích vào blog



4. Sau đó nhấn Save (như hình bên dưới) thì widget mới hiển thị

[Tut] Tạo trang liên hệ với Kontactr

Kontactr là một site cho phép bạn tạo một form liên hệ, đăng kí một tài khỏan tại trang này và bạn sẽ có 1 site liên hệ 

1. Vào trang chủ Kontactr : http://kontactr.com, nhấn Signup để đăng kí 1 tài khỏan mới.


2. Điền đầy đủ thông tin của bạn :

3. Sau khi điền đầy đủ thông tin nhấn Submit để hòan thành việc đăng kí.
4. Vào mail của bạn để xác nhận việc đăng kí.



5. Sau khi xác nhận việc đăng kí, quay lại trang kontactr.com và nó sẽ báo là site liên hệ của bạn đã được active.
- Có nhiều lựa chọn cho bạn từ form liên hệ này:
+ Cung cấp code HTML (hoặc java) cho phép bạn chèn trực tiếp vào blog của mình.

+ Cung cấp buttom link:


Theo mothuthuat.

Theo mình thì tốt nhất là các bạn tạo một page mới, rồi dán code HTML mà Kontactr cung cấp cho bạn, như vậy là khách ghé thăm có thể liên hệ trực tiếp ngay trong blog của bạn! (Các bạn có thể thấy mục liên hệ mà mình đặt trên Menu, chính là một page mà mình đã tạo từ Kontactr)

[Tut] Tiện ích "đánh giá bài viết" dưới mỗi bài viết

Đây là tiện ích được cung cấp bởi website www.outbrain.com tiện ích cho phép người xem đánh giá bài viết của bạn qua 5 mức : Bad, Boring, Ok, Good, Exellent tương ứng với 5 sao. Một tiện ích “đánh giá bài viết” sẽ giúp cho người đọc dễ dàng tìm được những bài viết hay trên blog của bạn.


Đầu tiên bạn truy cập vào đây: http://www.outbrain.com/get/ratings


Và nhấn vào biểu tượng blogger để tiếp tục:


Nhấp vào “Get Widget Now!” để tiếp tục. sau đó nhấn “Thêm tiện ích” để kết thúc việc cài đặt


Như vậy là hoàn thành.

[Tut] Chèn code vào bài viết

Như chúng ta đã biết, khung sọan thảo của blogspot cho phép hiển thị hầu hết code HTML, vì thế khi bạn chèn code vào bài viết thì code đó cũng sẽ được hiển thị.
- Để có thể hiển thị được chúng ngoài layout, bạn phải chuyển 1 vài kí tự đặc biệt trong mã code HTML thành các kí tự khác.
- Về cơ bản, ta chỉ cần thay đổi 2 kí tự đặc biệt là < > , xem bên dưới:
- Kí tự : < sẽ chuyển thành <
- Kí tự : > sẽ chuyển thành >
- Đó là cách thực hiện bằng tay khi code của bạn chỉ có vài dòng, nhưng đối với những đọan code dài thì sao, ta không thể ngồi đó mà thay thế tất cả chúng, rất tốn thời gian.
- Để khắc phục điều này, đã có website cho phép bạn chuyển đổi tất cả các kí tự đặc biệt của mã HTML 1 cách nhanh chóng.
- Các bạn vào địa chỉ này : http://blogcrowds.com/resources/parse_html.php, giao diện sẽ trông như bên dưới:

- dán code mà bạn cần chuyển đổi vào khung rồi nhấn Parse sau đó ta sẽ được code đã được mã hóa ở khung 1, nếu muốn mã hóa tiếp code khác, bạn chèn code vào khung thứ 2 (lưu ý: fải là khung thứ 2) (xem hình minh họa)

[Tut] Bảng màu và mã màu HTML

Bạn còn thể có thể xem các mã màu và hiệu ứng màu trực tiếp tại các trang:
www.echip.com.vn
mod-site.net
colorschemer.com
Hoặc xem trực tiếp bảng mã màu sau:

[Tut] 3 hệ thống comment cho blogspot


Hệ thống khung nhận xét (comment) của blogspot là một trong những yếu tố làm người dùng blogspot không được hài lòng cho lắm, đặc biệt là khi đem so sánh với Wordpress cho dù blogspot cho phép đăng nhận xét với tư cách khách từ OpenID, WordPress...
Xin giới thiệu đến các bạn 3 giải pháp thay thế cho khung comment mặc định của blogspot:

1. Disqus

Được ra đời vào năm 2007, Disqus comment là một hệ thống nhận xét và công cụ quản lý dành cho blog của bạn.
Với Disqus bạn sẽ dễ dàng quản lý các comment trên blog của mình cũng như những comment của mình trên các blog khác (sử dụng tài khoản Disqus).
Bạn có thể tùy chỉnh comment form theo ý thích (điều mà Blogspot không thể): có thể Reply cho từng comment cụ thể, hiển thị Avatar, Sắp xếp theo: phổ biến, đánh giá cao, cũ nhất và mới nhất...
Một số Blogger Việt Nam đang sử dụng Disqus comment: hontap, toiyeugoogle, dulichbui,...

2. Intense debate

IntenseDebate là một hệ thống comment cao cấp dành cho các blog và các website.
IntenseDebate còn cung cấp nhiều tính năng hỗ trợ người dùng như: Reply By Email, quản lý comment bằng email,... Bạn cũng có thể gửi comment của bạn thông qua tài khoản facebook, twitter,...
Hiện nay theo Tùng Lâm thấy thì bạn Ruabien đang sử dụng khung comment này cho blog của mình.

3. JS-Kit ECHO

JS-KIT là một cách mới để chia sẻ nội dung của bạn. Việc chèn khung comment của Echo lên blog hay website của bạn sẽ rất dễ dàng và nhanh chóng. Bên cạnh đó, Echo còn hỗ trợ người dùng chèn hình ảnh đại diện, emoticons, hay cả việc chèn video vào khung comment cho nhận xét của bạn.
Theo vnblognet.
Hiện nay, mình đang dùng hệ thống comment của IntenseDebate ^^.

[Tut] Tạo hình nền trong suốt cho blog

TransparentBạn có thể xem mẫu minh hoạn hiệu ứng hình nền trong suốt “transparent background” tại demo blog hay như hình bên.

Để thực hiện việc tạo hiệu ứng trên bạn cần:
(1) Đăng nhập vào Blogger.com
(2) Vào Layout –> Edit HTML và click chọn vào Expand Widget Templates
(3) Cuộn chuột (Scroll down) xuống phần code(Outer, main, sidebar) của Blog muốn thực hiện nền trong suốt để chèn code Transparent.
Code thực hiện để tạo background trong suốt với màu nền là màu bạc 'silver' :
background-color: silver;
opacity:.850;
filter: alpha(opacity=85);
-moz-opacity: 0.850;
Để chèn code vào Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
Bạn tìm (find) tới #outer-wrapper { và chèn mã trên vào như sau:
#outer-wrapper {
background-color: silver;
opacity:.85;
filter: alpha(opacity=85);
-moz-opacity: 0.85;

width: 1024px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
 Khi đó hình nền trong suốt sẽ xuất hiện như hình minh họa dưới.

Transparent
Trước khi áp dụng hiệu ứng Hình nền trong suốt

Transparent Sau khi áp dụng

Ngoài ra bạn cũng có thể áp dụng chúng cho
sidebar-wrapper 
header-wrapper
footer-wrapper
Chú ý : Các phần(sections) trong blog của bạn có thể có tên khác nhau tùy thuộc vào từng mẫu template. Tuy nhiên về cơ bản các thành phần đều tưng ứng, sau khi ứng dụng cho các phần bạn hãy click vào Preview button để xe trước công việc đã thực hiện trước khi save để tiếp tục áp dụng cho các phần khác.
Bạn có thể thay đổi giá trị 'silver' trong mã code trên thành các màu khác như 'blue', 'red' để tạo hiệu ứng màu nền trong suốt khác.
Ngoài ra để phù hợp với mẫu template của blog bạn có thể thay đổi giá trị về mức độ đạm nhạt của độ trong suốt gọi là Opacity bằng cách thay đổi các giá trị '0.85' (cho opacitymoz-opacity) bằng bất kỳ giá trị nào nằm trong khoảng từ 0 tới 1; và thay đổi giá trị '85' cho filter: alpha(opacity=85)  với các số từ 1 tới 100.
Theo vnblognet.

[Tut] Một vài thuộc tính cơ bản với liên kết trong bài viết

Trong soạn thảo bài đăng mới với Blogger bạn có thể dễ dàng chèn thêm các liên kết trong lựa chọn Viết, song bạn không thể đưa thêm các thuộc tính cho liên kết được. Để thực hiện yêu cầu chèn thêm thuộc tính cho link bạn cần sử dung soạn bài theo Chỉnh sửa HTML (Edit HTML).

Post_making-links_01

Link trong soạn thảo HTML có dạng:
Địa chỉ UrL">Text tiêu đề link
Các thuộc tính của link có thể chèn thêm:

1.Mở Link tại một cửa sổ mới:
- Nếu sử dụng link như trên thì khi click vào Text tiêu đề link thì cửa sổ mở link sẽ chèn lên link hiện thời, để link mở ra trên một cửa sổ mới không làm ảnh hưởng tới cửa sổ đọc bài hiện thời bạn thêm thuộc tính target="_blank" vào trong code link như sau:
2.Thuộc tính quan hệ - Relation attribute:
- Thuộc tính qua hệ để định nghĩa rõ mối quan hệ giữa đường link và bài viết.
- Với thuộc tính rel="relation" trong link như sau:
Được định nghĩa để cho thấy đường link là liên kết ngoài, không phải nội tuyến. Thực ra thuộc tính này không quan trọng, chỉ giới thiệu cho cá bạn tham khảo thêm.
- Với thuộc tính rel=”nofollow”:
Thuộc tính này được thêm vào để chỉ cho các máy tìm kiếm biết để không ghi nhận link này từ trang của chúng ta, điều này cực kỳ quan trọng bởi với một số máy tìm kiếm khuyến cáo không sử dụng link nào đó thì thuộc tính này là “thuốc trị liệu” cho chúng để ta không vi phạm các điều khoản về link đường dẫn không tốt cho máy tìm kiếm.
3.Thuộc tính tiêu đề - Title attribute:
- Với thuộc tính này khi bạn điền tiêu đề miêu tả cho link thì khi rê chuột lên đường link thì đoạn text title mà bạn gõ sẽ hiển thị:
Từ vnblognet

[Tut] Một số tiện ích hữu dụng cho blog

Mình mù IT, nhưng mình thì tham lam, vẫn muốn có một blog ra trò, nên mình đã chăm chỉ tìm kiếm các thủ thuật blogger, và nay xin được chia sẻ với các bạn loạt bài viết của trandaiminhtri:
Tác giả trandaiminhtri cũng đã đi tìm và tập hợp lại từ những blog thủ thuật nổi tiếng. Mình thấy loạt bài viết này rất hữu ích, và mình đã có thể thực hiện thành công. Mình chỉ thêm những tiện ích mình thật sự cần, và các bạn có thể thấy ngay ở thanh sidebar bên cạnh và thanh header phía trên: lời chào, ngày tháng, tìm kiếm, lịch âm dương,... Các bạn cũng chú ý khi thêm tiện ích thì bạn dùng cách gộp tiện ích như mình đã giới thiệu trong bài Cách nhúng HTML trên blogspot 
Nhờ cách này mà mình sẽ giảm tải thời gian load trang và dĩ nhiên là khách viếng thăm, và tất nhiên, cả chính chúng ta nữa sẽ có thể truy cập vào nhanh hơn. Mình cũng đã gộp Lịch âm dương, Từ điển và Thời tiết làm một.
Trong khi thêm tiện ích các bạn cũng có thể chỉnh sửa lại các đoạn code mà tác giả đã cung cấp để có được một giao diện như ý muốn.
Trong thời gian tới, mình sẽ tiếp tục tìm thêm các thủ thuật hay, hữu dụng mà mình đã áp dụng thành công để gửi tới các bạn!

[Tut] Cách nhúng HTML trên blogspot

o Trong cửa sổ Add a Gadget nhấp chọn nút HTML/JavaScript để nhúng vào mã nguồn:



target="_blank"
o Trên hộp thoại Configure HTML/JavaScript kế tiếp: đặt tên cho đối tượng vào khung Title và mã nguồn vào khung Content:


o  Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau này nếu muốn bỏ đi đối tượng đã nhúng nhấp chọn nút Remove)
Sau khi thêm HTML thì nó sẽ hiển thị thành một tiện ích và ta có thể tùy chỉnh lại vị trí trên thanh Sidebar hay phần Header, hay Footer bằng cách kéo và thả tới vị trí mong muốn.
Tuy nhiên, càng sử dụng nhiều tiện ích thì thời gian toàn bộ nội dung blog được tải về hiển thị trên trình duyệt người đọc càng lâu. Làm sao để đọc giả cảm thấy mình được "phục vụ" ngay khi vừa gõ xong địa chỉ blog là vấn đề được nhiều người quan tâm đặc biệt trong tình hình mạng internet ở Việt Nam không phải lúc nào cũng ổn định.

Kinh nghiệm cá nhân cho thấy chúng ta nên sử dụng hạn chế đến mức có thể số tiện ích (gadget) trên blog. Trong số các tiện ích của Blogger, HTML/JavaScript có lẽ được dùng nhiều nhất. Nếu blog bạn sử dụng nhiều tiện ích loại này, một cách có thể làm giảm đáng kể là ghép nội dung của chúng vào một và ngăn nhau bởi tên (title) nằm giữa thẻ như hình:


Một cách khác cũng có thể ghi Tên tiện ích 1 vào phần title và nội dung của nó ở dưới, các nội dung khác thì để lại như trên. Nhìn chung nếu sử dụng template mẫu của Blogger thì việc ghép này sẽ thấy hiển thị tương tự như nhiều tiện ích khác nhau:


Và tất nhiên tốc độ tải về của blog cải thiện thêm một ít.

Tổng hợp từ nhiều nguồn

[Tut] Tự thiết kế theme không cần biết HTML - P2

image
Bây giờ, chúng ta tìm hiểu về cơ cấu của mẫu Blogger:
Chúng ta xem hình ở dưới, một mẫu cơ bản container bao gồm các khối như dưới:
Chi tiết cụ thể bao gồm:

  1. Body: là toàn bộ viền bao outer các khối mẫu blog của bạn (nói một cách đơn giản nó là toàn bộ những thứ mà bạn nhìn thấy hiển thị trên màn hình).


  2. Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
  3. Header: block này là phần trên cùng của hầu hết các blog (cái tên header đã nói lên điều này một cách rõ ràng). Nhưng bên trong Header bạn có thành phần phụ khác đó là Header Title, Header Descripaion và các thành phần khác giống như banners quảng cáo, thanh trình đơn menu bar,,,. Do vậy, để chửa toàn bộ các blocks phụ nói trên trong đó thì Header nhất thiết phải được thiết kế đủ rộng để chứa chúng.
  4. Content: nằm dưới Header là Content-wrapper – đây là phần quan trọng hơn cả, chứa các thành phần quan trọng như Sidebar containers (1,2 hoặc nhiều sidebars) và phần nội dung chính (phần chứa các bài viết, nhận xét hoặc các quảng cáo).
  5. Footer: là phần nằm ở phía dưới cùng của hầu hết các mẫu. Giống như Header section, bạn cũng cần phải thiết kế Footer-wrapper để chứa các nội dung phụ trong Footer section.
  6. Main: Main-wrapper là thành phần chính nằm trong Content-wrapper. Bên trong Main-wrapper là phần bài viết, nhận xét, ngày tháng đăng bài và các tiện ích khác được tạo từ lựa chọn “Add Page Element”.
  7. Sidebar: là thành phần bao gồm các tiện ích - About Me, Labels, Archive, Text, HTML, Adsense. Trong mẫu cơ bản của Blogger template, bạn thường thấy các mẫu có 1 sidebar - hoặc 2-column (Main and Sidebar). Nhưng bạn cũng có thể dễ dàng thêm các cột Sidebar vào mẫu Blogger. Bạn cần phải hiểu rõ về chúng, trước hết là về cơ cấu tổ chức của các mẫu Blog để có thể quyết định thêm vào bên trái hay bên phải Main container các Sidebar để tạo thành mẫu 2 sidebars – hoặc mẫu 3-column.
  8. Blog Post: Đây là phần bài viết của bạn hiển thị bao gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ...
Và code HTML cho theme cũng sẽ bao gồm các thành phần này. Thường thì các code cho từng phần sẽ có dạng:
/*------------BODY---------------*/

................................
Cũng vì có cấu trúc ấy mà ta có thể dễ dàng copy code của theme này sang theme khác, tức là ko có khả năng tự viết HTML thì ta cóp nhặt từ theme này theme kia (những theme sẵn có tìm được trên mạng thôi) cóp đoạn code dùng để tùy chỉnh cho từng phần, ví dụ bạn có mẫu A là mẫu gốc, bạn thích phần head của mẫu B thì bạn thay đoạn code
/*------------HEAD---------------*/

................................
của mẫu A bằng đoạn code của mẫu B.
Quan trọng là phải phối với nhau sao cho đẹp. Tùy vào code mà ta còn tùy chỉnh lại được cả các thông số khác vì mã HTML ngoài các ký hiệu còn có cả phần chữ và sử dụng TA nên ta có thể dễ dàng nhận biết và tùy chỉnh lại. Ví dụ như đoạn code này:
/* ---------------HEADER------------------*/
#header {
    background:url(http://lh5.ggpht.com/_TkFAArOawcE/TEhlFHj0pXI/AAAAAAAAAUM/j3OYxB2BY3A/header.jpg);
    width: 1017px;
    height: 283px;
    color: transparent;
    font-size: 11px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
Ta có thể dễ dàng nhận thấy link (được tô đỏ) là ảnh cho phần header, vậy thì, ta cũng có thể thay thế link này bằng 1 link khác tùy thích.
Vậy thôi, mặc dù ko hiểu về cấu trúc của từng code HTML nhưng ta hoàn toàn có thể kết hợp để tạo một theme cá tính cho riêng mình.
Chúc các bạn thành công!

[Tut] Tự thiết kế theme không cần biết HTML - P1

Như đã nói trong bài Tùy chỉnh theme từ mẫu sẵn có thì ta không được tùy chỉnh các tiện ích cho phần đầu trang. Điều này không thật sự quan trọng nhưng cũng có những tiện ích đặt ở đầu trang sẽ tốt hơn. Hơn nữa, nếu tự thiết kế thì ta sẽ có một theme "độc" + theo ý thích. Mình cũng mù tịt về HTML thôi, nhưng mình "tham lam" nên vẫn muốn có thể có một theme vừa ý, và đây là cách mình đã làm.

Đầu tiên là các bạn hãy sử dụng mẫu theme sẵn có của Blogger. Ngay khi tạo lập Blog ta đã phải chọn một theme từ những mẫu theme sẵn có và trong quá trình sử dụng có tiếp tục tự thiết kế dựa trên kho mẫu sẵn có trong Trình thiết kế (Mới!). Trình thiết kế này khá tiện dụng khi ta có thể xem ngay lập tức hiệu ứng được tạo ra. Không chỉ cho phép tạo tiện ích cho đầu trang, Trình thiết kế còn cho phép thay đổi màu sắc, của các thành phần trong trang, rồi kiểu chữ, độ lớn của trang và các cột tiện ích, vị trí các tiện ích...
Để tới Trình thiết kế mới thì từ Bảng điều khiển kích vào Thiết kế, rồi vào mục Trình thiết kế mới.
Đây là clip hướng dẫn của Blogspot:


Sau khi dùng Trình thiết kế để tạo theme ta vẫn có thể quay trở lại mục Chỉnh sửa HTML để chỉnh sửa, và điều này sẽ giúp ta dễ dàng có những theme đẹp mà ở phần tiếp theo mình sẽ giới thiệu cho các bạn!

[Tut] Tùy chỉnh theme từ mẫu sẵn có

Đầu tiên là bạn cần có 1 tài khoản blogspot (dĩ nhiên). Tiếp đó là chọn cho mình một theme vừa ý. Cũng có kha khá các trang cung cấp theme cho blogspot, nhưng có 2 cái mình hay dùng nhất là:
Sau khi chọn mẫu vừa ý thì down về thôi, giải nén sẽ có file xml. File này chính là theme của bạn.
Bạn vào mục Bảng điều khiển

bang dieu khien

Chọn ngôn ngữ tiếng việt ở khung bên trên phía tay phải, cái này để dễ dàng chỉnh vì mình là người Việt quen dùng tiếng Việt thôi, bạn muốn dùng ngôn ngữ nào cũng được.
Sau đó bạn chọn “Bố cục” và vào mục “Chỉnh sửa html”. Bạn sẽ thấy phần “Sao lưu/ khôi phục mẫu”.

Blogger -- Sửa HTML Mẫua

Bây giờ bạn nên lưu lại mẫu hiện giờ, để đề phòng quá trình có gì đó trục trặc bằng cách click vào dòng chữ “tải xuống mẫu đầy đủ”. File tải xuống sẽ có đuôi xml để bạn có thể up lên phục hồi.
Dòng kế tiếp quan trọng đấy ạ. Bạn chỉ cần click vào “browse” và tìm đến file xml bạn mới down về. Sau đó click vào dòng chữ bên cạnh “tải lên”.
Sau khi quá trình tải lên xong thì bạn có thể “xem trước” xem có vừa ý không, nếu vừa ý thì bạn “lưu mẫu”, không vừa ý thì chỉ cần “xoá chỉnh sửa" là xong.
Thế là bạn có một cái theme trông khá chuyên nghiệp mặc dù là lính tò te chả biết gì về code HTML.

Tổng hợp từ http://phmlvn.blogspot.com/ 

Tuy nhiên, cách này cũng có nhược điểm là khi bạn Chỉnh sửa lại Phần tử trang thì sẽ không có các tiện ích cho phần đầu trang.