Home
3/05/2012
Posted by 
Tutorial này sẽ hướng dẫn các bạn cách mở popup video youtube khi click vào một textlink nào đó thông qua class css. Chúng ta bắt đầu nhé.
1. Đăng nhập vào blogger --> Thiết kế --> Chỉnh sửa HTML
2. Nhấp " Mở rộng mẫu tiện ích"
3. Đặt trước " ]]</b:skin>" đoạn code sau:
#easy_popup{ /* popup overlay */
background:#000;
}
#easy_popup_preloader{ /* popup preloader */
padding:10px;
background:#fff;
color:#333;
}
#easy_popup_content{ /* popup window */
padding:10px;
background:#fff;
color:#333;
}
#easy_popup_content .caption{padding-top:10px;}
#easy_popup_close{ /* popup close button */
position:absolute;
background: #000;
border: 1px solid #fff;
float:left;
left:0;
top:-22px;
color:#fff;
padding: 0px 3px 2px 3px;
cursor:pointer;
}
4. Tìm đến thẻ đóng </head> và dán đoạn code sau vào trước thẻ này:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src='http://artistutorials.googlecode.com/files/easy.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$.easy.popup();
});
//]]>
</script>Nếu blog bạn đã có sẵn jQuery thì xoá dòng màu đỏ đi nhé
5. Lưu Template
6. Bây giờ, chúng ta cần direct URL của video được đăng lên. Mở video trên youtube, chọn Share --> Embed và Check vào Use old embed code và Copy URL. ( Xem hình dưới)
7. Chèn link qua một đoạn text hoặc hình ảnh v...v.. :
http://www.youtube.com/v/Ghf381Dt71Y?version=3&hl=en_US
Chúng ta cần thêm class popup cho video, code sẽ có dạng tương tự như sau:
<a class="popup flash" href="http://www.youtube.com/v/Ghf381Dt71Y?version=3&hl=en_US" rel="width:560;height:340"></a>
Các bạn có thể chình sửa 2 thông số là width và heigh cho phù hợp.
P/S
Lần đầu post bài về thủ thuật blog, có gì mong các bạn thông cảm!- Nhấn +1 để khích lệ mình nhé
- Nhớ ghé thăm blog thường xuyên, mình sẽ cố gắng " săn lùng" thủ thuật hay cho các bạn +_+
- À quên, blog mình đang trong giai đoạn thiết kế, có thế có lúc hiển thị không đúng, các bạn chú ý nhé.
Không Phải "Xoắn"
Cái này cũng được đó :1) :1)
Thích hợp cho những Blog có sẵn jquery khỏi lo tới tốc độ, :3) :3)
Mà em vào Cài đặt - Nhận xét-> Bỏ chức năng nhập mã cho nhận xét đi nha. :3) :3)
@Fairstar: Cậu thì khi nào cũng thế câu đầu tiên comment là vậy :L)
@Fairstar
:3) :3) Em cũng quên mất ^^. Cám ơn anh nhé.
Mà sao chưa thấy anh onl yahoo nhỉ :J) :J) :J) :J)
@Nguyễn Doãn Đức
Khuyến khích mà cậu :1) :1) :1)
Dòm em cũng ngầu ghê he! Mới học lớp 12 hả em! Thấy hình còn nhỏ xíu hà!
@Trần Phúc Minh
:5) :5) Vâng bác, em đang học 12 ạ, bác thông cảm, nhà nghèo, bác ko nói nhìn bẩn bẩn đen đen là may rồi, người hà nội toàn cm về người Nghệ An như thế :B) :B) :B)
thủ thuật hay, lâu nay mới ghé thăm nhà của các bạn blogger. Blog vlpm4st3r đẹp thật đấy. :3)
đúng là tuổi trẻ liều cao, em pro quá :5) :3) :4) gỗ nhân tạo conwood
"thêm class popup cho video" - theo như bạn nói thì thêm vào chỗ nào để nó nổi popup trên nền web như bạn?
- Các bạn vui lòng comment bằng tiếng Việt có dấu và
không nói tục chửi bậy nhé.
- Các cm vi phạm sẽ bị xóa.
- Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư.
Thankyou
Thân
vlpm4st3r