Home » » Bài đăng đang xem:

Tạo Auto Slide Featured Post Widget cho Blogger

Bạn muốn Blog mình trông thật "Pro", trình diễn những bài viết đáng chú ý một cách ấn tượng .



sshot-3

Auto Slide Featured Post Widget - Demo


Hôm nay mình đã thử qua khá nhiều code Slide Featured Post và hầu hết đều có lỗi hoặc nặng nề chậm chạp làm giảm tốc độ truy cập vô blog, và cuối cùng đã tìm được một  Slide Featured Post khá ưng ý bởi các ưu điểm sau :
 - Tốc độ load nhanh, không gây cảm giác chậm load trang khi sử dụng.
 - Dễ thay đổi và chỉnh sửa vì phần trình diễn bài nằm ở 1 form riêng biệt.
 - Tự thu nhỏ và đóng khung ảnh chèn vào.
 - Còn ưu với nhược điểm gì nữa thì các bạn khám phá nhé ^^


PR nhiều quá bắt đầu làm nào !


Step 1:
Go to Blogger > Dashboard > Edit HTML. ( Đăng nhập vô Blogger > Thiết Kế > Chỉnh sửa HTML)


Nhấn Ctrl + F hoặc F3 tìm tag <body> chèn đoạn mã này phía dưới :





<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/smoothscroll.js' type='text/javascript'/>
<link href='http://www.digitalbunch.com/wp-content/uploads/2011/07/smooth-slider-hacktutors.css' id='smooth_slider_css-css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/hacktutorsscript.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/jquery-hacktutors.js' type='text/javascript'/>
<script src='http://www.digitalbunch.com/wp-content/uploads/2011/07/slide1.js' type='text/javascript'/>
<style media='screen' type='text/css'>
#smooth_sldr {
 width:560px;
 height:180px;
 background-color:#ffffff;
 border:0px solid #999999;
}
#smooth_sldr_items {
 padding:10px 18px 0px 26px;
}
#smooth_sliderc {
 width:516px;
 height:140px;
}
.smooth_slideri {
 width:506px;
 height:140px;
}
.sldr_title {
 font-family:Georgia, Arial, Helvetica, sans-serif;
 font-size:20px;
 font-weight:bold;
 font-style:normal;
 color:#000000;
}
#smooth_sldr_body h2 {
 line-height:17px;
 font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 font-style:normal;
 color:#000000;
 margin:0px 0 5px 0;
}
#smooth_sldr_body h2 a {
 color:#000000;
}
#smooth_sldr_body span {
 font-family:Arial, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:normal;
 font-style:normal;
 color:#333333;
}
.smooth_slider_thumbnail {
 float:left;
 margin:0px 5px 0 0px;
 width:165px;
 height:120px;
 border:1px solid #000000;
}
#smooth_sldr_body p.more a {
 color:#000000;
 font-family:Arial, Arial, Helvetica, sans-serif;
 font-size:12px;
}
#smooth_sliderc_nav li {
 border:1px solid #333333;
 font-size:12px;
 font-family:Arial, Arial, Helvetica, sans-serif;
}
#smooth_sliderc_nav li a {
 color:#000000;
}
.sldrlink {
 padding-right:40px;
}
.sldrlink a {
 color:#333333;
}
#slider {
 background:#333;
 height:205px;
 display:block;
 margin:22px 0 10px 10px;
 width:565px;
}
</style>

             

Bước 2 vào Design > Page Element > Add a Gadget > HTML / JavaScript 
 (Thiết Kế > Phần tử trang > Thêm tiện ích > HTML / JavaScript) rôì dán đoạn mã này vào và lưu lại :



<div id="slider">
  <script type="text/javascript">
stepcarousel.setup({
 galleryid: 'smooth_sliderc', //id of carousel DIV
 beltclass: 'smooth_sliderb', //class of inner "belt" DIV containing all the panel DIVs
 panelclass: 'smooth_slideri', //class of panel DIVs each holding content
 autostep: {enable: true, moveby:1, pause:7000},
 panelbehavior: {speed:500, wraparound: false, persist:false},
 defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_prev.png', -8, 70], rightnav: ['http://www.shoutmeloud.com/wp-content/plugins/smooth-slider/images/button_next.png', 0, 70]},
 statusvars: ['imageA', 'imageB', 'imageC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
 contenttype: ['inline'], //content setting ['inline'] or ['external', 'path_to_external_file']
 onslide:function(){
   jQuery("#smooth_sliderc_nav li a").css("fontWeight", "normal");
   jQuery("#smooth_sliderc_nav li a").css("fontSize", "12px");
   var curr_slide = imageA;
     jQuery("#sldr"+curr_slide).css("fontWeight", "bolder");
   jQuery("#sldr"+curr_slide).css("fontSize", "17px");
   
  }
})
</script>
  <noscript>
  </noscript>
  <div id="smooth_sldr">
    <div id="smooth_sldr_items">
      <div id="smooth_sldr_body">
        <div id="smooth_sliderc">
          <div class="smooth_sliderb">
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="http://ghost2s.blogspot.com/2011/08/su-kien-nhanh-tay-nhan-key-ban-quyen.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAgslsanBdI045yGnonDkPlLjX5t1o6Fd75tdzJwPlq7XxfYKlE4bAARRzya0Jp_r86a5F-m6mCk_CCNU42hVypECofQUubWt6drqKuKhXxSgjBH8VDL4mUAUBDjhz9kfdXS5x90KeStc/s288/BlogKTV.png" alt="SỰ KIỆN : Nhanh tay nhận key bản quyền của BlogKTV" /></a>
              <h2><a href="http://ghost2s.blogspot.com/2011/08/su-kien-nhanh-tay-nhan-key-ban-quyen.html">SỰ KIỆN : Nhanh tay nhận key bản quyền của BlogKTV</a></h2>
              <span>Sự kiện nhân ngày thành lập BlogKTV chia sẻ riêng của mình ! !! Hôm nay, BlogKTV sẽ mang đến cho tất cả các bạn một cuộc thi vừa vui vừa có quà...</span>
              <p class="more"><a href="http://ghost2s.blogspot.com/2011/08/su-kien-nhanh-tay-nhan-key-ban-quyen.html">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri --><a href="http://ghost2s.blogspot.com/2011/08/ho-tro-leech-link-hotfile-filesonic-va.html"><img class="smooth_slider_thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6gQBthg6vSHCUy2LIpPcsIFeT1Wmz7uQLGy2q84JphwnEgIH3wXMA86c5AorERbv7byjPK654p_rJBTP3Na5G2J6hRWIK6yvyICVguiK5yzm7BssGNLQu9FK-SoyOmZYpdnzVldCt4kA/s1600/banner.png" alt="Hỗ trợ Leech Link Hotfile, Filesonic và Megaupload" /></a>
              <h2>
                <a href="http://ghost2s.blogspot.com/2011/08/ho-tro-leech-link-hotfile-filesonic-va.html">Hỗ trợ Leech Link Hotfile, Filesonic và Megaupload</a>
              </h2>
              <span>Nhận thấy nhu cầu cần tải file rất nhiều từ các host khó download như Hotfile, Rapidshare, Megaupload, Fileserve, Filesonic ...</span>
              <p class="more"><a href="http://ghost2s.blogspot.com/2011/08/ho-tro-leech-link-hotfile-filesonic-va.html">Read More</a></p>
              <!-- /smooth_slideri -->
            </div>
            <div class="smooth_slideri">
              <!-- smooth_slideri -->
<a href="http://ghost2s.blogspot.com/search/label/magazine"><img class="smooth_slider_thumbnail" src="https://lh3.googleusercontent.com/-jNIrMVaY5mM/TkU3fa3QqnI/AAAAAAAAAOE/BIDrSkU_7lQ/s288/magazine-subscriptions.jpg" alt="Get Thousands of High PR Backlinks Within a Minute" /></a>
              <h2><a href="http://ghost2s.blogspot.com/search/label/magazine">Ebooks - Tạp Chí Tin Học</a></h2>
              <span>Để đáp ứng nhu cầu học, đọc, giải trí,... online như xu hướng hiện nay, BlogKTV sẽ cố gắng sưu tầm Ebook và Các tạp chí Vi Tính để phục vụ các bạn đọc.</span>
              <p class="more"><a href="http://ghost2s.blogspot.com/search/label/magazine">Read More</a></p>
<!-- /smooth_slideri -->
            </div>
            <!-- /smooth_slideri -->
          </div>
        </div>
      </div>
    </div>
    <ul id="smooth_sliderc_nav">
      <li><a id="sldr1" href="#" >1</a></li>
      <li><a id="sldr2" href="#" >2</a></li>
      <li><a id="sldr3" href="#" >3</a></li>
    </ul>
    <br class="sldrbr" />
    <div class="sldrlink"><a href="" target="_blank">Smooth Slider</a></div>
  </div>
</div>
<script type="text/javascript">
 jQuery(document).ready(function(){
 jQuery('#smooth_sliderc_nav a').click(function() {
  var id = jQuery(this).attr('id');
        var step_to_slide = id.replace(/sldr/, "");
        document.getElementById(id).href = "javascript:stepcarousel.stepTo('smooth_sliderc', "+step_to_slide+")";
    });
 });
</script>




Sau khi chèn xong các bạn thay các liên kết màu xanh da trời là đường dẫn tới bài viết , màu xanh lá cây là link ảnh muốn hiển thị, chữ màu cam là tiêu đề bì viết, và các đoạn bôi màu xám là trích đoạn của bài viết.


Chúc các bạn thành công ! 


Bài viết do mình tham khảo tại clickonf5.org
Tags:
=>Mời bạn chia sẽ đóng góp ý kiến cho bài viết
Đăng ký nhận bài miễn phí

Các bài đăng liên quan--------------Bài đăng chủ đề khác

Flicker Images


    Giới thiệu : Mời bạn đăng ký dịch vụ để download style templates đây là một sản phẩm được thiết kế bản quyền do trung tâm Vcupdesign kết hợp với giải pháp mạng Việt Nam -nsvina.com thực hiện   
    Tính chất dịch vụ : Chúng tôi sưu tầm các templates chất lượng trên mạng Internet và Download về fix lại tất cả các lỗi, code rác, virus nhằm cung cấp cho quý khách một templates chất lượng cao với phong cách hoàn toàn khác biệt nổi trội. 
    Cam kết sử dụng : Với tính chất như đã trình bày bên trên cho nên chúng tôi cam kết chỉ thu tiền của quý khách khi hoàn chỉnh bàn giao templates như trong hợp đồng. 
    Cho bạn niềm tin : Với đội ngũ Design chuyên nghiệp 6 năm kinh nghiệm và tầm nhìn thẩm mỹ...chúng tôi hứa hẹn mang lại cho quý khách một sản phẩm tốt nhất và ưng ý! 
    Quy định chung cần biết :
  1. Chúng tôi chỉ cung cấp mã nguồn 1 lần duy nhất.
  2. Chúng tôi không bảo hành khi quý khách làm trái quy định bảo lưu templates.
  3. Chúng tôi không hoàn tiền khi quý khách hàng đổi ý chọn giao diện khác.
  4. Chúng tôi chỉ có 1 địa chỉ duy nhất cho nên chúng tôi không chấp nhận việc khiếu nại không đúng bản quyền.
Copyright nsvina.com - Ghi rõ nguồn templates.nsvina.com - Khi phát hành lại bài viết trên trang này
Maxivn | VIỆC LÀM | Thiết kế web rẻ | Thiết kế blogspot