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/AVvXsEjHS-oFpUzrs8eY6tGx0whdLZGiGNOSvCy1Nor5FT6ctvOepbS2XP4B3NOe8_xNlRLLzxiTrgYP3JYLmrnTjo0JaJH36F7NZH35wOF2qA0UhEE146xZLrdew1N5TPVH6QXn1OrhdQF6UBE/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteSbCkYQVfigTtOQrGWxe24CsX1C3uJXMaO7m2M2Shvk2h1hb_UH9oBjYMrt0dcSkbsUTz9RJpLNVoFlOc2OUJRGLiuuhnfVH8lP8SR3A_qoIIrbgw6fU9wkM7k5P1xV6xEfHBjooz0o/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjBlZX66_giPmZeUpE2l5oIB5XpwI8B8FUefDaybL-Qaw44VcW9VG44riwSHEkBmWHRWeK0begAhbkf1X2EbJY1tgKLZ8kWHvF7SvVS22iTpwHPoaL9jAKWpUdtJGgnaiWg2-rFtar7M/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzKIBQh024bwEBkjq9ePNuvcybSZGYmB2vSN6nlCSyvngo1fBPpsYAYecbbytLSJe_-_5r2HFXbYpMFOvR0c_KPG7l66T_T_l1kfdAeSvlpDIR4BEoPm06pTiw1NSZyorlqjHFIJ1rWo/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/AVvXsEj7-ySktGQlKoGFYZXXZh4d4ew3XhUHZ-E6F0gDbkzAftJJmsMqlU1MsaHcHnyRSWg4XmY19dAC_KAMXquMkwHvFPvkjNYmTHO1DDWSzSPQDHGELDdUqT4e3XaFQJX3eOg2SJMbBtMZ_OI/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGthIKqud-_Fuk0cEsrwl0UmfY8VP0oV4iraPjXnmZncerReNKPeu0LS-x9Fqs_SOQb_MVagVS2iaenH5x9dyaGi6REVAP2n1ArlmDsB4VVwVkjYam6wshRK7vZe3nCxK_xDe8nn2aY_Q/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPL5U7sVbBJho-POl96uMk-AUxVoxxFqMt4LNQnmSvV4X2-Lf-0j2HAycCEXKUIDleXuL5xcfJGWaFlbA-p8i8qcRwjXLu0Gkm8FLShUpmOv7xVrldePIX2aGnrplAGmlAmpgN-Tijzp0/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiInIRXqCW5hzn92pvUOS5fGGTWlV68n0O8DSpt4JcPkWTAnhs6Nutqqka8jP3RYl83MAabOo_uFIUeMK0lJvGkO4U63Eayd90pDb84GTsjy2gY5k42xCOj8VkhSlqDNh4vB6NTmter7I/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLaXnARurIQaXRbLY1azPQqe4_6Jd4ers2OTHq8RI-UWcwu1Xmym6eg9Ah55v96ep2SfrPquYhnXbnApw58ST-NpB1vfiWr8s73peRMwECq7OymJAO4a3p0E8BEAjrY-F8ss7ELsX8qo/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrxYL0IbmZ-kastg0trVMc2eEzy7KyU17GkikL1lhcyT6jACUkRAn9sg9DVtdQ1yXvNFLwbxwimV5ESfV9Rws0Mv73WN5-ICwk_YyCHIeRE9-6nX1ZZ4OfMO-wqKbK3eTMNXsy2DIq3M/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkaRu9RsTewLGpc5Y4M0v-ax6vvyDOvlH1gMXG-TuaPXrh1HpBoMJk_cxiRoOftDEyvpDBAcA0Xqh5TPPW1ehbLLNL0VqM0hyphenhyphenW7tYbyH_c2cpbjRpV3hZRHtHB1aOYuYMo1VQirqTNm5Q/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbJq2iUg0RQGAQhqewuB00KD0znkC8i6TRHcNbD1WUwjRM7SDn1byWqOOKrrh8JkUluJR9XU_nb27qMiGjtQHOyfZOC9diuZRFROmd6g2gCzbAsvR_ThxWv-gE8nwAuYr0UT_2gEaGsI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJwh_VbAnNTlPk6Id_X1hx8gT5HFwocCCvcE2JV_hbD8zYYrlNITh6UIjt6RnCkkZvAq2Gi2iU-CH6Go_bg3mQrP1j-FqLIlF6vUK0fChN8QO1udygPLQ0jySsagKLbOzLKAz1FIquXo/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGy9nnBK-LfGvI2WbL6ZKsKLJ4KVmk0MtTL5MxEV2Pj0eD7ECPXHNwdXwj4avoldBMUzYikfzpnwUZ30kmoatcLGBsJ2PfGjnWtXfJ3rYPZ_sEGsBLJ36xvgtccODdw4QsiCtmZOIfgo/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhyphenhyphen3OlKEEU2SZdJirKvMCZz3ZfXOPAmi4E_UGLVyn-BNZrjgzEoa8Q3XQHKc-_2hlezneKMy9iGnjHHB7NqgusK4gJFE7MbtWVqa2NMQF-maFyfT4HBz9E-LcwOyR6Pb295doQgP9jIY/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzgU-mkRGhUxNH_19r05xeLWCvNBkPI6twuDLppeQS9Ch2zFPmcvxaeudlRnRIwTz1G91-t5AI3wkjvbDNvKNz4_dfs1klty9MElqxeRAiOcJ2OTiIh-T6u6zN5wBW_ElqXxhVzoG7mM/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPL5U7sVbBJho-POl96uMk-AUxVoxxFqMt4LNQnmSvV4X2-Lf-0j2HAycCEXKUIDleXuL5xcfJGWaFlbA-p8i8qcRwjXLu0Gkm8FLShUpmOv7xVrldePIX2aGnrplAGmlAmpgN-Tijzp0/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrxYL0IbmZ-kastg0trVMc2eEzy7KyU17GkikL1lhcyT6jACUkRAn9sg9DVtdQ1yXvNFLwbxwimV5ESfV9Rws0Mv73WN5-ICwk_YyCHIeRE9-6nX1ZZ4OfMO-wqKbK3eTMNXsy2DIq3M/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-ySktGQlKoGFYZXXZh4d4ew3XhUHZ-E6F0gDbkzAftJJmsMqlU1MsaHcHnyRSWg4XmY19dAC_KAMXquMkwHvFPvkjNYmTHO1DDWSzSPQDHGELDdUqT4e3XaFQJX3eOg2SJMbBtMZ_OI/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzgU-mkRGhUxNH_19r05xeLWCvNBkPI6twuDLppeQS9Ch2zFPmcvxaeudlRnRIwTz1G91-t5AI3wkjvbDNvKNz4_dfs1klty9MElqxeRAiOcJ2OTiIh-T6u6zN5wBW_ElqXxhVzoG7mM/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>
<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/AVvXsEjHS-oFpUzrs8eY6tGx0whdLZGiGNOSvCy1Nor5FT6ctvOepbS2XP4B3NOe8_xNlRLLzxiTrgYP3JYLmrnTjo0JaJH36F7NZH35wOF2qA0UhEE146xZLrdew1N5TPVH6QXn1OrhdQF6UBE/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjteSbCkYQVfigTtOQrGWxe24CsX1C3uJXMaO7m2M2Shvk2h1hb_UH9oBjYMrt0dcSkbsUTz9RJpLNVoFlOc2OUJRGLiuuhnfVH8lP8SR3A_qoIIrbgw6fU9wkM7k5P1xV6xEfHBjooz0o/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjBlZX66_giPmZeUpE2l5oIB5XpwI8B8FUefDaybL-Qaw44VcW9VG44riwSHEkBmWHRWeK0begAhbkf1X2EbJY1tgKLZ8kWHvF7SvVS22iTpwHPoaL9jAKWpUdtJGgnaiWg2-rFtar7M/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzKIBQh024bwEBkjq9ePNuvcybSZGYmB2vSN6nlCSyvngo1fBPpsYAYecbbytLSJe_-_5r2HFXbYpMFOvR0c_KPG7l66T_T_l1kfdAeSvlpDIR4BEoPm06pTiw1NSZyorlqjHFIJ1rWo/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/AVvXsEj7-ySktGQlKoGFYZXXZh4d4ew3XhUHZ-E6F0gDbkzAftJJmsMqlU1MsaHcHnyRSWg4XmY19dAC_KAMXquMkwHvFPvkjNYmTHO1DDWSzSPQDHGELDdUqT4e3XaFQJX3eOg2SJMbBtMZ_OI/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGthIKqud-_Fuk0cEsrwl0UmfY8VP0oV4iraPjXnmZncerReNKPeu0LS-x9Fqs_SOQb_MVagVS2iaenH5x9dyaGi6REVAP2n1ArlmDsB4VVwVkjYam6wshRK7vZe3nCxK_xDe8nn2aY_Q/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPL5U7sVbBJho-POl96uMk-AUxVoxxFqMt4LNQnmSvV4X2-Lf-0j2HAycCEXKUIDleXuL5xcfJGWaFlbA-p8i8qcRwjXLu0Gkm8FLShUpmOv7xVrldePIX2aGnrplAGmlAmpgN-Tijzp0/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiInIRXqCW5hzn92pvUOS5fGGTWlV68n0O8DSpt4JcPkWTAnhs6Nutqqka8jP3RYl83MAabOo_uFIUeMK0lJvGkO4U63Eayd90pDb84GTsjy2gY5k42xCOj8VkhSlqDNh4vB6NTmter7I/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLaXnARurIQaXRbLY1azPQqe4_6Jd4ers2OTHq8RI-UWcwu1Xmym6eg9Ah55v96ep2SfrPquYhnXbnApw58ST-NpB1vfiWr8s73peRMwECq7OymJAO4a3p0E8BEAjrY-F8ss7ELsX8qo/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrxYL0IbmZ-kastg0trVMc2eEzy7KyU17GkikL1lhcyT6jACUkRAn9sg9DVtdQ1yXvNFLwbxwimV5ESfV9Rws0Mv73WN5-ICwk_YyCHIeRE9-6nX1ZZ4OfMO-wqKbK3eTMNXsy2DIq3M/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkaRu9RsTewLGpc5Y4M0v-ax6vvyDOvlH1gMXG-TuaPXrh1HpBoMJk_cxiRoOftDEyvpDBAcA0Xqh5TPPW1ehbLLNL0VqM0hyphenhyphenW7tYbyH_c2cpbjRpV3hZRHtHB1aOYuYMo1VQirqTNm5Q/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbJq2iUg0RQGAQhqewuB00KD0znkC8i6TRHcNbD1WUwjRM7SDn1byWqOOKrrh8JkUluJR9XU_nb27qMiGjtQHOyfZOC9diuZRFROmd6g2gCzbAsvR_ThxWv-gE8nwAuYr0UT_2gEaGsI/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJwh_VbAnNTlPk6Id_X1hx8gT5HFwocCCvcE2JV_hbD8zYYrlNITh6UIjt6RnCkkZvAq2Gi2iU-CH6Go_bg3mQrP1j-FqLIlF6vUK0fChN8QO1udygPLQ0jySsagKLbOzLKAz1FIquXo/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEGy9nnBK-LfGvI2WbL6ZKsKLJ4KVmk0MtTL5MxEV2Pj0eD7ECPXHNwdXwj4avoldBMUzYikfzpnwUZ30kmoatcLGBsJ2PfGjnWtXfJ3rYPZ_sEGsBLJ36xvgtccODdw4QsiCtmZOIfgo/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZhyphenhyphen3OlKEEU2SZdJirKvMCZz3ZfXOPAmi4E_UGLVyn-BNZrjgzEoa8Q3XQHKc-_2hlezneKMy9iGnjHHB7NqgusK4gJFE7MbtWVqa2NMQF-maFyfT4HBz9E-LcwOyR6Pb295doQgP9jIY/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzgU-mkRGhUxNH_19r05xeLWCvNBkPI6twuDLppeQS9Ch2zFPmcvxaeudlRnRIwTz1G91-t5AI3wkjvbDNvKNz4_dfs1klty9MElqxeRAiOcJ2OTiIh-T6u6zN5wBW_ElqXxhVzoG7mM/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPL5U7sVbBJho-POl96uMk-AUxVoxxFqMt4LNQnmSvV4X2-Lf-0j2HAycCEXKUIDleXuL5xcfJGWaFlbA-p8i8qcRwjXLu0Gkm8FLShUpmOv7xVrldePIX2aGnrplAGmlAmpgN-Tijzp0/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTrxYL0IbmZ-kastg0trVMc2eEzy7KyU17GkikL1lhcyT6jACUkRAn9sg9DVtdQ1yXvNFLwbxwimV5ESfV9Rws0Mv73WN5-ICwk_YyCHIeRE9-6nX1ZZ4OfMO-wqKbK3eTMNXsy2DIq3M/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7-ySktGQlKoGFYZXXZh4d4ew3XhUHZ-E6F0gDbkzAftJJmsMqlU1MsaHcHnyRSWg4XmY19dAC_KAMXquMkwHvFPvkjNYmTHO1DDWSzSPQDHGELDdUqT4e3XaFQJX3eOg2SJMbBtMZ_OI/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZzgU-mkRGhUxNH_19r05xeLWCvNBkPI6twuDLppeQS9Ch2zFPmcvxaeudlRnRIwTz1G91-t5AI3wkjvbDNvKNz4_dfs1klty9MElqxeRAiOcJ2OTiIh-T6u6zN5wBW_ElqXxhVzoG7mM/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
Thiết kế Web theo yêu cầu trên nền tảng blogspot, Rip template blogspot, kho template blogspot Pro
ReplyDeleteChi tiết tại http://www.thaiaiti.com/