Bài viết mới dạng list có mô tả cho nhãn và blog

Với thủ thuật recent post này các bài viết hiển thị ở dạng tittle kèm theo hình ảnh thumbnail nhìn gọn và đẹp.


Ảnh minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   2- Vào thiết kế

   3- Chọn Phần tử trang

   4-Chọn thêm tiện ích (Add Widget) - thêm 1 tiện ích HTML/Javarscrip và dán đoạn code bên dưới vào.

<style type="text/css">
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}
.mota:hover{
background-color: transparent;
z-index: 50;
}
.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.mota span img{
border-width: 0;
padding: 2px;
}
.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBcz2-RrlfnDrUSN0feUTrX1VHG4vPNKnHNOakmuxiX8brSvkyo4t6QKPJzrlZmeXyFPX16FxPrHTTVXgsq_SDXDT7HBpopJhJGczAis2YpOyrPkOG3lE8FpPe4q0rqwJglMJRAa_NgBCA/s1600/nothumbnail-namkna-blogspot-com.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 8;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";
</script>
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-label.js" type="text/javascript"></script>

Trong đó:

• Width: 250px :độ rộng của bảng nhỏ khi rê chuột vào tiêu đề bài viết.
• Background: #ccc : màu nền của cửa sổ popup khi rê chuột vào tiêu đề bài viết, bạn có thể xem mã màu Tại đây.
• Imgwidth = 60 : chiều rộng của ảnh đại diện.
• Imgheight = 60 : chiều cao của ảnh đại diện.
• SummaryPost = 150 : số ký tự hiển thị ở cửa sổ Popup khi khi rê chuột.
• Home_page: địa chỉ blog của bạn, hãy thay http://namkna.blogspot.com/ thành URL blog của bạn.
• Label: Tên nhãn muốn hiển thị, hãy thay Blogspot-tips thành tên nhãn của bạn.
• Numposts=8: Số bài muốn hiển thị trong tiện ích này.

Thủ thuật trên áp dụng cho các bài viết trong cùng một nhãn, nếu các bạn muốn áp dụng cho cả blog thì các bạn thay link Javarscip sau:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-label.js

Thành:

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-post.js

   4-bấm Lưu  tiện ích lại.

Nguồn: namkna's blog

Read More

Thẻ Meta tag là gì?

Meta Tag là thẻ dùng để cung cấp các thông tin về website một cách tóm gọn đối với các trình duyệt lẫn người dùng hay bot từ các search engine. Mọi người hay nghe Meta Keyword, Meta Description, Meta Page title,.. nhưng nó đều các thẻ thuộc dòng Meta tags.

Hiện nay, có không ít người đang hiểu sai ý nghĩa của nó và ứng dụng đôi khi không hợp lý trong nhiều website. Bài viết này sẽ giải thích về ý nghĩa của hầu hết các thẻ Meta tag nhằm giúp các bạn ứng dụng một cách hợp lý hơn và gợi ý các Meta Tag bạn nên dùng hoặc không nên dùng.

Meta tag là gì?

Đây là thẻ HTML được đặt giữa thẻ trong của một tài liệu HTML.

Có 2 kiểu sử dụng meta tag thường thấy:
HTML

1. <META HTTP-EQUIV="name" CONTENT="content">

2. <META NAME="name" CONTENT="content">

Ở những thời kỳ đầu khi Meta tags được phát triển nhằm hỗ trợ cho việc phát triển chung của website. Tuy nhiên sau đó việc ứng dụng của nó bị thay đổi lớn, nhiều webmasters đã sử dụng nó một cách thái quá trong việc ứng dụng Meta tags cho keywords (từ khóa) đối với các website có nội dung không lành mạnh. Rất nhiều từ khóa không liên quan được đặt vào website nhằm giúp cho website đạt kết quả tốt trong kết quả tìm kiếm của các SE. Ví dụ website có nội dung người lớn nhưng lại đặt một số từ khóa liên quan đến các vấn đề nóng hổi khác hoặc về các ngôi sao nổi tiếng mà người dùng thường hay tìm kiếm.

