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

Có nhiều cách để tạo menu ngang hôm nay JM chia sẻ với các bạn cách làm menu ngang bằng hình ảnh

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
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/AVvXsEgj5TkbiMxbcLD7_K1kywkNeSArVbi6g4AXtqKf9UKGNyC6gXvzdyUoaHH21IRgGOGcIN62JJSuGTQqvUKmVK2nCAXMZAhzPDaytm9Il23J4UIwr3kcrvDBO3iXXgeeAh7NR9v50RcVWXs/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/AVvXsEh1SsRu-_QE_2JQ4JU8LXey8fQT3UiflI_EKSl-mXoHJ39UPPNVTZN28VIWGaGnWdc1cLPtZ_ygd7iPkyIbzNfVhySCIGMmQ4ZdBAUJA5VtCJv5PbXhrPkYSGstmMtHzTaF6ZWgFRbBa7I/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/AVvXsEgwLbvwlmmnV6EcfpLA5DyzRXY9Utl9w39z6wOGQ3D_j8k4zAQdOjzC0cqaYt4xgayHQtKuFwAk5AoJJ8mwChmr3ojzJGQbC8NwnjMS4r6rYZjJFLFE-1oNeS2hnS0XGCc4ojPtx80f1cw/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/AVvXsEgbyTjC4xcj87apVQRlnG7rcQ8aIhPF91qaQPUvjO26nbU7PiPa4y18TmiPetTS2e6y728-VIctilBETNBYryP43bL0eNw61ALSLWKMaR_V8Vdbcs8JYgm0oVPNTK9OlWz-ONxaoQ6DyjI/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/AVvXsEgLP9mglnvpzus_whvGHxXTzC_HkNMrSI3zH-HhEXk7LTBypOZ80we4USynw4H6nuSoxwHQo7jR2nGbueKvlq1eUooMLpmIVfBNz9sR7hsvzkcpZKJeA_coSO65FFgpvXDV_chw7tSp8e4/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/AVvXsEiRvAUVui1Mcx6sMQBDU2QFETVxhtH8JJ_hUDI0rWKsUhroj8vKB1-MKfnw3KDKduf_AFlksnUfTBKkFGT-h0FUcWE6zVqqHBChNuS8_QnH1y09JEXL6HwWaegtZ1ERTzRcp-x4IgBKTio/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/AVvXsEgsAub_FhGlfUic71TpToO5ftJPsd1pAopMw0WkHRwTyhi0AH_8uCPClLXUDZwQTqq6hYcI65a6bfqmokq9MYTiz9jHjG7Y7MYw7uH7lW1wx4Wsqdzclrgrnyi6-iJM_2Lwj0KPZZrr-2o/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