Thư viện

Sự kiện

Chủ Nhật, tháng 7 07, 2013

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

Slider khá nhẹ và dễ dàng để chỉnh sửa vì vậy khách hàng có thể nhanh chóng thay đổi hình ảnh và liên kết. Đặc biệt có hiệu ứng từ Jquery nên rất mượt mà.

Chia sẻ:
Trước đây namkna đã giới thiệu đến các Blogger một số slider hình ảnh khác nhau  hoặc bài viết mới với tính năng của một slider trượt. Hôm nay namkna tiếp tục giới thiệu cho các bạn Slick Featured Posts của tác giả spiceupyourblog , Slider khá nhẹ và dễ dàng để chỉnh sửa vì vậy độc giả có thể nhanh chóng thay đổi hình ảnh và liên kết. Đặc biệt có hiệu ứng từ Jquery nên rất mượt mà.
Slider: Slick Featured Posts Image cho blogger

¤  Những tính năng của Slider:


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("http://3.bp.blogspot.com/-T2u14ZkViVc/UDVDYSb6qoI/AAAAAAAAA4U/xgSh7zYVwGY/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/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("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/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("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/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.jsslider-code-3.jsslider-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/ --> 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <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="http://4.bp.blogspot.com/-LFb-cS9tI8Q/UWgJtdGn7nI/AAAAAAAALYE/otSeRtUYutk/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'/>
    </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="http://3.bp.blogspot.com/-8IlLRAqMWx4/UWgJtijXkgI/AAAAAAAALYI/HrefDvHYqa8/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'/>
    </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="http://3.bp.blogspot.com/-M3aVVXPdNtM/UWgJtgOIbPI/AAAAAAAALYA/TGsigrwxD1o/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'/>
    </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="http://3.bp.blogspot.com/-20aaiHxLnNQ/UWgJuEf0JrI/AAAAAAAALYU/34qAJSeKnPg/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'/>
    </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="http://2.bp.blogspot.com/-jJLMd6xIRVw/UWgJuBDFaEI/AAAAAAAALYQ/0o21Xx_O-FQ/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'/>
    </div>
    </div>
    </div>
    <!-- Slide 5 Code End -->

    </div>

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

    </div>
    </div>
    <div style='clear:both;'/> 
</b:if>
    <!--New Featured Slider From http://namkna.blogspot.com/ -->
» 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.
  • Đoạn code này mình chỉ để hiện ở trang chủ nếu các bạn muốn nó hiển thị ở tất cả các trang thì hãy xóa đoạn màu vàng đi. Hoặc nếu muốn nó hiện ở các trang khác thì bạn chỉ cần thay thế đoạn b:if màu vàng thôi. Để biết các mã lệnh đó bạn có thể theo tìm hiểu thêm ở bài viết này nha: "Hiển thị Widget ở những trang nhất định trong Blogspot".
  • Thay thế các đoạn mô tả màu đỏ thành dòng mô tả hình ảnh tương ứng trên sidebar của bạn.
  • Thay thế các đoạn tiêu đề màu xanh thành tiêu đề của hình ảnh tương ứng trên sidebar của bạn.
  • Thay thế các link ảnh màu tím thành link ảnh của bạn trên slider.
  • Thay thế các đường link màu xám thành link liên kết đến trang bạn muốn tương ứng với mỗi hình ảnh và tiêu đề bài viết của bạn.
8- Lưu mẫu lại và xem kết quả nha.

43 nhận xét:

  1. Nam ơi, bạn có rành Javascrip không. Mình đang cần edit một đoạn Javascript nhưng không biết cách làm. Nếu có thời mong bạn chỉnh sửa giúp.

    Trả lờiXóa
    Trả lời
    1. bạn cứ nói về đoạn script đó đi có gì mình sẽ giúp.

      Xóa
    2. a nam chỉ giúp em sao cái slider (chỗ màu xanh da trời của em nó không hoạt động nũa vậy anh,)em không biết đụng vào cái gì mà mấy cái slide nó không còn cái nào hoạt động hết:
      website:http://www.thethaoonline.info/

      Xóa
  2. anh ơi làm sao để hình có hiệu ứng giống như trang Này

    Trả lờiXóa
    Trả lời
    1. Ý em là hiệu ứng gì link của em lỗi rồi.

      Xóa
    2. no' nhieu` hieu ung lam' anh trang Trang này

      a xem dùm trang em với nó bị làm sao e làm cái Slick featured posts
      tự nhiên mặt cười đi hok thấy hiện nữa Trang này 

      Xóa
    3. Do xung đột Jquery thôi em ak. Mới lại template của em lỗi rất nhiều ở sidebar đó.

      Xóa
    4. anh có thể hướng dẫn em sửa được hok anh lỗi toàn bộ luôn :((
      Thank anh

      Xóa
    5. Tất nhiên là được tuy nhiên trường hợp của em thì chỉnh sửa lại template gốc mà em download trên mạng về sẽ nhanh hơn.

      Xóa
  3. em gửi anh cái template gốc anh làm cho e cái Slick featured posts Slider với cái recomentbar xem có lỗi hok nha anh

    Trả lờiXóa
  4. làm sao chỉnh ảnh cho nó hiển thị chính giửa trang anh

    Trả lờiXóa
    Trả lời
    1. Em sửa:

      .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;
      }

      Thành:

      .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;
      float:center
      }

      Xóa
  5. thư viện Jquery là gì vậy NK ?

    Trả lờiXóa
    Trả lời
    1. Thư viện jQuery là một Javascript Framework, hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất.

      jQuery được khởi xướng bởi John Resig (hiện là trưởng dự án của Mozzila) vào năm 2006, jQuery có mã nguồn mở và hoàn toàn miễn phí. jQuery có một cộng đồng sử dụng đông đảo và được rất nhiều lập trình tham gia hoàn thiện, phát triển và viết Plugin.

      Hiểu nôm na là như vậy cô ak.

      Xóa
  6. cô làm sao hình không di chuyển được cháu ạ . vì bài viết trong entry cô dùng hình nền. nên cô lấy linh hình anh ở trang blog ảnh cô cho vào . như vậy ảnh và tiêu đè bài đăng không cùng ở trong một bài viết . có lẽ lỗi tại đây chăng? nhờ cháu chỉ giúp?

    Trả lờiXóa
  7. Cháu vào gmail lấy đc blog . rồi làm quản trị viên sửa giúp cô trong blog thiên đường và blog hồng anh cháu nhé .cô cảm ơn cháu!

    Trả lờiXóa
  8. Cháu co ảnh hẹp lại trong cột bên trái thôi nhé

    Trả lờiXóa
  9. có thể thay màu đen ở dải băng phĩa dưới anh thành màu sáng mờ được thì cháu thay giúp cô nhé

    Trả lờiXóa
  10. bài mới trượt ngang bên blog thiên đường cháu cũng cho vào vị trí trên bài đăng bên cột trái cháu nhé .

    Trả lờiXóa
    Trả lời
    1. Bài viết này hiện lỗi chau đã thêm cho cô thue thuật sau để cải thiện tốc độ trang của cô. CÔ có thể đọc lại để rễ ràng tùy chỉnh cô ak. Nó từ CSS nên tốc độ rất nhanh: Slider của cố Ở Đây

      Xóa
  11. Cô cảm ơn cháu đã chỉnh sửa giúp cô ,cô muốn đưa linh ảnh vào slider cháu làm cho cô trong blog ảnh cô tìm nút chỉnh sửa mà không thấy chỗ nào cháu ạ . để như vậy không có ảnh thì vô nghĩa quá!cháu bảo cô cách chỉnh sửa nhé . cảm ơn cháu ...

    Trả lờiXóa
    Trả lời
    1. Cháu quyên không bảo cô cháu chèn thẳng vào tempate nên cô tìm đoạn code của nó trong template nha cô. Nó là đoạn code nằm ngay sau thẻ: div id="slider-shadow"> cô ak.

      Xóa
  12. để cô chỉ cần chèn linh ảnh vào những chỗ thay linh ảnh phải không?

    Trả lờiXóa
  13. à cho cô hỏi các linh ảnh đưa vào sai có cần chọn kích thước anh như kích thước đã mặc định trong sider không ?

    Trả lờiXóa
    Trả lời
    1. Đúng vậy cô ạ cô chỉ cần thay linh ảnh vào những chỗ thay linh ảnh

      Và do sử dụng CSS nên cô cần chọn hình ảnh đúng kích thước vì CSS nó không tự Resize hình ảnh mà cô. :)

      Xóa
  14. Anh namkna thiết kế cho em code feature post giống trang này đc ko.
    http://chinhtrucblog.blogspot.com/
    Thanks anh

    Trả lờiXóa
  15. làm sao để phần slick đó chỉ hiển thị ở trang chủ thôi anh NK

    Trả lờiXóa
    Trả lời
    1. Trong bước 7 em xác định ID của tiện ích em thêm slider này và áp dụng cách ở bài này nha
      XEM NGAY

      Xóa
  16. Bạn ơi, mình có thắc mắc (vì mình là người mới) là: mình có tải một template của blog về (trong đó có dùng slide và without slide) khi mình dùng temp có slide thì làm thế nào để thay mấy hình mẫu của temp bằng hình ảnh của mình?
    Cảm ơn bạn rất nhiều.

    Trả lờiXóa
    Trả lời
    1. bẠN VÀO CHỈNH sửa HTMl và tìm các hình ảnh đó rồi thay bằng link khác nha. Mình vào trang của bạn không có slider nên hiện tại chứa nói cụ thể link hình đó cho bạn được.

      Xóa
  17. cho mình hỏi làm thế nào để tự động lấy ảnh của bài mới lên làm ảnh của slide ?

    Trả lờiXóa
  18. thay đổi ảnh tĩnh thì mình biết nhưng còn tự động lấy ảnh của bài mới làm ảnh slide thì mình không biết , mong bạn giúp đỡ nhé

    Trả lờiXóa
  19. Anh Nam biết cách nào để tiện ích HTML chỉ hiện ở trang chủ ko vậy anh ? Giống như cái Slide nay làm sao để cho nó hiện chỉ ở trang chủ vậy ?

    Trả lờiXóa
    Trả lời
    1. Hiện tại anh đã cập nhật lại nếu em chỉ muốn nó hiển thị ở trang chủ thì chỉ cần thêm 2 đoạn mã màu vàng mà anh thêm vào ở bước 8 trong bài viết trên nha em :)

      Xóa
    2. Không có gì đâu e :)

      Xóa
  20. anh oi! giúp em cái trang cá nhân của em với! không biết đụng thứu gì hay jquery hết hạn chạy mà nó ko chạy các slide nào cả! http://www.dangmylinh.com/

    Trả lờiXóa
    Trả lời
    1. Không phải hết hạn đâu mà là do xung đột code. Hãy restore lại lần gần nhất không bị lỗi nha.

      Xóa
  21. ad có bài viết về cách tạo khung và thanh trượt cho nhiều hình ảnh trong từng bài viết riêng ko..

    Trả lờiXóa
  22. ad ơi ad có thể chỉ e cách chỉnh slider ảnh của megashop k vậy

    Trả lờiXóa