banner

Trang được xây dựng với nội dung giải trí dành cho tuổi thơ, giúp các bé hiểu biết thêm về ngôn ngữ, lịch sử, sự vật đời sống... thông qua các câu truyện Cổ tích, Truyền thuyết dân gian, nghệ thuật vẽ tranh, hài hước... từng bước xây dựng nền tảng trí tuệ cho bé. Trang cũng dành một phần nội dung cho bậc làm cha mẹ như: Đặt tên cho con - Tưởng dễ mà khó, sứ khỏe, nấu ăn, bài thuốc hay... Chúc các bé cùng phụ huynh thư giãn vui khỏe! Bé nào muốn có tranh, video, vui cười... muốn đăng lên trang này, nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt nội dung trước khi được đăng nhé!
Bài ngẫu nhiên
Bé nào có tranh đẹp, video hay, vui cười,... muốn đăng trên trang này thì nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt trước khi được đăng.
23 tháng 7, 2013
Trang chủ > THỦ THUẬT > Thêm Slick featured posts Slider từ Jquery cho blogger

Thêm Slick featured posts Slider từ Jquery cho blogger

1. Full width-. Slider có thể mở rộng ra toàn bộ chiều rộng của blog và dễ dàng thay đổi.

2. Tự động và di chuyển bằng tay -. Slider có hiệu ứng chuyển ảnh tự động, các slide sẽ dừng lại khi di chuột vào Slider và độc giả sẽ có tùy chọn để di chuyển ở tốc độ của riêng họ.

3. Có hai cách để di chuyển -. Chúng tôi muốn có Next / Previous nút cổ điển nhưng bên dưới Slider cũng có các nút chuyển để bỏ qua bất kỳ hình ảnh.
4. Dễ dàng chỉnh sửa - Các mã HTML cho thanh trượt có thể được truy cập thông qua trang bố trí hơn là bị chôn vùi trong bản mẫu.


Vì vậy, trong bài này, tôi hướng dẫn các bạn cách thêm thanh trượt mới này vào blog của bạn.Bạn có thể nhìn thấy một bản thử nghiệm trực tiếp của thanh trượt bằng cách làm theo như dưới đây:
VIEW DEMO

¤ Thêm Slick Featured Posts Image Slider với Jquery cho blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.) - Dán code bên dưới trước thẻ ]]></b:skin>vửa tìm được.
<!--New Featured Slider -->
.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhASqVc1AndYmsJm08qrbUMcdK1xWhI_o5nZSaqpARQlfMr-Wyltval2Z3jlQyzxn7c5KrQUqdOWjfoo1UvAFOrnggDdvXtG49rDNVF_dPsQ1q-w7j86qN0hr6xA-yh7fXgFmgHk3fjHuTq/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd_HbHy2OXr4W_bn-H46IrXc1np0_Uhb68b9QHL755TIA7Q0rx2-pmf9bmLjbK-47cEnU2XIX9RhAQOQHv07asq4PmnV9i02q3aLLuZL2UuzV4KZhY6bEQm_bYxnSmSqtpHQPtMsBYnZeU/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDh9KvhfcdlFeOvoaYbQ0sHOG50NqoI2Du4r2p-QRKuWWVpaHNO2XTjmHb8qhd7ItQN0CAu4MRBawEKwjGeSE57w6oivlNbp0t0HIEby14O9Ultrk98Qj0s_vO16zsSBrz71V0Ks1ZmiEq/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuxp5e4J6lxg6oXro45VexDOHYBo6-IDNmO9cgSDKv-WCxAnV2fBPBAhHnqHWoAAE8Fd5kZzNSL8hek6GzLv4RU0FCwnl0j1rU-qod1RxvainzuJduLYbWNLZOo3jMMG6BgosxJ9FJYhDS/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!--New Featured Slider -->
5- Dán đoạn code bên dưới vào trước thẻ </head> .
<!--New Featured Slider-->
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {
opacity:'show'}
,
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
}
);
}
);
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
}
);
}
);
/* ]]> */
</script>
<script src='http://yourjavascript.com/3304001418/slider-code-3.js' type='text/javascript'/>
<script src='http://yourjavascript.com/0412100943/slider-code-1.js' type='text/javascript'/>
<script src='http://yourjavascript.com/3060311041/slider-code-2.js' type='text/javascript'/>
<!--New Featured Slider-->
» Tùy chỉnh:
  • Nếu blog của bạn đã có thư viện Jquery rồi thì xóa đoạn màu xanh đi nha.
  • speed: 200 là thời gian chuyển giữa 2 ảnh
  • delay: 800 là thời gian hiển thị của mỗi bức ảnh trước khi chuyển xang ảnh khác.
  • pause: 1, khi dê chuột vào ảnh slider sẽ đứng lại không chuyển động nữa. Nếu muốn tắt nó đi thì sửa thành pause: 0,
  • Ở trên mình sửa dụng 3 file javascript là slider-code-3.js và slider-code-3.js và slider-code-3.js bạn hãy tải về và upload lên host riêng để dùng lâu dài nha.