Hiện nay các cỗ máy tìm kiếm đã giảm bớt độ ảnh hưởng của Meta tags cho việc hiển thị kết quả. Google thường bỏ qua sự ảnh hưởng của Meta tags và chỉ sử dụng Google Meta tags (sẽ được giới thiệu dưới đây). Các cỗ máy tìm kiếm khác cũng có cách đọc thẻ này bằng cách riêng của nó.

Sau đây là nội dung giải thích ý nghĩa của các thẻ Meta tags.

I. Các thẻ Meta Tags được khuyến khích sử dụng:

1. Meta Content Language (Dành cho các website không phải tiếng Anh)

Thẻ này được dùng để khai báo ngôn ngữ của website. Thẻ này cũng được dùng tương tự như Meta Name Language. Các robot của SE thường dùng thẻ này để phân loại ngôn ngữ của website.

Ví dụ:
HTML
<META HTTP-EQUIV="Content-Language" CONTENT="vi">

Bạn nên sử dụng thẻ này nếu website của bạn có ngôn ngữ không phải tiếng Anh. Cá nhân tôi chưa từng thử, tuy nhiên theo như những gì mà tôi tham khảo thì thẻ này rất có ích cho bot phân loại nội dung theo ngôn ngữ.

2. Meta Content Type

Thẻ này dùng để khai báo mã cho website. Bạn nên sử dụng thẻ nay ngay cả khi bạn đã dùng khai báo DTD cho tài liệu HTML. Bởi vì nếu bạn không sử dụng thì có khi người dùng website của bạn sẽ không đọc được nội dung website của bạn do trình duyệt không tự động điều chỉnh mã phù hợp cho website của bạn. Ví dụ: Nội dung website của bạn được nhập liệu thông qua mã UTF-8 nhưng được hiển thị ở chế độ của ISO hay ASCII. Thả này còn có nhiều lợi ích khác, tuy nhiên bạn có thể tự tìm hiểu thêm về vấn đề này thông qua các trang web về SEO.

Ví dụ:
HTML
http-equiv="Content-Type" content="text/html; charset=utf-8">

3. Meta Description

Thẻ này dùng để mô tả nội dung của một trang web. Nội dung của thẻ này nên được viết ngắn gọn và xúc tích khoảng từ 20 đến 25 từ hoặc ít hơn. Đây là thẻ được hầu hết các SE sử dụng để hiển thị nội dung kết quả tìm kiếm.

Ví dụ:
HTML
<META NAME="description" CONTENT="Website Khoa học kỹ thuật, giải trí và đời sống dành cho cộng đồng người Việt cùng chia sẽ kinh nghiệm và trao đổi học hỏi.">

Thẻ này được khuyến khích sử dụng và nên viết một cách xúc tích nhất nhằm thu hút người dùng bấm vào website của bạn từ kết quả tìm kiếm. Thông thường nếu không dùng thẻ này thì các SE như google cũng sẽ tự động tạo khi index nội dung website. Tuy nhiên bạn nên dùng bởi vì đôi khi các mô tả được index tự động sẽ không được như ý của bạn.

4. Meta Language (Dành cho các website không phải tiếng Anh)

Thẻ này tương tự như Meta Content Language nhưng cấu trúc khác như sau:
HTML
<META NAME="Language" CONTENT="english">

II. Các thẻ phụ khác:

Các thẻ sau đây được gọi là thẻ phụ vì cũng được khuyến khích dùng nhưng không thật sự quantrọng, bạn có thể dùng cũng được hoặc không dùng cũng chẳng sao.

1. Meta Abstract

Cung cấp nội dung tóm tắt cho phần mô tả của website. Thẻ này chỉ được dùng để mô tả ngắn gọn hơn để bot có thể xác định được chính xác hơn nội dung website của bạn. Nội dung của thẻ này thường khoảng 10 từ trở lại.

Ví dụ:
HTML
<META NAME="Abstract" CONTENT="Website khoa học kỹ thuật, giải trí và đời sống.">

