Thư viện

Trải nghiệm

Thứ Ba, tháng 5 28, 2013

[ves3] Simple Slider ảnh bài mới trượt cho blogspot

Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu slider mới. Dạng này thích hợp với các blog phim, ảnh,...

Chia sẻ:
Hôm nay mình sẽ giới thiệu cho các bạn thêm một mẫu slider mới. Dạng này thích hợp với các blog phim, ảnh,... Về cơ bản nó tương tự như bài này. Được phát triển bởi maskolis. bạn có thể xem ảnh hoặc Demo.
Simple Slider bài mới trượt cho blogspot ves3

VIEW DEMO

¤ Thêm Simple Slider bài mới trượt cho blogspot ves3 cho blogger!

1- Đăng nhập vào blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin> :
/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(http://2.bp.blogspot.com/-O7AH_lIf958/UbSOz_PmW8I/AAAAAAAAKNg/xfBxBW2MAP4/s1600/slider_item_namkna-blogspot-com.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(http://3.bp.blogspot.com/-yDfn7fal0JY/UbSOjGJUK0I/AAAAAAAAKNU/irqDvGFeBnU/s1600/slider_item_active_namkna-blogspot-com.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(http://4.bp.blogspot.com/-c4-EWScDfVw/UbSNtL785nI/AAAAAAAAKNM/WMz3YKrAC88/s1600/uj-opacity-40_namkna-blogspot-com.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

5- Dán code bên dưới trước thẻ </head>
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
   var triggerID = $active.attr("rel") - 1; //Get number of times to slide
   var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

   $(".paging a").removeClass('active'); //Remove all active class
   $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
$(".crott").stop(true,true).slideUp('slow');

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

   //Slider Animation
   $(".image_reel").animate({
       left: -image_reelPosition
   }, 500 );


};

//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
   play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
       $active = $('.paging a.active').next();
       if ( $active.length === 0) { //If paging reaches the end...
           $active = $('.paging a:first'); //go back to first
       }
       rotate(); //Trigger the paging and slider function
   }, 10000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {  
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });  

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-zazqzOqyacg/UbSPN8cxeNI/AAAAAAAAKNo/OhX2VBEGC6A/s1600/no+image-namkna-blogspot-com.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = m+ ' ' + day + ' ' + y ;

var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);    

 j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts1 ; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);    

 j++;
}

}
 //]]>
</script>
» Tùy chỉnh:
  • summaryPost1 = 80; Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.
  • summaryTitle = 20; Là số ký tự tiêu đề tối đa hiển thị trên slider. bạn nên để vừa phải không nên quá nhiều ký tự sẽ làm sấu slider.
  • numposts1 = 6; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. bạn không nên cho quá nhiều sẽ ảnh hưởng tới tốc độ load.
  • Xóa màu xanh nếu đã có jquery
6- Tìm thẻ: 
<div id='main-wrapper'>
- Dán vào trước nó đoạn code bên dưới: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>    
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div>
</b:if>
» Tùy chỉnh:
  • Nếu muốn tiện ích hiện ở cả trang chủ thì hãy xóa bỏ phần màu vàng đi.
  • Phần này mình để lấu tất cả các bài viết thuộc các nhãn khác nhau. nếu muốn hiện theo một nhãn nhất định thì thêm phần  /-/Tên nhãn vào sau default
7- Lưu mẫu lại và xem kết quả.

