Tạo playlist nhạc cho Blog

Bài viết này sẽ hướng dẫn cách tạo một playlist nhạc bằng Flash để chèn vào blog, không phải từ mp3.zing.vn hay bất cứ website âm nhạc nào mà là của chính bạn. Đây là một MP3 Flash Player sử dụng tệp xml tạo track list để chơi nhạc mp3 (và chỉ định dạng .mp3 mà thôi), ngoài ra thì MP3 Player này còn cho phép hiển thị cover riêng cho từng bài.

Demo bạn có thể xem ở dưới đây.

Xem screenshot nếu Playlist không load được do lag mạng

Đầu tiên bạn download Mp3 Flash Player tại đây, tiến hành giải nén được hai file là player.swf và playlist.xml. Tiếp theo, bạn upload 2 file này lên một dịch vụ hosting nào đó mà có hỗ trợ direct link. Ở đây mình up lên DROPBOX.

Khi đã có link direct của flash rồi thì bạn thay vào đoạn code bên dưới:
<object data="http://dl.dropbox.com/u/11103024/mp3player/player.swf?autostart=true&amp;playlist=http://dl.dropbox.com/u/11103024/mp3player/playlist.xml" height="226" type="application/x-shockwave-flash" width="408" wmode="transparent"><param name="movie" value="http://dl.dropbox.com/u/11103024/mp3player/player.swf?autostart=true&playlist=http://dl.dropbox.com/u/11103024/mp3player/playlist.xml"/></object>
Đoạn code trên bạn có thể chèn vào một tiện ích HTML/Javascript hoặc ngay trên bài đăng cũng được. Để add nhạc vào playlist thì chúng ta edit playlist.xml bằng Notepad, trong file xml này bạn sẽ thấy:
<song location = "URL bài nhạc"
cover = "URL ảnh đại diện"
title = "tựa đề bài hát"/>
Muốn thêm bao nhiêu bài hát vào list thì bạn chèn thêm bấy nhiêu đoạn mã ở trên. Xong rồi thì save lại, DROPBOX sẽ tự động cập nhật. Chúc bạn tạo được một playlist nhạc "không đụng hàng".

- Nhạc cũng nên upload lên DROPBOX luôn cho tiện.
- Kích thước ảnh cover phải là 150x150 pixel.

Khung thông báo cho blog

Đôi khi bạn muốn thông báo cho các độc giả của blog mình về một sự kiện nào đó (ví dụ như chuyển domain hoặc đăng kí nhận tin...) thì việc tạo một Notification Box là cần thiết. Có nhiều cách để làm điều này, ở đây mình giới thiệu một ứng dụng nhỏ của Jquery trong việc tạo khung thông báo. Điểm đặc biệt của khung này là người đọc có thể tắt nó đi nếu muốn, như vậy sẽ đảm bảo tính thẩm mỹ cho blog của bạn.

Xem Demo

