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ứ Sáu, 13 tháng 12, 2013

Tạo mục bài viết liên quan theo label cho blogspot


Sau đây Blog thủ thuật tổng hợp - Người yêu blog xin giới thiệu với các bạn 1 thủ thuật blogspot:  "Bài viết liên quan - Related posts" dựa trên nhiều label (nhãn).

Bằng cách này sẽ hiển thị được nhiều bài viết liên quan đến nhiều label hơn, hướng visitor đến những bài cùng chủ đề tốt hơn.

Hướng dẫn cách thêm Bài viết liên quan theo nhiều label cho blogspot

Cách thực hiện

Bước 1- Đăng nhập vào Blog ==> Vào Mẫu ==> Chọn Chỉnh sử HTML (Edit HTML)

Khuyên các bạn nên down trực tiếp tất cả code blogspot về rồi chỉnh sửa bằng notepad ++ cho dễ nhé (chú ý sao lưu giữ lấy 1 bản để làm bản gốc để tránh trường hợp bị sai code ko phôi phục lại dc)

Bước 2 - Tìm một trong 4 đoạn code như bên dưới:

Đoạn 1: <div class='post-footer'>
Đoạn 2: <div class='post-footer-line post-footer-line-1'>
Đoạn 3: <div class='post-footer-line post-footer-line-2'>
Đoạn 4: <div class='post-footer-line post-footer-line-3'>


- Và gắn vào sau 1 trong 4 đoạn trên đoạn code bên dưới. (Lưu ý mỗi code trên mỗi đoạn có 2 lần lặp lại giống nhau bạn phải chèn đúng mới hiện thị nha). Vì vậy bạn cứ thêm lần lượt vào từng đoạn rồi up lên thử xem có hiển thị được không,nếu ko dc thì xóa đi rồi thêm vào đoạn code tiếp theo đên khi nào thấy hiển thi thì dừng


<!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;nguoiyeublog.blogspot.com&quot;;maxNumberOfPostsPerLabel = 6;maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#39; + query + &#39;/feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->

Chú ý:
  • Bạn sẽ phải thay đổi cho phù hợp với cách sắp xếp hiển thị bài viết liên quan theo nhãn phù hợp
  • Thay nguoiyeublog.blogspot.com bằng địa chỉ blog của bạn, lưu ý không có "/"  ở cuối và http://ở đầu. (ví dụ link blog bạn là http://nguoiyeublog.blogspot.com/   thì bạn chỉ lấy nguoiyeublog.blogspot.com và thay vào đó thôi )
  • maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label). Ở code trên là mình để là 6
  • maxNumberOfLabels là số nhãn (label) sẽ được hiển thị. Ở code trên là mình để là 3

Mọi thắc mắc và cần giúp đỡ vui lòng comment phía dưới nhé !




Thứ Năm, 5 tháng 12, 2013

Xóa các phần không cần thiết trong blogspot

Trong template mặc định của blogger có 1 số thành phần đôi khi gây khó chịu cho chúng ta vì nó hơi thừa. 

Ví dụ như khi nhấp vào 1 nhãn (label) thì phía trên bài viết đầu tiên sẽ xuất hiện dòng chữ "Hiển thị các bài đăng có nhãn..." hay dòng "Đăng ký: các bài đăng (Atom)" ở cuối blog... Và với bài viết này thì bạn có thể xóa bỏ được các thành phần đó 1 cách hiệu quả :

1. Xóa dòng "Đăng ký: Các bài đăng (atom)"

Vào template của bạn ở chế độ mở rộng mẫu tiện ích. Tìm và xóa dòng sau.
<b:include data='feedLinks' name='feedLinksBody'/>

2. Xóa dòng "Hiển thị các bài đăng có nhãn..."

Vào template của bạn ở chế độ mở rộng mẫu tiện ích. Tìm và xóa dòng sau.
<b:include data='top' name='status-message'/>

Thứ Hai, 25 tháng 11, 2013

Tăng lượng người truy cập cho blog

Sẽ thật vui nếu traffic - lượng người truy cập của blog cao ngất ngưởng đúng không,

 uhm... 2k tăng dần lên 5k, 10k / ngày chẳng hạn, rồi từ đó chắc chắn nó có thể hái ra xiền... Vui thôi, để tăng traffic cho blog thì cũng cần 1 số cách
Trong bài viết sau đây, chúng tôi sẽ trình bày một số mẹo thủ thuật cơ bản để giúp mọi người khắc phục và cải thiện vấn đề này, cụ thể là làm thế nào để tăng lượng traffic của blog lên theo cách nhanh nhất có thể.




1. Bình luận trên các blog khác:
Có thể nói thông tin theo kiểu “truyền miệng” là 1 trong những cách thức tốt nhất để tăng hạng website, do vậy bạn hãy dành chút thời gian để tìm kiếm blog, website tương tự và dự đoán rằng có thể nắm bắt được, sau đó tham gia hoạt động và để lại bình luận tại đó. Hãy hòa mình vào những cộng đồng trực tuyến và cho mọi người biết về những gì bạn đang chia sẻ, và cũng đừng quên để lại đường dẫn liên kết để họ tham khảo. Trong trường hợp khác, nếu tìm thấy bất kỳ bài viết nào có dấu hiệu của sự tranh cãi, thì đây chính là 1 cơ hội tốt cho bạn, cho dù có đứng về phía nào đi nữa – cách này thường mang lại hiệu quả rất cao mà không phải tốn quá nhiều nỗ lực.

1. Hãy kiên nhẫn:
Sự thật là ngay lúc này mình muốn bạn kiên nhẫn đọc hết bài này, chắc chắn sẽ giúp ích được cho blog của bạn.
Thật ra, tác giả nên xếp ý kiến này vào phần cuối của bài viết, nhưng để duy trì được sự tập trung và bình tĩnh cho bạn đọc, đây là lời khuyên chân thành và có ích nhất. Hãy kiên nhẫn! Bất cứ blog nào cũng không thể thành công ngay lập tức được, hãy thử tưởng tượng như sau: nếu bạn bắt đầu viết blog vào tối ngày thứ 3, thì việc mọi người biết đến nó vào sáng ngày thứ 4 gần như không thể thực hiện được. Tất cả những gì cần làm là kiên nhẫn và chờ đợi, có thể 1 tuần, 1 tháng hoặc 1 năm sau đó bạn sẽ nhận được kết quả xứng đáng.
3. Tạo RSS Feed:
Đây là 1 tính năng gần như không thể thiếu đối với các trang tin tức, blog, mạng xã hội… hiện nay, vì tất cả những người đăng ký sử dụng dịch vụ này sẽ ngay lập tức biết khi nào bạn có bài viết mới.




5. Sử dụng công cụ của các mô hình mạng xã hội phổ biến hiện nay:

Theo xu hướng hiện nay, nếu muốn lấy traffic tốt thì nên tham gia 2 mạng cồng đồng lớn đó là Google Plus và facebook, mình thì hay "spam" 2 cái này để kiếm traffic là chủ yếu, ngoài ra còn có zingme, linkhay...
Mặt khác, các bạn hãy bỏ thời gian để đăng tải và chia sẻ nội dung bằng các công cụ bookmark tới mạng xã hội khác như Digg, StumbleUpon hoặc Reddit… Dựa vào xu hướng ngày nay của phần lớn người sử dụng, đây chính là môi trường và điều kiện thuận lợi nhất để đẩy lượng traffic tăng cao, và cũng đừng quên kiểm tra kỹ càng và thường xuyên cập nhật nội dung blog.
Tham gia các hội nhóm cùng trao đổi học tập cũng là 1 cách đấy, thử đi.
4. WIIFM: What’s In It For Me?
Đây là 1 từ viết tắt của What’s In It For Me?, được sử dụng khá phổ biến trong lĩnh vực phát thanh và truyền hình. Khi khái niệm này bắt đầu xuất hiện và lan truyền trên Internet, nhiều người thường tự hỏi bản thân rằng: “Tại sao mình lại phải quay lại?”, “Tại sao lại phí thời gian để đọc blog này nhỉ?” hoặc “Tại sao lại đăng ký dịch vụ này?”… Nếu bạn chịu khó bỏ thời gian để đăng tải những nội dung phù hợp với xu hướng và những chủ đề được quan tâm nhiều, chắc chắn lượng traffic website của bạn sẽ tăng lên đáng kể. Bên cạnh đó, lượng traffic này có liên quan trực tiếp đến nội dung đăng tải, vì vậy hãy thật chắc chắn và cẩn thận với những gì bạn viết trên blog.

6. Kích hoạt chuyên mục bình luận lúc phù hợp:

Có lẽ 1 trong những điều bạn hay bất cứ blogger nào không hề mong muốn là nhìn thấy phần 0 comments dưới mỗi bài viết, có nghĩa rằng nội dung chính của website này hầu như không thu hút được bạn đọc, khô khan và không phổ biến. Vì vậy trong khi blog của bạn đang trong quá trình phát triển ban đầu, hãy tạm thời khóa tính năng bình luận để không ai biết rằng chỉ có số lượng rất ít người truy cập mỗi ngày. Cho tới khi hệ thống của bạn đạt được khoảng 100 hoặc nhiều hơn người đăng ký sử dụng dịch vụ RSS, hãy mở lại tính năng bình luận và chờ đợi những sự thay đổi đang tới.

7. Mở rộng nội dung:

Bản chất tự nhiên của phần lớn chúng ta là tò mò, thích tìm hiểu, khám phá về những điều mới lạ. Và tại sao lại chỉ giới hạn những chủ đề nhất định trong toàn bộ các chuyên mục của blog? Không có gì thu hút và lôi cuốn người đọc bằng cách chia sẻ những nội dung bí mật. Đây thường là những bài viết trong phần Private – yêu cầu người sử dụng phải đăng nhập để có thể xem chi tiết. Do vậy, hãy xác định ngay từ ban đầu những gì cần và nên có trong toàn thể nội dung blog của bạn, phân mục rõ ràng và hạn chế những bài viết không có chất lượng.
8. Xây dựng thương hiệu:

Đây là 1 trong những công đoạn quan trọng và gần như không thể thiếu trong quá trình xây dựng 1 nền tảng vững chắc. Mỗi khi người đọc nghĩ đến biểu tượng hoặc một điều gì đó phổ biến, họ sẽ nghĩ đến blog của bạn. Mặt khác, khéo léo hòa trộn nội dung chính của blog và những chuyên mục có tính giải trí, ví dụ như truyện cười, video quảng cáo hấp dẫn, những đoạn phim ngắn… sẽ giữ chân người đọc lâu hơn.
9. Hãy nói lên quan điểm:

Đứng trên quan điểm tác giả bài viết, đồng thời cũng là người đọc đầu tiên, bạn hãy thể hiện và chia sẻ toàn bộ cảm xúc, suy nghĩ về vấn đề đang hướng tới. Để truyền tải thành công ý tưởng của tác giả, bạn không nên chỉ đứng về 1 phía hoặc 1 mặt của chủ đề chung, hãy công bằng, bám vào ý chính và cố gắng thu hút được sự chú ý của người đọc. Nhưng bên cạnh đó, hãy cẩn thận với từng lời nói, câu chữ được đưa vào mục bình luận này, vì một khi đã nói ra 1 câu, không có cách gì có thể sửa chữa hoặc lấy lại câu nói đó.

10. Viết nhiều hơn nữa:

Đây là công đoạn bắt buộc đối với bất cứ ai, cũng như bất cứ blog nào nếu muốn thành công và thu hút người đọc. 1 website hoặc blog hấp dẫn đều phải được xây dựng trên nền tảng cơ bản và vững chắc về mặt công nghệ và nội dung. 1 chủ đề không thể tồn tại quá lâu trên trang chủ của blog, người đọc sẽ cảm thấy nhàm chán và không muốn quay lại.
Bạn có thể thay đổi thứ tự các bài trong khi chưa có bài viết mới, và khi đã quen với việc viết và cập nhật nội dung hàng ngày, bạn sẽ nhận thấy sự thay đổi rõ nét trong thứ tự xếp hạng từ các Search Engine. Chúc các bạn thành công!
Và 1 điều vô cùng quan trọng để tăng traffic cho blog... đó là blog của bạn cần có 1 nội dung tốt, cung cấp bài viết đúng nhu cầu mà người đọc cần.
Sưu tầm: Theo Quản trị mạng

Thứ Bảy, 23 tháng 11, 2013

Thủ thuật tạo Menu dọc cho Blogspot với CSS

Mặc định các nhãn, trang của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó với thủ thuật blogspot, để tạo menu dọc các bạn phải dán code vào mã nguồn và một vào HTML/Javacrip.

1. Đăng nhập vào tài khoản Blogger.com
2. Vào phần thiết kế (Design)
3. Chọn Phần tử trang
4. Chọn Thêm tiện ích (Add Widgrt) - thêm 1 tiện ích HTML/Javarscrip.
5. Dán đoạn code bên dưới vào:
<div id="menulaber">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
6. Lưu tiện ích lại.
7. Tiếp theo các bạn định dạng CSS cho các menu của các bạn bằng cách:
  • Chọn Thiết Kế
  • Chọn Chỉnh sử HTML
  • Dưới đây là 25 mẫu nếu thích mẫu nào thì các bạn Copy đoạn CSS đó và dán vào trước thẻ ]]></b:skin>

Mẫu 1:
Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS
CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExU8Tnhyphenhyphen6TOprVbcRjWg2Y3_-L-f1SB9M2hROqt13Qj53wm6EeuZ981R12Aiwh6LiFNt2vTj6Cqn_rIebteGG8WZRpLb91V4G5ujcXsmtiEZScX_bSanDiW5VS69qKEkBAzGTDT6t6L0n/s1600/menu1-namkna-blogspot-com.gif); padding: 8px 0 0 35px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExU8Tnhyphenhyphen6TOprVbcRjWg2Y3_-L-f1SB9M2hROqt13Qj53wm6EeuZ981R12Aiwh6LiFNt2vTj6Cqn_rIebteGG8WZRpLb91V4G5ujcXsmtiEZScX_bSanDiW5VS69qKEkBAzGTDT6t6L0n/s1600/menu1-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 35px; }
Mẫu 2:
Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS

CSS: 
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleJ5VmdxfbK6G8JlJz4C0p-bps5Du45ZsqVJgMDXmdYTEjQGqq7xCEClrhxWSgR3pGe1gWxGdYNLUv4sHo9uEVhUol4LdeuM0qpFLNmJf84DPYY2-nfHcVweZcWkXnh7wzfuXOo25aQRW/s320/menu2-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleJ5VmdxfbK6G8JlJz4C0p-bps5Du45ZsqVJgMDXmdYTEjQGqq7xCEClrhxWSgR3pGe1gWxGdYNLUv4sHo9uEVhUol4LdeuM0qpFLNmJf84DPYY2-nfHcVweZcWkXnh7wzfuXOo25aQRW/s320/menu2-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 3: 
Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS

CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmD9eO7DL6jZjTyfo_8IvV7i0ZdrRvNpg2D5Bl1jKkaburIrFKKBcCayd_JlS9wvPnzEdnCwzv_3tQJVI6PGjTKedJF-YaY-74mv2kBsgVsjebkFd9wpUEvOYzzZwcYGddAlSaT-HrSZOq/s320/menu3-namkna-blogspot-com.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmD9eO7DL6jZjTyfo_8IvV7i0ZdrRvNpg2D5Bl1jKkaburIrFKKBcCayd_JlS9wvPnzEdnCwzv_3tQJVI6PGjTKedJF-YaY-74mv2kBsgVsjebkFd9wpUEvOYzzZwcYGddAlSaT-HrSZOq/s320/menu3-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 20px; }
Mẫu 4: 
Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS

CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgethqsmS0qCnhlQI5Osykk4yVNeLfKxdp5-Fx_qgjLi_j0iUww6T2g0chfqMBTTNx8kAS5G4IrXLMqYJrLprzSpKuEVJvmuKgt4PxtqpwwjFGfynCGg2LCMfv_0MHFXNo2t6bFfR8d0fQ5/s320/menu4-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgethqsmS0qCnhlQI5Osykk4yVNeLfKxdp5-Fx_qgjLi_j0iUww6T2g0chfqMBTTNx8kAS5G4IrXLMqYJrLprzSpKuEVJvmuKgt4PxtqpwwjFGfynCGg2LCMfv_0MHFXNo2t6bFfR8d0fQ5/s320/menu4-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; }
Mẫu 5: 
Menu - Thủ thuật tạo Menu dọc cho Blogger bằng CSS

CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pu_-3RJYRp0Q2MCQNAJA7RSz2qsn3ZySongMvIluS6Ln_RB_LE6Y5goSPY_NMdgU8A6FO5eplDNExqToLNlpJvGYTOX551Z3eLKWyeJi1ui_ddk5LXh8mDSkOABTSVphQm61CrD87VcL/s320/menu5-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1pu_-3RJYRp0Q2MCQNAJA7RSz2qsn3ZySongMvIluS6Ln_RB_LE6Y5goSPY_NMdgU8A6FO5eplDNExqToLNlpJvGYTOX551Z3eLKWyeJi1ui_ddk5LXh8mDSkOABTSVphQm61CrD87VcL/s320/menu5-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
Mẫu 6: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiS1UGSSigE6yITNYpcOIbTtv8ZIeUUyh64PJTgFWI8Po5oX5qkszRSIpR5fxS73jy82kd73UoZLLl_V26D-9q4Ngv1rpoqewt0CW9Xf7tidiEs9V6RmdZfMZE1tc2UfSONH8mYVc_1LKC/s1600/menu6-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiS1UGSSigE6yITNYpcOIbTtv8ZIeUUyh64PJTgFWI8Po5oX5qkszRSIpR5fxS73jy82kd73UoZLLl_V26D-9q4Ngv1rpoqewt0CW9Xf7tidiEs9V6RmdZfMZE1tc2UfSONH8mYVc_1LKC/s1600/menu6-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; }
Mẫu 7: 
CSS
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; } #menulaber { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sJw9_sageLhL-bN_ULlEXyh7RtpUwp1zmqAanebJjMPzFW0qIqKPLn5bXQOhKQghsc6LHnNEjtnssrZ0nrMC5Dz6QxY1FHrXhF3STpBsphbMrSUpftaZhjZwOd-8nweR6WLjMEvq7RlZ/s320/menu7-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sJw9_sageLhL-bN_ULlEXyh7RtpUwp1zmqAanebJjMPzFW0qIqKPLn5bXQOhKQghsc6LHnNEjtnssrZ0nrMC5Dz6QxY1FHrXhF3STpBsphbMrSUpftaZhjZwOd-8nweR6WLjMEvq7RlZ/s320/menu7-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sJw9_sageLhL-bN_ULlEXyh7RtpUwp1zmqAanebJjMPzFW0qIqKPLn5bXQOhKQghsc6LHnNEjtnssrZ0nrMC5Dz6QxY1FHrXhF3STpBsphbMrSUpftaZhjZwOd-8nweR6WLjMEvq7RlZ/s320/menu7-namkna-blogspot-com.gif) 0 -64px; padding: 8px 0 0 10px; }
Mẫu 8: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin-top: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3S99PrxuIqy248G6IMeqsgC2fqT6WhlzgTsa36B0aVHBkpiYa1PUz9etOizfIqGxVYE1U5pMyz6tdFoicwHp0u_s9WVV4wzG2ZqUccA8zHg991qiiXQu6niUQdEVvmN3_43xEVj-1-cNR/s320/menu8-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3S99PrxuIqy248G6IMeqsgC2fqT6WhlzgTsa36B0aVHBkpiYa1PUz9etOizfIqGxVYE1U5pMyz6tdFoicwHp0u_s9WVV4wzG2ZqUccA8zHg991qiiXQu6niUQdEVvmN3_43xEVj-1-cNR/s320/menu8-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3S99PrxuIqy248G6IMeqsgC2fqT6WhlzgTsa36B0aVHBkpiYa1PUz9etOizfIqGxVYE1U5pMyz6tdFoicwHp0u_s9WVV4wzG2ZqUccA8zHg991qiiXQu6niUQdEVvmN3_43xEVj-1-cNR/s320/menu8-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 10px; }
Mẫu 9: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Jxa6nVfIaTnuB-PAucCvnD5ZwWj2uEc0_3Wfg9mzVuCbDUOumMuGtP7H8FaX47NBbEAGwn2zSQMC0XCA_WgUb_GBsIh6FO_TwdYA1hi9uLHqUMcOdrjJsQiIwRsmQw3ElGquSsrNF1fh/s320/menu9-namkna-blogspot.gif); padding: 10px 0 0 35px; }
#menulaber li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Jxa6nVfIaTnuB-PAucCvnD5ZwWj2uEc0_3Wfg9mzVuCbDUOumMuGtP7H8FaX47NBbEAGwn2zSQMC0XCA_WgUb_GBsIh6FO_TwdYA1hi9uLHqUMcOdrjJsQiIwRsmQw3ElGquSsrNF1fh/s320/menu9-namkna-blogspot.gif) 0 -32px; padding: 10px 0 0 35px; }
Mẫu 10: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcL8jiAlGyV4LTmaHjOQHDDsilS_PLSb7PZhPdiZ9WJ8wjmn2PgW85I42ty5pHZ236o5My4OSTWpRPmYZ3GBcpujiYDemSKXrlaezb9W-F_2VBODvVITZqalS1FfcFVKih32suwgmvJzh/s320/menu10-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTcL8jiAlGyV4LTmaHjOQHDDsilS_PLSb7PZhPdiZ9WJ8wjmn2PgW85I42ty5pHZ236o5My4OSTWpRPmYZ3GBcpujiYDemSKXrlaezb9W-F_2VBODvVITZqalS1FfcFVKih32suwgmvJzh/s320/menu10-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 11: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8byKF5FIZtAnx3J7YMcC7oPD1CGLCXBWFrHC9oooSJ8z0h1GeK7Q5MuFdRiXu8dzBXgP0DXpqR4i3i_zn_sQL9ruvlZXJIATX_wRXbMKtPDvyUZoL-TLLcM-LSu1qEjIK2eyYdDem7R1/s1600/menu11-namkna-blogspot.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8byKF5FIZtAnx3J7YMcC7oPD1CGLCXBWFrHC9oooSJ8z0h1GeK7Q5MuFdRiXu8dzBXgP0DXpqR4i3i_zn_sQL9ruvlZXJIATX_wRXbMKtPDvyUZoL-TLLcM-LSu1qEjIK2eyYdDem7R1/s1600/menu11-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 30px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy8byKF5FIZtAnx3J7YMcC7oPD1CGLCXBWFrHC9oooSJ8z0h1GeK7Q5MuFdRiXu8dzBXgP0DXpqR4i3i_zn_sQL9ruvlZXJIATX_wRXbMKtPDvyUZoL-TLLcM-LSu1qEjIK2eyYdDem7R1/s1600/menu11-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 30px; }
Mẫu 12: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin-top: 10px; }
#menulaber li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; }
#menulaber li a:link, #menulaber li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLP2V5T3kZ0DwzzKGBJCwfbzpc3bxHi4BnbdCFJPFnoOERq-rRDs4eBIiC9VXT8J7DNmRNakV43_v3WWaPe35siWIV8f1U9W3L6jnx2DlUz4Ctx1KLWzrCJ1MOoZmWhrqU359sz7GDXtI/s1600/menu12-namkna-blogspot.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover, #menulaber li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLP2V5T3kZ0DwzzKGBJCwfbzpc3bxHi4BnbdCFJPFnoOERq-rRDs4eBIiC9VXT8J7DNmRNakV43_v3WWaPe35siWIV8f1U9W3L6jnx2DlUz4Ctx1KLWzrCJ1MOoZmWhrqU359sz7GDXtI/s1600/menu12-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 25px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLP2V5T3kZ0DwzzKGBJCwfbzpc3bxHi4BnbdCFJPFnoOERq-rRDs4eBIiC9VXT8J7DNmRNakV43_v3WWaPe35siWIV8f1U9W3L6jnx2DlUz4Ctx1KLWzrCJ1MOoZmWhrqU359sz7GDXtI/s1600/menu12-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 25px; }
Mẫu 13: 
CSS:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzFnHMjrCXIVlR6DbUxPOZs1BhPEYJQB03evEO5W5vj3hFE0T9pS5BRb2hIcOVjvjiVHreD0b6_vpBnzdJOXtBuO8Yk1kmICeLJldQcS56479ip-FhQH9Y_Ke8gprkUW3MwKfQ6CXrv0N/s1600/menu13-namkna-blogspot.gif) ; padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBzFnHMjrCXIVlR6DbUxPOZs1BhPEYJQB03evEO5W5vj3hFE0T9pS5BRb2hIcOVjvjiVHreD0b6_vpBnzdJOXtBuO8Yk1kmICeLJldQcS56479ip-FhQH9Y_Ke8gprkUW3MwKfQ6CXrv0N/s1600/menu13-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 20px; }
Mẫu 14:
#menulaber body { font-family: Verdana, Arial, Helvetica, sans-serif;  margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; }  
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghntbCMIEkQst36LLvqoCH2simgUwvShetqdgd-eoBs_Fn4YH1pxV3U5wEOluVqQm9SHZzaxBMyU2bMfPqSBhUaszFPlXtwfGNB7NePLnxx-JVtJOXR9JrJwgY-_1_7e6IpkRqN7uCJlA/s800/menu1.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghntbCMIEkQst36LLvqoCH2simgUwvShetqdgd-eoBs_Fn4YH1pxV3U5wEOluVqQm9SHZzaxBMyU2bMfPqSBhUaszFPlXtwfGNB7NePLnxx-JVtJOXR9JrJwgY-_1_7e6IpkRqN7uCJlA/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 16:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVn80-KkuHgEK4AWqHQYiRRxNYppM3WHv-3Cc3HLgDHQ7uR-eZ2-BlOFiqmbwDWgs1_VSyzYaEil6OPYmdh1VsAx26pJk1_ZP-HFeLhILcJIxpHhHUz27acbKtMkPLSqq8n1OYTiD81U/s800/menu3.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVn80-KkuHgEK4AWqHQYiRRxNYppM3WHv-3Cc3HLgDHQ7uR-eZ2-BlOFiqmbwDWgs1_VSyzYaEil6OPYmdh1VsAx26pJk1_ZP-HFeLhILcJIxpHhHUz27acbKtMkPLSqq8n1OYTiD81U/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 18:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLpxHZZ-A30hy9dYxsrGmas_egxbnDVoXCUY9I9vLndLqhjKqBHgwM4rTKcO6nLVfrLroYFJs5XJVq1lVgSwIWNzdRyZh0Igc9Hx2dUOJXJGVVp-DJnqdGQ3sNPKmV8v6dQnspcsYQcg/s400/menu11.gif); padding: 8px 0 0 25px; }
#menulaber li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLpxHZZ-A30hy9dYxsrGmas_egxbnDVoXCUY9I9vLndLqhjKqBHgwM4rTKcO6nLVfrLroYFJs5XJVq1lVgSwIWNzdRyZh0Igc9Hx2dUOJXJGVVp-DJnqdGQ3sNPKmV8v6dQnspcsYQcg/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }
Mẫu 19:
#menulaber { width: 20em; border-right: 1px solid #000; padding: 0 0 1em  0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif;  /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/  font-size : 10px; background-color: #90bade; color: #333; } 
#menulaber ul { list-style: none; margin: 0; padding: 0; border: none; }
#menulaber li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; }
#menulaber li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #menulaber li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
#menulaber li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
Mẫu 20:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiMHWMjGqIqKeA6q0MPbOgvilTtnvTJmf8P7ZNhnmnAd70DYfZEucL-OKVsXYWnWdbqVVZ0BJp1_aVS9uUbqv4ygZVRKPv5SgFAFospXk8xl72fC35yhgsf_4hVp8vzcMhvQ5_GQSJfI4/s800/menu1.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiMHWMjGqIqKeA6q0MPbOgvilTtnvTJmf8P7ZNhnmnAd70DYfZEucL-OKVsXYWnWdbqVVZ0BJp1_aVS9uUbqv4ygZVRKPv5SgFAFospXk8xl72fC35yhgsf_4hVp8vzcMhvQ5_GQSJfI4/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiMHWMjGqIqKeA6q0MPbOgvilTtnvTJmf8P7ZNhnmnAd70DYfZEucL-OKVsXYWnWdbqVVZ0BJp1_aVS9uUbqv4ygZVRKPv5SgFAFospXk8xl72fC35yhgsf_4hVp8vzcMhvQ5_GQSJfI4/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }
Mẫu 21:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9nYa1uyOPfycjL1xVpkpNwbYi4omruwMrVaZYSF0fo_x1w-D1eRurc8RAN42GED_3cNts464261qSQtjix_PudFfRD83dWo2uhy1rVjpu04YcM03uTnV-fcRVuqmf_xbMwzw-94BnCQ/s800/menu2.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9nYa1uyOPfycjL1xVpkpNwbYi4omruwMrVaZYSF0fo_x1w-D1eRurc8RAN42GED_3cNts464261qSQtjix_PudFfRD83dWo2uhy1rVjpu04YcM03uTnV-fcRVuqmf_xbMwzw-94BnCQ/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }
Mẫu 22:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBTlqrCT6EjEdlhTWpk5pI5u51qlE1ARXv7gGNO0pjUGVqGYbqtVPhiT7722tjofvamLcyuf-CmvLpdEegRlCzTpRGLOh-ScpPeBHqAYvnKj66XSbpt08cwYCqrKL6YdyrOGOynlq8sA/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; }
#menulaber li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBTlqrCT6EjEdlhTWpk5pI5u51qlE1ARXv7gGNO0pjUGVqGYbqtVPhiT7722tjofvamLcyuf-CmvLpdEegRlCzTpRGLOh-ScpPeBHqAYvnKj66XSbpt08cwYCqrKL6YdyrOGOynlq8sA/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJBTlqrCT6EjEdlhTWpk5pI5u51qlE1ARXv7gGNO0pjUGVqGYbqtVPhiT7722tjofvamLcyuf-CmvLpdEegRlCzTpRGLOh-ScpPeBHqAYvnKj66XSbpt08cwYCqrKL6YdyrOGOynlq8sA/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }
Mẫu 23:

#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuVY1mHXqf0y1JhkA9mYOQy3z-3EM0V542k4SJIIZdfCO4joOfXlQyPuIk7cTbBA2lYhohPmWRJ0_8B4B0G7Q8X7jG4hDSKqswLNp_-bgFt7mw5YDSccYRGLXm3zg8rsnm5W6urdXrog/s800/menu5.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuVY1mHXqf0y1JhkA9mYOQy3z-3EM0V542k4SJIIZdfCO4joOfXlQyPuIk7cTbBA2lYhohPmWRJ0_8B4B0G7Q8X7jG4hDSKqswLNp_-bgFt7mw5YDSccYRGLXm3zg8rsnm5W6urdXrog/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 24:
#menulaber ul { list-style: none; margin: 0; padding: 0; } 
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi7K5trT8vziGVX3qx-31vgg1YaZ8r3-Nq_FZddA8FZ-XECNKM_yDhqeqqC4Qqfqx0Y4Gd8T7gZhyphenhyphenpCeofcdPOTcvd_LrKAVnssYmBQhXGKRxLzzxKgaUbsBRwnMJhtrgdhBYDXN5MHnE/s800/menu4.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi7K5trT8vziGVX3qx-31vgg1YaZ8r3-Nq_FZddA8FZ-XECNKM_yDhqeqqC4Qqfqx0Y4Gd8T7gZhyphenhyphenpCeofcdPOTcvd_LrKAVnssYmBQhXGKRxLzzxKgaUbsBRwnMJhtrgdhBYDXN5MHnE/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }
Mẫu 25:
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDtDSVAZFqluyC3uO7vU9haZQQqB3l5Op2-fJtstos97_I0GUABPtFFP5mtTj-YafAu-6Tpv5sah0dF4iVH1pJmAbPHNPLprtVjuv7Ek42g3RXNCEkEpkTmm7HEKxKS8tVaYo6nImZ8o/s800/menu10.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJDtDSVAZFqluyC3uO7vU9haZQQqB3l5Op2-fJtstos97_I0GUABPtFFP5mtTj-YafAu-6Tpv5sah0dF4iVH1pJmAbPHNPLprtVjuv7Ek42g3RXNCEkEpkTmm7HEKxKS8tVaYo6nImZ8o/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Thứ Năm, 21 tháng 11, 2013

