Hiệu ứng phóng to ảnh sử dụng jQuery

Hiệu ứng này sẽ giúp trong việc trình bày các hình ảnh trong một cách rất đẹp trong blog của bạn.Nó giúp để trình bày hình ảnh với nhiều kích thước hơn bằng cách phóng to để xem kích thước thật của ảnh gốc.File script này được đưa ra bởi Dynamicdrive. Vì vậy bạn có thể tìm thấy đoạn script tại trang web này.

Demo: thử nháy chuột vào hình xem thế nào.(^^!)

Để thao tác, bạn làm như sau:

1. Bạn chèn đoạn code bên dưới và trên thẻ </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.yourjavascript.com/560192341/magnifier.txt.js">
</script>

2. Để sử dụng, trong bài đăng có chứa ảnh bạn sử dụng đoạn code dưới cho ảnh bài đăng.

<img class="magnify"  magnifyby="3" style="width: 200px; height: 250px;" src="URL_IMAGE" alt="" border="0" />

Thay URL_IMAGE bằng một LINK ẢNH  .

 4. Test thử xem kết quả thế nào nhé. Còn bạn nào muốn tải file js về sử dụng cho host riêng thì có thể tải tại đây.

Nguồn: Bloggerzbible

[Click here to Read More]

Thêm chữ ký tác giả bên dưới bài đăng

Bạn có thể muốn thêm một chữ ký tự động tùy chỉnh bên dưới mỗi bài đăng trên blog của bạn. Điều này sẽ hữu ích hơn nếu bạn đang sỏ hữu một Blog với nhiều tác giả. Bạn có thể sử dụng chữ ký duy nhất cho mỗi author.Tương tự, bạn có thể được thực hiện trên một blog có một tác giả duy nhất:)

Để thao tác, bạn làm như sau.

1. Tạo một chữ ký bằng cách sử dụng Photoshop hoặc sử dụng dịch vụ tạo chữ ký trực tuyến như http://www.mylivesignature.com

2. Sau khi tạo chữ ký, bạn upload ảnh chữ ký lên host lưu trữ ảnh để lấy link ( bạn có thể upload lên Picasa, Photobucket,...).

3. Khi đã upload xong, bạn lấy link và Đăng nhập vào Blogger > Thiết kế > Chỉnh sửa HTML và Mở rộng mẫu tiện ích ( Expand your Widget Templates ).

4. Tìm đến

<div class='post-footer-line post-footer-line-1'>

Hoặc nếu bạn không tìm thấy đoạn code trên có thể tìm đoạn code sau.

<p class='post-footer-line post-footer-line-1'>

Hoặc là

<data:post.body/>

a. Nếu Blog bạn chỉ có một tác giả (Author) , thêm vào dưới các đoạn code trên với đoạn code.

<img src='url_of_your_signature_image' style='border:0px;'/>

Thay url_of_your_signature_image bằng link ảnh mà bạn vừa lấy trên host ảnh.

b. Nếu Blog bạn có nhiều tác giả ( Author), thêm vào bên dưới với đoạn code sau.

<b:if cond='data:post.author == &quot;Author1Name&quot;'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Author2Name&quot;'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

Với Author1Name, Author2Name là tên tác giả 1 và tên của tác giả 2;
url_of_author1_signature_image',url_of_author2_signature_image link ảnh chữ ký của tác giả 1 và 2.

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

Nguồn: Bloggerplugins

[Click here to Read More]

Thiết kế E-mail Subscription Form với CSS

Bạn muốn làm đẹp E-mail Subscription Form và thay đổi sự đơn điệu của form mặc định. Rất đơn giản, bạn chỉ cần tạo một Widget cho nó và bạn có thể hoàn thành nó một cách dễ dàng và dưới đây là 3 kiểu E-mail Subscription Form được thiết kế với CSS. Hi vọng bạn sẽ thích nó trong việc trang trí E-mail Subscription Form.

Để thao tác,  Đăng nhập Blog > Thiết kế > Phần tử trang > Thêm tiện ích HTML/ Javascript và dán code bên dưới vào. Bạn có thể tùy chỉnh CSS để form được đẹp hơn.

1.Subscription Form Widget 01:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvyBYDD7KmoynAqHQgmQoO0a82t4kgSfwTkKSm1TGH7Vq_iQXV-fMrqLv2qthdGFZZwiia5XDMk5ot4fyY86OOzPXBtnqrDOouaGcyUIJ37wYM-Y9guSCjZDMtOo2WfAz4QgbVLupAIzO/s1600/feedbg3.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQNC9neTp-6uFhEBCp-xBBHXRfxtsgEVuF3qHHri0VZn8P8hXUw68NIpEZQ8HpkvM1M8sdh2_dzBY91t3dqpvokWld-juINnQd2zTYrGjF-X8f-KpLR4cC7bBkTGfpct-ChM9PlJx9J5-/s1600/go_b.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

2.Subscription Form Widget 02:

<style>
#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2HcRQSTWHA-ziUaIDP39atr0ZaUIxu4HrqMsWY01EEPjy0VF_sW9zjA3T7izVgCNX_XeHhiRRDgcG9PXTCiD9A86ybXcP27epsnEJu0Pa7nbMmBmTIfcXGuKtBr2yqpv97dtejzoQ-PxF/s1600/feedbg1.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZ9GslKG-bzUMvkPm02bn7Nrg2JFzOQRDS63I55rC9-DZ4_aiH2mynkrP_TVYZ8eKsxzR-HdrJzPAHUGGnWcvgBE9ZutNzfJpwSFROadxeTDGrh3WJvNEMgaU5b9WidNGR5qGL9XPMFQt/s1600/go_g.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

3.Subscription Form Widget 03:

<style>#subsfeed{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIxtYajEEjEiBg6tcO_rJpO7k9A15NWUa-24i_SsSc9QJqPlzAGfjSnp8cSg8p3MBHzMjdOCCEvh1_AuGZudIEC9Z1_AcGHVUCTwQ6GzEsGncza6ZSnIPVT3pSP6Fh6LoZZSsH2e61g-xI/s1600/feedbg2.png);
width:320px;
height:97px;
}
.subsfeed_field{
width:200px;
height:18px;
border:2px solid #6ca408;
margin:35px 2px 0 85px;
float:left;
}
.subsfeed_button{
width:24px;
height:24px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiOv9S4a_jv8Ig8TEQ15tssuBVJt-G4X-TkslT3TlGQNOUfn0gDmnfAJvCSKC4lptlFa3Lii3AQDrHuhkz_YUbl571roEHxXNcXZOj3eRuypIf6D4lIbHAzNB77fpqUtzMeZbNuGebS-HP/s1600/go_o.png);
border:0px;
margin:35px 0 0 0;
cursor:pointer;
float:left;
}
</style>
<center><div id="subsfeed">
<form action="http://feedburner.google.com/fb/a/mailverify" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Your-Feed-Title', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" class="subsfeed_field" value="email address here" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" type="text"/><input value="Your-Feed-Title" name="uri" type="hidden"/><input value="en_US" name="loc" type="hidden"/><input value="" class="subsfeed_button" type="submit"/></form>
</div></center>

Thay  Your-Feed-Title bằng ID Feed của bạn. Nếu bạn chưa biết cách lấy ID Feed có thể để lại comment để được hướng dẫn.

Nguồn: 5z5.com

[Click here to Read More]

11 thủ thuật nhỏ để bài viết hấp dẫn hơn trên Blogspot

Nguồn: .wordpresstoblogger.

Có rất nhiều cách để bạn có thể làm cho bài đăng trên blog hấp dẫn và lôi cuối độc giả. Đối với vài người sẽ chẳng có gì là quan trọng vì họ ít quan tâm đến bài viết, với khối hiển thị văn bản kiểu mặc định giường như nó quá đơn điệu và bạn cảm thấy nhàm chán, nhưng có rất nhiều thủ thuật khác nhau mà bạn có thể sử dụng làm cho phong cách bài viết của bạn thêm thú vị, lôi cuốn và hấp dẫn độc giả? Và dưới đây gồm 15 thủ thuật giúp bạn có thể xem xét để sử dụng...

1. Hiệu ứng văn bản ( Textual Effects )


Phong cách trình bày một văn bản thường thu hút sự chú ý độc giả là điều quan trọng của bài viết.

Bold, Italic và màu văn bản


Đây là các tiêu chí đơn giản nhất của một bài đăng, mặc dù vậy ta cũng ko nên đán giá thấp tiêu chí này

Bạn có thể dễ dàng làm cho văn bản in đậm, in nghiêng hoặc trong một màu sắc khác nhau bằng cách làm nổi bật và chọn tùy chọn thích hợp trong bảng điều khiển chỉnh sửa bài viết của bạn.

2.Sử dụng một phong cách chữ khác nhau cho giới thiệu hay tiêu đề.

Đây là một phong cách nổi bật nhất được sử dụng trên các tạp chí, nhưng điều đó không có nghĩa là bạn có thể không còn sử dụng nó cho các bài đăng trên blog.

