▀▄▀▄▀▄▀▄▀▄▀▄ 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

Hôm nay, rãnh rồi "mò mẫm" làm được thanh menu ngang bằng hình ảnh. 
Trong giới hạn bài viết này, tôi dùng menu ngang để đăng nhập vào các trang mạng chia sẻ của mình.
Ở menu ngang này, khi bạn rê chuột vào ảnh thì ảnh sẽ được phóng lớn hơn đi kèm với lời chú thích nhỏ. Điều đặc biệt là khi bạn click chuột vào, "nó" sẽ mở ra một bảng nhỏ để bạn có thể đăng nhập vào các trang mạng của mình mà không phải rời khỏi trang Blog hiện tại.
Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 




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 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>
<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 64px;
height:64px;
}

.bubblewrap li img{
width: 64px; /* độ rộng của hình ảnh.*/
height: 64px; /* chiều cao của hình ảnh.*/
border:0;
margin-right: 14px; /*Khoảng cách giữa 2 ảnh*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>
<center>
<ul class="bubblewrap">
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
<li><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></li>
</ul></center>


Bây giờ, bạn cần thay đổi các dòng lệnh màu xanh (bao gồm độ rộng, chiều cao và nơi xuất hiện của bảng Popup), màu đỏ (bao gồm kích thước của ảnh, khoảng cách giữa 2 ảnh, địa chỉ link liên kết, link ảnh và chú thích của ảnh ở mục title), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 ảnh nữa thì copy dòng code này.

<li><a href="javascript:popUp('địa chỉ liên kết')"><img src="link ảnh" title="chú thích cho ảnh" /></a></li>


Dán phía trên thẻ đóng </ul> cuối cùng.

Như đã giới thiệu ở đầu bài, code của menu ngang này tôi dùng để đăng nhập vào các trang mạng. Ngoài ra, bạn có thể dùng tiện ích này để tạo cho mình một menu ngang dùng để giải trí như: xem phim, nghe nhạc, xem truyện cười, clip hài... hoặc dùng để liên kết đến các trang nhãn trong blog của mình bằng cách thay đổi các địa chỉ liên kết  và các ảnh khác tương ứng.
Để kiếm hình ảnh cho tiện ích, bạn bấm vào thẻ phía dưới nha:


Xem và tải icon

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


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

13 nhận xét:

Lê Đình Tâm nói...

anh ơi sao bây giờ các ứng dụng của em không thể kích chuột dể vào được nữa?anh giúp em với nhé??thanks
http://ledinhtam.blogspot.com/
gmail/

dungheineken nói...

Đó là do các file flash nền của em đó (hình các ngôi sao bay bay ở bên tay trái), em xoá nó đi là click chuột được liền

Phạm Văn Phương nói...

Anh Dũng ơi!
Anh Dũng lúc nào cũng sáng tạo hết!hj
+ 3 cái Icon bay bay trên nền blog của Anh. Nó đại diện cho 3 trang log mà Anh viết thành công nhất. Em thấy đẹp ghê!
+ Cho em xin code và em chế biến lại chút xíu Anh Dũng nhe!
-> Em cảm ơn Anh trước nhe!

dungheineken nói...

Đây là tiện ích anh đang thử nghiệm tính ổn định của nó, khi nào thành công rồi anh sẽ đăng bài để cho em tham khảo nha.

QUẠT ASIA nói...

anh Dũng giỏi quá. khâm phục.!

dungheineken nói...

Cám ơn em đã ghé tham quan và gởi lại lời khen tặng quí giá. Anh cũng như mọi Blogger khác mà thôi...em à!!!

Đoàn Huỳnh Kỷ nói...

Mình thiết kế Icon rồi làm sao dùng Icon đó làm menu?

dungheineken nói...

Bạn chỉ việc thay link ảnh icon vào sau dòng lệnh image src:....., sau cùng bấm Lưu là xong

Viet Cao nói...

mình góp ý thật bài viết của bạn là quá bt sao bạn ko hướng dẫn cách cài trực tiếp vào theme nếu mà theme nào ko có bố cục nằm ngang vd : menu ngang chẳng hạn thì những ng mà ng ta ko biết thì biết cho vào đâu ? nói chung bạn chưa đủ năng lực để hướng dẫn mình góp ý thật có gì sai sót bạn bỏ qua nha

dungheineken nói...

Xin lỗi bạn, vì khả năng của mình chỉ đến đó thôi, mong bạn thông cảm

Truyen Ha nói...

Cảm ơn Dungheineken, rất sáng tạo.
p/s: Gửi Viet Cao, bạn đúng là loại người khó chịu =))

dunghennessy nói...

Cám on bạn Truyen Ha đã ghé tham quan và ủng hộ dunghennessy
Chúc bạn luôn vui khoẻ và gặt hát nhiều thành công tốt đẹp nha

Pham Huy nói...

Anh ơi cho e hỏi nhờ tý là em đã làm theo các hướng dẫn của anh mà không hiều sao mấy cái icon đó nó lại nằm dọc chứ không nằm ngang như trong demo đc. A hướng dẫn e cách khắc phục vs. Thank anh!

Đăng nhận xét

 
Powered by by: Blogger