Thẻ này hiện tại không nằm trong các thuật toán của Google, Yahoo!, và MSN.

2. Meta Author

Thẻ này dùng để hiển thị tác giả của một nội dung trên website. Nội dung của thẻ này thường là tên của người đã tạo ra website. Bạn nên dùng thẻ này bằng tên của mình thay vì dùng email để tránh việc bị spam mail. Nếu bạn muốn người dùng liên hệ với mình thì nên dùng một form để liên hệ sẽ tốt hơn.

Ví dụ:
HTML
<META NAME="Author" CONTENT="NGUYEN VU TUAN ANH, myemail@mydomain.com">

Thẻ này không được index bởi Google, Yahoo!, hay MSN, do đó cũng không hỗ trợ cho bạn trong việc tăng thứ hạng, nhưng nó được ứng dụng như một chuẩn sử dụng của Meta tag.

3. Meta Copyright

Đây chỉ là thẻ mang tính thương hiệu hay các thông tin bản quyền cá nhân hay sở hữu trí tuệ của bạn.

Ví dụ:
HTML
<meta name="copyright" content="Copyright 2008">

Bạn không nhất thiết phải sử dụng thẻ này bởi vì nó chỉ mang tính tượng trưng và không có nghĩa là nó bảo vệ được bản quyền của bạn.

4. Meta Designer

Thẻ này dùng để cung cấp thông tin về người thiết kế giao diện cho website.

Ví dụ:
HTML
<META NAME="Designer" CONTENT="BabyWolf">

Các SE cũng không sử dụng thẻ này, thẻ này chỉ ứng dụng cho Designer muốn quảng cáo về mình.

5. Meta Google

Thẻ này chỉ được sử dụng cho việc bạn muốn loại bỏ nội dung khỏi google. Các thuộc tính của thẻ này:

1. Googlebot: noarchive - không cho phép google hiển thị nội dung cache của site bạn.
2. Googlebot: nosnippet - Không cho phép google hiển thị nội dung trích dẫn hoặc cache.
3. Googlebot: noindex - Không index những trang web nào đó của bạn.
4. Googlebot: nofollow - Loại bỏ việc đánh giá PageRank hoặc link từ trang này.

Bạn không nhất thiết phải sử dụng thẻ này ngoại trừ bạn muốn điều khiển google bot theo ý của mình cho cấu trúc website của bạn. Đây là thẻ mà google chắc chắn quan tâm đến. Hoặc bạn cũng có thể ứng dụng các thẻ này trong trường hợp thực tiễn sau: Bạn thay đổi cấu trúc nội dung và đường dẫn website, bạn sẽ vẫn giữ phiên bản cũ nhưng với thẻnày để google sẽ tự động xóa các index tương ứng với link này. Tuy nhiên, tốt nhất bạn nên dùng Redirect Permanently 301 sẽ giúpcho bạn chuyển PageRank từ trang cũ qua trang mới.

6. Meta Keywords

Thẻ từ khóa được dùng để định dạng nội dung trang web. Từ khóa được sử dụng bởi các SE để index site của bạn có thêm thông tin từ các nội dung của title, body, và các thành phần khác. Từ này thường được dùng để cung cấp các từ khóa liên quan đồng nghĩa hoặc tương tự với các từ khóa của title.

Ví dụ: Title của trang web cho bài viết này là "SEO - Ý nghĩa các thẻ meta | Diễn đàn khoa học kỹ thuật". Bạn có thể ứng dụng keywords như sau:
HTML
<META NAME="keywords" CONTENT="khái niệm, quảng bá web, tag, forum, technical, science, thảo luận, trao đổi">

Bạn nên sử dụng keywords một cách thận trong và bảo đảm sự tương thích với nội dung. Website của bạn có thể bị phạt hoặc đưa vào blacklist nếu bạn quá lạm dụng nó. Việc sử dụng keywords cũng có thể là một con dao hai lưỡi đối với bạn. Bạn có thể mất vài giờ để nghiên cứu cách viết keywords tốt nhất và đối thủ của bạn chỉ mất vài phút để thừa hưởng từ bạn.

