Hướng dẫn chèn nhạc vào blogspot và website

Việc chèn nhạc vào blog cũng như website đã được chia sẻ khá nhiều trên mạng nhưng có thể một số mới làm quen với việc làm web và blog chưa biết vì vậy mình đã sưu tầm bài viết khá hay này về hướng dẫn các bạn. Đơn giản, và cực kỳ đơn giản là các bạn chỉ cần làm theo những gì mình post dưới đây. Không quá phức tạp nhé. Chúc anh em thành công!

Bài viết này là sự mở rộng, cho phép chèn nhạc vào bài viết của Blogger với các ưu điểm sau:

- Hỗ trợ nhiều định dạng nhạc, bao gồm MP3, AAC, FLV, MP4

- Hỗ trợ chèn video từ Youtube

- Cho phép tùy biến nhiều tham số của player, VD như chiều cao, chiều rộng, tiêu đề bài hát, tên ca sĩ, màu sắc, ...

Cách làm ở bài viết này có thể áp dụng cho bất kỳ website nào (không nhất thiết phải là Blogger) nên các bạn cứ thoải mái mà vọc nhé. :)

1. Cách cài đặt

a) Cài đặt cho toàn blog

Để sử dụng shortcode chơi nhạc này, bạn mở template của Blogger (Layout - Edit HTML hoặc mở file template), tìm đến thẻ đóng 

 và chèn đoạn code sau vào ngay trước nó:

a) Cài đặt cho 1 bài viết đơn lẻ

Trong trường hợp bạn không muốn cài đặt cho cả blog, mà chỉ muốn cài cho 1 bài viết riêng lẻ (không phải lúc nào bạn cũng muốn post nhạc, phải không?) thì áp dụng cách dưới đây:

Sau khi soạn thảo xong bài viết, bạn chuyển sang chế độ Edit HTML và chèn đoạn code sau vào ngay đầu bài viết:

Cuối cùng chỉ cần publish là xong!

2. Cách sử dụng

Shortcodes này được thiết kế theo 2 phần chính: audio và video. Chúng sử dụng 2 flash player khá nổi tiếng là WP Audio Player (đã được nói đến trong bài trước) và JW Player.

WP Audio Player chỉ chơi được nhạc MP3, nhưng có khả năng tùy biến khá cao. Nó cho phép chơi cả playlist, tùy biến tên bài hát, tên ca sĩ, màu sắc, ...

