Select Menu

Thủ Thuật Blogspot

Sức Khỏe Giới Tính

Thủ Thuật Blogspot - Wordpress

Mẹo Vặt

2 Column Post

Simple Post

Simple Post 2

Thủ Thuật Blogspot - Wordpress - JoomlaNew Carousel

Video Posts

» » » Code Slider đẹp cho web - blog thời trang


Unknown 20:03 0

Code Slider đẹp cho web - blog thời trang

Code Slider đẹp cho web - blog thời trang. Sau đây Bít Tuốt xin chia sẻ với các bạn Code Slider đẹp  rất thích hợp cho các web thời trang hay blog thời trang. Các bạn xem demo tại đây

Cách tạo Silder này như sau:

Bước 1: Thêm dưới đây lên trên thẻ đóng </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.mousewheel.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/tessssssssblog/jquery.RotateImageMenu.js"></script>
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/tessssssssblog/style.css" />


Bước 2: Bạn thêm phần này vào chỗ bạn muốn hiển thị

<div class="rm_wrapper">
<div id="rm_container" class="rm_container">
<ul>
<li data-images="rm_container_1" data-rotation="-15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_5csrG0dMmSlDvGLAv0QlQhotDaDqxFrjPq_-eh8cY3-yP09PQNlspEj_gQcLS1nA5skdn5ObWGK5Xd7GFBbMfCDr4wtTNq9Ovd0u6HNV_TVVK_jopxGXBxewJ6esite_6lI76yB1aB4/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuQteP2bW09N6HqQv0MeVerIw300pLNWioo7BryvZRaIovoasUJOrwmiNDbzW5QHbB7X8g4nC-NU9mZukTclQR-zyQh9JUrZ67z1wnXmulr6wV6h35Esa8RfsnDVjDI_rJHS-Be6tP5WE/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4cj6GaEyGvdYHn1l7e6G99QtpIpvfb803CLQtQLHqM0GvneHPnVkEO86iFRkHBplTyOcJNY0UNoAtWqrcYTXT3tlcCf-CJ8Egazw8LFW9u2-nLgP9ndRsiR3lV-_cUyn5Q2VPEYFDaY/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtN81mKyLDqkbXepB4hPd3vMCrJHzNRwfFa8mMtC5UjHEoRJj4xvF46qVCWOalZ9cTb9l_8fZQhTjGh_6PhKmgSznuKSq-bIfR_GB1rnyb5kdaezHY4u6Rvs32UxHj52K8cMWxVumTFwM/s640/15.jpg"/></li>
</ul>
<div id="rm_mask_left" class="rm_mask_left"></div>
<div id="rm_mask_right" class="rm_mask_right"></div>
<div id="rm_corner_left" class="rm_corner_left"></div>
<div id="rm_corner_right" class="rm_corner_right"></div>
<h2>Fashion Explosion 2012</h2>
<div style="display:none;">
<div id="rm_container_1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Rn90F6WhAHuT5IBwK9ljghrEA0QVp4GNVOW9illQKzzS_ThIp0yKkvGoWqb5Jy-EPgJAa7SNCiyk3DPPZVAsEVfzNn2BDXgyg3AZMRGghrVf6rvJvxutzAIpoIW7mF-4k2zNH9WQiKw/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWYas5LV5CH0xoLOAATcTcisBQYBl0seo-WftBUeI_p9wNItKZ4lcQV0mNyMRDPkPnTUfkHsX6xGN9nZGf-JYFjL3OiIRqFQ3QMNcjYjkyp8m9sBI0xvH40qV_o52so1TYKd5DZCwaa2I/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCeLqOP7XeGUmz8AHeSe0nnwS9U9qw4sM0ejXHsdAAjbyEUaHH6GpTa_LCVMPv9jTnrqUsCDlUvd7Xi5_J0EWUXHRCIG9xkKHc5IA_8Fgi0dE3LWBd4sSnSgSXXClGM74oyB4DbkQVbSM/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQe4N-5zjx04Q-Bd2hLFqkROwjzWHT8MdYkS-7Y_Kn71smrPGhYLS-r2RPQH0J5W53bBSjdhf6S6EXuyvVD6Gcq8cnNVaTtqNry1YCFMBzqj2gOvz3HjPFr2CfsXlw47qaQm01VMVXKCk/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQwt_opYEqBuHWYpF4f_OIU_wi-A_gSjZDHctJcYCEYaWVpM9Q9GIVWgq4n-a0sY_jdtnv7AzISmYDUdUu63Y8fq3dt8JdpZzj9NUFcHxUdhpU62nH7eedtqlW4zO0AVt57f6hI8N4o94/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2GoZdMUK8jH7QYWrPy35Ag3nGK6_KIWhJTPMgeVcFiL_y-u7jIVAr1KjgejoPcIB67P5Sdsam0BRTnXRqkMcaZeGm1b1WI6gvSfc1ZiDsCgRO-Vx0p-WPWZPxeIieHkYPM_0_-esg-kU/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYkx9v7j5OxV1z_kZGcpK0m0DPa2R3eXiwupCAFZfcK4EdZ6mx8xbhKO_sChlRO_ZhQVqxzcU8W5xZf3khWXNaFrqPA3pwMVdwupXSgyPGjjunsc9lqQwNGiMSQF42bfvPV0c9vB3iFY/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXwfsG6dDUpjobaNtY8KQMQDxjJBu4PbDv8UpdqZcLzrT5D5lz8gVqs0_-9arE67CJ_FjJI0hTbjdH3QcBxDQuwTWskpMlgOi0D3XfZ0py6kg11R93EffKO22n6Zg63uByuqUdLrWfI0/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj52Ulsi5RQ33pTSJQWOmhtFOWe2AcTtGcwmUKyD1woT7LoUf8Mnb8F-tSEQ5X-DGSCVkyUILMx2Jwn6NQHB0axBgy6_jHOfGE5e0STtmCpMaUS0zXe1vL3pG-tB6rEi03brh3En4QFiFg/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJipdkIDtkm-Y4D-PH8eNMSB_sHrtyqKtg7lRK2U66_oLUNATaHqWK7Yqiqr8vPG3kPrp_WhkgFRwlFXxCIcKU7Tu6wSVcP3Ozbz0GJUr-G_GZQAcco1QdpPF-q95KP8fIU3QgBTumHRA/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHMuBEv513oiCqziML7OhjijlKdPWssDij3zR7omsiIXn-1vZphXw_4GnKlSSvdotYoo3lXq9B4Xh0S20DPhLHvhEO-QjbiBiB25RA1gKY_r1k1BFgTeknY3f7NgF7Y3LlfeiXP9xI2E/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTXShf6hKkuvdthxp6C6DMuYz3wZLrMOfaIZ0MLLYUXQ5jowyhmqiZM321g33khHsFbnohLznXxemM_NVxGlGUtlsWvzpFX0t69vsrseE5UPH0SohijADajy6Qdodo5TuvHofeV47Rbo/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCeLqOP7XeGUmz8AHeSe0nnwS9U9qw4sM0ejXHsdAAjbyEUaHH6GpTa_LCVMPv9jTnrqUsCDlUvd7Xi5_J0EWUXHRCIG9xkKHc5IA_8Fgi0dE3LWBd4sSnSgSXXClGM74oyB4DbkQVbSM/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2GoZdMUK8jH7QYWrPy35Ag3nGK6_KIWhJTPMgeVcFiL_y-u7jIVAr1KjgejoPcIB67P5Sdsam0BRTnXRqkMcaZeGm1b1WI6gvSfc1ZiDsCgRO-Vx0p-WPWZPxeIieHkYPM_0_-esg-kU/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Rn90F6WhAHuT5IBwK9ljghrEA0QVp4GNVOW9illQKzzS_ThIp0yKkvGoWqb5Jy-EPgJAa7SNCiyk3DPPZVAsEVfzNn2BDXgyg3AZMRGghrVf6rvJvxutzAIpoIW7mF-4k2zNH9WQiKw/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOTXShf6hKkuvdthxp6C6DMuYz3wZLrMOfaIZ0MLLYUXQ5jowyhmqiZM321g33khHsFbnohLznXxemM_NVxGlGUtlsWvzpFX0t69vsrseE5UPH0SohijADajy6Qdodo5TuvHofeV47Rbo/s1600/2.jpg"/>
</div>
</div>
</div>
<div class="rm_nav">
<a id="rm_next" href="#" class="rm_next"></a>
<a id="rm_prev" href="#" class="rm_prev"></a>
</div>
<div class="rm_controls">
<a id="rm_play" href="#" class="rm_play">Play</a>
<a id="rm_pause" href="#" class="rm_pause">Pause</a>
</div>
</div>
</div>

Chú ý: Bạn có thể thay đổi kick thước phù hợp trong file style.css nhé. Các bạn có thể down code về xem chi tiết tại đây

«
Next
Bài đăng Mới hơn
»
Previous
Bài đăng Cũ hơn

Không có nhận xét nào

Leave a Reply