TẠO BẢNG THĂM DÒ Ý KIẾN CHO WEB/BLOG

Hiện nay, có nhiều trang dịch vụ trực tuyến hỗ trợ bạn tạo bảng thăm dò ý kiến của khách tham quan...

Ở giới hạn bài viết này, dunghennessy chia sẻ đến với các bạn cách tạo một bảng thăm dò ý kiến khá đơn giản, các ý kiến thăm dò được nằm trên một file flash khá đẹp.

Mời các bạn xem các hình minh hoạ phía dưới.

Bước đầu tiên, bạn bấm vào thẻ SIGN UP FOR FREE để đăng ký một tài khoản cho mình (Free).

Tiếp đến, bạn điền đầy đủ các thông tin theo yêu cầu và bấm vào thẻ CREATE ACCOUNT.

Một trang mới hiện ra, bạn bấm vào thẻ START để bắt đầu tạo bảng thăm dò ý kiến.

Tiếp đến, bạn bấm chọn vào hình phía dưới thẻ FLASH POLL.

Tiếp tục, bạn điền câu hỏi và các câu trả lời ở các khung phía dưới, mặc định sẽ có một câu hỏi và 5 câu trả lời, nếu muốn bớt đi câu trả lời thì bạn bấm vào nút X ở bên cạnh, còn muốn thêm câu trả lời thì bấm vào thẻ Add new answer.

Khi đặt xong câu hỏi và trả lời ở các ô, bây giờ bạn kéo xuống phía dưới để chọn mẫu (nằm bên tay phải) và chỉnh sửa các màu chữ của câu hỏi, câu trả lời, button (nếu muốn) còn không để mặc định cũng được. Xong xuôi bạn bấm vào thẻ SAVE AND CONTINUE.

Một trang mới hiện ra, bạn tiếp tục bấm vào thẻ DASHBOARD ở phía trên.

Tiếp theo, bạn rê chuột vào câu hỏi của mình đã được đặt lúc ban đầu và chọn GET CODE để lấy code chèn vào WEB/BLOG.

Một trang mới hiện ra, bạn copy đoạn code phía trên. Sau đó đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML (nếu chưa biết cách thêm tiện ích HTML thì xem TẠI ĐÂY) và dán đoạn code này vào, bấm Lưu lại là OK.

Sau này, muốn chỉnh sửa lại (đổi màu chữ hoặc đổi nền) thì bạn đăng nhập vào trang dịch vụ này bằng tài khoản mình đã đăng ký lúc đầu, sau đó bấm vào thẻ EDIT để vào chỉnh sửa, chỉnh sửa xong bấm vào thẻ cuối cùng phía dưới SAVE AND CONTINUE là bảng thăm dò này sẽ tự động cập nhật cho bạn ngay tại WEB/BLOG của mình.

Còn chần chừ gì nữa, bấm vào thẻ START phía dưới để tạo cho mình một cái xem sao???

• 

CÁCH THÊM TIỆN ÍCH HTML/JAVACRIPT

Do yêu cầu của một số bạn (qua mail) nhờ hướng dẫn cách để thêm tiện ích HTML, vì vậy tôi dành riêng bài viết này để chia sẻ với các bạn mới "làm quen" với Blogspot các bước để thêm một tiện ích HTML/JAVACRIPT....

Blospot có cung cấp sẳn cho người dùng một số tiện ích khá hay và tiện dụng như: Tiện ích bài đăng phổ biến, tiện ích Thống kê blog, tiện ích Người theo dõi...và còn rất rất rất nhiều tiện ích khác nữa trong thư viện tiện ích của Blogspot nhưng theo tôi thì tiện ích HTML/Javacript là một tiện ích có thể được xem là tiện ích quan trọng bậc nhất và không thể thiếu khi các bạn làm thủ thuật cho blog như thêm đồng hồ, lịch, menu ngang, menu dọc, tạo Slideshow, đổi hình dáng con trỏ chuột......

Để thêm tiện ích HTML này, các bạn lần lượt làm theo các bước sau:

* Đăng nhập vào blog

* Chọn thẻ Bố cục (nằm bên trái của giao diện Blogspot), sau đó bấm chọn Thêm tiện ích.

