Cách tạo Silder - thủ thuật Manhhaiblog

Code Slider đẹp cho web - blog thời trang. Sau đây Manhaiblog 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="https://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/AVvXsEguOqt3sWg22rtKoYArNkVjeRNw5bjbKHwmw6nd6Ej25GAwK8_QanOobHG_LKJMWX2rpIx71RoQcru42iLQDGmcwlycyBW0586Pc6RYoGo21nEdHc3BJNHF0RRYUsdb79pNwpnYUYQGLWo/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifrqROkNblxqVZJFlUYZdqpdIbj7CzXekjFyD1Yx7mfomfMEre15HmvqNQJqxbb7KMj5dVScXiZIUpJKas-ACq4ZGF5XXElKvIt0UY6Rh_R2I1EU5yv4secIfb0yQK0L1WXxVgsFxMvxA/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhnMYviIpRAb8Ji_Nud3CYzY6ua61R2mwpf5IAETiVz9Za_Bm6Ef1h2JpwlfpNqZQqi_JPg91kmeCnpsPk0J92OgMdVsJIVhhKAc_dWbMQAKf2G4Qm1TPejENJ3bE1ylKxSj15F4aIGU/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfteQZHNfblCdnD_q2OThr03UkzlgUG0xweLR6Qn5xMRuHma9KXZ-hbk796sK9HpIZGokanNU6_NnmWI15Q71U2LIWQHNgaBVwYlPWEhXi9q3oTA_nhNMyW0MEitPy6BKjRH3ICxDulOU/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/AVvXsEjVin1xJKfWDE5uXPZUVg3zzQHrUc2i5Ana848uFVTECchJ8rRgQKYTf450vcRWxNA_2OFIkWsv_hXU_u5YZL8DTxgZwloQRtcPE0AaqEKugxmqZQWfHk59ViY89DAL9wsvAD9ZABI6M1c/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbbtQKYQ1P01bPx9C_Ap5GzxpaOs8H3we9wHyRsZoBwCnORRZ83UB-H9vz5MwmCyzEWurUyilgQZJN3Ado3bqNbfd59RYVqak16vqWIKVXtlO3sC2CSErSMJqJXcjVlLpJa-k2FS5zkI8/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOftKs-kg67pWSPFeW2LMcxqDxKBdkpMJdVZ2zfWdXnG9-sPcyo0yJWktruRTVAviN7mPVOngsOeWAJhUBwwpXEzFp1I8aGVThQ4tiAV4NXSx0-bT_axmC7NDkBwrTDnM2hjTz-wBkFZc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfxY65fxnItBtjHLsYuoqYFFv78k46NxYn_GaRWJZMQCoyQYNk_LGP1OxpoVNAc7L7hJunNa4IYD7_ZC3wTyF7ZHIXp9lrvAE-RSyufqkNxsUHSrEHjd2KcO8hv5vZcB9APm5sbAqZVj4/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53tiMWMgdWJy3lAp6wiByZsswH0r5kLkb4Dr2GL8l3HoxwE5ADrZEo7RsBmHMtXwnUuoNO6hvN4ZyJZPndl3Nw4S_UrjxTAm7ifxc5CIdksy0UslFhing0CP9jaAoSQT_Cu5XLKo8-zw/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvN2bLUedft-iqQn7v1NhFGH-9DDqk3mT1XUPHk6S3R7SLBp9akwQfMq4sgEc8CY67nMp_5gB4bPE2QQvaG9pEGAYb-RVAFKhpsJC5fEHIPvsec71NlcOYG0mN1bDtd_3r74tnqcEZqg/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifYVhFunw5u5W3iAfCJuVbfzi19HFAigNEYC6ppH_qjw5EuzYl44yq04O-NRsYAiZ2BW1gHRvKejMt3PEwzdqIEREcxFx4iUhgUk4jfFykZ_tJMdkye4HVMy8UMIxmNOwl-ixAaU-G7hg/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKw98HWq7erWhe5Gz0WY-kL3iX1v05Qmbare4iZhMy_NF9arkx6WXfJhCRMZrQV_-GcTlVnATr6x_OpXCpCvSYYg7qoSYvc0n6rQzDaYoqB1mMDSi1wpLU-JESrAJGOQGYLbfc99x3cxU/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddxF_WF26tsbZ69xad-eLNTUW7yZ24HBFyRiMJiB_Rgk3P-US9X1EHagvRtaS2vvI8S2GItdsTglxWndN9IhyphenhyphenD9bKRntKg9mpYIQJhWQlryfzgWa-BDzvJ2I-q66wPquDdRLFuyDvPXQ/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghupPVVb2lKQe1Nk_OkyeOxgwawyFCD47T1PSWhLars0XHTc6scTWRt8jrsOak7b_WiI972CaCk0I738Edx9vjK1bt2wPzx7_LgNq2l4D3YU2uj43nJ7byq_PluaViFCIDT1d50t3EQAo/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT92OgMmGvbCQ3jsZXmVY7NZfqat7nlageJfOIGAO8_UuiACxpFJ_rc00lAKLHpWqhKT-c5jDvrF2B9sZ67bVqaBbMzXMY3iECfZbWf3jLsxJpCfnJRvbFMyKEI0zQjaxNALCcZN88-Pc/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTK5qtBw4crT4Sg5jdpw3JTfuMNSHtY6L_GFSup9EBL7Y0pc02IvYgX9wvuZXbb_2KvtM4uUU2gpMxDKRNjUXeAoCLkmdPGzsVHBSSbk7BgSgLPZAiuoATYxU9Tl8pkNm6R1SaUDs85E/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOftKs-kg67pWSPFeW2LMcxqDxKBdkpMJdVZ2zfWdXnG9-sPcyo0yJWktruRTVAviN7mPVOngsOeWAJhUBwwpXEzFp1I8aGVThQ4tiAV4NXSx0-bT_axmC7NDkBwrTDnM2hjTz-wBkFZc/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfvN2bLUedft-iqQn7v1NhFGH-9DDqk3mT1XUPHk6S3R7SLBp9akwQfMq4sgEc8CY67nMp_5gB4bPE2QQvaG9pEGAYb-RVAFKhpsJC5fEHIPvsec71NlcOYG0mN1bDtd_3r74tnqcEZqg/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVin1xJKfWDE5uXPZUVg3zzQHrUc2i5Ana848uFVTECchJ8rRgQKYTf450vcRWxNA_2OFIkWsv_hXU_u5YZL8DTxgZwloQRtcPE0AaqEKugxmqZQWfHk59ViY89DAL9wsvAD9ZABI6M1c/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiTK5qtBw4crT4Sg5jdpw3JTfuMNSHtY6L_GFSup9EBL7Y0pc02IvYgX9wvuZXbb_2KvtM4uUU2gpMxDKRNjUXeAoCLkmdPGzsVHBSSbk7BgSgLPZAiuoATYxU9Tl8pkNm6R1SaUDs85E/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