Khi thiết kế blog, bạn cảm thấy không thích với tiêu đề của blog vốn đã được mặc định sẵn của blogger, bạn muốn thay nó bằng hình ảnh của riêng mình, thủ thuật đơn giản sau sẽ giúp bạn:

Bạn tìm code sau hoặc tương tự:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='no';


thay "no" thành "yes"

Lưu template, trở lại phần thiết kế bạn sẽ thấy có thêm một tiện ích dưới tiêu đề, lúc này bạn có thể đưa hình ảnh của mình để thay thế cho tiêu đề của blog rồi đó, chúc thành công!


Image and video hosting by TinyPic

Nếu bạn muốn một tấm ảnh luôn xuất hiện trên màn hình của trang blog mình dù người đọc có scroll chuột lên hay xuống, thủ thuật sau đây sẽ giúp bạn:

Bước 1: Tìm sẵn một ảnh và đưa lên host (khoảng 125x125 pixels). Ví dụ:

Bước 2: Đăng nhập vào tài khoản của bạn, chọn Edit HTML, nhớ chọn Expand Widget Tempplates, tìm dòng ]>></b:skin>, đặt đoạn code sau đây vào phía trên nó:

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Bạn có thể thay đổi giá trị màu đỏ theo ý của mình.
Tiếp tục tìm đến thẻ </body>, đặt code sau ở phía trên nó:
<div id='top_image'>
<img border='0' src='<img border='0' src='http://i117.photobucket.com/albums/o70/Babothanlong/icon3.gif?imgmax=800'/>
</div>


Nhớ thay đoạn code:
<img border='0' src='http://i117.photobucket.com/albums/o70/Babothanlong/icon3.gif?imgmax=800'/>

thành địa chỉ hình của bạn.
Cuối cùng save template để xem kết quả!

Thanh điều hướng kiểu breadcrumb (kiểu theo dấu vết ruột bánh mì) là thanh điều hướng cho phép người lướt web truy tìm nội dung theo chủ đề. Nó bắt nguồn từ câu chuyện dấu vết những cái ruột bánh mì bị bỏ lại bởi Hansel và Gretel trong truyện cổ tích nổi tiếng của anh em nhà Grimm.

Chuyện là thế này: Hansel và Gretel là 2 đứa trẻ trong một gia đình rất nghèo. Bố mẹ chúng nghèo quá đến nỗi không có gì để cho con cái ăn. Họ đã quyết định đem những đứa trẻ vào rừng và bỏ mặc chúng cho thú hoang ăn thịt. Hansel và Gretel đã phát hiện ra kế hoạch khủng khiếp này và có những biện pháp đề phòng trước. Chúng mang theo một cái bánh mì và thả rơi những mẫu ruột bánh mì dọc theo đường đi để tìm đường về nhà. Nhưng chẳng may chúng đã không tìm được đường về nhà và bị bắt giữ bởi một mụ phù thủy độc ác.

Từ câu chuyện này, ngày nay chúng ta có thể thấy thanh điều hướng theo kiểu “truy tìm đường theo mẫu ruột bánh mì” trên nhiều website để tìm lối trở lại Trang chủ.
Thanh điều hướng breadcrumb xuất hiện nằm ngang trên đầu trang web, thường nằm dưới hoặc trên tiêu đề bài viết. Chúng cung cấp đường dẫn trở lại trang trước, đến một chủ đề nào đó hoặc trở về trang chủ. Nhìn chung người thiết kế thường sử dụng các dấu phân cách như > hoặc ».

Thanh điều hướng breadcrumb điển hình trông như thế này:

Home » Thủ thuật Blogger » Tạo thanh điều hướng breadcrumb trên Blogger

Sau đây là hướng dẫn thiết lập thanh điều hướng breadcrumb cho Blogger:

Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML).

Nhớ backup Template của bạn và chọn Mở rộng Mẫu tiện ích (Expand Widget Template).

Bước 2: Tìm đoạn code sau đây (Nhấn Ctrl+F để tìm):
<b:include data='top' name='status-message'/>

Thay thế đoạn code trên bằng đoạn code sau đây:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

Kế đến tìm đoạn code như bên dưới:
<b:includable id='main' var='top'>

và thêm trước nó với đoạn code sau đây:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>


Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]></b:skin>.
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}


Lưu Template lại là xong. Lúc này bạn có thể kiểm tra thanh điều hướng breadcrumb hoạt động trên blog của bạn rồi đấy.

Lưu ý nếu bạn sử dụng nhiều nhãn (label) cho một bài viết thì breadcrumb chỉ hiển thị nhãn cuối cùng mà bạn đã thêm vào. Thủ thuật trên đã thử thành công trên các Template dạng layout. Tôi đã có một số điều chỉnh nhỏ cho thích hợp với blog có ngôn ngữ tiếng Việt.

Tham khảo: Huỳnh Nhật Hà

Đôi khi bạn cũng muốn trang trí khung hiển thị các đoạn mã (code) cho đẹp mắt. Để thực hiện điều này, bạn cần phải tạo một class riêng cho đoạn mã, có thể đặt tên là "codeview" và đặt đoạn mã vào trong thẻ div, theo như bên dưới:

<div class="codeview">
{dán code đơn giản hoặc code đã mã hóa vào đây}
</div>

Phần trên sẽ được đặt vào trong bài viết tại vị trí muốn hiển thị code.
Để đăng được bài viết có hiển thị code thì phải tiến hành chèn một đoạn mã vào phần CSS của Template.

Vào Thiết kế (Design) - Chỉnh sửa HTML (Edit HTML) rồi chèn code của các kiểu bên dưới lên trên dòng code ]]></b:skin> trong Template.

Dưới đây là các kiểu định dạng CSS cho codeview.

1. Kiểu 1:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3415/3555944482_d0433d99fe_o.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}


2. Kiểu 2:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 20px solid #CECECE;
}


3. Kiểu 3:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://farm4.static.flickr.com/3575/3555191103_7ce001f502_o.gif) no-repeat right top;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}


Chú ý: Nên tải các file hình ảnh qua đường link đánh dấu màu xanh về và upload lên webhost của riêng bạn để tránh hạn chế băng thông.

Tham khảo: Huỳnh Nhật Hà

Tiện ích Về tác giả (About the Author widget) đặt ở cuối bài viết Blogger giúp người đọc dễ dàng nắm bắt thông tin sơ lược về tác giả đồng thời nâng cao tác quyền các bài viết trên blog. Nếu blog của bạn cho phép quyền đăng bài viết cho nhiều người thông qua gmail của họ thì chỉ có bạn là tác giả blog được hiển thị tiện ích này.

Nhờ tiện ích này mà người đọc có thể dễ dàng phân biệt được đâu là tác giả - Admin của blog nếu blog của bạn cho phép nhiều người được quyền đăng bài viết.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước dòng ]]></b:skin>