Một bảng nhỏ hiện ra (đây là thư viện các tiện ích của Blogspot cung cấp sẳn cho người dùng). Bạn kéo thanh trượt xuống phía sẽ thấy tiện ích HTML/Javacript.

Khi thấy tiện ích HTML/Javacript bạn bấm trái chuột vào nó để chọn. Một bảng nhỏ hiện ra gồm 2 khung nhỏ và khung lớn, khung nhỏ phía trên là nơi để bạn ghi tiêu đề cho tiện ích, khung lớn phía dưới là nơi để dán các code làm thủ thuật cho Blogspot.

Khi bạn đã dán và chỉnh sửa (nếu có) code thủ thuật vào khung lớn rồi thì nhớ bấm thẻ Lưu lại ở phía dưới. Các tiện ích này, bạn có thể bấm trái chuột vào "nó" rồi di chuyển đến các nơi mà mình muốn trên blog.
Bây giờ, bạn quay trở lại vào Blog xem kết quả nha.

TẠO SLIDESHOW ẢNH (Kiểu 4)

Với kiểu 4 này, các ảnh sẽ được xếp lại khá gọn, khi muốn xem ảnh nào, các bạn rê chuột vào ảnh, ảnh sẽ tự động "bung" ra kèm theo những dòng chú thích cho ảnh...

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<link href="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/haccordion.css" rel="stylesheet" type="text/css"></link></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/dunghennessyslideshow.js" type="text/javascript">
</script></div>
<div style="text-align: justify;">
<script src="https://dl.dropbox.com/u/66348944/dunghennessy/slideshow/slideshow.js" type="text/javascript">
<font size="5">
/***********************************************
* Mời các bạn ghé tham quan và ủng hộ dunghennessy tại địa chỉ
http://www.dunghennessy.blogspot.com
***********************************************/
</font>
</script></div>

<style type="text/css">
#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightgreen;
}
</style>

<script type="text/javascript">
haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'500px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false//<- No comma following very last setting!
})
</script>
<div class="haccordion" id="hc1">

<ul>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipKUIZAsBi_xvETUfdZan3VrwgHr_AowOXlpuq3BeO2w3O9albDxYTsQEG4mu-4dJ22DNr1546WNj4SC48q69MNvk9s7WqOT8GPDcT19VMAVLA8H8SVFD1NhbwxL-kpwyojiw4yCMXsAo/s1600/0006.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Đây là một trong những ảnh động về chủ đề "Các loại chim", bạn sẽ tìm thấy nhiều ảnh đẹp hơn tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxNcC4mdpco14fvy65U0K-tmgKmYf1lqJJUWmbYUnf7nitZalb0QxM31oA3_kDK79HhIamBUs-K_N0pwxCoPSCnUlTgZ94BWfBdOC6yTFE_qyuxXJmBUZeP6f6PbNEeAsZmTGeda0ksydf/s1600/0202.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "I LOVE YOU", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/anh-ong-i-love-you.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0fVSkXL09thVkmRGi7SlBoFvkfmgl_fEjidr3aIiCEmmhlfYTdijKAjLBIM_OtxrsqlxT9_H1zhHrE90uKEfOZ3BI8z_RhSAaBja0yiSNiWd2TUXDGTj2_YgqnXSPU-hm2gWNiHVdbc3/s1600/0004.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Tiếp theo, đây là một những ảnh động với chủ đề "Xe Ôtô", các bạn sẽ tìm thấy nhiều ảnh động xe ôtô tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-xe-hoi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCIN4FiwAUJ8veb6aACw9RQYpqMyTQRsj6zKVvkvxVJQVLkxpPC6nphHgtOUfcNF7xUb4rMkCu0ltEB42lb6P3DaTcENSaVijos7iBnA-plSmRwGpOhLFuIk0qtS0fep48WA5eTQ9SYHE2/s1600/0027.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động về chủ đề "Chiến binh và vũ khí", các bạn cũng dễ dàng tìm thấy những ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chien-binh-va-vu-khi.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih8Ciout1YizLc5dspQnLW-qM9OZdJv9OFZBki64RgQC3ZjvWsLJJCDN2BbFFFeAWOlrAvN6WBUtxBDmQzSUkQdYGzD3g3ZaD31bvK_QoKEXFtArKgOLQ_CmSCIL75bXf8kvkx1B2Hb5g/s1600/0023.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là ảnh động với chủ đề "Thánh giá và Chúa GiêSu", các bạn có thể tìm được nhiều ảnh khác tại<a href="http://anhdepblog.blogspot.com/2012/05/anh-ong-chua-gie-su-va-thanh-gia.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
<li>
  <div class="hpanel">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bHLOw1zvZvYvbLKzuWcUm7GpAAxusFMgosNFQSVrF2mc86T80_DMNzlM656iY__icRfcUNrR02-0paYHtUWACbTj1HPxf1Qd_POB0dUCekZu43XrikcGE5B55llfJRu_j0RvaPQqr_8/s1600/0026.gif" style="float: left; height: 148px; padding-right: 8px; width: 200px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> anhdepblog.blogspot.com.</a>
  </div>