7. Meta MSN (No ODP)

Thẻ này được ứng dụng cho việc mô tả website của bạn ở kết quả tìm kiếm của MSN. Do MSN thường hay sử dụng mô tả của DMOZ nên dùng thẻ này sẽ giúp cho MSN chuyển qua dùng mô tả của bạn.

Ví dụ:
HTML
<META Name="msnbot" CONTENT="NOODP">

8. Meta Title

Nội dung thẻ này được sử dụng tương tự như thẻ title .

Ví dụ:
HTML
<META NAME="Title" CONTENT="Page Title Here">

Thẻ này được sử dụng bởi Yahoo! và MSN.

Read More

Tạo nút lên đầu trang cho blog (top page)

Khi trang web hay blog của bạn quá dài thì việc phải  thường xuyên kéo thanh trượt lên đầu trang  nhiều khi sẽ làm cho người xem phiền lòng , vì thế để giảm thiểu điều này bạn nên thêm vào một nút Top page ( lên đầu trang ) . Vào Bố Cục > Thêm Tiện ích > HTML/JavaScript và dán đoạn code dưới đây vào .

<a style="display:scroll;position:fixed;bottom:20px;right:5px;" href="#" title="Lên trên"><img src="http://thantoc.xm.com/hinh-anh/arrow-up.gif"/></a>

Bạn có thể thay thế hình ảnh và các thông số cho phù hợp với sở thích và blog của mình . 

Read More

Tìm hiểu cấu trúc template của Blogspot

Blogspot không có nhiều tiện ích đi kèm và muốn có thêm những tính năng mới thì chúng ta cần chỉnh sửa trong template. Vấn đề ở đây là đặt vào vị trí nào cho hợp lý? Template của Blogspot rất nhiều, cùng với một thủ thuật nhưng có thể người này áp dụng dễ dàng còn người khác lại gặp khó khăn với template của mình? Bởi việc áp dụng một cách thụ động các thủ thuật đã dẫn đến tình trạng như vậy. Cho dù có nhiều template khác nhau nhưng chạy trên blogspot thì những đoạn mã cơ bản nhất chúng vẫn giống nhau. Một thủ thuật hoạt động được trên template này thì cũng sẽ hoạt động được trên template khác. Trước tiên muốn có thêm tính năng cho template của mình thì bạn cần phải hiểu rõ template đó đã.

Template của Blogspot là file XML, vậy XML là gì? XML viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể mở rộng) là một bộ qui luật về cách chia một tài liệu ra làm nhiều phần, rồi đánh dấu và ráp các phần khác nhau lại để dễ nhận diện chúng.

1. Qui luật về cách chia một tài liệu ra làm nhiều phần: nó được định nghĩa ở trong template, đây cũng là điểm khiến XML linh hoạt hơn HTML.
2. Đánh dấu và ráp các phần khác nhau lại: cái này được xử lý ở máy chủ của Blogger.
3. Nhận diện chúng: chính là hiển thị của blog trên trình duyệt.

Dưới đây là mô phỏng vắn tắt một template Blogspot:

<?xml version="1.0" encoding="UTF-8" ?>     <!-- định nghĩa XML -->
<!DOCTYPE html>     <!-- định nghĩa doctypes -->
<html ...>
<head>
...
<b:skin>
...
</b:skin>
</head>
<body>

<div ...>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

...

</div>

</body>
</html>

Như một website thì blog cũng có phần đầu <head>...</head> và phần thân <body>...</body>.

1. Phần đầu - head:

Trong XML có những Tag pair (cặp thẻ) được định nghĩa và đây là một thẻ <b:include data='blog' name='all-head-content'/>. Thẻ này không chứa gì ở giữa nên cần chấm dứt bằng"/>". Đây là một thẻ quan trọng, nó chứa những thông tin về nội dung của phần đầu blog và cả dữ liệu về avatar của tài khoản Blogger.