.author-panel {
-moz-border-radius:5px;
background-color:#add8e6;
border: 1px solid #000;
margin:-30px 0 20px 0;
padding:5px;
}
.author-avatar img {
-moz-border-radius:5px;
background-color:#333;
width:60px; height:75px;
float:left;
margin:10px 10px 0;
}
.author-panel p {color:#fff;font-size:12px;text-align:justify;}


Bước 2. Đặt đoạn code dưới đây sau dòng <div class='post-footer'> hoặc trước dòng <div class='post-footer-line post-footer-line-3'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.author == &quot;Tên tác giả&quot;'>
<div class='author-panel'>
<div class='author-avatar'><img alt='' src='URL_Avatar' /></div>
<h3>Về tác giả</h3>
<p>Thông tin về tác giả</p>
<p>Theo dõi:
<a href='http://www.blogger.com/follow-blog.g?blogID=XXXXXXXXX' target='_blank'>Blogger</a> |
<a href='http://www.twitter.com/yourusername' target='_blank'>Twitter</a> |
<a href='http://www.facebook.com/yourusername' target='_blank'>Facebook</a>
</p>
</div>
</b:if></b:if>


Trong đoạn code trên, bạn cần thay đổi những dòng được đánh dấu màu đỏ, lần lượt là Tên tác giả (thường xuất hiện khi bạn đăng nhận xét), liên kết ảnh avatar của bạn, thông tin sơ lược về tác giả, ID của Blog, username trên Twitter và Facebook.



Tham khảo: Huỳnh Nhật Hà

Dưới đây là 1 số mẹo nhỏ dành cho những người mới làm blog được thu thập từ nhiều ý kiến tổng hợp. Tất cả những gì bạn cần là nhìn lại tổng thể mô hình của trang blog, giao diện bề ngoài trông như thế nào, yếu tố nào cần phải có và cần tránh, làm cách nào để tối ưu hóa hoạt động và các tính năng sẵn có, duy trì sự thu hút đối với người đọc...

1. Blog của bạn muốn nói đến vấn đề gì?

Chắc nhiều người đã từng nghe nói đến câu nói này: Ấn tượng đầu tiên và cũng là ấn tượng cuối cùng. Điều này khá đúng khi áp dụng với title – tựa đề của bất kỳ blog nào, và việc đặt tên cho blog cũng khiến cho nhiều người phải đau đầu để tìm được tên thích hợp. Nếu chọn được tên đẹp, dễ gây ấn tượng thì sẽ gần như ngay lập tức thu hút được rất nhiều người đọc. Không quá dài cũng không quá ngắn để họ hiểu được blog của bạn định nói đến cái gì, vấn đề gì, ai...

Đồng thời, bạn cũng nên để tâm đến dòng tag – chứa những thông tin mà dòng tựa đề không thể truyền tải hết. Thông thường người đọc sẽ chú ý đến những dòng tag này sau khi “bước chân” vào blog của bạn, để họ biết thêm nhiều thông tin. Việc này chỉ diễn ra trong vòng 3 – 5 giây nhưng khoảng thời gian này rất quan trọng.

2. Làm cho bài viết của bạn hấp dẫn hơn

Hãy chèn thêm 1 số hình ảnh minh họa hoặc thực tế vào bài viết. Vì thực tế, đây là yếu tố chính người đọc nhìn vào trước tiên khi đọc 1 bài viết bất kỳ, nhưng cũng không nên lạm dụng quá nhiều ảnh, sẽ làm nội dung của bài bị loãng hẳn đi. Chỉ nên sử dụng những ảnh có liên quan và thực sự cần thiết, 1 điểm vô cùng quan trọng là chất lượng của ảnh – bạn cần tìm những bức có chất lượng cao, kích thước phù hợp và dung lượng vừa phải để tốn ít thời gian tải. Nếu đây là 1 bài hướng dẫn kỹ thuật, trình bày từng bước, từng công đoạn rõ ràng, với từng bước đó bạn hãy thêm 1 hình minh họa chi tiết – qua đó người đọc vẫn có thể theo dõi toàn bộ bài viết mà không thể bỏ sót được bước nào.

Một điểm nữa là bạn nên để ý đến các đường dẫn liên kết bên ngoài bài viết, việc có quá nhiều đường dẫn thế này sẽ khiến cho người đọc bị lẫn lộn, băn khoăn không biết nên đọc những bài nào. Và tốt hơn cả là nên đặt những bài, tin liên quan vào phía cuối bài viết chính. Hãy cân nhắc việc sử dụng mục Những bài/Tin liên quan sao cho hợp lý.

3. Hãy “kỹ tính” trong khâu chèn ảnh

Như đã nhắc đến bên trên, những bức ảnh sử dụng trong bài viết là 1 yếu tố chính để thu hút người đọc. Nếu sử dụng ảnh chụp màn hình thì hãy xử lý sao cho sắc nét, đầy đủ thông tin, và quan trọng nhất là phù hợp với nội dung của bài. Nếu chưa biết chính xác độ rộng của bài viết, hãy tìm hiểu về điều này trước tiên vì nếu không khớp với kích thước của những bức ảnh bài viết có thể khiến website bị lệch lạc. Mặt khác, nếu hẹp quá thì chẳng có ai muốn đọc bài viết với cách trình bày như vậy.

Nếu bạn lấy ảnh từ các Search Engine, hãy ghi rõ nguồn gốc của bức ảnh đó. Điều này sẽ gây ấn tượng khá tốt với người đọc, vì có nghĩa là bạn tôn trọng tác giả, đồng nghĩa với việc tôn trọng người đọc

Định dạng của file ảnh cũng là 1 vấn đề cần quan tâm. Nếu bạn xử lý 1 bức ảnh chụp màn hình thì hãy lưu thành file *.PNG, vừa giữ được chất lượng khá tốt, đồng thời dung lượng của ảnh cũng giảm đáng kể

Nếu kích cỡ bức ảnh quá to, bạn nên sử dụng chức năng mở trên 1 cửa sổ popup mới, bằng cách tự liên kết với chính nó sử dụng thuộc tính “target= “_blank” trong thẻ href.

Trong trường hợp kích thước của bức ảnh vừa với bài viết, người sử dụng nên xóa bỏ đường dẫn “a href=”, khi người đọc kích chuột vào bức ảnh, cửa sổ popup sẽ không hiện ra nữa

4. Để lại thông tin nguồn gốc của tác giả trên bài viết

Nếu có ý định đăng tải và chia sẻ 1 bài viết bất kỳ nào đó khi bạn sưu tầm được, hãy bắt đầu bài viết của bạn với từ Trích dẫn, viết tiếp 1 vài dòng giới thiệu nội dung sơ bộ. Lưu ý rằng không nên copy toàn bộ bài viết của họ cho dù bài đó ngắn, dài hoặc hấp dẫn thế nào đi nữa. Luôn luôn ghi rõ thông tin, nguồn gốc từ nơi bạn tìm thấy. Có thể ví dụ như:

- Nguồn QuanTriMang.com
- Theo Tên tác giả/ www.quantrimang.com

Hầu hết tất cả những người quản trị đều đặt thuộc tính cho phép sao lưu toàn bộ nội dung bài viết. Nếu bài viết để lại ấn tượng tốt, bạn sẽ có thêm 1 người bạn đọc thường xuyên ghé thăm nữa.

5. Hãy thật cẩn thận khi chèn thêm liên kết từ bên ngoài

Khi tiến hành chèn thêm đường dẫn từ các website bên ngoài, hãy đặt thuộc tính mở trên 1 cửa sổ mới bằng cách thiết lập thuộc tính “target=”_blank”. Việc mở 1 đường dẫn khác trên cửa sổ mới để chắc chắn rằng người đọc sẽ trở lại trang web của bạn sau khi tham khảo thông tin trên đường dẫn đó. Việc tự đặt liên kết trong cùng website của chính mình cũng rất tốt, vì như vậy người đọc sẽ chú tâm vào bài viết hơn.

6. Hãy gìn giữ những mối quan tâm của người đọc

Hãy chỉ ra cho họ tất cả những gì bạn có. Đưa ra những bài viết tốt nhất trên giao diện trang chủ. Bạn có thể sử dụng chức năng sticky hoặc tạo ra thanh trượt để gây sự chú ý vào những bài nội dung trên đó.

- Sử dụng cách tương tự như trên là phần Tin/Bài viết liên quan tại mỗi bài viết. Hoặc cài đặt plugin Linkwithin – liệt kê ra các bài viết gần đây nhất với hình minh họa đi kèm

- Áp dụng thêm plugin Xem nhiều nhất hoặc Bài viết được xem nhiều nhất

- Nếu bài viết quá dài, quá nhiều chữ sẽ khiến người đọc nhanh chóng bỏ qua bài đó, hãy phân chia thành những phần nhỏ hơn

- Nếu bài viết dài được chia thành 2 phần nhỏ, hãy liên kết 2 phần chéo với nhau.

7. Hãy để người đọc chia sẻ bài viết của bạn

Đây là lỗi thường xuyên mắc phải của những người mới bắt đầu. Các mô hình mạng xã hội cũng như dịch vụ Social Bookmarking có lưu lượng người sử dụng lớn nhất trên thế giới, nếu bạn bỏ qua hoặc quên không cài đặt thêm chức năng bookmark tới các mạng xã hội thì người đọc sẽ rất khó khăn để chia sẻ những bài viết này. Hoặc tệ hơn nữa, họ sẽ tìm đến những nguồn cung cấp, website hoặc blog khác chứ không phải là của bạn.

- Đặt vị trí những nút này ngay bên cạnh tiêu đề hoặc phía cuối bài viết, hãy đảm bảo chúng ở vị trí dễ nhìn, không quá to cũng không quá nhỏ

- Hãy chèn thêm chức năng in trực tiếp hoặc gửi qua email nếu được

8. Tạo nhiều chủ đề đa dạng

Nếu tên miền của blog bị giới hạn về mặt ý nghĩa tượng trưng, thì bạn nên liệt kê hết tất cả các chủ đề bạn muốn đề cập đến, bằng cách áp dụng Tags trong WordPress hoặc Labels với Blogger. Thanh công cụ điều hướng di chuyển tất nhiên là quan trọng nhất, tại đây người đọc sẽ tìm được các ý tưởng về blog của tác giả. Hãy đảm bảo rằng bạn đã bao gồm tất cả các mục quan trọng trong menu điều hướng này. Sử dụng menu theo kiểu drop down, trong đó có chứa các mục nhỏ... Hoặc sử dụng thêm widget Tag Cloud, để giúp người đọc tìm kiếm chủ đề nhanh hơn từ các Search Engine.

9. Đừng biến blog thành 1 mớ lộn xộn

Mỗi người quản trị đều muốn website của mình trong thật bắt mắt, do vậy họ cố trang trí giao diện với nhiều widget để tăng thêm phần hấp dẫn đối với người đọc. Và chính từ việc “trang trí” này, các thanh widget sẽ che phần lớn nội dung của bài viết. Sự có mặt của các thanh widget là rất tốt, nhưng quá nhiều thì chúng sẽ phản tác dụng và làm cho bài viết mất đi sự hấp dẫn. Luôn nhớ rằng chỉ nên trình diễn những gì tốt nhất và có sức thu hút với người đọc, nên sử dụng những gam màu sáng và chữ nổi, người đọc sẽ dễ chú ý hơn.

11. Không nên “thí nghiệm” trực tiếp trên website của mình

Nếu bạn có thói quen thử nghiệm các ứng dụng, công cụ hỗ trợ hoặc các plugin, add-on trực tiếp ngay trên website thì chúng tôi khuyến cáo bạn nên dừng ngay việc này lại, trừ khi bạn đã biết quá rõ và chắc chắn về những ứng dụng này. Việc này khá mạo hiểm vì nếu xảy ra lỗi, bạn khó có thể biết chính xác lỗi ở bước nào, khắc phục ra sao, nếu sửa lại thì còn mất nhiều thời gian và công sức hơn nhiều so với việc cài mới. Tốt nhất, các bạn nên thí nghiệm trên blog localhost, hoặc tạo ra 1 blog mới tại thư mục lưu trữ khác. Khi đã hoàn toàn làm chủ được ứng dụng mới trên hệ thống thử nghiệm này, hãy áp dụng trên thực tế. Và hãy luôn nhớ rằng thật cẩn thận!

12. Hãy cho người đọc biết bạn là ai

Để làm điều này, các bạn hãy thêm 1 mục hoặc trang riêng biệt thường thấy là About me hoặc About us. Điều này thực sự rất quan trọng, vì khi 1 người đọc bất kỳ cảm thấy bài viết trên website/blog rất hay và cuốn hút, họ muốn tìm hiểu tác giả của bài viết đó là ai. Bạn cần đưa ra những thông tin cá nhân cụ thể và chính xác, ví dụ như tên, chi tiết các lĩnh vực được đề cập đến trong blog. Khi thấy được những thông tin này, người đọc sẽ cảm thấy tin tưởng và quay lại thường xuyên hơn.

Mặc khác, việc thêm trang Contact us cũng quan trọng không kém đối với bất kỳ website nào. Đây là cách duy nhất để người đọc, đối tác hoặc bất cứ cá nhân nào muốn hợp tác với bạn. Nếu thiếu trang liên lạc này, đồng nghĩa với việc tác giả không muốn liên lạc với ai khác, hoặc nói theo cách khác là không tạo được sự tin tưởng tối thiểu cần thiết giữa tác giả và độc giả, dĩ nhiên những website đó sẽ không ai biết và nhớ đến nữa.

Trên đây là 1 số điều chú ý và kinh nghiệm cơ bản, khá cần thiết dành cho những người mới tập làm blog. Tất nhiên còn rất nhiều ý kiến và khía cạnh khác mà chúng tôi và các bạn đều muốn chia sẻ, hãy để lại ý kiến bình luận tại mục dưới đây. Chúc các bạn thành công!