</li>
</ul>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó:
* Fullw: độ rộng của slideshow
* h: Chiều cao của slideshow
* Background: màu nền của Slideshow
* Img src: Link của ảnh
* Height: chiều cao của mỗi ảnh
* Width: Độ rộng của mỗi ảnh
* a herf: Địa chỉ link liên kết.
sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này

<li>
  <div class="hpanel">
<img src="Link ảnh" style="float: left; height: 320px; padding-right: 8px; width: 240px;" />Còn đây là một trong những ảnh động với chủ đề "Báo và Sư Tử", bạn sẽ tìm thấy nhiều ảnh động hơn tại<a href="Link liên kết"> anhdepblog.blogspot.com.</a>
  </div>
</li>

Dán trên dòng lệnh </ul> (màu xanh) gần cuối dòng.

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

TẠO SLIDESHOW ẢNH (Kiểu 3)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 3).

Ở kiểu 3 này, các ảnh này sẽ được trình diễn "chạy" từ trên xuống hoặc từ dưới lên, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<div class="content"><div class="panel"><div class="panel-content" id="sidebar_download" style="display: block"><center><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="up" scrolldelay="10" hight="150" valign="baseline" width="240" height="400">
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-cac-loai-chim.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG3cBAB8CT4q_H3xsgfbVftNYC3sodQ_AGJgIfRI7utHm6pEV7yFbTqGxpZDf5lV18wJZI9cvLFVo2yj33-Pl1y6EOTg4N7htDu43KALAknZixYI8vrxT2xtgMbYn8hxdhZNKNDwMl53I/s1600/0004.gif" width="240" height="320"title="Các loại chim" /></a></div>
<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/05/anh-ong-ghe-thuyen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pVfsyi7KZ8yIYf-j_IevEuOMMgXsOKm3T923Es__8xazKF3jroSJPcFVyiJgcxxlfTwALz-dMm6JvuHXsgC_OGqnxpzoGs2syHVX0VsR_90q8gypv8D3fcQbcUHcrvQZLDyV8-7u8jUa/s1600/0002.gif" width="240" height="320"title="Ảnh động ghe thuyền" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-con-ca.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOYih_SdvfiD_50ylO9UMSd3k9k3SBiVgJi5Ys-Ilg71mg_ZlaKpdpDn6RxGnFuBVGkrQc0aB5t6vQKaQkD54vO1Sai-CjsaOiOnFa3mys3NbUHUmzLvOZlNKJSIlmvXHoiuhJ8FCZe5-4/s1600/0024.gif" width="240" height="320"title="Ảnh động cá các loại" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/bao-su-tu.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4bHLOw1zvZvYvbLKzuWcUm7GpAAxusFMgosNFQSVrF2mc86T80_DMNzlM656iY__icRfcUNrR02-0paYHtUWACbTj1HPxf1Qd_POB0dUCekZu43XrikcGE5B55llfJRu_j0RvaPQqr_8/s1600/0026.gif" width="240" height="320"title="Ảnh động báo và Sư tử" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/04/anh-ong-trai-tim-phan-2.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tsAQCniM382z07islN_qgSnCsjc9YwWUMQT_lockwXOUKdJURmgXuAMy3TFOtxaMJP5JD5qPx8q5fZMtrfIa6yXcSzY0sVXpG2tBuFF2H28tCVU-DsfAAe80RMyqwVso5_491p2Uyoo/s1600/0179.gif" width="240" height="320"title="Ảnh động trái tim" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/background-hoa-van.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIZACVH09XTCLNsgdsMktsY1c670qpfCDoKwS_bTypTpcdy8DPRv-lIU3toGNDKwYMMsYsFw3T-6vASM1Qo4kEWZFhlgFVnePltxi5IJK-zTgFfGY0fQvJKe9nmv4Y-14uoIqnCKH0Lj4/s1600/0008.gif" width="240" height="320"title="Background hoa văn" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-ngon-nen.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQqtXe51-RcaOu93rp0-kyzRNl6v4qDmWL4kPC8l7ZK3w8hr73F7EZyW-SMZlfAVmswwf6cRvDfJppi2BlvYArTr7NH36Id5G43PRyrpCDehmotPgR94AfUKuzo4BQhJvle6q_Ua8BIU/s1600/0042.gif" width="240" height="320"title="Ảnh động ngọn nến" /></a></div>

