ngaybennhau

Home » All posts

Hiệu ứng M6 cho tiện ích Nhãn

Người đăng: ngaybennhau on Chủ Nhật, 27 tháng 2, 2011

Trang Dhteumeuleu.com có rất nhiều kiểu hiệu ứng rất độc đáo dành cho thiết kế web. Hôm nay xin giới thiệu kiểu menu M6 do Dhteumeuleu.com phát triển. Bạn có thể xem Demo trước khi thực hiện tạo kiểu Menu này.

Bước 1. Đặt đoạn code Javascript dưới đây vào trước thẻ </head>.

Bước 2. Đặt đoạn code CSS sau đây vào trước thẻ </head>.

<type type="text/css">
#menu {
height: 300px;
position: relative;
width: 400px;
}
#menu a {
display: block;
font-family: Arial, sans-serif;
text-decoration: none;
white-space: nowrap;
}
</style>

Bước 3. Thiết lập cấu trúc HTML như bên dưới và đặt giữa thân trang web (giữa thẻ <body> và </body>).

* Mở rộng: Ở đây nhận thấy có thể áp dụng hiệu ứng này cho tiện ích Nhãn (Label) trên blogspot. Bạn có thể xem Demo bên dưới.

Để làm được như vậy thì trước tiên Đăng nhập Blogger, vào Design >> Page Elements. Nếu blog của bạn chưa có tiện ích Nhãn (Labels) thì thêm một tiện ích như vậy.

Ở Bước 1, bạn cần thay dòng

P = document.getElementById("menu").getElementsByTagName("a");

Bằng dòng :

P = document.getElementById("Label1").getElementsByTagName("a");

Đến Bước 2 thì đặt code bên dưới vào trước thẻ ]]</b:skin>.

#Label1 {
height:300px;
position:relative;
width:250px;
}
#Label1 li {
list-style-type:none;
margin:0;
padding:0;
}
#Label1 a {
display:block;
font-family:Arial, sans-serif;
text-decoration:none;
white-space:nowrap;
}
#Label1 a:hover {
text-decoration:none;
}

More about →

Tùy biến Comments Block cho blogspot

Người đăng: ngaybennhau

Để có phần nhận xét (Comments) đẹp cho blogspot thì bạn phải tùy biến hai thành phần quan trọng là comments-block và comment-form. Tiếp sau bài hướng dẫn tạo Comment Form đẹp, bài viết này sẽ hướng dẫn cách tạo một Comments Block đẹp.

Bạn có thể xem một ví dụ Demo ở hình minh họa bên dưới.

Nào chúng ta cùng thực hiện theo các bước như sau.

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

Dùng từ khóa comments-block, tìm đến đoạn code như bên dưới.

Thay toàn bộ đoạn code trên bằng đoạn code bên dưới.

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]</b:skin>.

(Lưu ý trước khi thực hiện Bước 2, hãy dùng từ khoá comments tìm đến code CSS liên quan rồi xóa hết)

