Silder là tiện ích rất đẹp nó giúp cho blog bạn trở nên chuyên nghiệp và hấp dẫn hơn. Hiện nay có rất nhiều dạng Slider thiết kế web khác nhau đem đến cho các bạn rất nhiều cách lựa chọn, khi thiết kế slider sẽ khó SEO nên các bạn nên cân nhắc.Từ các dạng có cấu tạo đơn giản đến các dạng có cấu tạo phức tạp nhất. Mẫu hôm nay TEAM Blogger giới thiệu có cấu tạo thuộc loại đơn giản.
>>Comments - Thủ thuật đánh số cho bình luận trong Blogger
>>Comments - Thủ thuật đánh số cho bình luận trong Blogger
Nói đơn giản bởi vì các bạn có thể thỏa thích tùy biến ở phần CSS để tạp ra các hình dạng và kiểu dáng khác nhau:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)1- Đăng nhập vào Blog
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin> .
.oapslider {width: 520px; margin: 0 auto;}
.pika-thumbs{ padding: 0 16px;}
.pika-thumbs li{ width: 144px; height:74px; margin: 10px 0 0 17px; padding: 0; overflow: hidden; float: left; list-style-type: none;padding: 3px; margin: 0 5px; background: #fafafa; border: 1px solid #e5e5e5; cursor: pointer;}
.pika-thumbs li:last {margin: 0;}
.pika-thumbs li .clip {position:relative;height:100%;text-align: center; vertical-align: center; overflow: hidden;}
.pika-stage, .pika-textnav {width: 500px;}
.pika-stage {position: relative; background: #fafafa; border: 1px solid #e5e5e5; padding: 10px 10px 40px 10px; text-align:center; height:250px;}
.pika-stage img{height:100%; width:100%}
.pika-stage .caption {position: absolute; background: #000; background: rgba(0,0,0,0.75); border: 1px solid #141414; font-size: 11px; color: #fafafa; padding: 10px; text-align: right; bottom: 50px; right: 10px;}
.pika-stage .caption p {padding: 0; margin: 0; line-height: 14px;}
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOzefsRExBms54iEI5zrk9c0pC6H_pCcyChOhdLEuJpI8zgGuE3SKP72i8PBp6JCVHkyInHm317psb6mT7cqmShUlejqWZCwCQXrWz17GVIgSUFwMRbtKlcJjVUFKeVYHOa3H0F_L-ibv/h120/prev-namkna-blogspot-com.png) no-repeat left 45%; height: 100%; width: 50px; top: 10px; left: 10px;cursor:pointer;}
.pika-imgnav a.next {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ZsV7XuZoAunART278V2Owe8hIrUROx1aBlo2xxMWS2MpuwoFGuMEaMYROpMHnIDKULsWnYp982N2AeFzZD1BwPmoIlrBu0LkyQ2cG0j2RUYfY418auqTGfeYKjO111D0ZZauA33sjYhp/h120/next-namkna-blogspot-com.png) no-repeat right 45%; height: 100%; width: 50px; top: 10px; right: 10px;cursor:pointer;}
.pika-imgnav a.play {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglI5nLNQAr-UBSJ8BYsL8Sa1DmPJKfO9FAP6xwHTIG8P8ammmYpCrImr_JokzanMK7rCB17lHiQ6vWLSb51Q974Yl5O-HNFr8P9cYpI82iogm-1REmnUVkog8DCuOhv1Gq7gPWbBmLV0QD/h120/play-namkna-blogspot-com.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuBp7aKj_JJSlpAeyJQquYPeAWtMyO9oMS_iD3rzLrOl90q9TBiKXUIP0fxAigv5P1_jLSo-_JVjRiwW8fVxvqdcSk-iVznThaqF0K7VQELR24yXeTh1eX1R5s41q3qiSAh7umV8UhzWfZ/h120/pause-namkna-blogspot-com.png) no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}
.pika-textnav {overflow: hidden; margin: 10px 0 0 0;bottom:10px; position:absolute;}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}
.pika-tooltip{font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter{position: absolute;bottom: 45px;left:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}
.pika-loader{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaOwaq26ZIlGdcfzUJxIUm_jne2tQixXmQCzLjwpGIOJpPHjeqmh7BFncQw5UkgugMqLQWKbqkv1XPo3RoTcE7oPPcoim3uOlYh7gA92nl9kwsdKo2x7gwRwePosQ-7QkUSFWHAulzhn-2/h120/ajax-loader-namkna-blogspot.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px; text-align:right; position:absolute; top:15px; right:15px; }
.jcarousel-skin-pika .jcarousel-container-horizontal { padding: 15px 20px; overflow:hidden;}
.jcarousel-skin-pika .jcarousel-clip-horizontal {height: 90px; width: 485px;}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}Trong đó:
- width: 520px; Là chiều rộng của cả Slide.
- width: 500px; Là chiều rộng của hàng ảnh bên trên.
- width: 144px; height:74px; là chiều rộng và chiều cao của từng ảnh trong hàng ảnh bên dưới.
5- Thêm đoạn code sau vào trước thẻ </head> .
- Nếu blog bạn đã có file JQuery.min rồi thì bạn xóa đoạn màu xanh đi nha,<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.namknaslider.js' type='text/javascript'/>
<script language='javascript'>
$(document).ready(
function (){
$("#pikame").vqaslider({carousel:true,carouselOptions:{wrap:'circular'}});
});
</script>
6- Lưu mẫu lại.
7- Vào bố cục (Layout) => Tạo một tiện ích HTML/Javarscipt và dán code dưới vào.
<div class='oapslider'>
<ul class='jcarousel-skin-pika' id='pikame'>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWglSd5yaSwRintdk5U34IYIECssqyq-JJ9vDtywBkoAOTfUm3Pcrx-8fwGd2P4tyF6wKWYqquQTL1Y5Op-5dT5ZpMb5Wj3fMej4MRFya-YeaoHNI2jz_nWEAJV5UTO1vrq2dLWGgP3rTU/s1600/slide-1-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 1</span></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLG6vrLdXVMbKT_vtlO0_iciPU872Q_5Ec5Y7tMbmi7v95da9w4ipO5H0e-1NqLSMmBM3sTdLzu7X2KCHptpnfLYTrHVTYsrv6AhaECDv1Pwnrr4Mg6q4M4-w6bUfwYELW-I91MNxepQhyphenhyphen/s1600/slide-2-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 2</span></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXB4bK-2WCouqTrpXLoPJMBMEXJbk-oqwfdMnTCIxrw48LGJ7fq0VzCgau34cmoD3RJCWJWlhBHRmxw9o_lmssMYkp7Sm8YXDmBt-CnlDV9lCLEryIvD7JUeN6q0lXjVMnbGitNaIuG5t0/s1600/slide-3-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 3</span></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMeBm75CYyy6uuI5vdeDTxT3xISdUdsfT8y1oqhib2q9JxUS5V4JNpBUDjBmEQ2ZgDDijRQgq5imFrpj4Eeg5CCArgc0n3PtkpWl1ug5i-o9C8rDI62tu978teVxNi6DUid4ZBBNjqJTns/s1600/slide-4-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 4</span></li>
<li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMeBm75CYyy6uuI5vdeDTxT3xISdUdsfT8y1oqhib2q9JxUS5V4JNpBUDjBmEQ2ZgDDijRQgq5imFrpj4Eeg5CCArgc0n3PtkpWl1ug5i-o9C8rDI62tu978teVxNi6DUid4ZBBNjqJTns/s1600/slide-4-namkna-blogspot-com.jpg'/></a><span>Tiêu đề 5</span></li>
</ul>
</div>Trong đó:
- Thay dấu thăng màu đỏ # là liên kết tới bài viết hoặc nhãn của bạn.
- Thay 5 linh ảnh thành 5 linh ảnh muô tat cho bài viết.
- Thay tiêu đề bài viết 1 đến 5 thành tên của bài viết tương ứng với mỗi link bên trên.
8. Bấm chọn lưu Lưu mẫu
Đăng nhận xét