<div><a target="_blank" href="http://anhdepblog.blogspot.com/2012/03/anh-ong-cac-loai-hoa.html"> <img border="1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpTJWXi2rPuqtExiUihTgLgpPDfRSgZFTTysO-tnl9Q210AaD5H-NGssQjicYMVFC3f_VOJeTgKrIXLiv9eWE428ZazmAJs3O9eiwjNLnNoM2cXSHlQhYjWDScprax2iKV2RnwZzKfIJ-y/s1600/0037.gif" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

</marquee></center> </div></div></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (link ảnh), màu xanh (link liên kết), màu vàng (độ rộng và chiều cao của ảnh), title (chú thích cho ảnh) theo ý thích của mình, muốn ảnh chạy từ trên xuống thay chữ "up" thành chữ "down", sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
<div><a target="_blank" href="Link liên kết"> <img border="1" src="Link ảnh" width="240" height="320"title="Các loại hoa đẹp" /></a></div>

Dán trên dòng lệnh: </marquee></center> </div></div></div>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

XEM PHIM "JUST FOR LAUGHT"

Dưới đây là một số đoạn phim về "JUST FOR LAUGH" khá vui và hài hước giúp các bạn giải "stress" sau giờ làm việc căng thẳng..., mời bạn xem phim phía dưới. Chúc các bạn vui nha.

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO CHÚ THÍCH CHO ẢNH (Kiểu 2)

Trước đây, tôi có chia sẻ với các bạn cách tạo chú thích cho ảnh (Xem TẠI ĐÂY). Hôm nay, tiếp tục tôi chia sẻ thêm cho các bạn cách tạo chú thích cho ảnh (kiểu 2).

Cũng giống như kiểu 1, khi bạn rê chuột vào ảnh thì lập tức sẽ xuất hiện một bảng chú thích khá đẹp nhưng khác ở kiểu 1 là bảng chú thích này sẽ được trượt từ bên phải của hình ảnh ra phía ngoài. Khi bạn rê chuột ra ngoài ảnh thì bảng ghi chú sẽ được ẩn vào trong ảnh.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ hiệu ứng của thủ thuật này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style>
.imagepluscontainer{
position: relative;
z-index: 1;
}

.imagepluscontainer img{
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc{
position: absolute;
width: 95%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8);
color: yellow; /* Màu chữ text của bảng chủ thích */
-moz-border-radius: 16 16 8px 8px;
-webkit-border-radius: 16 16 16px 16px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s;
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white; /* Màu chữ text có gắn liên kết */
}

.imagepluscontainer:hover div.desc{
-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1;
}

.imagepluscontainer div.rightslide{
width: 150px; /* Độ rộng của bảng ghi chú */
top:15px;
right:0;
left:auto;
bottom:auto;
padding-left:30px;
-moz-border-radius: 0 16px 16px 0;
-webkit-border-radius: 0 16px 16px 0;
border-radius: 0 16px 16px 0;
}

.imagepluscontainer:hover div.rightslide{
-moz-transform: translate(100%, 0);
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
-o-transform: translate(100%, 0);
transform: translate(100%, 0);
}
</style>