#comments-block1 {padding-left:10px}
.comments h4{padding:10px 0 20px 0}
.comments-wrapper{border-bottom:1px solid #e1e1e1;margin-bottom:10px}
.comments-wrapper:last-child{border-bottom:none}
.comments-block{padding:0 10px}
.comments-meta{font-size:.857em;text-align:right;line-height:1.286em;width:98px;float:left;padding-top:16px}
.comments-meta a:hover{text-decoration:none;border-bottom:1px dotted #004A80}
.comments-timestamp{font-size:.857em}
.comments-avatar{float:right}
.comments-body{font-size:0.857em;background:#FFF;margin:10px 0 15px 113px;border:1px solid #E1E1E1;-moz-border-radius:5px;-webkit-border-radius:5px;padding:10px;width:400px}
.comments-body .arrow{width:0;height:0;line-height:0;float:left;margin:5px 0 0 -20px;border-bottom:10px solid transparent;border-right:10px solid #fff;border-top:10px solid transparent}
.comments-body a{border-bottom:1px dotted #004A80}
.comments-body a:hover{text-decoration:none;border-bottom:1px solid #004A80}

Chú ý trong đoạn code trên, điều chỉnh width:400px để định chiều rộng phần thân chứa nội dung nhận xét phù hợp với chiều rộng phần comments-block.

Lưu Template là OK.

Bạn hãy nghiên cứu thêm về CSS để tùy biến cho phần Comments Block theo ý muốn của mình nhé.
:44)

More about →

Tiện ích Phim mới nhất cho blogspot về phim

Người đăng: ngaybennhau on Thứ Sáu, 25 tháng 2, 2011

Đối với các blogspot chuyên về phim, sau khi sử dụng thủ thuật tạo Readmore tự động riêng cho blog kiểu này thì thủ thuật cần thiết kế đến phải là tiện ích Phim mới nhất (Recent Videos/Recent Films).

Bạn có thể xem Demo cho tiện ích kiểu như vậy tại trang này.

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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Đặt đoạn code sau đây vào trước thẻ </head>.

Lưu Template.

Bước 2. Vào Page Elements. Trên sidebar thêm một tiện ích HTML/Javascript, đặt tiêu đề tiện ích là Phim mới nhất hoặc theo ý thích của bạn, ở phần nội dung tiện ích thì đặt vào bằng đoạn code bên dưới.

Nếu bạn muốn áp dụng tiện ích này cho một nhãn nào đó thì thay dòng được đánh dấu màu đỏ bằng dòng bên dưới.

<script src="/feeds/posts/default/-/Tên nhãn?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Thay Tên nhãn bằng nhãn mà bạn muốn áp dụng tiện ích.

Nguồn tham khảo: Xem >>

More about →

Tạo Auto Readmore cho blog chuyên về phim

Người đăng: ngaybennhau on Thứ Năm, 24 tháng 2, 2011

Đối với các blogspot chuyên giới thiệu về phim hay video được upload lên hoặc lấy từ Youtube.com thì để có được chế độ Readmore tự động lấy hình đại diện cho youtube video và đoạn trích dẫn thì cần phải sử dụng thủ thuật riêng chứ không dùng script tạo Auto Readmore cho các blog thông thường được.

Bạn có thể xem một ví dụ về một blogspot như vậy tại đây.

Để thực hiện thủ thuật này, bạn hãy thực hiện như sau.

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

Đặt đoạn code bên dưới vào trước thẻ </head>.

Trong đoạn code trên, bạn có thể điều chỉnh các con số trong phần code được đánh dấu màu đỏ, lần lượt là số ký tự khi không có ảnh đại diện, số ký tự khi có ảnh đại diện, chiều cao ảnh đại diện, chiều rộng ảnh đại diện (px).

Bước 2. Tìm dòng code <data:post.body/> (hoặc <p><data:post.body/></p>) và thay nó bằng đoạn code bên dưới.

<div expr:id='"summary" + data:post.id'>[postlink]<data:post.url/>[/postlink]<data:post.body/></div>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>createVideoThumb2("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>createVideoThumb("summary<data:post.id/>");</script>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>

Bước 3. Để đăng youtube video lên blogspot trong trường hợp này thì bạn phải tạo tài khoản Youtube trên Youtbube.com hoặc nếu không thì bạn có thể tìm trên Youtube.com để lấy URL nguồn cho video. Để lấy URL, khi bạn xem một video nào đó trên Youtube.com hãy nhấp vào nút Share rồi copy URL trong khung. Bên dưới là một ví dụ.

http://www.youtube.com/watch?v=7g6jc_9OzhI

Bước 4. Trong bảng điều khiển Blogger, vào Settings (Cài đặt) >> Formatting (Định dạng), kéo xuống khung Post Template (Mẫu bài đăng) rồi dán đoạn mẫu sau đây vào khung Post Template.

endofvid
[starttext]
Nội dung bài đăng đặt ở đây
[endtext]

Nhấp SAVE SETTINGS để lưu cài đặt.

Trong đoạn mẫu ở trên thì, "endofvid" được dùng để cho Template hiểu rằng URL video hoàn thành, để bạn dán URL video ngay trước nó mà không có khoảng cách. [starttext] và [endtext] là các phần bao nội dung bài viết, nếu bạn cần viết mô tả nội dung video thì đặt vào giữa hai dòng này.

Bước 5. Vào Posting (Đăng bài) ở chế độ Compose. Trong phần nội dung, bạn đặt URL của video vào trước dòng endofvid, phần nội dung bài đăng thì đặt vào giữa 2 dòng [starttext] và [endtext]. Bên dưới là hình minh họa.

Lưu ý thủ thuật này chỉ áp dụng cho video được upload lên hoặc lấy từ Youtube.com.

Nguồn tham khảo: Xem >>

More about →

Tiện ích Bài viết liên quan với hiệu ứng jQuery

Người đăng: ngaybennhau on Thứ Tư, 23 tháng 2, 2011

Theo yêu cầu của bạn Tùng Lâm, khi bạn ấy lướt web mới phát hiện một tiện ích Bài viết liên quan có hiệu ứng jQuery khá đẹp tại trang Simplebloggertutorials.com và bạn ấy hỏi tôi có thể hướng dẫn thủ thuật này được không. Sau khi nghiên cứu, tôi nhận thấy thủ thuật này có sử dụng thư viện jQuery để tạo hiệu ứng và tiện ích được phát triển bởi Mike, một chuyên gia thiết kế web là admin của trang Moretechtips.com. Trang này có phát triển rất nhiều tiện ích liên quan đến Twitter sử dụng hiệu ứng jQuery. Bạn có thể khám phá thêm nếu thích các tiện ích của Mike.

Lưu ý tiện ích Bài viết liên quan ở đây có sử dụng jQuery (Related Posts with jQuery Effect Widget) nên ít nhiều cũng hơi nặng, bạn nên cân nhắc trước khi cài đặt cho blogspot của mình.

Bạn có thể xem Demo tại trang này hoặc khám phá thêm nhiều biến thể tại trang này.

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

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ backup Template trước khi thực hiện).

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

#related-posts-widget{float:left;width:90%;font-size:11px;}
.related-posts-widget{min-height:130px;}
#related-posts-widget h2{display:block;padding:2px 0 2px 5px;margin:0 0 .5em;color:#666;font-size:13px;text-transform:none;border-bottom:1px solid #09F;text-shadow:1px 1px 3px #CCC;}
.related-posts-widget ul.rpw strong{font-weight:lighter;}
#related-posts-widget ul.rpw{color:#333;text-align:left;}
#related-posts-widget ul.rpw li a, .bookmarks a{color:#444;font-size:11px;font-weight:bold;text-decoration:none;}
#related-posts-widget ul.rpw li a:hover{color:#ff8c00;}
#related-posts-widget ul.rpw li a:active{outline:0;position:relative;color:#09F;}
#related-posts-widget ul.rpw{list-style:none;margin:0;padding:0;}
#related-posts-widget ul.rpw li{margin:0;padding:6px 0;}

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

Bước 3. Tìm một trong các thẻ sau đây,

<div class='post-footer'>

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

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

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

rồi đặt sau nó bằng dòng code bên dưới.

<div class='related' id='related-posts-widget'>loading..</div>

Lưu Template là OK.

More about →

Macromedia Dreamweaver v8.0

Người đăng: ngaybennhau on Thứ Hai, 21 tháng 2, 2011

Dreamweaver 8 is the industry-leading web development tool, enabling users to efficiently design, develop and maintain standards-based websites and applications.With Dreamweaver 8, web developers go from start to finish, creating and maintaining basic websites to advanced applications that support best practices and the latest technologies.

DOWNLOAD HERE

More about →

Chỉ định liên kết đến trang giới thiệu cho người nhận xét là Admin

Người đăng: ngaybennhau

Nếu bạn chú ý ở phần tên người nhận xét trong các nhận xét trên blogspot thì sẽ thấy rằng liên kết tên người nhận xét cho trường hợp người nhận xét đăng nhập tài khoản Blogger thường dẫn đến trang hồ sơ Blogger của người nhận xét. Thông thường mỗi blogspot đều có một trang giới thiệu về tác giả (admin) của blog. Vậy tại sao chúng ta không can thiệp để liên kết tên Admin trên các nhận xét dẫn đến trang giới thiệu về tác giả của blog? Nếu làm được như vậy thì blogspot của bạn sẽ tạo được sự khác biệt về một phương diện nào đó.

Bạn có thể xem Demo kết quả này khi click vào tên người nhận xét là Huỳnh Nhật Hà trên blog của tôi trước khi thực hiện cho blogspot của mình.

Đăng nhập Blogger, vào Design >> Edit HTML. Hãy nhớ backup Template của bạn trước khi can thiệp vào code trong Template. Chọn Expand Widget Templates.

Trong Template hãy tìm đến đoạn code như sau:

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

Lệnh điều kiện ở trên ý nói rằng, nếu tên tác giả nhận xét có URL (liên kết) thì gán URL cho nó, nếu không thì chỉ có tên tác giả nhận xét mà thôi (dành cho trường hợp người nhận xét là nặc danh).

Nếu bạn muốn URL tên bạn (là Admin) dẫn đến trang giới thiệu (about-me) trên blog của bạn thì thay đoạn code ở trên bằng đoạn code dưới đây.

<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXXX"'>
<a href='URL_trang giới thiệu về Admin' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='blank'><data:comment.author/></a>
</b:if><b:else/>
<data:comment.author/>
</b:if>

Trong đoạn code trên, bạn cần thay XXXXXXXXXXXXXXXXXXXXX bằng chuỗi số ID hồ sơ Blogger của bạn (chuỗi số này chắc là dễ tìm rồi) và thay URL_trang giới thiệu về Admin.

Lưu Template là OK.

Ngoài ra, bạn có thể đặc cách tạo thêm tính năng này cho một người nhận xét thường xuyên nhất trên blog của bạn, hoặc có thể là tri âm tri kỷ trên blog của bạn. Thì bạn dùng code như thế này.

<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXXX"'>
<a href='URL_trang giới thiệu về Admin' rel='nofollow'><data:comment.author/></a>
<b:else/>
<b:if cond='data:comment.author == "Tên một người"'>
<a href='URL_trang giới thiệu của người đó' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
</b:if></b:if><b:else/>
<data:comment.author/>
</b:if>

Xin quý bạn đọc thứ lỗi cho Huỳnh Nhật Hà vì dạo này hơi bận việc khác một chút nên thủ thuật không nhiều như lúc trước, song hy vọng những thủ thuật trong năm 2011 vẫn “độc” để khỏi phụ lòng mong mỏi của mọi người. :54) :44)

More about →

Hiệu ứng M6 cho tiện ích Nhãn

Tùy biến Comments Block cho blogspot

Tiện ích Phim mới nhất cho blogspot về phim

Tạo Auto Readmore cho blog chuyên về phim

Tiện ích Bài viết liên quan với hiệu ứng jQuery

Macromedia Dreamweaver v8.0

Chỉ định liên kết đến trang giới thiệu cho người nhận xét là Admin

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts