Hướng dẫn các bạn làm slide ảnh banner khá đẹp và đơn giản

Người đăng: Kiến Thức Plus. Vn | Chủ Nhật, 16 tháng 8, 2015 | 00:06

(VL thật.Com) - Hướng dẫn các bạn làm slide ảnh banner khá đẹp và đơn giản cho bạn nào có nhu cầu nhé. "Code blog" này mình có tham khảo trên một số trang "thủ thuật" khác để áp dụng vào trang của mình, thấy nó dùng cũng đẹp, không thua kém các loại slide khác.

     Đầu tiên các bạn co thể xem demo code mình đã sử dụng trên trang blog này: www.kientrucdepgroup.com.vn

Sau đó các bạn vào blog tìm đến phần 'Mẫu' => Chọn 'Chỉnh sửa HTML' => Và nhấp vào khung chỉnh sửa đó và dùng tổ hợp phím Ctrl+F để tìm đến dòng code <div align='center' id='header-wrapper'></div> hoặc chỉ tìm với từ id='header-wrapper' sau đó dán bên dưới  <div align='center' id='header-wrapper'></div> bằng code ở khung dưới nhé.

 Cũng có thể bạn thay thế luôn nếu muốn slide nằm trên cùng.Ở trang demo của mình, mình cho nằm dưới một 'header-wrapper' khác nên mình lấy tên là  'header-wrapper2'. Chú ý nếu chưa hiểu về id hoặc class có thể xem bài này

<div align='center' id='header-wrapper2'> <style type='text/css'> /* http://dimpost.com */ #sliderFrame {position:relative;width:1100px;margin: 0 auto 10px;} #slider { width:1100px;height:400px;/* Make it the same size as your images */ background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpuG4NX3AQ6LoVQh91DLUe45-PxjwDoBTKx8KS2VJgrxvKc1ePN_9_pKTU5hSw0jEuQ3DIZbsDif-ln-p4ZQ8xyq5i0vB8o1PyUUm0YqZCQ5uso1EuWdOJvEXuNX8_85UkdYZIfKwWJWG/s1600/loading.gif) no-repeat 50% 50%; position:relative; margin:0 auto;/*make the image slider center-aligned */ box-shadow: 0px 1px 5px #999999; } #slider img { position:absolute; border:none; display:none; } /* the link style (if an image is wrapped in a link) */ #slider a.imgLink { z-index:2; display:none;position:absolute; top:0px;left:0px;border:0;padding:0;margin:0; width:100%;height:100%; } /* Caption styles */ div.mc-caption-bg, div.mc-caption-bg2 { position:absolute; width:99%; height:auto; padding:0; left:0px; bottom:15px; z-index:3; overflow:hidden; font-size: 0; } div.mc-caption-bg { background-color:black; } div.mc-caption { font: bold 14px/20px Arial; color:#EEE; z-index:4; padding:10px 0; text-align:center; } div.mc-caption a { color:#FB0; } div.mc-caption a:hover { color:#DA0; } /* ------ built-in navigation bullets wrapper ------*/ div.navBulletsWrapper { top:340px; left:390px; /* Its position is relative to the #slider */ width:300px; background:none; padding-left:20px; position:relative; z-index:5; cursor:pointer; } /* each bullet */ div.navBulletsWrapper div { width:11px; height:11px; float:left;overflow:hidden;vertical-align:middle;cursor:pointer; margin-right:11px;/* distance between each bullet*/ _position:relative;/*IE6 hack*/ } div.navBulletsWrapper div.active {background-position:0 -11px;} /* --------- Others ------- */ #slider { transform: translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } </style> <script src='https://googledrive.com/host/0B6amylBoxDa-UEttYjVGNjZwM00' type='text/javascript'></script> <div id='sliderFrame'> <div id='slider'> <a href='#'><img alt='Kiến Trúc Đẹp Cho Hạnh Phúc Thêm Đẹp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfdYAsUmuatriM9UnKX9_it2wC32xw0vwsl6XryAA8JoEz3kDiicubE_d3T9QM2IodB4zdueVGTOhN1UE2jiJxg35za1XCWKgFsbj22MZTl6Sg2-Ri4Lk-TT_dWq2Qpr35bceswj8Vd4/s1600/kien+truc+dep1.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Đem Ánh Nắng Màu Xanh ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Mg43f6rsAT8lKS_1a5WXjrR8dpFI56V139Hq5bzBVOb2ogLyc0jzy2xJT8oRX6ZcGqNwdV4t3P89TexgPVdjxp-fF06hGz6STrnsWj8HEU7jcx06jHuJJaThCflGQHHviPjDWX4qyMc/s1600/kien+truc+dep2.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Gắn Kết Cộng Đồng Xã Hội' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPldTJI4aNMaxGER7vjkQK204tkgGa1KPHmsDm5LU8Jnp0Ru4O3iQ8QuZvVhzHQzAzaql0cIPOFG7E6uI51PPsyS-TMtIoy39Znfw5UCXen3dZqCdxz0YVMMLO6Xl_QZQfVmdyPbi-BsQ/s1600/kien+truc+dep3.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Ngôi Nhà Của Những Ước Mơ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKqgzxmYs0ezsJS3Thd7r_bi7cuslrVyGO8hsE2OObg6FKiWOoVbPz_aw5yIprYdZ4gZt-ALW-7ful_DTRgAq3adfk9vB_a7qpW9R9emwgvfJHb3tVRUpBP3-REw1Z16UDUNMw-hdnwc/s1600/kien+truc+dep4.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Ngôi Nhà Của Những Ước Mơ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqshKV33werRiMdUGKuBvRm3oA-0JLuVb7gdhYHwzaPPxJiQ3JdMKz8x25AydagAuCNRxjHxK3xZkzfnFJvxNjOsGSmv0u9oS02jktElAK9ze65L-TUsYq5YvasQ7gaJUyEnpU3Bj9lA/s1600/kien+truc+dep5.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Cho Hạnh Phúc Thêm Đẹp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLfdYAsUmuatriM9UnKX9_it2wC32xw0vwsl6XryAA8JoEz3kDiicubE_d3T9QM2IodB4zdueVGTOhN1UE2jiJxg35za1XCWKgFsbj22MZTl6Sg2-Ri4Lk-TT_dWq2Qpr35bceswj8Vd4/s1600/kien+truc+dep1.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Đem Ánh Nắng Màu Xanh ' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Mg43f6rsAT8lKS_1a5WXjrR8dpFI56V139Hq5bzBVOb2ogLyc0jzy2xJT8oRX6ZcGqNwdV4t3P89TexgPVdjxp-fF06hGz6STrnsWj8HEU7jcx06jHuJJaThCflGQHHviPjDWX4qyMc/s1600/kien+truc+dep2.jpg'/></a> <a href='#'><img alt='Kiến Trúc Đẹp Gắn Kết Cộng Đồng Xã Hội' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPldTJI4aNMaxGER7vjkQK204tkgGa1KPHmsDm5LU8Jnp0Ru4O3iQ8QuZvVhzHQzAzaql0cIPOFG7E6uI51PPsyS-TMtIoy39Znfw5UCXen3dZqCdxz0YVMMLO6Xl_QZQfVmdyPbi-BsQ/s1600/kien+truc+dep3.jpg'/></a> </div>

Tiếp tục bạn nhấp vào khung chỉnh sửa đó và dùng tổ hợp phím Ctrl+F để tìm đến dòng code
 '#header-wrapper{....}' và dán vào bên dưới nó đoạn CSS sau hoặc bạn có thể dán bất kỳ đâu ở trong phần <b:skin>.....</bskin> .Mình khuyên bạn nên dán những đoạn CSS giống nhau cùng chổ cho dể quản lý

#header-wrapper2 { width:100%; height: 400px; border-bottom: 1px solid #ffffff; padding: 0px 0 0px 0px; text-transform: uppercase; }

        Bây giờ bạn có thể lưu lại mẫu và thưởng thức. Có gì thắc mắc cứ để lại bình luận và trang của bạn mình xem rồi giải thích cho

Share on Google Plus

Nhãn Tìm Kiếm: code blogger, code slide ảnh banner, Hướng dẫn các bạn làm slide ảnh banner khá đẹp và đơn giản