Gắn thanh phát nhạc Streampad lên Blogger

Tình cờ trong một lần lướt web mình phát hiện một ứng dụng chơi nhạc tự động được thiết kế như một tiện ích gắn vào các trang blog hoạt động trên các nền như Tumblr, Wordpress, TypePad, Blogger… Ứng dụng đó là Streampad. Nó tự động hiển thị thông tin về bài hát và người trình bày và chứa đầy đủ các nút cần thiết đối với một trình chơi nhạc. Bạn có thể tùy ý điều chỉnh thông số màu sắc cho ứng dụng.

Một điểm khá độc đáo đối với thanh phát nhạc này là nó sẽ phát tất cả các file nhạc MP3 mà bạn đặt liên kết trong bài viết trên Blog của bạn.

Lấy ví dụ dưới đây là một số file nhạc MP3 mà tôi đã đặt liên kết trong bài viết này để làm demo. Bạn hãy thử nhấn nút Play trên thanh Streampad và sẽ thấy kết quả ngay.

1. Hotel California

2. Cherish

3. Careless Whisper

4. Beautiful Sunday

5. Heal The World

6. Caravan of Life

7. Casablanca

8. Those Were the Days

9. Lemon Tree

Thật thú vị phải không bạn? Gắn Streampad vào Blogger thật là đơn giản. Bạn chỉ việc dán toàn bộ đoạn mã dưới đây vào trong một tiện ích HTML/Javascript ở phần Footer là được.

<script type="text/javascript" src="http://o.aolcdn.com/art/merge?f=/_media/sp/sp-player.js&f=/_media/sp/sp-player-blogger.js&expsec=86400&ver=11&bgcolor=#4e5369&trackcolor=#dddded&clickimg=true&progressfrontcolor=b85353&progressbackcolor=000000&btncolor=white-gray"></script>

Chú ý trên đoạn mã ở trên, bạn có thể điều chỉnh các thông số màu sắc cho bgcolor, trackcolor, progressfontcolor, progressbackcolor, btncolor theo ý thích của bạn.

More about →

Hiệu ứng phóng to hình ảnh bằng CSS

Có nhiều cách tạo hiệu ứng phóng to hình ảnh như sử dụng CSS, Javascript hoặc kết hợp cả hai, nhưng nếu bạn không muốn mất nhiều thời gian thì có thể sử dụng một phương pháp đơn giản hơn.

Việc xác định chiều rộng và chiều cao tối đa định trước của một hình ảnh giúp chúng ta giới hạn được chiều rộng và chiều cao tối đa của hình đó một cách dễ dàng. Ví dụ muốn cho hình ảnh lớn không tràn ra ngoài phần nội dung trang web thì chỉ cần định trước chiều rộng tối đa của hình ảnh đó.

Chúng ta có thể tạo ra một lớp (class) và sử dụng nó trong thẻ <img> như sau:

<img class="expa" src="URL_hình ảnh gốc có kích thước lớn" />

Tiếp đến chúng ta định thuộc tính CSS cho hình ảnh:

<style>
img.expa {
cursor: pointer;
max-width: 150px;
}
img.expa:hover {
max-width: none;
}
</style>

Trong phần CSS này chúng ta xác định kích thước tối đa cho hình ảnh hiển thị ban đầu, sau đó khi rê con trỏ vào hình ảnh thì nó được phóng to ra hình ảnh gốc có kích thước lớn.



Ví dụ: Rê con trỏ vào hình ở trên để xem hiệu ứng.

More about →

Phân trang Blogger theo kiểu Wordpress

Về phân trang thì Blogger chỉ mặc định các nút Older Posts (Bài đăng Cũ hơn), Newer Posts (Bài đăng Mới hơn), Home (Trang chủ) để liên kết đến các bài viết lẫn nhau và kiểu phân trang sơ đẳng này không làm thỏa mãn các blogger.

Nếu ai từng lướt qua một blog được thiết kế bằng Wordpress thì có thể thấy kiểu phân trang khá chuẩn bằng 1 plugin có tên WP-PageNavi. Nếu tìm hiểu plugin này thì sẽ thấy phần mã CSS mặc định như sau:

/*
Default style for WP-PageNavi plugin
http://wordpress.org/extend/plugins/wp-pagenavi/
*/
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}

Chúng ta có thể điều chỉnh một chút từ phần CSS này để sử dụng cho Blogger.

Đăng nhập Blogger, vào Edit HTML. Chèn vào trước dòng ]]></b:skin> với đoạn mã bên dưới.

.pagenavi{clear:both;margin:10px auto;text-align:center;}
.pagenavi span {padding:3px;margin-right:5px;background:transparent;border:none;}
.pagenavi a {padding:3px;margin-right:5px;text-decoration: none;background:#747170;}
.pagenavi a:visited{color:#fff}
.pagenavi a:hover {background:#044697;color:#fff;text-decoration:none}
.pagenavi .current {font-weight:bold;color:#fff;background:#F87217;text-decoration: none;}
.pagenavi .pages {font-weight:bold;border:none;}

Bạn có thể điều chỉnh các thông số màu sắc để điều chỉnh cho phù hợp với Blog của mình.

Lưu Template rồi chọn Expand Widget Templates.

Tiếp theo là cài đặt javascript. Trong Template (dùng tổ hợp phím Ctrl + F) tìm đến các dòng mã:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
..................
<b:includable id='main' var='top'>
..................
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='comments' var='post'>
…………………..
</b:widget>
</b:section>

Chèn trước dòng <b:includable id='feedLinksBody' var='links'>

bằng đoạn mã bên dưới.

<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script src='http://hacodeproject.googlecode.com/files/pagenavi_v2.min.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

Bạn có thể tải về file pagenavi_v2.min.js và upload lên hosting để sử dụng cho Blog của mình.

Tiếp đến, tìm đến dòng sau đây:

<!-- navigation -->
<b:include name='nextprev'/>

Thay thế nó bằng đoạn mã bên dưới:

<!-- navigation -->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>

Ý nghĩa của đoạn mã trên là hiển thị phân trang kiểu Wordpress ở các trang chủ, trang label và trang lưu trữ, còn các trang bài viết thì dùng kiểu phân trang mặc định của Blogger.

Bạn có thể điều chỉnh các tham số sau đây:

var pageNaviConf = {
perPage: 7,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}

trong đó:

- perPage: số bài viết hiển thị trong 1 trang
- numPages: số trang hiển thị
- firstText, lastText, nextText, prevText: tương ứng là các từ hiển thị cho các nút First, Last, Next, Prev

Nếu bạn gặp khó khăn trong việc cài đặt, xin vùi lòng để lại câu hỏi dưới đây.

More about →

Tạo số đếm cho nhận xét trên Blogger

Thỉnh thoảng lướt qua một số blogpot bạn sẽ thấy các nhận xét của độc giả được đánh số từ 1 đến n số nhận xét cho bài viết. Có thể nhiều blogger không thích thủ thuật này song về một phương diện nào đó thì nó cũng giúp cho blogspot của bạn khác với các blog khác. Ngoài ra nó còn giúp độc giả tìm bất kỳ một nhận xét nào đó dễ dàng hơn.

Trước khi thực hiện thủ thuật này khi đăng nhập Dashboard ở mục Settings >> Comments bạn nên chọn chế độ Embedded below post.

Bước 1: Vào Design >> Edit HTML nhớ backup Template của bạn và chọn Expand Widget Templates.

Nhấn Ctrl + F tìm dòng code: <b:loop values='data:post.comments' var='comment'>

Thay nó bằng đoạn code sau đây:

<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>

Tiếp tục tìm dòng code: <data:commentPostedByMsg/>

Chèn bên dưới nó bằng đoạn code sau đây:

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Kế đến kéo xuống dưới một chút sẽ thấy đoạn code:

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

Thêm thẻ </div> vào sau đoạn code ở trên.

Bước 2: Thêm đoạn code CSS dưới đây vào trước thẻ ]]></b:skin>.

.comment-number {
float: right;
background: url(http://i40.tinypic.com/14tmp9e.jpg) no-repeat;
width:50px;
height:50px;
margin-right: 15px;
margin-top: -35px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 18px;
font-weight: bold;
}

/*since the numbers are actually links, we need to force the color properties*/

.comment-number a:link, .comment-number a:visited {
color: #445566 !important;
text-decoration: none !important;
}
.comment-number a:hover, .comment-number a:active {
color: #FF9933 !important;
text-decoration: none !important;
}

Bạn có thể thay hình nền cho số đếm nhận xét theo URL đánh dấu màu xanh. Nếu vị trí số đếm không cân xứng với hình nền thì bạn điều chỉnh thông số ở 2 dòng bên dưới.

margin-right: 15px;
margin-top: -35px;

More about →

Facebook sẽ tung ra dịch vụ email của mình vào ngày 15/11 tới

Vào thứ Hai tới đây, ngày 15/11, Facebook sẽ tổ chức một buổi họp báo và theo một số nguồn tin đáng tin cậy thì tại buổi họp báo này Facebook sẽ chính thức ra mắt Project Titan, dịch vụ email do Facebook phát triển để cạnh tranh với Google, Yahoo và Microsoft.

Dịch vụ mới này sẽ cho phép hơn 500 triệu người dùng Facebook tạo và sở hữu một địa chỉ email đuôi @facebook.com cho riêng mình, tạo sự liên kết giữa mạng xã hội và email. Với dịch vụ này, việc quản lý email, thêm bạn bè Facebook, xem các cập nhật sẽ dễ dàng hơn và nó sẽ giúp cộng đồng mạng xã hội của Facebook đến gần nhau hơn.

Rõ ràng đây là một bước đi đúng đắn và đầy tiềm năng của Facebook, hứa hẹn mang lại cho chúng ta nhiều trải nghiệm thú vị.

Nguồn TTCN

More about →

Hiệu ứng đàn xếp khung lưới sử dụng CSS kết hợp jQuery

Hiệu ứng đàn xếp khung lưới là một kiểu thanh điều hướng đàn xếp cải tiến được xây dựng bằng jQuery.

Nó hoạt động tương tự như các hiệu ứng đàn xếp khác, chỉ một ô được mở ra vào một thời điểm và sẵn sàng hiển thị thông tin chi tiết về các mục bên trong một khung lưới.

Điều quan trọng là cột của ô mở hiện tại mở rộng theo chiều rộng hợp lý. Kỹ thuật này do Chris Coyier tại bang Florida (Mỹ) tạo ra.

Xem Demo.

Nếu bạn thích kỹ thuật này thì thực hiện theo các bước sau đây.

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

<style type='text/css'>
#page-wrap { width: 960px; padding: 0 0 0 15px; margin: 0 auto; overflow: hidden; height: 100%; }

.info-col { float: left; width: 132px; height: 100%; padding: 50px 0 0 0; }
.info-col h2 { text-align: center; font-weight: normal; padding: 25px 0; }

.image { height: 100px; text-indent: -9999px; display: block; border-right: 1px solid white; }

.batman { background: url(http://css-tricks.com/examples/InfoGrid/images/batman.jpg) center center no-repeat; }
.spiderman { background: url(http://css-tricks.com/examples/InfoGrid/images/spiderman.jpg) center center no-repeat; }
.aquaman { background: url(http://css-tricks.com/examples/InfoGrid/images/aquaman.jpg) center center no-repeat; }
.ironman { background: url(http://css-tricks.com/examples/InfoGrid/images/ironman.jpg) center center no-repeat; }
.superman { background: url(http://css-tricks.com/examples/InfoGrid/images/superman.jpg) center center no-repeat; }

dt { padding: 5px; background: #900; color: white; border-bottom: 1px solid white; border-right: 1px solid white; }
dd { position: absolute; left: -9999px; top: -9999px; width: 299px; background: #900; padding: 10px; color: white; border-right: 1px solid white; }

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://css-tricks.com/examples/InfoGrid/js/infogrid.js'></script>

2. Thiết lập cấu trúc HTML như bên dưới.

<div id="page-wrap">
<div class="info-col">
<h2>Tiêu đề lớn 1</h2>
<a class="image superman"></a>
<dl>
<dt>Tiêu đề 1</dt>
<dd>Mô tả chi tiết 1</dd>
<dt>Tiêu đề 2</dt>
<dd>Mô tả chi tiết 2</dd>
<dt>Tiêu đề 3</dt>
<dd>Mô tả chi tiết 3</dd>
<dt>Tiêu đề 4</dt>
<dd>Mô tả chi tiết 4</dd>
<dt>Tiêu đề 5</dt>
<dd>Mô tả chi tiết 5</dd>
<dt>Tiêu đề 6</dt>
<dd>Mô tả chi tiết 6</dd>
</dl>

</div>

<div class="info-col">
<h2>Tiêu đề lớn 2</h2>
<a class="image batman"></a>
<dl>
<dt>Tiêu đề 7</dt>
<dd>Mô tả chi tiết 7</dd>
<dt>Tiêu đề 8</dt>
<dd>Mô tả chi tiết 8</dd>
<dt>Tiêu đề 9</dt>
<dd>Mô tả chi tiết 9</dd>
<dt>Tiêu đề 10</dt>
<dd>Mô tả chi tiết 10</dd>
<dt>Tiêu đề 11</dt>
<dd>Mô tả chi tiết 11</dd>
<dt>Tiêu đề 12</dt>
<dd>Mô tả chi tiết 12</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 3</h2>

<a class="image aquaman"></a>

<dl>
<dt id="starter">Tiêu đề 13</dt>
<dd>Mô tả chi tiết 13</dd>
<dt>Tiêu đề 14</dt>
<dd>Mô tả chi tiết 14</dd>
<dt>Tiêu đề 15</dt>
<dd>Mô tả chi tiết 15</dd>
<dt>Tiêu đề 16</dt>
<dd>Mô tả chi tiết 16</dd>
<dt>Tiêu đề 17</dt>
<dd>Mô tả chi tiết 17</dd>
<dt>Tiêu đề 18</dt>
<dd>Mô tả chi tiết 18</dd>
</dl>

</div>

<div class="info-col">

<h2>Tiêu đề lớn 4</h2>

<a class="image spiderman"></a>

<dl>
<dt>Tiêu đề 19</dt>
<dd>Mô tả chi tiết 19</dd>
<dt>Tiêu đề 20</dt>
<dd>Mô tả chi tiết 20</dd>
<dt>Tiêu đề 21</dt>
<dd>Mô tả chi tiết 21</dd>
<dt>Tiêu đề 22</dt>
<dd>Mô tả chi tiết 22</dd>
<dt>Tiêu đề 23</dt>
<dd>Mô tả chi tiết 23</dd>
<dt>Tiêu đề 24</dt>
<dd>Mô tả chi tiết 24</dd>
</dl>

</div>
<div class="info-col">
<h2>Tiêu đề lớn 5</h2>

<a class="image ironman"></a>

<dl>
<dt>Tiêu đề 25</dt>
<dd>Mô tả chi tiết 25</dd>
<dt>Tiêu đề 26</dt>
<dd>Mô tả chi tiết 26</dd>
<dt>Tiêu đề 27</dt>
<dd>Mô tả chi tiết 27</dd>
<dt>Tiêu đề 28</dt>
<dd>Mô tả chi tiết 28</dd>
<dt>Tiêu đề 29</dt>
<dd>Mô tả chi tiết 29</dd>
<dt>Tiêu đề 30</dt>
<dd>Tiêu đề 30</dd>
</dl>
</div>
</div>

Điều bạn cần phải làm là đặt tên cho các Tiêu đề lớn, Tiêu đề và Mô tả chi tiết cho các tiêu đề tương ứng.

More about →

Cách tạo nhạc nền cho Blog

Blog của bạn sẽ gây chú ý hơn đối với người đọc mỗi ghi ghé vào mà được nghe 1 bản nhạc thật hay được bật lên tự động. Thủ thuật tạo nhạc nền cho blog sẽ giúp bạn thực hiện điều này.

Bước 1: Tạo file video nhạc.

Trước tiên bạn cần có một bản nhạc nền mà bạn ưa thích, với định dạng wma hay mp3, chọn bitrate khoảng 64 - 128 kbps. Sử dụng Windows Movie Maker để chuyển đổi file nhạc này thì video.

Vào Start >> Programs >> Windows Movie Maker. Nhấn Import audio and music bên khung trái, chọn file nhạc nền mà bạn cần.

Kéo file nhạc vừa import xuống khung storyboard (kịch bản) bên dưới cùng chương trình (nếu bạn không làm vậy thì file video tạo thành sẽ không có nhạc).

Nhấn Make titles or credits bên khung trái để thêm tựa đề / tác giả cho file video, làm cái này chỉ để đủ thủ tục biến file nhạc thành file video nên có thể điền nội dung tùy ý.

Sau đó nhấn Save to my computer bên khung trái, đặt tên và nơi lưu file vừa tạo.

Chọn Show more choices... >> Video for broadband (340 kbps). Bạn nên cân đối giữa chất lượng và kích thước file video để sao cho người nghe dễ dàng thưởng thức ngay cả với đường truyền Internet yếu. Tiếp đến nhấn Next để hoàn thành thao tác tạo file video nhạc.

Nếu bạn không thể tạo một file video nhạc thì bạn có thể tìm một file như vậy trên công cụ tìm kiếm của Youtube.

Bước 2: Đưa file video nhạc lên Youtube.

Tạo tài khoản để upload video nhạc lên YouTube tại trang http://www.youtube.com/.

Sau khi đăng ký thành công tài khoản, bạn đăng nhập tài khoản Youtube và nhấn vào mục Upload. Điền thông tin về file nhạc theo yêu cầu của trang Youtube, nhấn nút Upload và ngồi chờ file nhạc được upload.

Sau khi upload thành công, bạn sẽ nhận được liên kết cho file nhạc của mình (hoặc có thể phải chờ một khoảng thời gian ngắn để file được xử lý).

Bước 3: Lấy code HTML file nhạc trên Youtube để đưa vào Blog.

Lúc này trên Youtube bạn sẽ tìm thấy đoạn code chèn file video nhạc có dạng như sau (nhấn chọn Embed):

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/aV9mNZP1fQM?fs=1&hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/aV9mNZP1fQM?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Sửa đoạn code trên lại như sau:

<embed src="http://www.youtube.com/v/aV9mNZP1fQM" type="application/x-shockwave-flash" width= "0" height="0" wmode="transparent" flashvars="autoplay=1&loop=1" allowScriptAccess="none">

Ở đây: autoplay=1: tức là tự động chơi nhạc khi vào Blog; loop=1: chơi lại khi hết bài hát, nếu bạn muốn tắt chức năng này thì để là 0.

Bước 4: Đưa đoạn code sau khi điều chỉnh vào HTML Blog của bạn.

Muốn đưa nhạc nền vào Blog của bạn thì chỉ cần đưa đoạn code sau khi điều chỉnh ở trên vào cấu trúc HTML trên Blog của bạn. Có thể đặt vào một tiện ích HTML/Javascript bất kỳ hoặc có thể đặt trong Template.

More about →