Trong cặp thẻ <b:skin> là style sheet dành cho blog. Muốn chỉnh sửa giao diện hiển thị của blog thì đây là nơi bạn cần quan tâm. Ngoài ra thì khi view source blog bạn còn thấy một style sheet bên ngoài dành cho widget có tên dạng xxxxxxxxxx-widget_css_bundle.css, là css bên ngoài nên mức độ ưu tiên thấp hơn css trong template.

2. Phần thân - body:

Mỗi template có những layout (bố cục, sắp xếp) khác nhau, chúng được quy định bởi những thẻ <div>, <span>, <ul>, <li>... tuy nhiên chúng có điểm chung là những thanh Add a Gadget, trên thanh đó có những Widget như Blog Posts, Popular Post,HTML/Javascript... Một thanh Add a Gadget được quy định bằng cặp thẻ <b:section>, những Widget được quy định bằng cặp thẻ<b:widget> và những đoạn mã để chạy Widget này được đặt trong cặp thẻ<b:includable>. Blog của bạn có bao nhiêu thanh Add a Gadget thì cũng có từng ấy cặp thẻ<b:section>. Trong cặp thẻ <b:section> có thể chứa 1 hoặc nhiều cặp thẻ <b:widget> hay không có gì nếu chưa add Widget. Trong cặp thẻ <b:widget> có ít nhất một cặp thẻ<b:includable> với id='main'. Mỗi cặp thẻ<b:includable> có thể có các cặp thẻ <b:includable>khác lồng nhau.

Chúng ta sẽ tìm hiểu đoạn mã của Widget Blog Posts, đây là Widget được chỉnh sửa nhiều nhất. Hãy mở template của bạn bằng notepad++ và tìm thẻ <b:widget> với id='Blog1'. Ví dụ:<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'>. Chúng ta quan tâm tới các cặp thẻ <b:includable> nằm trong cặp thẻ <b:widget> này. Lần lượt click vào từng thẻ<b:includable> rồi nhấn dấu [-] để thu gọn thẻ này lại, xem hình dưới:

Thẻ <b:includable> với id='main' có nhiệm vụ gắn nối các thẻ <b:includable> còn lại với nhau. Thẻ <b:includable> với id='post' và thẻ <b:includable> với id='comments' lần lượt là nơi chứa mã của bài đăng và khung nhận xét, có nhiều thủ thuật liên quan tới chúng.

Những thẻ được định nghĩa bởi Blogger bắt đầu bởi b: và thường gặp nhiều nhất là <b:if>,<b:loop> đây là lệnh điều kiện và lệnh lặp. Thẻ <b:includable> là những hàm, mỗi mộtWidget có một hàm chính với ID là main.

Khoanh vùng và tìm hiểu dần, bạn sẽ hiểu rõ template của blog mình hơn và dễ dàng thêm bớt, tinh chỉnh để blog tối ưu nhất.

Nguồn Blog Duy Phạm

Read More

Banner Quảng Cáo Trượt Dọc Hai Bên Blog

Banner quảng cáo trượt dọc 2 bên trang web là hình thức quảng cáo rất phổ biến hiện nay trên các Forum\Website lớn. Không những giúp tận dụng “đất”, nó còn dễ dàng gây được sự chú ý của người đọc với hiệu ứng trượt theo khi trang được cuộn lên\xuống.

Tiện ích này trước đây đã được một số Blogger giới thiệu. Tuy nhiên có một số nhược điểm “chết người” như : không hiển thị tốt trên trình duyệt Firefox, hoặc nếu hiển thị thì khi click vào bất cứ liên kết nào trên Blog cũng không có tác dụng ( unclickable ).

Sau khi tham khảo code từ một số website tên tuổi, iTechPlus đã tìm được đoạn code ưng ý, có thể khắc phục được các lỗi nêu trên, đặc biệt là hiển thị tốt ngay cả trên trình duyệt “già nua xấu xí” IE6.