Còn JW Player thì lại đa dạng về định dạng nhạc được hỗ trợ (MP3, AAC, FLV, MP4). Nó cũng chơi được video từ Youtube. Nó có khả năng tùy biến cao thông qua file cấu hình XML, nhưng cách làm này lại không áp dụng được trong trường hợp của chúng ta (do không thể tự động dùng javascript để sinh ra file XML theo ý muốn được), cho nên khả năng của nó cũng bị hạn chế đi nhiều, trong đó phải nói đến tính năng chơi playlist không dùng được :(.

Chúng ta sẽ xem xét 2 player này và các shortcodes hỗ trợ.

2.1. Cú pháp chung của việc viết short codes

Các shortcodes đều được viết theo dạng sau:

[tên_shortcodes:key_1=value_1|key_2=value_2|...|key_n=value_n]

trong đó lưu ý là tên_shortcode phải kèm theo dấu hai chấm (:) ngay phía sau, tên_shortcode có phân biệt chữ hoa chữ thường. Các cặp giá trị key_x=value_x (hai bên dấu bằng (=) không có dấu cách) là để khai báo các tùy chọn của shortcode. Các giá trị value_x có thể chứa dấu cách. Các tùy chọn này không bắt buộc phải có. Thứ tự các cặp giá trị này không quan trọng(bạn thích ghi cái nào trước, cái nào sau đều được).

Cũng lưu ý thêm là sau dấu mở ngoặc vuông ([) và trước dấu đóng ngoặc vuông (]) không có dấu cách. (Trong các ví dụ dưới đây, tôi có để dấu cách để hiển thị code, tránh cho việc nó bị chuyển thành các file nhạc hay video).

2.2. Chơi nhạc MP3

Để sử dụng WP Audio Player để chơi nhạc MP3, bạn dùng shortcode như sau:

[ audio:url=link_đến_file_mp3 ]

trong đó audio là tên shortcode. Bạn có thể dùng tên khác là mp3, kết quả cũng y hệt như vậy.

Trong các tham số thì tham số bắt buộc phải có là url, dùng để khai báo đường dẫn tới file nhạc định chơi. Nếu bạn định chơi 1 playlist thì liệt kê danh sách các đường dẫn của file nhạc, có phân cách nhau bằng dấu phảy (,).

Các tham số khác đều không bắt buộc, chúng bao gồm:

animation: dùng để đóng hoặc mở player khi mới bắt đầu. Giá trị gồm 'yes' (tức player sẽ đóng, khi click vào sẽ mở ra) và 'no' (player luôn luôn mở). Mặc định 'yes'.

artists: tên ca sĩ, nếu là 1 playlist thì đây là danh sách tên ca sĩ có phân cách bằng dấu phảy (,). Mặc định không có giá trị.

autostart: tự động chơi nhạc khi mở trang web. Giá trị gồm 'yes', 'no'. Mặc định 'no'.

loop: chơi lặp lại bài hát hoặc playlist khi kết thúc. Giá trị gồm 'yes', 'no'. Mặc định 'no'.

titles: tên bài hát, nếu là 1 playlist thì đây là danh sách tên bài hát có phân cách bằng dấu phảy (,). Mặc định không có giá trị (khi đó bài hát sẽ hiện tên Track #1, Track #2, ...).

volume: âm lượng ban đầu khi chơi nhạc. Giá trị từ 1 tới 100. Mặc định 60.

width: độ rộng của player. Giá trị tính bằng pixel. Mặc định 290.

Các tham số về màu sắc khá nhiều, các bạn tham khảo tại trang của WP Audio Player.

VD sau đây sẽ hiển thị 1 playlist nhạc có 2 bài, có tùy biến tên bài hát, tên ca sĩ và chế độ lặp lại khi kết thúc với âm lượng khởi tạo là 100.

[audio:url=http://tuanh.org/music/neu.mp3,http://tuanh.org/music/honey.mp3|artists=Noo Phuoc Thinh,Ho Quynh Huong|loop=yes|titles=Neu,Honey|volume=100]

Shortcode của nó là:

[ audio:url=http://tuanh.org/music/neu.mp3,http://tuanh.org/music/honey.mp3|artists=Noo Phuoc Thinh,Ho Quynh Huong|loop=yes|titles=Neu,Honey|volume=100 ]

2.3. Chơi nhạc MP3, AAC, FLV, MP4 và Youtube

Để chơi các định dạng nhạc này, bạn chèn shortcode theo cú pháp sau:

[ music:url=link_đến_file_nhạc ]

trong đó music là tên shortcode. Ngoài tên shortcode này, bạn có thể dùng tên khác là video, flv, mp4, youtube, kết quả cũng y hệt như vậy.

Cũng tương tự như trên, tham số bắt buộc phải có là url, dùng để khai báo đường dẫn tới file nhạc định chơi. Lưu ý là cái này chỉ chơi được 1 file nhạc mà không chơi được playlist (lý do đã nói ở trên). Trong trường hợp bạn chèn video từ Youtube, thì giá trị của biến này sẽ là link tới video đó.

Các tham số khác đều không bắt buộc, chúng bao gồm:

autostart: tự động chơi nhạc khi mở trang web. Giá trị gồm 'yes', 'no'. Mặc định 'no'.

backcolor: màu nền của thanh điều khiển. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu. Mặc định #ffffff.

frontcolor: màu của chữ và các biểu tượng ở thanh điều khiển. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu.

fullscreen: tự động chơi video ở chế độ toàn màn hình. Giá trị 'yes', 'no'. Mặc định 'no'.

icons: hiện/ẩn biểu tượng play (loading) ở chính giữa video. Giá trị 'true' (hiện), 'false' (ẩn). Mặc định 'true'.

lightcolor: màu của chữ và các biểu tượng ở thanh điều khiển khi di chuột vào. Giá trị ghi theo dạng mã màu hexa, không có ký tự # ở đầu.

loop: chơi lặp lại bài hát hoặc playlist khi kết thúc. Giá trị gồm 'yes', 'no'. Mặc định 'no'.

height: độ cao của player, chỉ dùng khi chơi nhạc video. Nếu file nhạc là MP3 hoặc AAC thì giá trị này sẽ được tự động điều chỉnh. Giá trị được tính bằng pixel. Mặc định 300.

volume: âm lượng ban đầu khi chơi nhạc. Giá trị từ 1 tới 100. Mặc định 60.

width: độ rộng của player. Giá trị tính bằng pixel. Mặc định 400.

Trên đây là các tham số chính, danh sách đầy đủ các tham số hãy xem ở trang chủ của JW Player.

VD dưới đây chúng ta sẽ chèn thử 1 video MP4, có chút tùy biến về màu sắc, chiều rộng và chiều cao:

[music:url=http://tuanh.org/music/video.mp4|backcolor=c3456f|lightcolor=999999|height=400|width=400|volume=100]

Shortcode của nó là:

[ music:url=http://tuanh.org/music/video.mp4|backcolor=c3456f|lightcolor=999999|height=400|width=400|volume=100 ]

Còn đây là chèn thử 1 bài MP3 cũng với player này:

[music:url=http://tuanh.org/music/neu.mp3]

Shortcode là:

[ music:url=http://tuanh.org/music/neu.mp3 ]

Chèn thử 1 video từ Youtube:

[video:url=http://www.youtube.com/watch?v=R2hJMvZHqYA]

Shortcode là:

[ video:url=http://www.youtube.com/watch?v=R2hJMvZHqYA ]

Hy vọng rằng cách sử dụng các shortcode này sẽ giúp các bạn tiện dụng hơn khi viết bài trong Blogger.

Read more…

Tự động lấy tin RSS từ các trang Web ưa thích lên Facebook

Facebook hiện là mạng xã hội phố biến nhất hiện nay với hơn 500 triệu thành viên trên khắp thế giới.

Nếu bạn xem Facebook như “ngôi nhà thứ 2” của mình và muốn từ đó có thể quan sát được mọi thay đổi trong thế giới Web cũng như trong đời thực, thì việc sử dụng 2 tiện ích sau đây sẽ giúp bạn đạt được điều này một cách dễ dàng.
Hai ứng dụng bên dưới sẽ giúp bạn cập nhật tin RSS từ bất kỳ website ưa thích nào lên trang Facebook, miễn là website đó có đăng ký nguồn cấp dữ liệu Feed.
1. RSS for Pages
RSS for Pages chỉ cho phép bạn cập nhật tin RSS lên Fan Page chứ không hỗ trợ trang cá nhân Facebook. Bạn nhấn Click here to Install để cài đặt.

Kế đến, bạn nhấp mũi tên xổ xuống tại mục Add this application to để chọn Fan Page muốn cập nhật RSS rồi nhấn Add RSS for Pages.

Sau khi điền tên công ty và số điện thoại bất kỳ vào hai ô Company Name và Phone Number,bạn nhấn Save changes. Tiếp đó, bạn điền địa chỉ RSS vào ô News Feed Settings rồi nhấn Add. Mục Maximum Number of Stories to Display cho phép thiết lập số lượng tin từ RSS trên Facebook. Xong, bạn nhấn Save Changes để lưu lại.

Lúc này, trên trang Facebook sẽ có thêm thẻ News cập nhật các tin từ RSS đã chọn. Bạn nhấnEdit Tab Settings để sửa RSS tùy thích.

2. RSSGraffiti
Bạn nhấn Click HERE to authorize RSS Graffiti rồi nhấn Allow để sử dụng RSSGraffiti

Tiếp đến, bạn nhấn Add feed rồi nhập đường dẫn RSS vào ô Feed URL. Xong, bạn nhấp liên kếtClick here to generate a preview để xem thử giao diện khi cập nhật tin lên Facebook.

Mặc định, RSSGraffiti sẽ kiếm tra RSS thường xuyên và cập nhật ngay tin mới lên Facebook ngay khi tin vừa được đăng. Nếu muốn lên lịch kiểm tra RSS theo định kỳ, bạn chuyển sang thẻSchedule, nhấp mũi tên xổ xuống tại mục Update frequency và chọn Every half an hour (sau mỗi 30 phút), Every hour (sau mỗi giờ), hay Twice a day(hai lần một ngày),…

Xong, bạn nhấn Save để lưu lại. Ngoài ra, bạn có thể cập nhật tin RSS lên Fan Page bằng cách chọn tên Fan Page tại trường Your Fan Pages phía trái rồi làm tương tự như trên.

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

Theo Goonline

Read more…

Cách tạo và chèn Facebook Like Box vào Blogspot

Bạn là một tín đồ của Blogger và Bạn đang là thành viên tích cực trên Facebook? Bạn muốn chia sẻ những thông tin của mình đến tất cả bạn bè? Bạn muốn kết nối và chia sẻ cùng bạn bè trên cộng đồng mạng?

Hiện nay, Facebook cung cấp rất nhiều công cụ để bạn có thể dễ dàng chia sẻ những bài viết, ứng dụng của bạn từ Blog lên Facebook và ngược lại. Những công cụ này đã và đang rất phổ biến và được nhiều Blogger sử dụng để thu hút sự quan tâm của bạn bè trên Facebook, hướng họ đến với Blog của mình.

Một trong những công cụ mà Facebook cung cấp là “Like Box”. Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like” (thích) ngay phía trên hộp thoại.

Để tạo nút Like Box cho Blog, trước tiên bạn cần có một tài khoản trên Facebook và bạn cần tạotrang Facebook riêng .

Sau khi đã có tài khoản và trang Facebook riêng, bạn vào trang http://developers.facebook.com/docs/reference/plugins/like-box để bắt đầu.

Bạn chọn vào Like Box trong danh sách Plugin



Trang chủ sẽ xuất hiện như hình bên dưới



Tiếp theo, bạn vào trang Facebook riêng copy ID của trang hoặc điền tên trang của bạn.

Lưu ý: ID của trang chính là dãy số cuối cùng trên đường dẫn của trang.



Dán ID vào “Facebook Page ID” như trong hình bên dưới, hộp box sẽ thể hiện mẫu để bạn xem trước như trong hình:



Nhấn “Get code” để tạo code. Facebook tự tạo mã code để bạn chèn vào Blog.




Copy đoạn code trên vào đưa vào Blogspot. Để đưa vào Blogspot, bạn cần đăng nhập vào Blogger, chọn “Thiết kế”



Chọn “Thêm tiện ích”



Chọn tiện ích “HTML/ Javascrip” trong các tiện ích Blogspot cung cấp sẵn



Dán đoạn code vừa copy vào phần “Nội dung”



Lưu những thay đổi và vào Blog để xem kết quả.



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

Read more…

Đây là chức năng tạo tin và hình ảnh động giống như dạng flast trông rất đẹp mắt và thú vị.

Mình xin hướng dẫn để các bạn thêm vào cho sinh động.

Các bạn có thể xem trang mẫu tại đây: http://luyennghe.khatvong.org

Các bạn đăng nhập vào trình điều khiển của blogger.com.

Chọn mục thiết kế, tại đây bạn chọn thiết kế phần tử, chọn Thêm tiện ích, chọn thêm HTML.

Các bạn copy đoạn JavaScrip dưới đây, dán vào trong hộp thoại HTML:

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
 
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://sites.google.com/site/luutru123456789/post.jpg) repeat-x;
border:1px solid #ddd;
}
 
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
 
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
 
-->
</style>
 
 <script language='JavaScript'> 
 
imgr = new Array();
 
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
 
boxwidth = 255;
 
cellspacing = 6;
 
borderColor = "#232c35";
 
bgTD = "#000000";
 
thumbwidth = 70;
 
thumbheight = 70;
 
fntsize = 12;
 
acolor = "#666";
 
aBold = true;
 
icon = " ";
 
text = "comments";
 
showPostDate = true;
 
summaryPost = 40;
 
summaryFontsize = 10;
 
summaryColor = "#666";
 
icon2 = " ";
 
numposts = 10;
 
home_page = "http://luyennghe-tienganh.blogspot.com/";
 
limitspy=4
intervalspy=4000
 
</script>
 
<div id="spylist">
 <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>    
 
 

Html trong đoạn dưới có một vài thứ cần được thay thế như sau:
1. Tìm tới chỗ này, thay bằng tên blog của bạn
home_page = “http://luyennghe-tienganh.blogspot.com/”;
thay bằng:
home_page = "http://trang_cua_ban.blogspot.com/"
2. Thay đổi kiểu của CSS

#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://sites.google.com/site/luutru123456789/post.jpg) repeat-x;
border:1px solid #ddd;
}

Trong mục style/css, Bạn cần thay đổi :
Chiều rộng:
width : 220px;
width:208px:
Bạn phải lựa chọn cho phù hợp với giao diện của bạn
Tiếp theo tìm và sửa (Nếu bạn muốn - cái này không cần nếu màu nền của bạn là màu trắng:
background: #fff url(http://sites.google.com/site/luutru123456789//post.jpg) repeat-x;
Chọn màu nền phù hợp với giao diện của bạn, có thể để mặc định vậy nếu bạn muốn.
3. Kích thước ảnh thu nhỏ.
thumbwidth = 70; (Chiều rộng ảnh)
thumbheight = 70; (Chiều cao ảnh)

4. Bao nhiêu bài được đưa lên.
numposts = 10; (Ở đây là 10 bài)
Đó là một số chỉnh sửa cơ bản, bạn có thể tìm hiểu thêm để chỉnh sửa theo ý bạn.
Bây giờ mọi việc đã xong bạn hãy thưởng thức thành quả công việc của bạn. Giống hình bên.

Read more…

Đôi điều về template NEO, chắc hẳn ít nhiều gì các bạn cũng đã nghe nói đến template NEO rồi phải không, nhưng nếu chưa biết gì về NEO thì ngay bây giờ hãy bắt đầu khám phá những điều kỳ diệu của nó nhé. Trước tiên, nếu bạn chưa biết gì về NEO thì hãy xem thử blog này: http://danglvh.blogspot.com. Các bạn có thấy điều gì khác biết so với các blogger khác hay ko. Nếu vẫn chưa thấy, bạn hãy thử click vào bất kỳ mục lục nào, hoặc bất kỳ bài viết nào xem. Bạn thấy thế nào. Có phải khi bấm vào thì nó sẽ hiện ra nội dung ngay lập tức cho bạn không. Hihi, tới đây thì chắc các bạn đã thấy sự khác biệt của nó rồi phải ko.

Read more…