Chèn đoạn code sau phía trên </body> trong template:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.notification{height:70px;width:480px;display:block;position:fixed;bottom:10px;left:10px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 2px #cfcfcf;-webkit-box-shadow:2px 2px 4px #cfcfcf;box-shadow:2px 2px 2px #cfcfcf}
.notification span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid4OZJmD9S4gTPdiqTyDgH0xaJKiOoclqnI_SDrZ8HsS6TAro7nLNh8TZmaxDuGa3JRyxfDUa4arwBkYwJxSvQoT1QO6w2gmRKx0VcXkRK5ZgTMAIegNDSuYeHNGMnT-__gKv6WrofsRw/) no-repeat right top;cursor:pointer;display:block;width:19px;height:19px;position:absolute;top:-9px;right:-8px}
.notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
.warning{border-top:1px solid #fefbcd;border-bottom:1px solid #e6e837;/*Background Gradients*/background:#feffb1;background:-moz-linear-gradient(top,#feffb1,#f0f17f);background:-webkit-gradient(linear,left top,left bottom,from(#feffb1),to(#f0f17f))}
.warning:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvMgP-QAxuifujeOFQNJhSz6hFO_GWsQRCpFtQE33qrXITl59uReNgpZyYPjCU1pcGZAp9bnnWZHR3rFFnMCVsu8jQo1YLXk465RcSWhMAI4VPBebFB9ghq2MpvFi7zQFJiOXUaBAfZBo/);float:left;margin:15px 15px 0 25px}
.warning strong{color:#e5ac00;margin-right:15px}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
<div class='notification warning'><span/>
<p><strong>Warning!</strong>Đây là một thông báo. Click vào button ở bên phải để tắt.</p></div></b:if>
Những đoạn được đánh dấu màu đỏ bạn có thể chỉnh sửa cho phù hợp. Khung này theo mặc định chỉ hiển thị ở trang chủ.

- Nếu đang sử dụng một thủ thuật Jquery khác, hãy xóa dòng màu xanh để tránh xung đột.
- Khung thông báo này có thể ứng dụng vào nhiều việc khác, ví dụ như nội qui comment, nhưng cần một kiến thức nhất định về CSS.

Khung comment đẹp cho Blogger

Trước đây Noct từng đăng một bài hướng dẫn trang trí khung nhận xét của Blogspot, nhưng có vẻ như vẫn còn nhiều người chưa hiểu. Vì vậy nên lần này mình post luôn đoạn code của một khung comment khá đẹp, phong cách Wordpress, có sẵn nút Reply. Code này đã được chuẩn hóa để có thể áp dụng trên mọi template.

Screenshot     |     Demo

Đầu tiên, bạn xóa hết các đoạn CSS của khung comment cũ trong template, chúng thường có dạng:

#comments-block {...}
.comment-body {...}
.comment-footer {...}
......

Tiếp theo, chèn đoạn CSS sau phía trên </b:skin>
.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none}
.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px}
.comments-block .arrow{float:left;margin:22px 0 0 6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYUKa8zbS637DMuKI839oNdYdCK8Dwsx9fQzf_xBhHBMdZlyCVXqGcInQgNmO1TDHq4rq2VALcZ7zEZufT02EBl75aSSyO311nSZ74tUUJExM6KffAv-C0Cabu0df6MTivWYRxfQHyW_M/) no-repeat}
#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px}
.comments-avatar{float:left}
.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}
.comments-meta{font-size:18px}
.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none}
.comments-timestamp{color:#0E6284;font-size:12px}
.comments-body{font-size:13px;padding:5px;background:#fff}
a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right}
.avatar-image-container{width:60px !important;max-height:60px !important;padding:2px;border:1px solid #ccc}
.avatar-image-container img{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPrrLDI-EzVBYk681JLkWhwabPJJbsDn045SVOtPlvg80_7RwpQigQF9aLxleaB2wdzb6MItpkDupfqaqfeXHMKVttlaFPBul3Hrc0Gz8Wgvla6zZ641l5JOd92VhMogR1nBURDCE2LHw/) no-repeat;width:60px !important;height:60px !important}
Tiếp tục click chọn mở rộng mẫu tiện ích, tìm đến đoạn sau:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
...........
</b:loop>
</dl>
Đoạn code này khá dài và có thể khác đôi chút trên từng template, thay thế toàn bộ đoạn ở trên bằng:
<div class='clear'/>
<div class='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-avatar'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='arrow'/>
<div id='comments-box'>
<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=6885746016973304322&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtj8IwJHSBrKR4Rov8vxE5dsvFZzCVo_lfxE-Gz9rX7MQLgiCRdkFJ13xKLxTekG_wjVA1_BSyGh4XWgJ4m_2MoywOXIBR0BD3sk0OYRVs4eMt8qaDBIs2aoOl46KKR_n3LEzQwirVO0/'/></a>
<div class='comments-meta'>
<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/>
<div class='comments-timestamp'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div></div>
<div class='comments-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if></div>
</div>
<div class='clear'/>
</b:loop>
</div>
Thay Blog ID của bạn vào trên để kích hoạt nút Reply. Lưu lại và xem kết quả. Hy vọng khung nhận xét này thỏa mãn được phần nào nhu cầu chém gió của bạn.

Hỏi đáp Ver. 2

Đây là khu vực giải đáp các thắc mắc của bạn. Trước khi đặt câu hỏi, bạn cần lưu ý những điều sau:

- Nội dung câu hỏi phải liên quan tới Blogspot.
- Hồ sơ cá nhân phải được công khai.
- Không chèn liên kết tới các trang web khác, trừ trường hợp cần xử lí lỗi trên trang đó.
- Bạn có thể yêu cầu một thủ thuật hoặc tiện ích tại đây.

Chuyên mục hỏi đáp

Dạo này bận rộn với đồ án tốt nghiệp nên không có nhiều thời gian viết blog nữa, vì vậy mình mở chuyên mục hỏi đáp này để mọi người có thể tự do thảo luận, hỏi đáp các vấn đề về Blogger hoặc bất cứ vấn đề gì. Nếu bạn gặp khó khăn trong việc tùy biến template thì có thể hỏi tại đây, mình sẽ giải đáp (trong khả năng).

Ngoài ra bạn cũng có thể yêu cầu một thủ thuật bất kì,
mình sẽ tìm hộ link hướng dẫn, và nếu thủ thuật đó chưa có trên Google thì Noct sẽ viết bài hướng dẫn nếu được. Nếu có vấn đề không tiện nói ra ở đây thì bạn có thể vào trang liên hệ, nhớ điền địa chỉ email thật để nhận câu trả lời.

Mọi comment trong mục này đều được duyệt chỉ cần bạn tuân thủ nội qui comment ở đây. Hy vọng mục hỏi đáp này nhận được sự ủng hộ của các bạn.

Tùy biến nút Read More của Blogspot

Những ai đang dùng chức năng Read More (đọc thêm) mặc định của Blogger sẽ nhận ra là nó không được đẹp cho lắm, vì vậy trong bài này Noct sẽ hướng dẫn cách tùy biến sao cho trông bắt mắt hơn.

Demo

Đăng nhập vào phần dashboard >> thiết kế >> chỉnh sửa HTML >> đánh dấu chọn mở rộng mẫu tiện ích. Tìm dòng sau:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Thay thế toàn bộ đoạn ở trên bằng:
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Đọc tiếp</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Đọc tiếp</a>
</b:if></b:if><div class='clear'/>
Tiếp theo, chèn đoạn CSS sau phía trên thẻ </b:skin>
a.jump-link {color:#fff;text-decoration:none}

.jump-link {
float:right;
padding:6px 12px;
margin:20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
display:inline-block;
background: #f48423;
background: -moz-linear-gradient(top, #ffdf9e, #f5b026 5%, #f48423);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffd683), color-stop(.03, #f5b026), to(#f48423));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5b026', EndColorStr='#f48423')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border:1px solid #e6791c;
border-bottom:1px solid #d86f15;
color:#FFF;
text-shadow: 0 1px 1px #6f3a02; }

.jump-link:hover {
background: #eb7d1d;
background: -moz-linear-gradient(top, #ffdf9e, #f1a91a 5%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffdf9e), color-stop(.03, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1a91a', EndColorStr='#f07810')"; /* IE8 only */
border-bottom:1px solid #d86f15; }

.jump-link:focus {
padding:7px 13px;
color:#FFF;
text-shadow: 0 -1px 1px #894906;
border:none;
background: #e47412;
background: -moz-linear-gradient(top, #f07810, #f1a91a 95%, #f07810);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f07810), color-stop(.9, #f1a91a), to(#f07810));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f07810', EndColorStr='#f1a91a')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-webkit-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7;
-moz-box-shadow: inset 0px 2px 5px #9b5901, 0 1px 0px #e0d5c7; }
Save template lại và xem kết quả. Bạn dễ dàng nhận ra là thủ thuật này không dùng bất cứ image nào nhằm tăng tốc độ tải trang web, ngoài ra thì các blog đang sử dụng Auto-readmore script cũng hoàn toàn có thể  áp dụng code này.