Có lẽ trang web này sẽ cho bạn thấy về tác dụng font chữ : http://justagirlintheworld.com/

Lisa sử dụng một phông chữ in nghiêng lớn hơn cho các cụm từ đầu tiên hoặc trong tổng số bài viết của mình mà thực sự làm cho họ nổi bật ! Để sử dụng phông chữ khác nhau cho cụm từ giới thiệu bài đăng trên blog của riêng bạn, bạn có thể chỉnh sửa mã HTML trong tổng số bài viết của bạn bằng cách:

<span style="font-size: 200%; font-style: italic;"> Giới thiệu ở đây <span> và phần còn lại của bài viết của bạn ở đây ...

3.Phong cách Drop Caps

Đây là một phong cách chính tả thường được tìm thấy trên các tạp chí hay tờ báo.

Điều này có thể thực hiện bằng cách sử dụng CSS, gói các chữ cái đầu của mỗi bài viết trong thẻ <span> theo kiểu như thế này:

<span style="font-size: 200%; float: left; padding: 0 5px 5px 0;">F</span>irst letter...

bạn cũng có thể định nghĩa Dropcaps bằng CSS như sau.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

4.Kết cấu Effects

- Blockquotes: thường được sử dụng để trích dẫn dài và thường được tách ra từ các cơ quan chính của văn bản bằng cách thụt đầu dòng, in nghiêng hoặc một phong cách khác nhau của phông chữ.

Sử dụng CSS, bạn có thể thay đổi sự xuất hiện của các blockquotes bài viết của bạn. Dưới đây là một số tài liệu tham khảo hữu ích khác có liên quan đến blockquotes phong cách trong bài viết blog của bạn.( bạn có thể tham khảo tại đây ).

- Pullquotes: Pullquotes làm nổi bật một câu cụ thể hoặc cụm từ quan trọng trong một bài viết tương tự như blockquotes, nhưng nói chung là liên kết bên trái hoặc bên phải của văn bản chính.

Một cách đơn giản để tạo ra pullquotes bằng cách sử dụng CSS nội tuyến sẽ được để bọc các văn bản trong thẻ:

<span style="width: 200px; float: right; text-align: center; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 10px; margin: 5px 0 5px 5px;">Viết văn bản cho pullquotes của bạn ở đây<span>

Dưới đây là một số trang web hữu ích khác mà giải thích làm thế nào để sử dụng pullquotes trong bài viết blog của bạn:

http://blogsolid.com/ideas/2007/simple-css-blockquotes-and-pullquotes/

http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php

http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/

5. Sử dụng Headings

Tính năng này đặc biệt hữu ích khi viết bài báo dài và là một kỹ thuật sử dụng thường xuyên trong blog này
nhóm phá vỡ các đoạn văn bản dài vào các khối quản lý hơn, và giúp người đọc hiểu một cái nhìn chính xác những gì mong đợi từ các phần liên tiếp của văn bản . Cấp trên nhóm (ví dụ: H1 và H2) nên được sử dụng cho các chức danh, và thường trong một phông chữ lớn hơn hoặc táo bạo hơn . Các cấp thấp hơn (từ H3 đến H6) có thể được sử dụng như là các nhóm
phần Hầu hết các blogger sử dụng các nhóm này chỉ từ H1-H4 là tốt nhất được sử dụng trong các phần sau của blog và các bài viết của bạn.

<h2>This is Heading 2</h2>

<h3>This is Heading 3</h3>

<h4>This is Heading 4</h4>

Các headings này sẽ xuất hiện một cái gì đó như thế này trong bài đăng trên blog của bạn (tùy thuộc vào cách bạn có thể theo kiểu các headings này trong phần phong cách của mẫu của bạn.)

This is Heading 2

This is Heading 3

This is Heading 4

6.Phần hình của văn bản

Đây là một phương pháp khá bất thường của phong cách bài đăng trên blog của bạn, nhưng nó chắc chắn là có thể thu hút sự chú ý! Các phương pháp sử dụng ở đây được tạo ra bởi CSS Text Wrapper, bạn có thể sử dụng để hình thành các khu vực của văn bản vào bất kỳ hình dạng mà bạn thích! Trên trang ví dụ, bạn có thể thấy vòng tròn, zig-zags và thậm chí cả rượu một khối thủy tinh có hình dạng của văn bản !

7.Khung hình ảnh với CSS