Và cũng theo yêu cầu của một số bạn trước đây, hôm nay iTechPlus sẽ hướng dẫn các bạn cách chèn tiện ích “Banner quảng cáo trượt dọc 2 bên” vào Blog, qua 2 bước rất đơn giản sau :

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML\JavaScript và chèn vào đoạn code bên dưới :

<div id="divAdRight" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfESZIpMKpkKkvLus6SB2t_CLPxDh1ABC-iEtoL2mMzu-Uk6naFx2G_-tIo3A9Cc_Yrgbq7Ze_mAGtO8bFwrzLPrcO6DrB6QzD_3QjjL5po19T1mcz0rIbQjKhbNgnk5yBxzl2z4DOqX0/s512/bannerfpt.jpg" width="125" /></a> 
</div> 
<div id="divAdLeft" style="DISPLAY: none; POSITION: absolute; TOP: 0px"> 
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfESZIpMKpkKkvLus6SB2t_CLPxDh1ABC-iEtoL2mMzu-Uk6naFx2G_-tIo3A9Cc_Yrgbq7Ze_mAGtO8bFwrzLPrcO6DrB6QzD_3QjjL5po19T1mcz0rIbQjKhbNgnk5yBxzl2z4DOqX0/s512/bannerfpt.jpg" width="125" /></a> 
</div> 
<script> 
function FloatTopDiv() 
{ 
startLX = ((document.body.clientWidth -MainContentW)/2)-LeftBannerW-LeftAdjust , startLY = TopAdjust+80; 
startRX = ((document.body.clientWidth -MainContentW)/2)+MainContentW+RightAdjust , startRY = TopAdjust+80; 
var d = document; 
function ml(id) 
{ 
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 
el.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';}; 
el.x = startRX; 
el.y = startRY; 
return el; 
} 
function m2(id) 
{ 
var e2=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id]; 
e2.sP=function(x,y){this.style.left=x + 'px';this.style.top=y + 'px';}; 
e2.x = startLX; 
e2.y = startLY; 
return e2; 
} 
window.stayTopLeft=function() 
{ 
if (document.documentElement && document.documentElement.scrollTop) 
var pY = document.documentElement.scrollTop; 
else if (document.body) 
var pY = document.body.scrollTop; 
if (document.body.scrollTop > 30){startLY = 3;startRY = 3;} else {startLY = TopAdjust;startRY = TopAdjust;}; 
ftlObj.y += (pY+startRY-ftlObj.y)/16; 
ftlObj.sP(ftlObj.x, ftlObj.y); 
ftlObj2.y += (pY+startLY-ftlObj2.y)/16; 
ftlObj2.sP(ftlObj2.x, ftlObj2.y); 
setTimeout("stayTopLeft()", 1); 
} 
ftlObj = ml("divAdRight"); 
//stayTopLeft(); 
ftlObj2 = m2("divAdLeft"); 
stayTopLeft(); 
} 
function ShowAdDiv() 
{ 
var objAdDivRight = document.getElementById("divAdRight"); 
var objAdDivLeft = document.getElementById("divAdLeft"); 
if (document.body.clientWidth < 1000) 
{ 
objAdDivRight.style.display = "none"; 
objAdDivLeft.style.display = "none"; 
} 
else 
{ 
objAdDivRight.style.display = "block"; 
objAdDivLeft.style.display = "block"; 
FloatTopDiv(); 
} 
} 
</script> 
<script> 
document.write("<script type='text/javascript' language='javascript'>MainContentW = 1000;LeftBannerW = 125;RightBannerW = 125;LeftAdjust = 5;RightAdjust = 5;TopAdjust = 10;ShowAdDiv();window.onresize=ShowAdDiv;;<\/script>"); 
</script>

Trong đoạn code trên :