Hướng dẩn chèn code comment của facebook vào blogspot

Facebook đã trở nên phổ biến và quen thuộc mỗi khi chúng ta muốn lên đây để ... "chém gió". Và hôm nay mình sẽ hướng dẫn cho các bạn đem cái công cụ "chém gió" này vào blog của các bạn. Với việc thay thế comment của blogspot bằng comment của facebook hy vọng blog của các bạn sẽ sôi động hơn.

Có thể nói thủ thuật chèn comment của facebook vào mỗi bài viết blogspot cũng không mới lạ gì, 1 số blog thủ thuật nước ngoài đã đăng tải rồi (các bạn có thể vào google search với từ khóa facebook comments for blogger là có kết quả ngay). Tuy nhiên phải nói là cách thực hiện nó cũng khá phức tạp. Ngay cả mình cũng chưa thực hiện thành công khi làm theo các bước hướng dẫn. Có lần mình đã cố thử vào trang http://developers.facebook.com/setup/ mà không được, không biết có phải facebook hạn chế đối với user ở Viện Nam ko nữa.
Và ở thủ thuật này, các bạn sẽ chỉ cần copy và paste code là xong, không cần phải thiết lập hay tạo App trên facebook.
Bước đầu tiên bạn phải làm là đóng comment của blogger lại( có thể bỏ qua bước này). Các bước thực hiện như hình bên dưới :



- Save cài đặt lại.

Bước 2 : chèn code của thủ thuật vào template.
1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
- data-width là độ rộng của comment box.
data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.

3. Chèn đoạn code bên dưới vào sau thẻ <body>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>










4. Tìm đoạn code như bên dưới :
<b:include data='post' name='post'/>
5. Chèn ngay sau nó đoạn code bên dưới :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>







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

Hướng dẫn thay đổi giao diện cho blogger