<div class="imagepluscontainer" style="height: 320px; left: 10px; width: 240px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLSgoWaFegvY3qenYGKUUvhX0LB1J5ZXe-WFpSoiGE5GOH6EEwXfM4fivSIFN3xdDvZAYblw9djzjK3WvTsO4HKqrQRGXaEY5lGeJ1xx4y1DLtC3RFqH_YbIAkoDs5zymb8AWn-6LY8w/s1600/0037.gif" />
<div class="desc rightslide">
Nội dung của bảng chú thích<a href="http://anhdepblog.blogspot.com/2012/03/anh-ong-thac-nuoc.html">VÀO ĐÂY</a> Nội dung của bảng chú thích</div>
</div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (kích thước của bảng ghi chú, màu chữ...) và màu xanh (link ảnh, nội dung bảng ghi chú...) theo ý thích của mình, sau cùng bấm Lưu lại là xong.


* Chú ý ở mục height (chiều cao) và Width (chiều rộng): đây là kích cỡ thật của ảnh, ví dụ ảnh có kích thước như sau: 240x320 thì mục width phải là 240px và height phải là 320px (bạn không thể đặt theo ý mình được)

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

NHẠC NỀN CHO BLOG

Âm nhạc là "món ăn" tinh thần không thể thiếu với mỗi người, vì vậy nếu bạn muốn khi khách tham quan ghé blog mình sẽ nghe được một bản nhạc "du dương" được phát ra từ Blog của mình???...

Khi bạn đang đọc những dòng chữ này thì bạn đã nghe được bản nhạc của trang này với tựa đề: WE LOVE TO LOVE.

Nếu bạn không nghe được là do máy tính của bạn chưa cài phần mềm Quick Time Player, vì vậy bạn bấm vào thẻ download phía dưới để tải phần mềm Quick Time Player về nha.

Download

Khi tải về thành công, bạn đóng tất cả các trình duyệt Web đang mở và cài đặt phần mềm này bình thường như các phần mềm khác, sau đó bạn quay lại trang này và bạn sẽ nghe được bản: WE LOVE TO LOVE...như tôi đã giới thiệu.

Để làm được như vậy, các bạn chỉ cần đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML rồi dán code phía dưới vào:

<script>

<!--

//specify FULL path to midi

var musicsrc="https://dl.dropbox.com/u/66348944/dunghennessy/nhac/WE%20LOVE%20TO%20LOVE%20%28MIX%29.mp3"

if (navigator.appName=="Microsoft Internet Explorer")

document.write('<bgsound src='+'"'+musicsrc+'"'+' loop="infinite">')

else

document.write('<embed src=\"'+musicsrc+'\" hidden="true" border="0" width="20" height="20" autostart="true" loop="false">')

//-->

</script>

Bây giờ, bạn thay đổi dòng lệnh màu đỏ (đây là link bài hát mà bạn muốn gắn làm nhạc nền cho blog), nếu muốn bài nhạc tự động phát lại khi hết bài thì đổi false thành true.

Chúc các bạn có một bản nhạc hay cho blog nha!!!

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

TẠO SLIDESHOW ẢNH (Kiểu 2)

Bài trước, tôi đã giới thiệu cho các bạn cách tạo slideshow ảnh kiểu 1 (Xem TẠI ĐÂY). Tiếp tục bài này tôi xin giới thiệu thêm cách TẠO SLIDESHOW ẢNH (kiểu 2).

Ở kiểu 2 này, các ảnh này sẽ được trình diễn "chạy" từ bên phải qua bên trái, khi bạn rê chuột vào thì ảnh sẽ "dừng" lại và hiện ra dòng chú thích nhỏ cho ảnh. Khi bạn bấm vào "nó" sẽ dẫn bạn đến trang liên kết mà bạn muốn.