108 nhận xét:

  1. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  2. bài này hay quá bạn cảm ơn nhé

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. a nam ơi vào chek mail đi , rồi e mời a làm quản trị , và nhờ a chỉnh sửa giúp e nhé

    Trả lờiXóa
  5. sao chưa thấy a check mail vậy

    Trả lờiXóa
  6. Anh Nam vào blog này. xem có cách nào giúp cái bài đăng không có hình ảnh, hiển thị một hình ảnh mặc định thế này được không (Hiển thị trên trang chủ )

    http://tt-test-blog.blogspot.com/

    Link ảnh để làm ảnh mặc định hiển thị trên trang chủ:
    http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg

    Trả lờiXóa
    Trả lời
    1. File scrip đó không có chức năng thay thế ảnh thum. Em hãy Remover nó đi và thay thế nó thành một trong các thủ thuât sau:
      http://namkna.blogspot.com/search/label/Blogspot%20Readmore

      Xóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  9. Mấy template Johny cái nào cũng đỉnh, hình như bác lấy từ template nó ra để có thủ thuật này đúng ko :D

    Mà ko biết có cách nào làm cho slide này tự chạy, và có thể tùy chỉnh kích thức cho slide theo hình chữ nhật nằm ngang giống như mấy slider bt đc ko nhỉ? :D

    Trả lờiXóa
    Trả lời
    1. Hehe, cuối cùng mình cũng đã chèn slide theo đúng ý mình rồi :D http://cover.vietdesigner.net/

      Xóa
    2. Chỉ cần chỉnh lại các phần màu đỏ và xanh là được :)

      Xóa
  10. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
    Trả lời
    1. @Phạm Hữu Dư: rất tiếc cooment của bạn bí xóa do spamlink.

      Xóa
  11. Bạn Namkna có cách nào tạo recent post như hình này không..rất hay đó..

    http://2.bp.blogspot.com/-eCP7LuYhk2c/Ua3tt1JAZwI/AAAAAAAAIqI/qKnr5Qq45rc/s1600/Sam.jpg

    Demo:

    http://phim.clip.vn/watch/Pokemon-Season-8-412,ONqW/20818

    Trả lờiXóa
  12. Anh ơi sao cái slide của em tự nhiên nó lại không có hình đại diện thế hả anh? Mấy hôm trước vẫn tự lấy hình được cơ mà. Anh xem lại giúp em với :D
    http://www.kenh22.net

    Trả lờiXóa
    Trả lời
    1. Em lưu ý tiện ích lấy ảnh từ Album Picasa của google hoặc ảnh em upload trực tiếp lên blog nha. Với những ảnh Upload trên host khác sẽ không lấy được đâu.

      Thêm nữa ảnh đó phải ở trước dấu ngắt nếu em dùng dấu ngắt readmore

      Xóa
    2. Hì hì. Tại hôm qua em để Nguồn cấp dữ liệu trang web ngắn nên hnay nó không hiển thị. Dạo này mấy trang chuyên lấy bài của site khác làm thất thoát khá nhiều view. Haiz... Chẳng biết bgiờ blogspot với ngăn tình trạng này đây. Cứ đăng bài một cái là y như rằng hai trang kia có luôn

      Xóa
    3. Em để ngắn cũng được nhưng khi đăng bài hãy để một hình ảnh trước dấu ngắt <!--more--> là được.

      Xóa
    4. Về vấn đề sao chéo mình không cấm được em ak. Phương pháp dấu ngắt có thể ngăn cản người ta lấy một lượng lớn duc liệu, Tuy nhiên họ vẫn có thể lấy bằng cách copy từng bài một :) tất cả các nền tảng khác cũng thế thôi. ta chỉ có thể đăng ký DCMA để ngăn chặn copy. Tuy nhiên hình thức DCMA cũng không mấy khả quan nếu bài viết bị xào nấu lại hết nội dung.

      Xóa
  13. Ở bước 6, mình ko muốn đặt trong main-wrapper mà muốn tạo 1 wiget HTML bên sidebar thì làm sao được Nam? Mình làm thử nhưng nó ko có hiện ra???? Giúp mình thử nhé! Thanks

    Trả lờiXóa
  14. Sau 1 hồi mày mò thành công đặt bên sidebar, mình có phát hiện 2 lỗi sau (Dựa trên web của mình, còn web người khác chưa biết.^^):

    Thứ 1: Phần css có đoạn ".crott {width:288px; ....}" thì phải chỉnh sửa vị trí thủ công theo vị trí đặt slider này. Cụ thể là phải chỉnh phần này: "bottom: 0; left: 0; z-index: 101;". Mới vào là phần này nó nằm tít bên trái website.:((. Như vậy mắc công quá!!!! Có cách nào nó tự auto luôn ko?

    Thứ 2: Khi ở ngoài trang chủ thì phần "srott" này sẽ hiện lên summaryPost & summaryTitle, nhưng sao khi mình click vào bài để xem thì slider chỉ trượt hình nagng thôi chứ ko hiện lên summaryPost & summaryTitle nữa. Mình đã thử xem trong trang chuyên mục hoặc trang bải viết thì nó bị thế??? Nhảy ra ngoài trang chủ thì slider hoạt động bình thường. Ko biết có bạn nào bị trường hợp giống web mình ko nhỉ?

    Hiện mình đang thử nghiệm demo trong link: http://nhapblogdau365.blogspot.com.

    Có gì Nam vào xem giúp với (Ngay chỗ wiget Món ngon - Vào bếp).
    Thanks

    Trả lờiXóa
    Trả lời
    1. Như thế là hiển thị dduwwocj rồi nhưng phần mô tả của bạn lẹc rùi.

      width:288px; độ rộng của slider thường nhỏ hơn phần width:300px; vì thuopocj tính padding là 10px.

      z-index: 101; mức dộ ưu tiên hiển thị ảnh so với nút chuyển giữa các slider.

      bottom: 0; vị trí của slider so với viền dưới của sidebar (cái này phải chỉnh lại).

      left: 0; vị trí của slider so với viền trái của sidebar.

      Xóa
  15. Mình đang thắc mắc sửa cho cái phần lỡi thứ 2 ấy. Nam check xem thử từ trang chủ và click vào trang bài viết sẽ thấy bị mắc lỗi cho phần mô tả.

    Trả lờiXóa
    Trả lời
    1. Oke để mình check.

      Xóa
    2. Giúp mình tìm ra cái lỗi thứ 2 giùm mình chưa Nam? Mong hồi âm. Thanks

      Xóa
    3. Bạn gửi cái template đó vào tavannam01@gmail.com để mình thêm trực tiếp cho nha.

      Xóa
  16. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  17. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
    Trả lời
    1. Bạn hãy tải nó theo link sau sẽ có phần code .xml để thêm nha: TẢI NGAY

      Xóa
  18. cảm ơn bạn nhiều mình đã làm đc rồi,cảm ơn nhiều nhé

    Trả lờiXóa
  19. mình muốn hiện ở trang chủ không hiện ở sidebar thì mình thay sompret-wrapper thành main-wrapper sao lại không được nhỉ

    Trả lờiXóa
    Trả lời
    1. mình đã làm được rồi,không biết nói gì ,chỉ biết nói 2 chữ CẢM ƠN .

      Xóa
    2. Không có gì đâu bạn ak.

      Xóa
  20. Sao mình không tìm thấy dòng < div id = " main-wrapper " >
    Blog mình là Tên

    Trả lờiXóa
    Trả lời
    1. Để lại URL blog của bạn mình sẽ chỉ đoạn códe cho.

      Xóa
    2. blog là kenhtrasua.com nhé. Tìm mãi không thấy. Bực thật

      Xóa
    3. Dòng này:

      <div id='main-wrapper'>

      Xóa
  21. Cô rất thích bài này và cô sẽ thực hành . NK cho cô hỏi . anh trượt ở đây là ảnh của bài đăng à. có thể thay linh ảnh không phải ảnh trong bài đăng vào không?

    jquery là gì cô không hiểu nhờ cháu chỉ giúp nhé. chờ tin cháu..?

    Trả lờiXóa
  22. < div id = " main-wrapper " > cô không tìm được đoạn code này . và URL của blog là gi?

    Trả lờiXóa
    Trả lời
    1. Vâng có gì cô cứ hỏi cháu.

      - jquery hiện nay có rất nhiều định nghĩa khác nhau nhưng hiểu theo một cách dân dã nó là nền tảng để mình thiết kế các hiệu ứng các giao diện, nó giúp các hiệu ưng mượt mà hơn và một số trường hợp còn góp phần tăng tốc cả trang web nếu sử dụng hợp lý. ví dụ như trong một chiếc áo nó chính là những sợi vải.' Hiện nay trên mạng có rất nhiều bài viết về jquery cô có thể tìm đọc đó ak.

      - Với blog thienduong9190 của cô thì cô tìm 1 trong 2 đoạn sau:

      <div class='main-outer'>

      hoặc

      <div class='tabs-cap-bottom cap-bottom'>

      Xóa
  23. cháu à . làm sao đặt được ảnh chiếu vào vị trí như ý muốn . cháu xem giúp cô xem , ở blog thiên đường như vậy thì ko hay chut nào ?

    Trả lờiXóa
    Trả lời
    1. Mình chuyển nó đến các phần mà mình muốn vấn đề bậy giờ là cô muốn đặt nó ở đâu cô cứ nói cháu chỉ vị trí cho :))

      Xóa
  24. Chau chỉ giúp cô , cô muốn thu nhỏ chiều cao và chiều rộng ảnh, đặt vào góc trên cùng ở cột bên phải cháu ạ . cô làm phiền cháu nhiều quá . cô xin lỗi và cảm ơn cháu nhé

    Trả lờiXóa
    Trả lời
    1. Vầng lát nữa cháu sẽ chỉnh nó cho cô. :))

      Xóa
    2. cháu có vào chỉnh giúp cô thì cháu cho sider hiện ở trang chủ thôi nhé cảm ơn cháu nhiều

      Xóa
  25. sider ảnh trong blog ảnh cô muốn cho ảnh vào thì phải làm sao cháu nhỉ

    Trả lờiXóa
  26. Nam ạ cô sửa được rồi .nhưng bây giờ cô muốn cho slieder chỉ chạy ở trang chủ thôi thò sửa thế nào . và cách đặt vị trie slider nữa nam bảo nốt cho cô nhé?

    Trả lờiXóa
    Trả lời
    1. Cháu có thể giúp cô về vấn đề này. Cô có thể thao tác như sau:
      -Tại Bước 6 của bài viết này cô để ý đoạn code được tô màu vàng thứ nhất
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      -Cô thay thế bằng đoạn code sau
      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Ngoài ra cô có thể xem thêm các điều kiện để ẩn/hiện một widget trên blog tại bài viết này. Chúc cô thành công!

      Xóa
    2. Cô cảm ơn cháu nhé Huy co vip cô sẽ làm thử xem sao nhé

      Xóa
    3. Đoạn code màu vàng đó cô đã cắt đi . cô thay bàng đoạn code của cháu vào máy ko chịu lưu cháu ạ? là sao nhỉ . cô nhờ cháu bảo giúp

      Xóa
    4. Vâng nhưng đoạn code màu vàng thứ hai (</b:if>) cô vẫn phải giữ nguyên không bỏ mới được

      Xóa
    5. mình vẫn để () mình vẫn để mà có cắt đi đâu?

      Xóa
    6. Có thể cô đã xóa nhầm một thẻ DIV nên nó không lưu được. Cô làm lại như HUy nói nha cô.

      Cô tìm đoạn:

      <b:if cond='data:blog.pageType == "item"'>

      -Cô thay thế bằng đoạn code sau
      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Xóa
    7. Cảm ơn bạn mình làm được rồi lần trước mình xóa cả thẻ nên ko được

      Xóa
  27. à còn có thê sửa sao cho thứ tự ảnh , không quay lộn lại được không?

    Trả lờiXóa
    Trả lời
    1. Hihi cháu xin lỗi cô./. Mấy hôm nay cháu bận quá giờ mới trả lời cô được

      Cô chỉ cần sửa đoạn
      aBold = true;

      thành:
      aBold = false;

      Xóa
  28. Cô lại nhờ cháu chỉ giúp cô xem cô muốn định vị sleder này thì làm thế nào ? cô tháy bài này hay hơn bài cháu làm cho cô trong blog ảnh . vì loại đó là ảnh cố định . còn bài này . ảnh thay đổi theo bài mới phải không ?. cháu bảo cô cách cho thêm ảnh vào slider cháu làm cho cô ấy . co trong blog ảnh nhé. cô thấy chỉ có 3 ảnh thì chán quá . cô làm trong blog Vân anh đó , nhưng chỉ có 3 ảnh . cô chưa biết làm sao để cho thêm ảnh.
    Cô làm cháu mất thời gian với cô rồi . cảm ơn cháu nhiều nhé

    Trả lờiXóa
    Trả lời
    1. Đúng vậy code bài này hoàn toàn tự động cô ajk. Với blog của cô có thuộc tính posible trên sidebar nên khi chuyển nó lên đó các ảnh sẽ bị ẩn đi.

      Cách thêm ảnh cháu đã trả lời cô trong bài viết này đó cô:
      http://namkna.blogspot.com/2013/03/css3-image-slider-for-blogger-ves-2.html

      Xóa
  29. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  30. Cháu vẫn chưa chỉ bảo giúp cô định vị sleder ảnh bài viết này. cháu xem blog thiên đường của cô , cô đã chỉnh kích thước slider . nhưng cô muốn cho nó ở góc bên phải trên cùng của cột bên phải blog. hiện tại chỗ đó để trống không thể để cái gì vào đó được. mà cô mở kích thước slider cho dài bằng chiều dài blog , nó vẫn không lui vào vị trí trống này , nó lại lệch hăn sang trái cháu ạ.

    Trả lờiXóa
  31. Cô muốn sleder chỉ chạy trên trang chủ thôi thì làm sao Nam Kha ơi?

    Trả lờiXóa
    Trả lời
    1. Cô đặt trước đoạn nha:

      <div class="sidebar section" id="sidebar-right-1">

      Chỉ hiện trang chủ cô thay đoạn:

      <b:if cond='data:blog.pageType == "item"'>

      thành:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Xóa
  32. Anh ơi cho em hỏi là nếu mình muốn đặt nó ở những vị trí khác nhau thì mình phải làm như thế nào hả anh? Cám ơn anh ạ!

    Trả lờiXóa
  33. Cô đặt trước đoạn nha:
    Là đặt cái gì trước đoạn hả Nam Kha..?Cô thây đoạn code để slider chỉ hienj ở trang chủ mà máy ko lưu cháu ạ

    Trả lờiXóa
  34. Cháu bảo giúp cô định vị slider nhé nam kha . cảm ơn cháu

    Trả lờiXóa
  35. CHắc namkna bận sao ý. Cô và bạn thử cho code ở bước 6 vào tiện ích HTML/?javarscript và di chuyển đến vị trí cô muon thôi a.

    Trả lờiXóa
    Trả lời
    1. Cháu quyên không nhắc là cô hãy bỏ đoạn màu vàng đi cô ak.

      Xóa
    2. cô chỉ cho slider chạy ở trang chủ nên cô cặt đoạn màu vàng cháu ạ . cảm ơn cháu

      Xóa
    3. cô cho đoạn code ở bước 6 vào tiện ích HTML/?javarscript ảnh lại không hiện cháu ạ chán quá cô ko biết làm thế nào nữa?

      Xóa
    4. Cô sửa đoạn sau:

      .image_reel img {overflow: hidden;float: left;width:300px; height:auto;}

      thành:

      .image_reel img {overflow: hidden;float: left;width:300px; height:auto;z-index:9000}

      và lưu lại coi sao nha cô.

      vào cô sửa đoạn bên dưới để chỉnh lại vị trí ảnh nha:

      bottom: 0; left: 0; z-index: 101;

      Xóa
    5. Đoạn

      bottom: 0; left: 0; z-index: 101;

      nếu sửa cô phải thêm thuộc tính px như bên dưới nha cô:

      bottom: 100px; left: 100px; z-index: 101;

      Xóa
  36. cảm ơn chau? cháu đi đâu vắng nhà lâu vậy? cô sẽ làm theo hướng dẫn của cháu. có gì cô hồi âm lại cháu nhé

    Trả lờiXóa
    Trả lời
    1. Hì hì mấy hôm nay cháu phải đi công tác nên không lên mạng được thường xuyên, hy vọng cô và mọi người không giận :)

      Xóa
  37. cô làm không được Nam Kha ạ ?

    Trả lờiXóa
  38. mấy comments Nk bảo cô đánh bóng chữ ở chỗ nào mà cô tìm lại mãi không thấy . Chau cho cô xin linh bài này cháu nhé

    Trả lờiXóa
    Trả lời
    1. Mấy comment đó cháu cũng ko rõ bài nào nữa cô ak. Nhưng cố có thể xem bài viết này nha cô. XEM NGAY

      Xóa
  39. Mình muốn ứng dụng tiện ích này làm recent post ở khung giữa và chỉ hiện ở trang chủ thì làm thế nào vậy Namkna!

    Trả lờiXóa
    Trả lời
    1. Chỉ hiện ở trang chủ thì bạn thay đoạn:

      <b:if cond='data:blog.pageType == "item"'>

      thành:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Muons hiện ở khung giữa thì hãy thêm bước 6 vào HTML và kéo nó đến vị trí bạn muốn nha,

      Xóa
  40. Mình đưa vào dùng thì cái widget VIDEO CATEGORY của mình ở mẫu mà mình dùng, các hình nó ko nằm trong 1 ô nữa mà nó rời ra và nẳm thứ tự từ trên xuống dưới! Hình như code của Namkna mình đưa vào có xung khắc với mẫu có sẵn mà mình đang dùng. Mình cũng đã thử bỏ code jquery trong code Namkna đưa rồi mà vẫn bị lỗi. Có cách nào khắc phục ko vậy nhỉ!

    Với lại nhân tiện nhờ Namkna giúp giùm! Cái template của mình đang dùng như Namkna biết là 1 template miễn phí trên mạng, và cái vị trí mà mình đang dùng tiện ích của Namkna thì trong mẫu gốc cũng có 1 slider khá đẹp. Tuy nhiên không biết vì sao khi mình tải mẫu đó về dùng thì nó mất đi slider hay nói đúng hơn là nó không hiện ra và mình cũng ko biết chỉnh code của nó như thế nào cả. Namkna xem qua cái template mà mình đang dùng, nó bị lỗi gì với tiện ích slider gốc vậy! link template gốc: http://www.mastemplate.com/2012/07/johny-kenthir-banget.html
    Cảm ơn Namkna nhiều! Chúc trang của bạn ngày càng có nhiều người biết đến!

    Trả lờiXóa
    Trả lời
    1. 1- Bạn chèn lỗi phần css của mình bạn ak.

      2- Tem trên mạng bao giờ cũng có 2 file xml một file có slide và một file không có nha bạn.

      Xóa
  41. Namkna cho mình hỏi với, mình có làm cái widget ảnh trong trang này của mình hotsunhot.blogspot.com, nhưng nó không giống phiên bản ban đầu lắm. Cụ thể là dòng title của nó lại có một ô nền màu trắng với đen phía sau trông không được đẹp lắm. Bạn có cách nào khắc phục giúp mình được không ?

    Trả lờiXóa
  42. Mà khoảng cách giữa ảnh lớn với dãy ảnh nhỏ ở dưới cũng cách hơi xa, mình thấy mẫu nó thì đẹp nhưng khi làm thì lại thành ra thế này ! Namkna xem cho mình với !

    Trả lờiXóa
  43. có cách nào gộp hết vào 1 tiện ích javar/script không cậu

    Trả lờiXóa
    Trả lời
    1. Bước 4 thêm vào giữa 2 thẻ <style> và </style>
      Bước 5 giữ nguyên
      Bước 6 xóa 2 đoạn b:if màu vàng đi sau đó chèn vào tiện ích HTML là được thôi mà bạn.

      Lưu ý là nếu trùng Jquery thì bỏ đi nha :)

      Xóa
  44. mình ko thấy div id='main-wrapper'

    Trả lờiXóa
  45. Thử với một trong 2 đoạn code bên dưới coi có tìm thấy không nha bạn.

    div class="column-center-outer"

    div class="column-center-inner"

    Trả lờiXóa
  46. bạn ơi mình kiếm ko thấy đoạn: div id='main-wrapper'
    mình cũng thử tìm 2 đoạn sau nhưng cũng đêu ko thấy:
    1, div class="column-center-outer"

    2, div class="column-center-inner"
    bạn giúp mình với url của mình là: http://conducmethanhxuan.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. bẠN THay dấu nháy đôi thành đơn để tìm nha.

      div class='column-center-outer'

      div class='column-center-inner'

      Xóa
  47. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  48. Nam Ta cho hỏi tí
    Blog mình dùng template temeforest trong đó người ta bảo cái video slider chi cần gõ label vào là nó tự nhận và sẽ chạy slide mà sao mình add label rùi mà nớ ko chạy, cứ load mãi ko thôi ko ra hình gì cả ? mong bạn giúp đỡ

    Trả lờiXóa
    Trả lời
    1. Bạn gửi mình cái link xem thử nhé

      Xóa
    2. Nhận xét này đã bị tác giả xóa.

      Xóa
    3. link nè bạn caritashathocmon1.blogspot.com
      sao mà nó cứ load hoài mà ko chịu ra
      hic
      1 cái recent video slider với cái feature post slider
      bạn xem có cách nào khắc phục giúp mình với !
      Cảm ơn nhé :)

      Xóa
  49. cái này rất hay cảm ơn anh nhé

    Trả lờiXóa
  50. bạn Nam Kha ơi, sao mình đặt code của bạn vào rồi mà nó không chạy chỉ hiện 1 có cái hình rồi đứng im.
    Làm ơn giúp mình với
    Blog mình : http://coverdepmoingay.blogspot.com/

    Trả lờiXóa
  51. Bạn ơi, mình làm tới bước 6 thì ko tìm thấy id='main-wrapper' để chỉnh sửa tiếp. Mong bạn giúp đỡ mình hoàn thành bước này nhé. Thanks. Email: nguyenquoc.khanhtrinh@gmail.com

    Trả lờiXóa
  52. < div id = " main-wrapper " > cô không tìm được đoạn code này . và URL của blog là gi?
    >>> đồng hồ chính hãng

    Trả lờiXóa