Các bức ảnh được trình bày trong khung nhìn tốt hơn nhiều so với những người chỉ đơn giản là bị mắc kẹt vào các bức tường với băng dính, và tương tự có thể áp dụng cho hình ảnh trong bài viết blog của bạn!

Tạo 1 frame bằng đoạn code:

<img src="url ảnh" alt="Alt text"style="border: 3px solid #ccc; padding: 5px; background: #fff;" />

Nếu bạn sử dụng hình ảnh của Blogger tính năng tải lên thêm hình ảnh vào bài viết của bạn, bạn có thể chỉ cần thêm các tài liệu tham khảo phong cách với phong cách đã có trong mã hình ảnh của bạn, như thế này:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px; background: #fff;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVzXdSgWAokRKZG-BEHyPCezWFuA9yTzCBMvqnAS24j5e0YIS71GfbY58LigirtIchGhAZJUiyz5PTVa3eHUDiJ22grSjki-ZN-I7OXuA5o7-hSQqU6-7DuktGBltfx7m-pUbHYIjiAk/s400/typography.jpg" alt=""id="BLOGGER_PHOTO_ID_123456789012345678" />

Bạn có thể thay đổi đường viền và màu nền cho phù hợp với thiết kế mẫu riêng của bạn mà sẽ tạo ra một phong cách của khung hình ảnh đó là của riêng bạn.

8.Thêm Chú thích cho hình ảnh

Thêm ghi chú cho hình ảnh của bạn là một cách hữu ích thêm lợi ích hoặc kiểu dáng các văn bản ghi.Nếu bạn muốn thêm các chú thích tự động để hình ảnh mỗi, Check.

9.Sử dụng Drop Shadows để nổi bật hình ảnh ( Tham khảo tại đây).


10.Sử dụng backgrounds khác nhau cho mỗi bài viết

Thực sự khá dễ dàng để sử dụng một màu nền hoặc hình ảnh khác nhau cho mỗi bài đăng blog. Đơn giản chỉ cần chỉnh sửa bài viết của bạn trong chế độ Edit HTML, và thêm thẻ div xung quanh nội dung của bạn có chứa thẻ phong cách cho các thuộc tính nền. Để thêm một nền màu, bạn có thể sử dụng mã:

<div style="background: #fdd2f3;">
nội dung của bài viết của bạn ở đây
</ div>

Nếu bạn muốn sử dụng một nền hình ảnh, bạn có thể sử dụng mã:

<div style="background: url(http://the-url-of-your-image.com/image.jpg);">
nội dung của bài viết của bạn ở đây
</ div>

11.Tự động thêm các biểu tượng bên cạnh các liên kết ( tham khảo thuthuatblogger.info).

Nói chung thì thủ thuật còn nhiều nhưng giờ buồn ngủ quá, chỉ mỗi Translates cái TUT mà lâu ghê, ACE dùng đỡ @@!....Thank for Reading...

[Click here to Read More]

Tạo banner quảng cáo 125x125 cho Blogspot

Nguồn: wordpresstoblogger.

Ngày này, việc kiếm tiền hầu như rất là quan trọng đối với mỗi con người nếu muốn tồn tại trong xã hội hiện đại này, có nhiêu cách để kiếm tiền nhưng với viết Blog để kiếm tiền quả là một công việc khó đòi hỏi có tính kiên trì và bền bì cao. Tuy vậy, ko phải là ko có cách để kiếm tiền. Nếu các blogger chuyên nghiệp họ có thể kiếm tiền tại weblog của mình một cách dễ dàng. Vậy tại sao họ làm được điều đó? Vâng một cách thông dụng hiện nay mà cũng rất là nhẹ nhàng đó là quảng cáo website khác trên weblog của mình thông qua banner quảng cáo, nhưng với diện tích của một weblog liệu bạn có thể đặt được bao nhiêu cái banner? Đó là câu hỏi đã làm nhiều blogger suy nghĩ và họ đã tìm ra một giải pháp để đặt được nhiều banner hơn đó là giảm thiếu kích thước của banner về chiều rộng và chiều cao bằng cách cho về một con số nho nhỏ nhưng cũng đủ để hiển thị nôi dung quảng cáo và bài hướng dẫn này giúp bạn thực hiên cách tạo banner quảng cáo kích thước 125x125 px, với kích thước này banner có thể đặt tối thiểu là 4-5 quảng cáo hoặc có thể nhiều hơn tùy vào diện tích trang web cũng như cách bày trí banner.

Demo

Và chúng ta bắt đầu thực hiện thủ thuật.

Như thường lệ ta làm từng bước nhỏ sau:

1. Đăng nhập vào blogger > Chọn thiết kế > Chỉnh sửa HTML và đừng quên Mở rộng mẫu tiện ích.

2. Tìm đến thẻ đóng ]]></b:skin>.

3. Đặt đoạn code dưới lên trên thẻ đóng đó.

.banners {
background:#F5F4F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsEJ0iSqoW4nbPvRNpOtXLPr97t0A83YOfpgVNy-B0UifVWjClgX3TMrszPOjk20IjaNYUEUpJuxNOy502oAKXPdQekt-4kvZF7FHiCj9EbPlblyoJO7SmrnEmej3P-DFyY3Be9_hPNcM0/s1600/sidebox-bg.jpg) left top repeat-x;
border:#DDD 1px solid;
margin:0 0 20px;
padding:15px 0 15px 18px;
}
.banners img {
padding:2px;
}

4. Tìm tiếp đoạn code  <div id='sidebar-wrapper'> và dán đoạn mã dưới và sau nó.

<div class='sidebox banners'>
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoKNzlyCSRL7vPiQNKUo1stBhG1qTmS6_G1dXQYDpCe9VqBmljgUi3O79SlyHqnxFDnaUTl2HvTX-zbhUQgtH-TvM-yXD_vjMaDecswDDD6O0uMIjG4zagXawwG8L53sqp9h0EwJyTeVI/s1600/advertise_here.gif '/></a>
<a href='#'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSoKNzlyCSRL7vPiQNKUo1stBhG1qTmS6_G1dXQYDpCe9VqBmljgUi3O79SlyHqnxFDnaUTl2HvTX-zbhUQgtH-TvM-yXD_vjMaDecswDDD6O0uMIjG4zagXawwG8L53sqp9h0EwJyTeVI/s1600/advertise_here.gif '/></a>
<br clear='all'/>
</div>

5. Lưu Templates.Done! 

[Click here to Read More]

Thêm nút Google Buzz để chia sẻ bài viết

Nguồn: wordpresstoblogger.

Tiếp nối bài viết Thêm bộ nút Google +1 , Facebook và Twitter cho Blogger, hôm nay mình xin chia sẻ với các bạn thêm một nút có tính năng mới đó là chia sẻ bài đăng lên Google Buzz, việc này giúp cho người đọc đến với blog bạn một cách dễ dàng và từ đó họ sẽ có thể thường xuyên đến với Blog của bạn.

Demo

Để thực hiện thủ thuật, như thường lệ ta làm như sau:

1. Đăng nhập vào Blogger > Thiết kế > Chỉnh sửa HTML  và Chọn mở rộng mẫu tiện ích.

2. Tìm đoạn code.

<div class='post-header-line-1'/>

3. Thêm vào sau nó đoạn code, có 2 sự lựa chọn cho bạn.

- Sử dụng code bên dưới cho kiểu nút tiện ích:

<div style="float:right;padding:4px;"><a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'><img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a></div>

 - Sử dụng code bên dưới cho kiểu nút và có bộ đếm:

<div style="float:right;padding:4px;"> <script type='text/javascript'> njuice_buzz_url = '<data:post.title/>'; njuice_buzz_title = '<data:post.url/>'; njuice_buzz_share = 'reader'; </script> <script type='text/javascript' src='http://button.njuice.com/buzz.js'/> </div>

4. Lưu mẫu của bạn và hoàn tất.

[Click here to Read More]

Thêm bộ nút Google +1 , Facebook và Twitter cho Blogger

Nguồn: sưu tầm.


Mấy cái bài kiểu như thế này nhiều rồi, hôm nay rãnh post bài lên cho blog đỡ trong vắng tý. ACE có nhu cầu thì làm thôi, chớ lâu lâu mà Blog ko có bài viết thấy chán lắm và như thường  lệ sau đây mình sẽ hướng dẫn các bạn một thủ thuật nhỏ đó là thêm Bộ nút Google +1 , Facebook và Twitter vào trong blog.

Demo

Để thực hiện thủ thuật bạn làm như sau:

1. Đăng nhập vào Blogger > Phần tử trang > Thệm tiện ích  HTML/JavaScrip.

2. Copy đoạn code bên dưới và dán vào tiện ích ( đoạn code khá là dài ^^! ) .

<style>/*-------Wordpresstoblogger.info Floating Counters------------*/#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}
#floatsidebar {
border:1px solid #ddd;
padding-left:5px;
position:relative;
height:220px;
width:55px;
margin:0 0 0 5px;
}</style>

