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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GZ9IMNrYPpOWhZ80l2l-FJB-kEEjX9qtvjIkYVl4t-uIxJY9F7UbzCnl7Z4oYwZm7l1GOoeRH8jJA7EXxaBSlbb7V13P1Q2IEsu-YyJVmL83JZ7LCjvZLxDU80b73taXWGBEyHangaI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOIxgIsSunxCDQPzw-rsGVmGWNtNOkGeyJqRwVhnJ_Anm1ItHwnWz4NLSHIjPtUwyCTKzh4HclulHl6UsxDkiRfpOHtu0PonyScpWG2HVluwdqCKj8lu6up-KNDxXtzaNHk6HbjcmNBmU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHG9pFhlKSmW8WepNQvdPZbxRu9WM7rGclS7cPy5xrepNiECI2p5guNDr8gkoNdpn8YPz3Cdr2S47G5D9C9ta8SBX840SsE-Xj1uLsS5KSRVd5Fn5FXJY3lvXyH8fijkgi74Vs3FXN6JY/s1600/Google-icon.png" title="Đăng nhập Gmail" /></a>
<a href="javascript:popUp('http://twitter.com/#!/sessions/new')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5-rdjJKlIRqgpL92M_2Ad2TcDFfrW4MInRkoeAQn4icmOP5Ibu7l5n0WZWJWIj5N0ISZWdi5_j1d0LGMDozZUlHbUcpVrUQuhGK7YVdXwA9NQPH0ilIZGTURxPGPuqIcXg-GJnVbgHg8/s1600/Twitter-icon.png" title="Đăng nhập Twitter" /></a>
<a href="javascript:popUp('http://www.facebook.com')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS7ki89Exa5bDXRPE4tx3i5jnNbWcVatGpiQAAwnvca_EVSpP4ehWcK1zVnIrBAsUZ3lc2Awm3IwkFJjEAFlDjXSqhwjEQZv0VLlDusfZR28Ep7yS7R6biFv6vBLxMA3ekYB7cyf-Z9As/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH0Sb8v9LmGiia87tyleNHWYO9zEziCD0J39UoSm4BYavKBYdDipfZpMZUSvHam1GGD72QWZbdNYNmjnmaxmAgrCy5ASUohd-64sb9bbBbQfkQz5IIF72oVj0xBAMXolOzd2207mLYCQs/s1600/yahoo-icon.png" title="Đăng nhập Yahoo" /></a>
<a href="javascript:popUp('http://www.youtube.com/')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibflx1KnKJm3_s6Lk_gigUodsN8D_K1V4-xsg6vxOiWDCPqlZMx6TZHl-ZodZ1m0HZ8lWY9oXunsYuCixpXZW2XM_3pc3hviBAYSI45E2y8Pk7NuOpdGUZo2qP3NV7ID4GTgobuy-IAiI/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