chiasedamme123

Home » All posts

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

Posted by chiasedamme on Sunday, February 27, 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

Posted by chiasedamme

Để 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 →

Tùy biến Comment Form sao cho đẹp

Posted by chiasedamme on Saturday, February 26, 2011

Trong quá trình chăm chút cho blogspot, một admin bao giờ cũng muốn cho phần nhận xét trên blog của mình thật đẹp. Tuy nhiên để thỏa ước muốn đó thì cũng không phải dễ dàng gì nếu admin không hiểu tường tận về hệ thống nhận xét của Blogger.

Phần nhận xét của một blogspot được đặt nằm gọn trong id có tên là #comments chứa các id và class khác, trong đó có hai id chính là #comments-block và #comment-form. Bạn không nên nhầm mà đồng nhất #comment-form với #comments bởi vì #comment-form là một bộ phận của #comments mà thôi. Tôi sẽ đề cập đến phần #comments-block trong một bài viết khác, trong phạm vi bài này, chỉ xin giải quyết vấn đề làm sao để có một Comment Form cho đẹp.

Dưới đây là phân tích cấu trúc một Comment Form cơ bản chưa được chỉnh sửa gì nhiều.

Như các bạn thấy thì id #comment-form chứa 2 id khác quan trọng gồm #comment-post-message (dòng thông báo Đăng một nhận xét) và #comment-editor (khung nhập nhận xét). Để hiểu sâu hơn, chúng ta tiếp tục phân tích phần XML trong Template của Comment Form.

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

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

<b:includable id='comment-form' var='post'>
<div id='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>

Chú ý trên đoạn code trên, đối với một số Template thì bạn sẽ thấy thẻ <div class='comment-form'>, thay vì là thẻ <div id='comment-form'>.

Nào, chúng ta bắt đầu tùy biến bằng CSS nhé.

1. Nếu bạn muốn tùy biến dòng thông báo Đăng một nhận xét thì bạn đặt CSS như sau.

#comment-post-message {
float:left;
font-size:14px;
font-family:Arial;
font-weight:bold;
border:1px solid #fc5604;
color: #0000ff;
text-case:sentence;
}

Chú ý text-transform:uppercase đặt chữ viết HOA, còn text-case:sentence đặt chữ viết Hoa chữ cái đầu.
Nếu bạn rành về CSS thì có thể tùy ý điều chỉnh theo ý muốn.
Nếu bạn muốn id này float về giữa thì đặt float:center;
Nếu muốn ẩn quách nó đi thì đặt thêm display:none !important;
Còn nếu muốn xóa luôn nó đi thì (trong Template) xóa dòng <h4 id='comment-post-message'><data:postCommentMsg/></h4>
Nếu muốn thay đổi dòng Đăng một nhận xét thì thay <data:postCommentMsg/> bằng câu gì đó bạn muốn.

2. Nếu để ý phần #comment-editor bạn sẽ thấy bề ngang nó cách xa biên bên phải của phần Main và bề dọc nó cách xa phần #blog-pager làm cho nó trông rất xấu xí, vì chừa đất trống rất nhiều mà chẳng biết “trồng” cái gì vào đấy. Để cắt phần đất thừa đó đi thì bạn tùy biến CSS cho phần #comment-editor như sau.

#comment-editor{
width:580px;
height:240px;
padding-left:10px;
}

Ở đây bạn chỉnh các thông số về chiều rộng (width) sao cho không quá bề rộng phần Main, chiều cao (height) sao cho tương xứng và padding-left phù hợp với trang của bạn.

3. Ngoài ra bạn có thể tùy biến CSS cho cả id #comment-form như sau.

#comment-form {
background: ;
}
#comment-form p {
………
}

Bạn có thể đặt nền (background) cho phần Comment Form và thêm CSS khác vào đoạn code trên.

Đối với Template có thẻ <div class='comment-form'> thì thay #comment-form bằng .comment-form

Và còn nhiều thứ khác nữa có thể tùy biến xung quanh Comment Form, hy vọng có thể cập nhật tiếp trong thời gian tới. :1)

More about →

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

Posted by chiasedamme on Friday, February 25, 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

Posted by chiasedamme on Thursday, February 24, 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

Posted by chiasedamme on Wednesday, February 23, 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

Posted by chiasedamme on Monday, February 21, 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 →

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

Tùy biến Comments Block cho blogspot

Tùy biến Comment Form sao cho đẹp

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

shares

Like

menu

Category

Popular Posts

About Me

Labels

Recent Posts

Categories

Subscribe

Recent Comments

Popular Posts

Connect With Us

Popular Posts