6- Lưu mẫu lại và tiến hành bước tiếp theo.

7- Vào Bố cục (Layout) => Thêm tiện ích (Add widget) => Chọn HTML/Javascripts và dán đoạn code bên dưới vào.
    <!--New Featured Slider From http://namkna.blogspot.com/ -->
    <div class='fp-slider clearfix'>
    <div class='fp-slides-container clearfix'>

    <div class='fp-slides'>

    <!-- Slide 1 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='http://namkna.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKf-NSor2N8x7s0C1M2L6g7f6rCgKWXKXHT6fuH90FQuJNwpCvQD1WIgG7mBMrjGFgl58L0H6SAQCDlcA6lOEcjrAtdS5OH1EtNmVRItbuWhRQNF4_8rZXJVXd-qAdGQswygmkHyKx3g6/s1600/spice-slider-image-1.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Place Your Title For Image Two Here</a>
    </h3>
    <p>
    Write your description and information for the first image here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </a></a></div>
    </div>
    </div>
    <!-- Slide 1 Code End -->

    <!-- Slide 2 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='http://namkna.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLPzx-n7F3SZW947rejg4lKMjlhLPSeJjuGDsJzCDHBsC_FpYK5z0acGIpTFkUbBGsiml_gR5WfZjIMNqwvoZS08vjt890elpq1WnpSXEQbHa6TPcXQy5qzNuLXIk18KOaMCjUf7oeOq6i/s1600/spice-slider-image-2.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Place Your Title For Image Two Here</a>
    </h3>
    <p>
    Write Your Description For Image Two Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </a></a></div>
    </div>
    </div>
    <!-- Slide 2 Code End -->

    <!-- Slide 3 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='http://namkna.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTBVyOEwMTsP6jqilCIEq8fQInnMwESe9xtu3GYf08xsuCLd2zPfE8U3O03HxHjEO9W90RXt1-fiTqWJUpsNE9hdJo-f1HnL-40cOeD-3At4OWlkQaRDwq_kReajO3N90U7TLDHxoUixT_/s1600/spice-slider-image-3.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Place Your Title For Image Three Here</a>
    </h3>
    <p>
    Write Your Description For Image Three Here.
    </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </a></a></div>
    </div>
    </div>
    <!-- Slide 3 Code End -->

    <!-- Slide 4 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='http://namkna.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6EjoC2Ofy_hEpSWgbnX3B6MKjw6QL6WIOHmmmUD_LZnKgP00bW-jU4Ns4d13VrgpyLdxkVXcCQ4D9WyPZ5Ll50EbgTk2oN9Qr5Hm5NKi8B39kasxTbAXeIbfmN0SdeOjbdgy6b7gxzZ4n/s1600/spice-slider-image-4.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Place Your Title For Image Four Here</a>
    </h3>
    <p>
    Write Your Description For Image Four Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </a></a></div>
    </div>
    </div>
    <!-- Slide 4 Code End -->

    <!-- Slide 5 Code Start -->
    <div class='fp-slides-items'>
    <div class='fp-thumbnail'>
    <a href='http://namkna.blogspot.com/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qpR1H9hDf2G5X6mJV8DnRaRdW8zo8ensh88hwakuh6kh6WBF1v01tNDo_xyW5DltFZNB-x0mb9hkWhCV7Ra17EOtPPZVruYx3IYeOlVyHFoJYKpOPdTn0HwgPbnZGfntb3dOmvimbbRF/s1600/spice-slider-image-5.jpg"/></a>
    </div>
    <div class='fp-content-wrap'>
    <div class='fp-content'>
    <h3 class='fp-title'>
    <a href='http://namkna.blogspot.com/'>Place Your Title For Image Five Here</a>
    </h3>
    <p>
    Write Your Description For Image Five Here. </p>
    </div>
    <div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
    </a></a></div>
    </div>
    </div>
    <!-- Slide 5 Code End -->

    </div>

    <div class='fp-nav'>
    <span class='fp-pager'/>
    </span></div>

    </div>
    </div>
    <div style='clear:both;'/>
    <!--New Featured Slider From http://namkna.blogspot.com/ --></div>
» Tùy chỉnh:
  • Thay http://namkna.blogspot.com/ thành URL blog hoặc bài viết cảu bạn.
  • Thay dòng Place Your Title For Image Five Here thành tiêu đề bài viết hoặc bức ảnh của bạn.
  • Thay link ảnh màu xanh thành link ảnh của bạn.
8- Lưu mẫu lại và xem kết quả nha.
06:14
Người đăng: vào lúc 06:14
  • Nhận xét bằng Blogger
  • Nhận xét bằng Facebook
Item Reviewed: Thêm Slick featured posts Slider từ Jquery cho blogger Rating: 5 Reviewed By: PHÙNG BẢO KIÊN