<div id="floatdiv">
<div id="floatsidebar">
<table cellpadding="1px" cellspacing="0"> <tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr> <tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url"/> </g:plusone></td>
</tr> <tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="quangpro1610">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </td>
</tr> <tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.wordpresstoblogger.info/2011/07/tutorial-to-add-floating-google-1.html" target="_blank">Widgets</a></p>
</td>
</tr> </table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document
<!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: 0,
targetY: 300, hasInner: typeof(window.innerWidth) == 'number', hasElement: typeof(document.documentElement) == 'object'
&& typeof(document.documentElement.clientWidth) == 'number', menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};floatingMenu.move = function ()
{
floatingMenu.menu.style.left = floatingMenu.nextX + 'px'; floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}floatingMenu.computeShifts = function ()
{
var de = document.documentElement; floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0)
{
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: document.body.clientWidth;
} floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0)
{
if (floatingMenu.hasElement && floatingMenu.hasInner)
{
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else
{
floatingMenu.shiftY +=
floatingMenu.hasElement
? de.clientHeight
: document.body.clientHeight;
}
}
}floatingMenu.calculateCornerX = function()
{
if (floatingMenu.targetX != 'center')
return floatingMenu.shiftX + floatingMenu.targetX; var width = parseInt(floatingMenu.menu.offsetWidth); var cornerX =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageXOffset
: document.documentElement.scrollLeft) + (document.documentElement.clientWidth - width)/2
: document.body.scrollLeft +
(document.body.clientWidth - width)/2;
return cornerX;
};floatingMenu.calculateCornerY = function()
{
if (floatingMenu.targetY != 'center')
return floatingMenu.shiftY + floatingMenu.targetY; var height = parseInt(floatingMenu.menu.offsetHeight); // Handle Opera 8 problems
var clientHeight =
floatingMenu.hasElement && floatingMenu.hasInner
&& document.documentElement.clientHeight
> window.innerHeight
? window.innerHeight
: document.documentElement.clientHeight var cornerY =
floatingMenu.hasElement
? (floatingMenu.hasInner
? pageYOffset
: document.documentElement.scrollTop) +
(clientHeight - height)/2
: document.body.scrollTop +
(document.body.clientHeight - height)/2;
return cornerY;
};floatingMenu.doFloat = function()
{
// Check if reference to menu was lost due
// to ajax manipuations
if (!floatingMenu.menu)
{
menu = document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]; initSecondary();
} var stepX, stepY; floatingMenu.computeShifts(); var cornerX = floatingMenu.calculateCornerX(); var stepX = (cornerX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5)
{
stepX = cornerX - floatingMenu.nextX;
} var cornerY = floatingMenu.calculateCornerY(); var stepY = (cornerY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5)
{
stepY = cornerY - floatingMenu.nextY;
} if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0)
{
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
} setTimeout('floatingMenu.doFloat()', 20);
};// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
if(typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined')
{
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function')
{
element[listener + 0] = element[listener]; element[listener + '_num']++;
}
element[listener] = function(e)
{
var r = true;
e = (e) ? e : window.event;
for(var i = element[listener + '_num'] -1; i >= 0; i--)
{
if(element[listener + i](e) == false)
r = false;
}
return r;
}
} //if handler is not already stored, assign it
for(var i = 0; i < element[listener + '_num']; i++) if(element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler; element[listener + '_num']++;
};floatingMenu.init = function()
{
floatingMenu.initSecondary();
floatingMenu.doFloat();
};// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.calculateCornerX(); floatingMenu.nextY = floatingMenu.calculateCornerY(); floatingMenu.move();
}if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
floatingMenu.init();
floatingMenu.addEvent(window, 'onload', floatingMenu.initSecondary);
}//--></script>

4. Thay đổi 1 chút trong đoạn code:

Thay thế quangpro1610 bằng username Twitter của bạn. Nếu chưa có tài khoản bạn có thể đăng ký tại đây.

5. Sau đó lưu tiện ích lại và làm tiếp bước sau.

6. Qua Chỉnh sửa HTML và tìm thẻ đóng </head> thêm trên nó đoạn code sau:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

7. Lưu Template và test kết quả!!!

[Click here to Read More]

Thêm tài khoản Wordpress vào hệ thống nhận xét của Blogger

Nguồn: sưu tầm

Nhiều blogger có một câu hỏi trong tâm trí "Làm thế nào để thêm tài khoản Wordpress để có thể comment giống như Blogger / Blogspot Blogs". Vì vậy bài này sẽ hướng dẫn các bạn thêm tài khoản WP vào phần comment cho Blogspot.
Để thực hiện thủ thuật, bạn làm như sau. Tuy có chút rắc rối nhưng mong bạn sẽ thực hiện thành công:

1. Đăng nhập vào Blogger > Thiết kế > Chỉnh sửa HTML  và Mở rộng mẫu tiện ích.

2. Nhấn "CTRL+F" tìm đoạn code:

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>

3. Thay thế đoạn code ở bước 4 vào đoạn code dưới ( Nhớ lưu lại đoạn code ở bước 3 để tý nữa ta qua bc 4 sẽ lấy lại đoạn code ở bước 3 để thay thế cho đoạn code bước 4).

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

4. Bước này ta thay thế ngược lại đó là lấy đoạn code ở b3 để thay thế cho đoạn code này:

<div class='comments'>
<b:loop values='data:post.comments' var='comment'>
<div id='comments-outer'>
<div class='comment-author'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img class='avatar' expr:src='data:comment.favicon' height='35px' rel='dofollow' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='says'>said on :</span>
</dt><span style='float: left;'><b:include data='comment' name='commentDeleteIcon'/></span>
<div class='comment-meta commentmetadata'>
<data:comment.timestamp/>
</div>
</div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</div>

 5. Bây giờ đến phần chỉnh sửa CSS, nhưng trước khi thêm đoạn code CSS các bạn xóa đoạn code CSS cũ của Template mà bạn đang sử dụng và bạn xóa đoạn code sau ( tùy mỗi template mà các bạn xóa như thế nào nha). Để thấy rõ, bạn nhìn vào hình sau:

Nếu có khó khăn gì, bạn hãy để lại comment bên dưới.
6. Tìm đến ]]></b:skin> và thêm đoạn code bên dưới lên trên nó.

#comments{
background : #fff url() no-repeat top;
float : left;
width : 590px;
font-size:12px}
#comments h4{ margin:1em 0; font-weight:bold; font-size:15px; text-shadow:1px 1px 1px #ddd; line-height:1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor}
#comments-outer{ background:#f4f4f4; border:1px solid #ddd; margin:1em 0 2.5em; padding:10px; line-height:1.6em}
.avatar-image-container{margin-right:20px; padding:0; float:right; width:48px; height:48px; margin-top:-20px}
.avatar-image-container img{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7FRSIxZF7SXJD4N61OYAnQTnvS_2D0vScb-pTuqGqFNjaaeZq38WvqLSjr2U0N6NyQVOnFoWTr7HRm_J9eZx2HT3OWlA3wG8MI-5g4T9v6p7lG61JKBV5sX8Vc63ZsSrOMjdzk3-x13U/s400/grav.png); width:48px; height:48px; border:1px solid #ddd}
.deleted-comment{ font-style:italic; color:gray}
.comment-body-author{background:#f4f4f4}

7. Lưu Templates và bạn sẽ thấy có thêm Wordpress Style Comments Section. Chúc thành công !

[Click here to Read More]

5 Kiểu Menu dọc cho Blogspot

Nguồn: Sưu tầm.
Hôm nay chán chán chả biết làm gì,  rãnh rỗi ngồi post bài chơi vui. Ai có hứng thì làm,  không thích mà vô tình đã ghé vô thì mấy bạn nên xem cho biết nha, cũng chả sao cả.
 Để tạo các Menu này các bạn làm như sau:

1. Đăng nhập Blogger > Thiết kế > Chỉnh sửa HTML.

2. Tất cả các Menu dưới đây gồm 2 phần là  CSS và HTML nên các bạn cứ làm theo mình nha.

3. Đối với code CSS bạn chèn vào trước thẻ  ]]></b:skin>.

4. Đối với code HTML , ta có 2 cách để chèn. Hai cách này thực ra chỉ là 2 kiểu chèn bên Trái và bên Phải thôi, chẳng có gì cả, chỉ phụ thuộc sidebar của bạn nằm bên nào thôi :

- Nếu sidebar nằm bên phải, bạn chèn code HTML dưới thẻ <div id='sidebar-wrapper'> hoặc thẻ <div id='sidebar-wrapper-right'>.

- Nếu sidebar nằm bên trái, bạn chèn code HTML dưới thẻ  <div id='sidebar-wrapper-left'>.

     Lưu ý:

Vì hầu hết các mẫu sử dụng mã hóa khác nhau do đó nếu bạn không thể tìm thấy các mã trên. Vì vậy bạn có thể tìm các thẻ tương tự với các từ khóa trong nháy kép.