• <a href="#"> : liên kết đến khi người đọc click vào. Thay # bằng liên kết trang bạn cho phù hợp
• <img src=”…”/> : banner bạn muốn hiển thị
• width="125" : chiều rộng của banner. Có 2 giá trị được đánh dấu cùng màu đỏ
• MainContentW = 1000 : chiều rộng trang web. Có 2 giá trị được đánh dấu cùng màu xanh lá
• LeftAdjust = 5 : khoảng cách từ bìa trái trang web đến banner
• RightAdjust = 5 : khoảng cách từ bìa phải trang web đến banner
• TopAdjust = 10 : khoảng cách từ rìa trên trang web đến banner

Lưu ý : Do tiện ích sử dụng những giá trị xác định để điều chỉnh vị trí của banner so với trang web, do đó, tính thẩm mỹ của tiện ích sẽ phụ thuộc vào độ phân giải của màn hình máy tính.
3. Save and Done.

Chúc các bạn thành công !

Read More

Trình diễn bài đăng mới nhất cho blogspot

Có nhiều cách để các bạn giới thiệu đến mọi người các bài đăng mới nhất trên Blog của mình. Tôi xin chia sẻ đến với các bạn một trong những tiện ích giới thiệu bài đăng mới nhất được tự động trình diễn trông khá đẹp và tự động cập nhật khi bạn đăng bài mới

Mời bạn xem thử tiện ích nha.

Ảnh minh họa

Để làm được như trên các bạn thực hiện theo các bước mình hướng dẫn dưới đây nha.

>>>Bắt đầu thủ thuật.

Bước 1: Đăng nhập vào blog

Bước 2: Đi tới danh sách bài đăng (Nếu bạn đang quản lý từ 2 trang trở lên)

Bước 3: Chọn  Mẫu

Bước 4: Chỉnh sửa HTML => Tiếp tục (đồng thời bấm cặp phím Ctrl+F và gõ lệnh ]]></b:skin>

)

Bước 5: Chèn đoạn code dưới đây vào trước dòng lệnh ]]></b:skin>

.mod{
background:#eee; /*màu nền của tiện ích*/
border:3px solid #6D7B8D; /*đường viền của tiện ích*/
margin-bottom:0px;
width:523px; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:209px; /*chiều cao của tiện ích*/
overflow:hidden;}
.bd{position:relative;padding:4px 4px 4px 6px;}
.gl2-ct .ct{margin-left:0px;position:relative;}

.vpv{padding:0px;width:248px; /*độ rộng cảu phần bên trái của tiện ích*/
display:none;
position:absolute;
color:#000;
border-right:1px solid #5C5858;
}
.gl-title a {color:#0000ff; /*màu text của tiêu đề bài viết bên trái*/
font-size:13px;
font-weight:bold;}
.gl-title a:hover {color:#ff0033;}
.glv .on{display:block;}
.vimg{width:238px; /*độ rộng của ảnh bên trái*/
height:115px; /*chiều cao của ảnh bên trái*/
border:1px solid #fff;padding:2px;}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:50%; /*độ rộng phần bên phải*/
position:absolute;
top:0px;
right:0px;
margin-top:5px;
text-align:left;}
.vpv-ft a{
color:#000099; /*màu tiêu đề bên phải*/
font-size:11px;
font-family:arial;
text-decoration: none;}
.vpv-ft a:hover{color:#ff0033;}
.vpv-ft li{
list-style-type:none;
min-height:40px;
cursor:pointer;
border-bottom:1px solid #5C5858;
position:relative;
text-align:left;}

.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #5C5858;
padding-bottom:5px;}
.vpv-ft li.on{
background:#AFC7C7;
}

.vpv-ft img{
float:left;
width:34px; /*độ rộng của ảnh bên phải*/
height:30px; /*chiều cao của ảnh bên phải*/
margin:3px 4px 0px 2px;
padding:0px;}
.vpv-ft a{font-family:verdana;}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:14px;
width:6px;
position:absolute;
left:-10px;
top:7px;} 

Các bạn chỉnh sửa các thông số và tông màu cho phù hợp với blog của mình, sau đó bấm Lưu mẫu và trở lại thiết kế=>Chọn thêm tiện ích => thêm HTML/Javacript, sau đó đoạn code dưới đây vào:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = false;