Mời bạn bấm vào Xem thử phía dưới để thấy rõ kiểu SLIDESHOW này.

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<script type="text/javascript">
//Specify the slider's width (in pixels)
var sliderwidth="500px"
//Specify the slider's height
var sliderheight="300px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[1]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[2]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[3]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'
leftrightslide[4]='<a href="địa chỉ liên kết"><img src="Link ảnh" title="ghi chú cho ảnh" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ theo ý thích của mình, trong đó sliderwidth (Độ rộng của Slidershow) sliderheight (Chiều cao của Slidershow) sau cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Nếu muốn thêm nhiều ảnh nữa, bạn copy dòng lệnh này
leftrightslide[n+1]='<a href="địa chỉ liên kết"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'.
Trong đó n là số thứ tự của ảnh cuối cùng...

Dán tiếp phía dưới theo thứ tự tăng dần

Ví dụ: ở đoạn code trên Slideshow sẽ có tất cả 5 ảnh được tính từ số 0 đến số 4, bây giờ tôi muốn slideshow có tất cả 10 ảnh thì code sẽ giống như vầy:
 <script type="text/javascript">
..............................
..............................
leftrightslide[0]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[1]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[2]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[3]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[4]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[5]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[6]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[7]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[8]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'
leftrightslide[9]='<a href="#"><img src="địa chỉ ảnh"title="ghi chú cho ảnh" /></a>'

...............................
..............................
</script>

Và để slideshow được đẹp, các bạn nên chọn các ảnh có cùng kích thước....

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

ĐÓNG KHUNG CHO FLASH (Kiểu 2)

Flash là một thành phần không thể thiếu trên một Web/Blog, các file Flash này sẽ làm cho Web/Blog của bạn thêm sinh động hơn.

Tương tự với kiểu 1 (Xem TẠI ĐÂY). Với thủ thuật dưới đây, các bạn sẽ làm file Flash trông đẹp hơn nhờ vào việc đóng khung cho nó.

Bạn xem thử vài mẫu phía dưới nha:

Rất đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<iframe name="cwindow" style="border:15px solid green" width=500 height=300 src="dán địa chỉ  file flash vào đây"></iframe>

Bây giờ, bạn chỉ việc thay đường link file Flash vào và thay đổi chiều rộng (Width), chiều cao (Height), bạn có thể đổi màu cho khung như: green, blue, red, orange, white, black, yellow...theo ý thích của mình. Cuối cùng bấm Lưu lại là xong.
Bạn cũng có thể áp dụng thủ thuật này để đóng khung cho ảnh cũng được, bạn xem mẫu phía dưới:

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

MENU NGANG XỔ DỌC XUỐNG NHIỀU CẤP (Kiểu 4)

Tương tự kiểu 1 (Xem TẠI ĐÂY), kiểu 2 (Xem TẠI ĐÂY), kiểu 3 (Xem TẠI ĐÂY). Menu ngang này cũng xổ dọc xuống nhiều cấp khi bạn bấm vào một menu chính phía trên.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha.

Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML rồi dán đoạn code phía dưới vào.

<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-soc.css" />
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu-sidebar.css" />

<script type="text/javascript" src="https://sites.google.com/site/dunghennessyjs/ddlevelsmenu.js">
</script>

<div id="ddtopmenubar" class="slantedmenu">
<ul>
<li><a href="http://www.dunghennessy.blogpsot.com"><span>Trang chủ</span></a></li>
<li><a href="#" rel="ddsubmenu1"><span>Tên menu chính số 1</span></a></li>
<li><a href="#" rel="ddsubmenu2"><span>Tên menu chính số 2</span></a></li>
<li><a href="http://anhdepblog.blogspot.com/"><span>Ảnh đẹp cho Blog</span></a></li>
<li><a href="#" rel="ddsubmenu3"><span>Tên menu chính số 3</span></a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar")
</script>
<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 1, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu1" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>


<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 2, các bạn thay đổi tên menu con và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu2" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

<!--dunghennessy: Dưới đây là các tên menu con của Menu chính số 3, các bạn thay đổi tên và thay dấu "#" bằng link liên kết mà bạn muốn liên kết đến-->

<ul id="ddsubmenu3" class="ddsubmenustyle">
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
<li><a href="#">Tên menu cấp 1</a></li>
</ul>

Bây giờ, bạn cần thay đổi tên menu chính và con, thay dấu "#" là các địa chỉ link mình cần liên kết đến và bấm Lưu lại là xong.

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

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