▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

TẠO MENU NGANG BẰNG HÌNH ẢNH

Có nhiều cách để tạo menu ngang (xem TẠI ĐÂY), hôm nay dunghennessy chia sẻ với các bạn cách làm menu ngang bằng hình ảnh (kiểu 2).
Cũng giống với menu ngang bằng hình ảnh kiểu 1 (xem TẠI ĐÂY), khi bấm vào một hình ảnh "nó" sẽ mở ra một bảng nhỏ (Popup) dẫn bạn đến với trang mà mình đã liên kết đến. Điều đặc biệt ở menu này là khi các bạn rê chuột vào hình ảnh bất k thì ảnh sẽ xoay tròn 360 độ và khi bỏ chuột ra ảnh sẽ trở về vị trí cũ trông khá đẹp mắt...và ngộ nghĩnh. bài viết này, tôi sẽ dùng menu ngang đđăng nhập vào các trang mạng chia s...
Mời các bạn bấm vào thẻ Xem thử phía dưới để trải nghiệm trước nha.

Xem thử


Rất đơn giản bạn ạ!!! Chỉ cần bạn đă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, các bạn có thể xem TẠI ĐÂY).
Bây giờ, bạn copy tất cả các đoạn code này vào.
 
<center>
<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

</style>
<script language="JavaScript">
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=450,left = 280,top = 180');");
    }
    </script>
<p id="socialicons">

<a href="javascript:popUp('http://funnylogo.info/engines/google/red/dunghennessy.aspx')"><img src="http://1.bp.blogspot.com/-eIj7brHIqkw/T7h3ZaBBuVI/AAAAAAAAZ5I/GHbvsAZvAOo/s1600/Google-Chrome-icon.png" title="Tìm kiếm trên Google" /></a>
<a href="javascript:popUp('https://accounts.google.com/servicelogin?service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup=http://www.blogger.com/home&ltmpl=start#s01')"><img src="http://1.bp.blogspot.com/-9OEDeyheUWA/T7h3Ygg057I/AAAAAAAAZ5E/s8AyuzwK06U/s1600/Blogger-icon.png" title="Đăng nhập Blogspot" /></a>
<a href="javascript:popUp('https://accounts.google.com/servicelogin?service=mail&passive=true&rm=false&continue=http://mail.google.com/mail/&scc=1&ltmpl=default&ltmplcache=2')"><img src="http://1.bp.blogspot.com/-A6MVH5R_jNQ/T7h3aDaPqEI/AAAAAAAAZ5Q/DVrbbXIxgAU/s1600/Google-icon.png" title="Đăng nhập Gmail" /></a>
<a href="javascript:popUp('http://twitter.com/#!/sessions/new')"><img src="http://2.bp.blogspot.com/-lgiaBT9cl3E/T7h3a7CiO_I/AAAAAAAAZ5Y/VM2qoopqBkc/s1600/Twitter-icon.png" title="Đăng nhập Twitter" /></a>
<a href="javascript:popUp('http://www.facebook.com')"><img src="http://2.bp.blogspot.com/-5DmIwdKYMcI/T7h3bloV0lI/AAAAAAAAZ5g/yRnklKj5skg/s1600/facebook-icon.png" title="Đăng nhập Facebook" /></a>
<a href="javascript:popUp('https://login.yahoo.com/config/login?.src=fpctx&.intl=vn&.pd=c%3d6t7evjap2e6cwwsb86qvdqk-&.done=http%3a%2f%2fvn.yahoo.com%2f')"><img src="http://3.bp.blogspot.com/-UrPaXFNK3GA/T7h3ckzyfzI/AAAAAAAAZ5s/Abnjjq2NWo0/s1600/yahoo-icon.png" title="Đăng nhập Yahoo" /></a>
<a href="javascript:popUp('http://www.youtube.com/')"><img src="http://3.bp.blogspot.com/-Inj80QWRBWI/T7h3dvxMa5I/AAAAAAAAZ5w/raSLhHMw0Sc/s1600/youtube-icon.png" title="Đăng nhập Youtube" /></a>

</p>
</center>

Bạn có thể thay đổi các dòng lệnh màu đỏ (link liên kết đến), màu xanh (link ảnh), màu vàng (tiêu đảnh khi rê chuột vào) theo ý muốn của mình, cuối cùng bấm Lưu và trở vào blog xem kết quả nha.
Mở rộng thêm: Nếu muốn thêm một hay nhiều ảnh nữa, bạn thêm đoạn code này:

<a href="javascript:popUp('Link liên kết đến')"><img src="Link ảnh" title="Tiêu đảnh" /></a> 

dán trên th</p> cuối cùng




14 nhận xét:

DINH VAN Tu nói...

đẹp quá . lâu mới thấy bạn dăng bài mới

dungheineken nói...

Cám ơn bạn đã khen vì do dạo này hơi bị bận việc nên cũng ít đăng bài, lâu lâu phải đăng một bài chứ không sẽ bị "lạc hậu" đó bạn ơi
Cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

Aba Chíp Xù nói...

Bạn ơi ghé xem nhé : Seo Backlink Qua Chữ Ký Diễn Đàn

nhadat4vn nói...

hay đấy.
cho thue van phong quan 1

Le Xuan Hiep nói...

thank bạn nhiều! web đẹp lắm

Dung Minh Nguyen nói...

Cảm ơn bài viết của bạn.

Thành huyên nói...

anh dung oi xem dum em sao menu cua e bi loi gì nè : http://huyentcnh.blogspot.com/ ,giup e cái .thanks a nhieu..!

dungheineken nói...

Em chép lại code và làm lại thử xem sao (chỉ cần chép lại code 1 mà thôi, code 2 giữ nguyên).
Nếu vẫn còn vấn đề như vậy thì do trên blog của em có một hay nhiều đọan code của tiện ích khác xung đột với code menu ngang này rồi

bui ngoc chau nói...

Anh Dũng ơi ... Anh vui lòng xem menu ở Blog em bị gì vậy nek.. Em cảm ơn anh..
http://buingocchauquesonquangnam.blogspot.com

dungheineken nói...

Vì trong thời gian bảo hành nên các file .js của anh tạm thời không hoạt động nữa em à, để anh khắc phục lại nó sẽ chạy lại thôi
xin lỗi em vì sự bất tiện này

bui ngoc chau nói...

ok a... khi nao dc thi a thong bao cho tui e bik vs nha..

dungheineken nói...

Anh đã chỉnh sửa hết các file js và css rồi đó, nếu bên em vẫn còn bị thì em thử copy code làm lại xem, nếu vẫn không được thì chắc nó bị xung đột với một code nào đó đang hiển thị ở blog của em

Bình Phạm nói...

Chào anh Dũng! Anh có bài đăng nào về tạo bài đăng trong cùng chủ đề không.Giống như trên chỗ "Chọn thủ thuật" trong Blog của anh đó nhưng chỉ cần đơn giản thôi nha anh. Làm giống như trong góc các bài đăng phổ biến đấy. Em cảm ơn anh nhiều!!!!!!!!! :-)

dungheineken nói...

Em tham khảo bài này xem:
* TẠO NHÃN CHO BÀI VIẾT

Đăng nhận xét

 
Powered by by: Blogger