fntsize = 12;
acolor = "";
aBold = false;

text = "comments";
showPostDate = true;

summaryPost = 80; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";

numposts =5; /* số bài viết hiển thị*/
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://cdqtkd5a.blogspot.com/"; /*thay thành địa chỉ blog của bạn*/

</script>
<div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on">
<script src="http://dl.dropbox.com/u/66348944/ya_glv_post.js" type="text/javascript">
</script></div>
<script src="http://dl.dropbox.com/u/66348944/ya_ct_post.js" type="text/javascript">
</script></div>
</div>
</div>

<script src="http://dl.dropbox.com/u/66348944/ya_jquery_03.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery.min.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_02.js" type="text/javascript">
</script>
<script src="http://dl.dropbox.com/u/66348944/ya_jquery_01.js" type="text/javascript">
</script><script type="text/javascript">
(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();
(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){
},500);});})();
</script>

Cuối cùng bấm Lưu lại là xong
Chúc bạn thành công!!

Read More

Tạo đoạn text hiển thị ngẫu nhiên và luân phiên

Trên blogspot của bạn, đôi khi bạn thích hiển thị một số dòng text thông báo hoặc một vài câu danh ngôn mà bạn tâm đắc. Hiệu ứng tạo text hiển thị ngẫu nhiên hoặc luân phiên sẽ giúp cho trang web trở nên sinh động và bớt đơn điệu hơn. Qua bài viết này mình sẽ giới thiệu bạn cách tạo 2 kiểu text như thế.

1. Hiển thị text ngẫu nhiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<div style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto">
<!-- RANDOM QUOTES -->
<script type="text/javascript">
quotes = new Array()
quotes[0] = "Nội dung đoạn text 1"
quotes[1] = "Nội dung đoạn text 2"
quotes[2] = "Nội dung đoạn text 3"
quotes[3] = "Nội dung đoạn text 4"
quotes[4] = "Nội dung đoạn text 5"
quotes[5] = "Nội dung đoạn text 6"

randomquote = Math.random() * (quotes.length)
randomquote = Math.floor(randomquote)
document.write(quotes[randomquote])
</script>
<!-- RANDOM QUOTES -->
</div>

Lần lượt thay nội dung các đoạn text cần hiển thị ngẫu nhiên.

Tình yêu của các chàng trai không nằm ở trái tim mà nằm ở đôi mắt - Shakespeare

2. Hiển thị text luân phiên: Đặt đoạn code sau đây vào một tiện ích HTML/Javascript.

<!-- ROTATING QUOTES -->
<script type="text/javascript">
var index = 0;
quotes = new Array();
quotes[0] = "Nội dung đoạn Text 1";
quotes[1] = "Nội dung đoạn Text 2";
quotes[2] = "Nội dung đoạn Text 3";
quotes[3] = "Nội dung đoạn Text 4";
quotes[4] = "Nội dung đoạn Text 5";
quotes[5] = "Nội dung đoạn Text 6";

index = Math.random()*(quotes.length);
index = Math.floor(index);

function rotator() {
if (index == quotes.length) {index = 0;}
document.getElementById("rotation").innerHTML = quotes[index];
index++;
setTimeout("rotator();",5000);
}
</script>
<!-- ROTATING QUOTES -->
<div id="rotation" style="width:500px;height:50px;background:#DDD;padding:5px 5px 5px 5px;margin:0px auto"></div>
<script type="text/javascript">rotator();</script>

Lần lượt thay nội dung các đoạn text cần hiển thị luân phiên. Chú ý có thể thay đổi số 5000 tượng trưng cho 5 giây chỉ khoảng cách thời gian giữa các lần hiển thị text luân phiên.

Khi hai người yêu nhau, họ không nhìn nhau mà họ cùng nhìn về một hướng - Saint Exupery

Ở 2 code trên, bạn có thể tùy biến thêm CSS để tạo bản sắc riêng khi áp dụng cho blogspot của bạn.

Read More