Cách tạo Slider bài mới nhất theo nhãn cho Blogspot

Cách tạo Slider bài mới nhất theo nhãn cho Blogspot. Slider Blogspot hiển thị bài viết mới nhất theo nhãn(label) cho Blogspot, Hướng dẫn cách tạo Slider bài mới nhất theo nhãn cho Blogspot

Chào các bạn hôm nay Bít Tuốt xin chia sẻ với các bạn cách tạo một Slider có ảnh và tiêu đề mô tả bài viết mới nhất theo nhãn cho blogspot của bạn. Điều đặc biệt của slider này là tự động chuyển các bài viết theo 1 thời gian cố định và hiển thị số bài đăng ra theo nhãn mà bạn muốn hiển thị trên trang chủ của bạn.

Đọc thêm »

Read More

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/AVvXsEg2Vx8ujWi-lwErUUGjIAGs_isP9ia_wyKvgShgDs_WFQ6PMQPk7t-l5h3ttcf5y4Pa00Yd_3di-emTN9RLO2A-YthbqLxGxxV7u75utmqDhtxWOcf03ujKLL5o7gPz1SOD2l1nkDTaLFY/s1600/12.jpg"/></li>
<li data-images="rm_container_2" data-rotation="-5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBwf_HxTITb_c4kY6a-LF5LVDfQU14c-rmwaxLd6QWybljtxF4-rWsyyKQZx0S8yQII3X1_uBCQ73cIKukbyWtKqHFl7LtmtnfHDu_E-N4FFk2JyzhvFNJOilkPzOwYxGiCBVpC-l6qEw/s1600/13.jpg"/></li>
<li data-images="rm_container_3" data-rotation="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju4D7S-a3Fm6zzICDPTW-fV8SL4GNrsONiLIchijsB1hh2tFeUZKtSVXw4DXnBLlxdsTdFubwGmRXIuEKC500w4WC7JyTSkRBHkMwIS2cl-wABHyTEdrLzkhZbYgiZc0UrN8gJA6L3kCs/s1600/14.jpg"/></li>
<li data-images="rm_container_4" data-rotation="15"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaZx2gB8Mqokb52hSrUqoTX8GH2S-p4IiDzvL7Fvc1-1S7Dw3isT7jcQmfwjrWZ2lglCdGyqR-759gJFIEiLGbSBuSu8kUDNaDVcGz2hqWPlBD-4aih8PgkhvP7jS0hITflRmgmCpGVCg/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/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqmEcaLfOh4IW2eVowJtdLusjkDFS4TIVgHYv2omEcSaNmchNaPiYmrFUXC-MfuHktAO2DTDaJQBqMbV8sfsbHZ7CXHtsuBBWa8dRxZch5s4FwNzR7xb7Id_SHWxyLSfRfxQ_joZmaIb4/s1600/11.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEBytZKPBZcvxmxHK4VPEh54x09Ju-cj-aAYQaq3_4XBFPVMFMs1YqBH6VUSMjq17Byg-v9q_0AMDAFOauASLGY8uwZYYSFQSeqgiSoMuZwj2avkP4NTYxbU2qT1eyaSCqBsn1vYB_pw/s1600/9.jpg"/>
</div>
<div id="rm_container_2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rr9WGqji1uRWGK-TP133ZhB4x82MgSdcEvki2tTkTYo3PDCSs3bfadV6mFOsDBwF7sK0lCRs7q0jKEMCy1xudnlh-ZKOUxk0w6wNSOYZO8-Rna_G3zskp0rfZ2r0Q1DJ1yRhEw8camY/s1600/8.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuZfrFMC1rl_3SHPtzCzk3ZHo3YBhZhw31xkU-_V2K2UFcR2_PUkUePBm6kaRS131JCFCDsM7WJGkB6kn4-_7dW-fVhfG6eYB0Jy5yf_c5RCKocPYswJIKR_BUtTSwOTKHXUkCxICZQms/s1600/6.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZCsWRp23PTp-EEgMyrqHaeuV6PHAz0to-WT5reXZk960nZNG3020XLznA9PPtqoscHFxMW-4q0p3Xc3coHUTXmLqFZ0eNaQylqPXTDso7WwqXnnMLzRzpX_qfViwqClM5gJnoDKefEk/s1600/5.jpg"/>
</div>
<div id="rm_container_3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA49PpB3vY2afefeldMdNx8KUtbY-VWu0HrC8UnsI7Hl71u9g1QAhvBu0n_E4qkWrehq9QOVyUFbMc8SRFIqkUI0zLKGQ8toWfQ8RUFPfY_c4QJtDS7-knkybqz4wwcOBXQ4OsT4aIJM/s1600/10.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhprarHCTVsU1TtzPMjgbJ_bXDfqZUxWgHWxQdFBmpd5LhAX6KXcrCdGfVdvUpK9741RGvpah6wFaW-e3Kyyphg-cDCSQNGs-Yy5QOxcDKs08DaDp98SmS8XswwHWTx-tAhaMigJOO-ps/s1600/4.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYXvSrxr1Eg1NAsOUwtwswjRZ5ptEHheoDe6LlGH9cjtOt6tmZL0mdlS_VGl1fe5V1z2JkNQCsSb_vfEj8SQKPmvm2OuiHSBjIA_S1T_E1Xn1dH_zsFTkzztEb8urjbI4PbppfF7rpU8/s1600/3.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/s1600/2.jpg"/>
</div>
<div id="rm_container_4">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiks9zKvHwb90l0Cp1B1Nz0KIw6RVTny6G3ZAqV3WwfrJRnoQpMzCSc_rTG7Vkoq-xU5iUyLhJBZc_1JTbyOleng2aGRrUowmY1EGHixdK6f-toTIDXQfs95SPqoLl6pPL2sign43gYuGE/s1600/1.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtnTLEpzURNRB703j_QI4Aqk6k6_fMAeass0KWY_R-OG9XcxtNX04NDUIYlhlC6zAWih9m0uHwX8jRNkuxrb_uCpGXcWj-5tbyLv0mQLlgLKQJn7b4vPT9HG5sTKdv-sxwnoMOA34MuRA/s1600/7.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhth6HnJoLmH8gOBotDKPWoWvxoZqa2aQEUJra8ZacJ9HfhShaPJgolIn0tpEC-vLkFkoiocNpeuTwXX-cAPnv5tlfx9njsU8cGhnpCHS9_hJLg5wFttElUIahKJEYsU4lNf_1_lB1wLoY/s1600/16.jpg"/>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNV8Oo8-94tAk2p1aCoj0vagWZ35AnxrJeWRAzYXLeLLKK54TdzOqm2WTpkab3l8jkKo3F3B9Q4rcixI8ToGpptAKhAfspGVGxtmm0qaC-snQfbJZ3-yafi8CYaI1YeOod0uAa1K9WFdo/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

Read More