TẠO MENU NGANG BẰNG HÌNH ẢNH
Có nhiều cách để tạo menu ngang hôm nay Viettin365 chia sẻ với các bạn cách làm menu ngang bằng hình ảnh (kiểu 2).
Mời các bạn bấm vào thẻ Xem thử phía dưới để trải nghiệm trước nha.
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/AVvXsEhUE3YrNvKWTIfgn_Q1WYdczHRv33psifUv_Q3HnIYkYE3PW4pCWzQdl0wQOeYbeHwlinN8M8xhYtrJXUyXIB9O-5DShnfEBBnyR6iFt3LuU2_y_mkFEwmBO3zlEJEIK7OgUdnQoJbh7t4/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<mpl=start#s01')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3I5kCxdKcEIWZQpeX7IL85JT2d1LpW0waESk4JNAza6aZVanyo6Zm6u3460kw0lFzN_Ifa6Fo5uKfl35ZFYRplJ-QcGVBwylOWkMk_zJpwueG8bHxy3muNYRMkt4Ptfq-P4DQ9y2nsw/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<mpl=default<mplcache=2')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFz1xj0PHUUF0MFL5TChuWVa4cD9MnKdIsYQtM-kWMiASHmAY6nqQw1uiroyi3HiyjZuCsd4pJp7CikIQudCGuPK_QkdH-6Xl-psm2S-tOANuSzOBIOBjwqGQ9OiN1VQdf0ezRGLv4Hkw/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/AVvXsEiUR9GfLHSOoIbxtQm-Gk8nlEbV5TFSnDEpP92ryA7XX-qhEX9uk3H5OTwAqrmzxiQhfMQBkGrz1Y3Ol0PPeHZxfuEF0AkRB8x1WjavenTGPvn4CeGsG1KfD8By37cAbyYKZA7RfOGrrGE/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/AVvXsEgLPbUmEHPN4Ulw0ReVDDcUsobbUe7vhAQOy0yg4MqvPDq1T_mACjZKhwI6FviGTJe0C5Jq3zhcTRvKKCsXGbwyAw2pg1xeGgQL2sfRrfjF_Ne8ptlkiJK1iCjUqwTQtT4blS313zqkkCQ/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/AVvXsEhSSNHjvxZk49nxGKtTatp-fmdR2agnY9b819Emf5ZCYvOg66FoxnL0jWYKbb6XwFB1KUMyh3a-R87xXxmys2h3V9cQB7Xw4A5d2UKCOR8GFHukqT0ixQcUtxUR_9EUy_0uMz53wyMAd9Q/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/AVvXsEgQA9QdEUg9kU6kRznX5ZmG-Rcq2YPgSiiI2Qf7kIUDa1yT2enm-eCXieBkDb3An04acHNQzr_r7IVquY65MY0lw0NLt2LTSc7hs-5p9cjb9sBLKW3bTdje2AvypKU-lUEiVaMO1X31SSM/s1600/youtube-icon.png" title="Đăng nhập Youtube" /></a>
</p>
</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/AVvXsEhUE3YrNvKWTIfgn_Q1WYdczHRv33psifUv_Q3HnIYkYE3PW4pCWzQdl0wQOeYbeHwlinN8M8xhYtrJXUyXIB9O-5DShnfEBBnyR6iFt3LuU2_y_mkFEwmBO3zlEJEIK7OgUdnQoJbh7t4/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<mpl=start#s01')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3I5kCxdKcEIWZQpeX7IL85JT2d1LpW0waESk4JNAza6aZVanyo6Zm6u3460kw0lFzN_Ifa6Fo5uKfl35ZFYRplJ-QcGVBwylOWkMk_zJpwueG8bHxy3muNYRMkt4Ptfq-P4DQ9y2nsw/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<mpl=default<mplcache=2')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFz1xj0PHUUF0MFL5TChuWVa4cD9MnKdIsYQtM-kWMiASHmAY6nqQw1uiroyi3HiyjZuCsd4pJp7CikIQudCGuPK_QkdH-6Xl-psm2S-tOANuSzOBIOBjwqGQ9OiN1VQdf0ezRGLv4Hkw/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/AVvXsEiUR9GfLHSOoIbxtQm-Gk8nlEbV5TFSnDEpP92ryA7XX-qhEX9uk3H5OTwAqrmzxiQhfMQBkGrz1Y3Ol0PPeHZxfuEF0AkRB8x1WjavenTGPvn4CeGsG1KfD8By37cAbyYKZA7RfOGrrGE/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/AVvXsEgLPbUmEHPN4Ulw0ReVDDcUsobbUe7vhAQOy0yg4MqvPDq1T_mACjZKhwI6FviGTJe0C5Jq3zhcTRvKKCsXGbwyAw2pg1xeGgQL2sfRrfjF_Ne8ptlkiJK1iCjUqwTQtT4blS313zqkkCQ/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/AVvXsEhSSNHjvxZk49nxGKtTatp-fmdR2agnY9b819Emf5ZCYvOg66FoxnL0jWYKbb6XwFB1KUMyh3a-R87xXxmys2h3V9cQB7Xw4A5d2UKCOR8GFHukqT0ixQcUtxUR_9EUy_0uMz53wyMAd9Q/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/AVvXsEgQA9QdEUg9kU6kRznX5ZmG-Rcq2YPgSiiI2Qf7kIUDa1yT2enm-eCXieBkDb3An04acHNQzr_r7IVquY65MY0lw0NLt2LTSc7hs-5p9cjb9sBLKW3bTdje2AvypKU-lUEiVaMO1X31SSM/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:
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
Share This:
Blog Tự Động Hóa 68
Tôi là Đại Thành. Tôi thích chia sẽ đam mê về Điện Tự Động Hóa, Điện Lạnh Và Internet....Bài viết có thể chưa thật sự hoàn hảo nhưng hy vọng sẽ giúp ích được cho các bạn. Cảm ơn đã ghé trang.
Mời bạn bình luận cho bài viết " TẠO MENU NGANG BẰNG HÌNH ẢNH "