5. Lưu Templates của bạn va xem kết quả Bạn đã thực hiện.

Và bạn cũng phải chỉnh sửa Link và Title trong Menu để đc hiển thị một cách chính xác trong đoạn code HTML.

<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>

Thay thế # 1, # 2, # 3...với  URL  trang của bạn và thaythế link1, link2, link3 ... với các tiêu đề trang của bạn. Nếu bạn muốn thêm hoặc xóa một tab sau đó chỉ cần thêm hoặc xóa các dòng này từ code HTML.

<li><a href="#" >Link</a></li>

Đây là 5 kiểu Menu dọc :

Kiểu 1:
CSS code:

#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu1 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; } #menu1 li a:link, #menu1 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGS8pyNwzJGFsTJZzCwotmT5AUmzA7LnrtLuO9Eroa4lksRhIvHqtpiKudGLBOAKmI1FS-b5xqqQxNDp4LXj6SPutqVKmhs-dgDDSAnd-wC1KiPm1uJO4kH2syxVPqZ_1zUU5qVTa4-o/s1600/menu1.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu1 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGS8pyNwzJGFsTJZzCwotmT5AUmzA7LnrtLuO9Eroa4lksRhIvHqtpiKudGLBOAKmI1FS-b5xqqQxNDp4LXj6SPutqVKmhs-dgDDSAnd-wC1KiPm1uJO4kH2syxVPqZ_1zUU5qVTa4-o/s1600/menu1.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML code:

<div id="menu1"> <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">Link5</a></li> </ul> </div>

Kiểu 2: CSS code:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 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; } #menu2 li a:link, #menu2 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3aUzzgIjyBh4J4yF5AhzVhk3OnYRGDqzus4It3MW2HFuZxXy8xXebjxynmxEoGk71qCBgWp4GmBMrbCBwcoffHkLtsYmEPg6H1BJyUlTNHo_mGK2YLIEtel1MlzZ7ABH44kH_cRqeWQ/s1600/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current, #menu2 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3aUzzgIjyBh4J4yF5AhzVhk3OnYRGDqzus4It3MW2HFuZxXy8xXebjxynmxEoGk71qCBgWp4GmBMrbCBwcoffHkLtsYmEPg6H1BJyUlTNHo_mGK2YLIEtel1MlzZ7ABH44kH_cRqeWQ/s1600/menu2.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML code:

<div id="menu2"> <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">Link5</a></li> </ul> </div>

Kiểu 3:
CSS code:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu3 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; } #menu3 li a:link, #menu3 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccBAW8w2FS3bzxEGHa6XtLb9dHWWoMPGDgLj-8mMBBwlbQkDNg1WpV5JM3JgumzoLJuZcbMAtDtWTJChnHvdA6tDH2fhic5yYK7SfDdOGmw5Njh6VrKtWiIlW_VaKpLJ-CEHTkXEVIdc/s1600/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccBAW8w2FS3bzxEGHa6XtLb9dHWWoMPGDgLj-8mMBBwlbQkDNg1WpV5JM3JgumzoLJuZcbMAtDtWTJChnHvdA6tDH2fhic5yYK7SfDdOGmw5Njh6VrKtWiIlW_VaKpLJ-CEHTkXEVIdc/s1600/menu3.gif) 0 -32px; padding: 8px 0 0 32px; }

 HTML code:

<div id="menu3"> <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">Link5</a></li> </ul> </div>

Kiểu 4:
CSS code:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu4 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; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif); padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

 HTML code:

<div id="menu4"> <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">Link5</a></li> </ul> </div>

Kiểu 5:
CSS code:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 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; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETRshrFeCqBsyTKuxCsIMZsQyjVfZLOvE9bVwjyaUmhGkotpTYS5k2qyDazkDSREThjhOZ-DNCZ1SNTNrixIw-R08aiogP5E2MLmIewOZ-nUIFD7rEb4d_KdaTA3pPB3AE3X4wVKs2U8/s1600/menu5.gif); padding: 8px 0 0 35px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETRshrFeCqBsyTKuxCsIMZsQyjVfZLOvE9bVwjyaUmhGkotpTYS5k2qyDazkDSREThjhOZ-DNCZ1SNTNrixIw-R08aiogP5E2MLmIewOZ-nUIFD7rEb4d_KdaTA3pPB3AE3X4wVKs2U8/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; }

HTML code:

<div id="menu5"> <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">Link5</a></li> </ul> </div>

Hi vọng các bạn sẽ tạm thời hài lòng các Menu này. Thank for Reading. 

[Click here to Read More]