Blogger là một dịch vụ cung cấp miễn phí cho người dùng, với lợi thế có sự chống lưng của ông Trùm Google blogger được trang bị khá đầy đủ những yếu tố thích hợp cho một blogger chuyên nghiệp, trong số đó tính năng thay đổi theme (giao diện) là một điểm nhấn chứng tỏ phong cách riêng của mỗi blogger nhưng không quá xa với cộng đồng.
Bài viết này mình xin liệt kê lại những bước thủ thật cơ bản cho những bạn mới làm quen với blogger.
Trước tiên bạn cần ĐĂNG NHẬP vào blogger với tài khoản Google của mình. Sau khi đăng nhập thành công hệ thống chuyển bạn sang Portal của blogspot tương tự hình sau:







Để tiến hành thay theme (giao diện) bạn nhấn vào liên kết "THIẾT KẾ" ---> chọn menu "CHỈNH SỮA HTML":







Bấm vào "CHỌN TIỆP TIN" (thứ tự 3) và chọn file ".XML " của theme bạn muốn thay, sau đó nhấn "TẢI LÊN",
Nếu bạn thấy xuất hiện một hộp thoại với nội dung tương tự như sau:



Nhấn bạn chọn "GIỮ TIỆN ÍCH" để hoàn tất yêu cầu thay theme.

Ngoài ra bạn cũng có thể chỉnh sửa một số hiển thị cho blog của bạn tại menu "TRÌNH THIẾT KẾ MẪU"



Chúc các bạn thành công.
Tác giả: mr.winni

Thứ Tư, 13 tháng 11, 2013

Ý nghĩa của thẻ margin và padding trong css

Bài viết này sẽ hướng dẫn các bạn làm quen với margin padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.

MARGIN
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.

Margin


Bốn giá trị:
margin 10px 5px 0 5px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px

Ba giá trị:
margin: 30px 20px 70px;

Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px

Hai giá trị:
margin: 30px 20px;

Lề trên và dưới: 30px
Lề trái và phải: 20px

Một giá trị:
margin: 100px;

Tất cả các lề đều được canh một khoảng cách 100px

Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.

margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

(Các con số ở đây là ví dụ)

PADDING

Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó. Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.

Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).

Padding

Ví dụ:

padding: 15px 30px 25px 0;

Trên 15px, phải 30px, dưới 25px, trái 0px
Ngoài ra người ta có thể dùng:

padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;


(Các con số ở đây là ví dụ)
Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!

Thứ Hai, 11 tháng 11, 2013

Thủ thuật blogspot ẩn tiện ích hoặc nhãn khỏi trang chủ hoặc trang con

Đôi khi chúng ta cần ẩn một hay nhiều tiện ích hoặc một thành phần nào đó tại trang chủ hoặc trang riêng biệt nào đó để giúp dễ dàng hơn trong việc bố trí thiết kế trang chủ blogspot theo ý thích của người tạo blog. Hôm nay tôi sẽ hướng dẫn cách ẩn tiện ích và thành phần ở một phần riêng biệt nào đó của blog.

Muốn ẩn một tiện ích hoặc một thành phần nào đó thì ta phải xác định được id hoặc class của nó. Các id thông thường trong blogspot như là: HTML1, HTML2, HTML3, …, Label1, Label2, Label3, …, BlogList1, Followers1, Blog1, BlogArchive1, Profile1, header-wrapper, sidebar, main-wrapper, footer-wrapper, comments, comments-block, … Các id khi đưa vào CSS có dấu # ở phía trước, ví dụ: #HTML1. Các class thường gặp trong blogspot như: header-outer, main-outer, footer-outer, post-body, post-footer, … Các class khi đưa vào CSS có dấu . (dấu chấm) ở phía trước, ví dụ: .header-outer.

Lấy ví dụ muốn ẩn tiện ích có id là HTML1 ở trang chủ thì đặt đoạn code sau đây vào sau dòng ]]></b:skin> trong Template.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn nhiều tiện ích ở trang chủ, ví dụ các tiện ích có id lần lượt là HTML1, Label1, Followers1 thì sử dụng đoạn code sau.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#HTML1#Label1#Followers1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn tiện ích có id là HTML1 ở các trang bài viết thì sử dụng đoạn code sau.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn tiện ích có id là HTML1 ở các trang chính gồm trang chủ, trang nhãn, trang lưu trữ thì sử dụng đoạn code sau.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn tiện ích có id là HTML1 ở các trang lưu trữ thì sử dụng đoạn code sau.
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn tiện ích có id là HTML1 ở các trang tĩnh thì sử dụng đoạn code sau.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Nếu muốn ẩn tiện ích có id là HTML1 ở một trang riêng biệt nào đó thì sử dụng đoạn code sau.
<b:if cond='data:blog.url == &quot;URL của trang riêng biệt&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Trong trường hợp muốn ẩn tiện ích có id là HTML1 ở trang chủ, các trang nhãn, các trang lưu trữ mà không ẩn ở các trang bài viết thì sử dụng đoạn code sau.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#HTML1 {display:none !important;visibility:hidden !important}
</style>
</b:if>
Như vậy muốn ẩn một cái gì đó thì nó phải có id hoặc class.