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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzCoCnB6SgGdeIjzQz_TSVBljkGPWJKHkM76ehgRbU5cVUrfihY9I1NgGjKs3EsqR2jUtpfUSEVMQwx1JNC9lUlIs2hzmxXCFXrENP9U3QUxP8R2Vsf4VRMnzLA0-kkX1QNMWehAvhptA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwSq0nYayd6PqGwGjIcFVsyawqMCGBAK1m8HGxvxJl56pAjBCH2j7vxWccWOmWcolQv_adF1IhBJHeINk6PgyX9UkyfCDqbVLfVzOjweZTqV0RJQ6Oi7_wclG-9iKTmdx7Ktrjss5KKc/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP8R1VI8KaITqK1lbjYPSgrXqVI09-KK6Kbq5mhUdQ7bjsHn8Miz1YBNyUYxMu4wQhstQR0AZT-UTbR2_URuirtWIXBKng-VBljoYFtjMW9LGdTUCvxmZH6AN4dad80in4W0X90XZBYac/s1600/Google-icon.png" title="Đăng nhập Gmail" /></a></li>
<li><a href="javascript:popUp('http://twitter.com/#!/sessions/new')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj21XanA7F6-WlXGlTgXU2b_OYCnqOETetLNR04r2Ay3gLOzWIwAb2gaaAn1sS09931fMFUtTJce6v4J_Guh9V7WvrkeScZMHhYvveMLcqH6niJlQAyM7yvbZpILGQyk3dxAHStxODcXQ/s1600/Twitter-icon.png" title="Đăng nhập Twitter" /></a></li>
<li><a href="javascript:popUp('http://www.facebook.com')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAaWchqe8kqfx10HTHPV5NXVZlOl-yAdZJSVpzPEXgpcy-eYPhXfNS7JTjGbr198VU2jdQcogf5Zdc1jlvZIdWbvuv9Q60pu1rzak9K-3Qgx1wHLKu2vgkly1zDiW52tja9GQO8TFwKXE/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8F9IaInnxuRTi2zIl1inPUFBVtLJ_cKYSRw7B3ScG4Leqtkc9WYP_hS-P6fK_vVpK0JFgjYTbyrAM5s-nRp3RJWB0uodmvUrJfQ8tVVyQM5cXkVPtNLTEdNDqFGZaGYaINTkuxUJpfJY/s1600/yahoo-icon.png" title="Đăng nhập Yahoo" /></a></li>
<li><a href="javascript:popUp('http://www.youtube.com/')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKyhf2zO6EUMViBTcx8Dpjsx5JWwu7XpOiU-6Obyq-45924ZpRB6TAs2OiDOWf8PG6B9afM-ddE4VbvhR54oSNpvcForAn8_QRenNy6PrRyVYxE2iXdo8ipz_4g0VGu7kxIa8moInX7mE/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 ▄▀▄▀▄▀