SlideShow trình chiếu ảnh tuyệt đẹp cho Blogspot (Blogger) phần 2

SlideShow trình chiếu ảnh tuyệt đẹp cho Blogspot (Blogger) phần 2
Cũng đã 10 ngày rồi không vào Blog, hôm nay ghé thăm cảm thấy đơn điệu quá L. Chắc từ nay về sau một tuần mình chỉ viết một bài vào thứ hai thôi (Do thời gian của mình càng ngày càng hạn hẹp, nhưng mình vẫn cố gắng trả lời thắc mắc khi các bạn cần). Còn riêng hôm nay mình sẽ hướng dẫn các bạn cách chằn một “SlideShow trình chiếu có gắn phần mô tả ngắn cho từng hình ảnh” trông rất chuyên nghiệp, thường gắn vào cột sitebar để giới thiệu một số bài viết nổi bật của họ hay tạo Banner để quảng cáo là hợp lý nhất.

               Đọc thêm:



SlideShow trình chiếu này được phát triển bởi Dynamicdrive, sử dụng một đoạn Javarscip và CSS với hiệu ứng mượt từ thư viện JQuery dưới đây là DEMO cho các bạn xem trước.


☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScriptdán đoạn mã code dưới đây vàoLưu lại.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<style type="text/css">
/*Make sure your page contains a valid doctype at the top*/      
#simplegallery1{ //CSS for Simple Gallery Example 1       
position: relative; /*keep this intact*/       
visibility: hidden; /*keep this intact*/       
border: 1px solid #666;       
}
#simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)      
text-align: left;       
padding: 2px 5px;       
font: 10px normal verdana, arial;       
}
</style>
<script type="text/javascript" >
var simpleGallery_navpanel={      
    loadinggif: 'http://1.bp.blogspot.com/-BsjA3MieZ7k/UTlaan0EHxI/AAAAAAAABU4/us8tcy9jZ_g/s1600/ajaxload-namkna-blogspot-com.png', //full path or URL to loading gif image       
    panel: {height:'45px', opacity:0.5, paddingTop:'5px', fontStyle:'bold 11px Verdana'}, //customize nav panel container       
    images: [ 'http://3.bp.blogspot.com/-1LcVkgcbdcI/UTlars2S5WI/AAAAAAAABVA/L4raw_p0lyg/s1600/left-namkna-blogspot-com.png', 'http://3.bp.blogspot.com/-3sF6qwI8AAI/UTla5C5N7uI/AAAAAAAABVI/eMlsH8W3nos/s1600/play-namkna-blogspot-com.png', 'http://3.bp.blogspot.com/-gaWk39UdME4/UTlbDWSg7mI/AAAAAAAABVQ/fwGGZX3rCck/s1600/right-namkna-blogspot-com.png', 'http://2.bp.blogspot.com/-EhlntKAX_Gs/UTlbMnxguZI/AAAAAAAABVY/Rj-f_UHztDM/s1600/pause-namklna-blogspot-com.png'], //nav panel images (in that order)       
    imageSpacing: {offsetTop:[-4, 0, -4], spacing:10}, //top offset of left, play, and right images, PLUS spacing between the 3 images       
    slideduration: 500 //duration of slide up animation to reveal panel       
}
function simpleGallery(settingarg){      
    this.setting=settingarg       
    settingarg=null       
    var setting=this.setting       
    setting.panelheight=(parseInt(setting.navpanelheight)>5)? parseInt(setting.navpanelheight) : parseInt(simpleGallery_navpanel.panel.height)       
    setting.fadeduration=parseInt(setting.fadeduration)       
    setting.curimage=(setting.persist)? simpleGallery.routines.getCookie("gallery-"+setting.wrapperid) : 0       
    setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty       
    setting.preloadfirst=(!jQuery.Deferred)? false : (typeof setting.preloadfirst!="undefined")? setting.preloadfirst : true //Boolean on whether to preload all images before showing gallery       
    setting.ispaused=!setting.autoplay[0] //ispaused reflects current state of gallery, autoplay[0] indicates whether gallery is set to auto play       
    setting.currentstep=0 //keep track of # of slides slideshow has gone through       
    setting.totalsteps=setting.imagearray.length*setting.autoplay[2] //Total steps limit: # of images x # of user specified cycles       
    setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)       
    setting.oninit=setting.oninit || function(){}       
    setting.onslide=setting.onslide || function(){}       
    var preloadimages=[], longestdesc=null, loadedimages=0       
    var dfd = (setting.preloadfirst)? jQuery.Deferred() : {resolve:function(){}, done:function(f){f()}} //create real deferred object unless preloadfirst setting is false or browser doesn't support it       
    setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""       
    setting.$loadinggif=(function(){ //preload and ref ajax loading gif       
        var loadgif=new Image()       
        loadgif.src=simpleGallery_navpanel.loadinggif       
        return jQuery(loadgif).css({verticalAlign:'middle'}).wrap('<div style="position:absolute;text-align:center;width:100%;height:100%" />').parent()       
    })()       
    for (var i=0; i<setting.imagearray.length; i++){  //preload slideshow images       
        preloadimages[i]=new Image()       
        preloadimages[i].src=setting.imagearray[i][0]       
        if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)       
            setting.longestdesc=setting.imagearray[i][3]       
        jQuery(preloadimages[i]).bind('load error', function(){       
            loadedimages++       
            if (loadedimages==setting.imagearray.length){       
                dfd.resolve() //indicate all images have been loaded       
            }       
        })       
    }       
    var slideshow=this       
    jQuery(document).ready(function($){       
        var setting=slideshow.setting       
        setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main gallery DIV       
        if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found       
            alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")       
            return       
        }       
        setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide       
            .css({position:'absolute', left:0, top:0})       
            .appendTo(setting.$wrapperdiv)       
        setting.$loadinggif.css({top:setting.dimensions[1]/2-30}).appendTo(setting.$wrapperdiv) //30 is assumed height of ajax loading gif       
        setting.gallerylayers=setting.$gallerylayers.get() //cache stacked DIVs as DOM objects       
        setting.navbuttons=simpleGallery.routines.addnavpanel(setting) //get 4 nav buttons DIVs as DOM objects       
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)       
            setting.descdiv=simpleGallery.routines.adddescpanel(setting)       
        $(setting.navbuttons).filter('img.navimages').css({opacity:0.8})       
            .bind('mouseover mouseout', function(e){       
                $(this).css({opacity:(e.type=="mouseover")? 1 : 0.8})       
            })       
            .bind('click', function(e){       
                var keyword=e.target.title.toLowerCase()       
                slideshow.navigate(keyword) //assign behavior to nav images       
            })       
        dfd.done(function(){ //execute when all images have loaded       
            setting.$loadinggif.remove()       
            setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidenavpanel('show')})       
            setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidenavpanel('hide')})       
            slideshow.showslide(setting.curimage) //show initial slide       
            setting.oninit.call(slideshow) //trigger oninit() event       
            $(window).bind('unload', function(){ //clean up and persist       
                $(slideshow.setting.navbuttons).unbind()       
                if (slideshow.setting.persist) //remember last shown image's index       
                    simpleGallery.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)       
                jQuery.each(slideshow.setting, function(k){       
                    if (slideshow.setting[k] instanceof Array){       
                        for (var i=0; i<slideshow.setting[k].length; i++){       
                            if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div       
                                slideshow.setting[k][i].innerHTML=null       
                            slideshow.setting[k][i]=null       
                        }       
                    }       
                    if (slideshow.setting[k].innerHTML) //catch gallerydesctext div       
                        slideshow.setting[k].innerHTML=null       
                    slideshow.setting[k]=null       
                })       
                slideshow=slideshow.setting=null       
            })       
        }) //end deferred code       
    }) //end jQuery domload       
}
simpleGallery.prototype={
    navigate:function(keyword){      
        clearTimeout(this.setting.playtimer)       
        this.setting.totalsteps=100000 //if any of the nav buttons are clicked on, set totalsteps limit to an "unreachable" number       
        if (!isNaN(parseInt(keyword))){       
            this.showslide(parseInt(keyword))       
        }       
        else if (/(prev)|(next)/i.test(keyword)){       
            this.showslide(keyword.toLowerCase())       
        }       
        else{ //if play|pause button       
            var slideshow=this       
            var $playbutton=$(this.setting.navbuttons).eq(1)       
            if (!this.setting.ispaused){ //if pause Gallery       
                this.setting.autoplay[0]=false       
                $playbutton.attr({title:'Play', src:simpleGallery_navpanel.images[1]})       
            }       
            else if (this.setting.ispaused){ //if play Gallery       
                this.setting.autoplay[0]=true       
                this.setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, this.setting.autoplay[1])       
                $playbutton.attr({title:'Pause', src:simpleGallery_navpanel.images[3]})       
            }       
            slideshow.setting.ispaused=!slideshow.setting.ispaused       
        }       
    },
    showslide:function(keyword){      
        var slideshow=this       
        var setting=slideshow.setting       
        var totalimages=setting.imagearray.length       
        var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)       
            : (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)       
            : Math.min(keyword, totalimages-1)       
        setting.gallerylayers[setting.bglayer].innerHTML=simpleGallery.routines.getSlideHTML(setting.imagearray[imgindex])       
        setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground       
            .stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:       
                clearTimeout(setting.playtimer)       
                setting.gallerylayers[setting.bglayer].innerHTML=null  //empty bglayer (previously fglayer before setting.fglayer=setting.bglayer was set below)       
                try{       
                    setting.onslide.call(slideshow, setting.gallerylayers[setting.fglayer], setting.curimage)       
                }catch(e){       
                    alert("Simple Controls Gallery: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)       
                }       
                setting.currentstep+=1       
                if (setting.autoplay[0]){       
                    if (setting.currentstep<=setting.totalsteps)       
                        setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.autoplay[1])       
                    else       
                        slideshow.navigate("play/pause")       
                }       
            }) //end callback function       
        setting.gallerylayers[setting.fglayer].style.zIndex=999 //foreground layer becomes background       
        setting.fglayer=setting.bglayer       
        setting.bglayer=(setting.bglayer==0)? 1 : 0       
        setting.curimage=imgindex       
        setting.navbuttons[3].innerHTML=(setting.curimage+1) + '/' + setting.imagearray.length       
        if (setting.imagearray[imgindex][3]){ //if this slide contains a description       
            setting.$descpanel.css({visibility:'visible'})       
            setting.descdiv.innerHTML=setting.imagearray[imgindex][3]       
        }       
        else if (setting.longestdesc!=""){ //if at least one slide contains a description (feature is enabled)       
            setting.descdiv.innerHTML=null       
            setting.$descpanel.css({visibility:'hidden'})
        }      
    },
    showhidenavpanel:function(state){      
        var setting=this.setting       
        var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]       
        setting.$navpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)       
        if (setting.longestdesc!="") //if at least one slide contains a description (feature is enabled)       
            this.showhidedescpanel(state)       
    },
    showhidedescpanel:function(state){      
        var setting=this.setting       
        var endpoint=(state=="show")? 0 : -setting.descpanelheight       
        setting.$descpanel.stop().animate({top:endpoint}, simpleGallery_navpanel.slideduration)       
    }       
}
simpleGallery.routines={
    getSlideHTML:function(imgelement){      
        var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?       
        layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'       
        layerHTML+=(imgelement[1])? '</a>' : ''       
        return layerHTML //return HTML for this layer       
    },
    addnavpanel:function(setting){      
        var interfaceHTML=''       
        for (var i=0; i<3; i++){       
            var imgstyle='position:relative; border:0; cursor:hand; cursor:pointer; top:'+simpleGallery_navpanel.imageSpacing.offsetTop[i]+'px; margin-right:'+(i!=2? simpleGallery_navpanel.imageSpacing.spacing+'px' : 0)       
            var title=(i==0? 'Prev' : (i==1)? (setting.ispaused? 'Play' : 'Pause') : 'Next')       
            var imagesrc=(i==1)? simpleGallery_navpanel.images[(setting.ispaused)? 1 : 3] : simpleGallery_navpanel.images[i]       
            interfaceHTML+='<img class="navimages" title="' + title + '" src="'+ imagesrc +'" style="'+imgstyle+'" /> '       
        }       
        interfaceHTML+='<div class="gallerystatus" style="margin-top:1px">' + (setting.curimage+1) + '/' + setting.imagearray.length + '</div>'       
        setting.$navpanel=$('<div class="navpanellayer"></div>')       
            .css({position:'absolute', width:'100%', height:setting.panelheight, left:0, top:setting.dimensions[1], font:simpleGallery_navpanel.panel.fontStyle, zIndex:'1001'})       
            .appendTo(setting.$wrapperdiv)       
        $('<div class="navpanelbg"></div><div class="navpanelfg"></div>') //create inner nav panel DIVs       
            .css({position:'absolute', left:0, top:0, width:'100%', height:'100%'})       
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"navpanelbg" div       
            .eq(1).css({paddingTop:simpleGallery_navpanel.panel.paddingTop, textAlign:'center', color:'white'}).html(interfaceHTML).end() //"navpanelfg" div       
            .appendTo(setting.$navpanel)       
        return setting.$navpanel.find('img.navimages, div.gallerystatus').get() //return 4 nav related images and DIVs as DOM objects       
    },
    adddescpanel:function(setting){      
        setting.$descpanel=$('<div class="gallerydesc"><div class="gallerydescbg"></div><div class="gallerydescfg"><div class="gallerydesctext"></div></div></div>')       
            .css({position:'absolute', width:'100%', left:0, top:-1000, zIndex:'1001'})       
            .find('div').css({position:'absolute', left:0, top:0, width:'100%'})       
            .eq(0).css({background:'black', opacity:simpleGallery_navpanel.panel.opacity}).end() //"gallerydescbg" div       
            .eq(1).css({color:'white'}).end() //"gallerydescfg" div       
            .eq(2).html(setting.longestdesc).end().end()       
            .appendTo(setting.$wrapperdiv)       
        var $gallerydesctext=setting.$descpanel.find('div.gallerydesctext')       
        setting.descpanelheight=$gallerydesctext.outerHeight()       
        setting.$descpanel.css({top:-setting.descpanelheight, height:setting.descpanelheight}).find('div').css({height:'100%'})       
        return setting.$descpanel.find('div.gallerydesctext').get(0) //return gallery description DIV as a DOM object       
    },
    getCookie:function(Name){      
        var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair       
        if (document.cookie.match(re)) //if cookie found       
            return document.cookie.match(re)[0].split("=")[1] //return its value       
        return null       
    },
    setCookie:function(name, value){      
        document.cookie = name+"=" + value + ";path=/"       
    }       
}
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({      
    wrapperid: "simplegallery1", //ID of main gallery container,       
    dimensions: [300, 200], //width/height of gallery in pixels. Should reflect dimensions of the images exactly       
    imagearray: [       
        ["IMAGE LINK 1", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 2", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 3", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 4", "#", "_new", "DESCRIPTION"],
        ["IMAGE LINK 5", "#", "_new", "DESCRIPTION"]         ],      
    autoplay: [true, 2000, 20], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]       
    persist: false, //remember last viewed slide and recall within same session?       
    fadeduration: 500, //transition duration (milliseconds)       
    oninit:function(){ //event that fires when gallery has initialized/ ready to run       
        //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))       
    },       
    onslide:function(curslide, i){ //event that fires after each slide is shown       
        //Keyword "this": references current gallery instance       
        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)       
        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)       
    }       
})
</script>
<div id="simplegallery1"></div>  
·        Thay IMAGE LINK 1, 2, 3, 4, 5 thành link ảnh của bạn.
·        Thay dấu # màu đỏ là liên kết tới bài viết hoặc trang Blog/Website bạn mong muốn.
·        Thay DESCRIPTION là mô tả cho hình ảnh
·        Để tăng hoặc giảm thời gian luân chuyển giữa 2 ảnh kế tiếp nhau bạn thay đổi giá trị 2000 tương đương với 2 giây.
·        Để tắt chức năng tự động di chuyển qua các ảnh bạn sửa true thành false.
·        Để thay đổi chiều rộng và chiều cao của khung slider bạn hãy thay đổi giá trị chiều rộng 300 và chiều cao 200.
·       font: 10px là cỡ chữ của phần mô tả.
·        persist: false tắt chức năng nhớ bức ảnh cuối cùng bạn xem trước khi thoát khỏi hoặc chuyển đến bài khác để tiếp tục chạy. Để bật thì thay persist: false thành persist: true .
·        fadeduration: 500 Thời gian chuyển đổi thời gian tính bằng mili giây.

Đó là tất cả những gì bạn cần phải làm.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. JJJ

Quá trình cài đặt gặp vấn đề gì cứ để lại Comment !
Liên hệ đặt quảng cáo
Quảng cáo trên windows2it.com

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!
Theo dõi tôi trên:
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

29 nhận xét:

  1. Em vừa làm xong vào xem blog thì nó báo là DIV with ID “simplegallery1” not found on page.
    Cái DIV with ID “simplegallery1” nghĩa là gì anh?
    Và cách sửa lỗi đó như thế ạ?
    Em cảm ơn.

    ReplyDelete
    Replies
    1. Đơn giản cái lỗi trên phát sinh là bạn do coppy thiếu (Copy chưa hết) ... Mình mới cài đặt thử thủ thuật trên cho Blog của bạn nó hoạt động rất oke :) (Mình đã xóa bạn có thể thêm lại)

      Delete
    2. Dạ chính xác là vậy.
      Mà anh, anh vào blog em thấy có hình 3 con chó đầu tiên luôn ấy.
      Có cách nào mình đưa hiệu ứng này thay vào vị trí đó ko?
      Cảm ơn.

      Delete
    3. Cái này người ta gọi SlideShow Bạn Sữa trực tiếp trong template là được ngay ấy mà ... nó cũng tương tự như thủ thuật này :)

      Delete
    4. Sửa thế nào ấy a? Em không có biết :v

      Delete
    5. Cái này sơ bộ thì nó có 1 đoạn CSS và 1 đoạn HTML ... Bạn chọn Kiểm tra phần tử nơi bạn muốn chỉnh sữa rùi vào template tìm cho nhanh (Mình chỉ nói sơ bộ cho bạn vậy thui) __ Không thể nào Bình luận vài câu mà nói hết cái vấn đề này cho bạn được >>> Bạn nên tập sữa nhưng phần dễ trước đi :)

      Delete
    6. Anh, cho em hỏi thêm cái này nữa.
      Blog của em đang xài bản Norma, ban đầu các silde ảnh nó mặc định trình chiếu nhưng đến giờ nó không còn nữa. Em không biết trong quá trình em cài các thủ thuật khác vào blog thì nó có bị ảnh hưởng hay không.
      Em cũng vừa xem lại bản Norma gốc và so sánh với blog hiện giờ thì em chẳng thấy có thay đổi gì trong code của slide trình chiếu cả.
      Phiền anh xem giúp em!
      Cảm ơn.

      Delete
    7. --- Trong quá trình cài đặt các thủ thuật ... thì các cấu trúc trong ko bị ảnh hưởng lắm. Trong quá trình cài đặt thủ thuật bạn chú ý giùm mình: Tránh dư thừa JS và CSS, xung đột giữa các JS vậy là đủ :)

      -- Còn SlideShow của mình nghĩ là do lỗi đoạn JS nói mới ko trượt được đó .... Bạn nên soi lại. >>> Bạn nên tạo 1 Blog khác (gọi là Blog phụ) và up template đó lên rồi bạn sữa trên Blog phụ đó .. khi nào sữa vừa ý rùi hãy sữa trên Blog chính >>> Chứ ko nên sữa trực tiếp trên Blog chính dễ Phát sinh ra lỗi ko cần thiết.

      Delete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. mình muốn thay đổi màu chữ với màu nền mô tả thì thay đâu vậy ban. muốn thêm 1 đoạn nhạc vào thì làm thế nào.

    ReplyDelete
    Replies
    1. #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
      text-align: left;
      padding: 2px 5px;
      font: 10px normal verdana, arial;
      }

      Bạn sữa thành:

      #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
      text-align: left;
      padding: 2px 5px;
      font: 10px normal verdana, arial;
      color: red; >>>>>>>>>> Màu chữ bạn muốn
      background: yellow; >>>> Màu nền bạn muốn

      }

      Delete
  4. Admin ơi , cho hỏi là mình muốn chạy cùng lúc 2 slide có được hay không ?

    ReplyDelete
    Replies
    1. Ý bạn nói là cho 2 hình ảnh chạy cùng một lúc !!!

      Delete
    2. http://icosaniga.blogspot.com/p/hot-girl-viet.html , ảnh nó ko ngay khung vậy admin ơi , ảnh nó lệch so với khung hình

      Delete
    3. Mình thấy rất đẹp ảnh trọn ở trong khung (http://i.imgur.com/txeMUxW.png) có thấy lệch gì đâu bạn ,,,, Mà bạn mua tên miền mình đi, mình phải đổi mạng mới vô được blogspot của bạn được chán quá !!!

      Delete
    4. tại mình căn chiều dài nó ra nên thấy tạm ổn , ý mình là làm sao để xóa cái viền đen bên ngoài ấy . Code slide ảnh này mình đưa thẳng vào bài viết đấy .

      Delete
    5. - Đương nhiên ảnh bạn phải căn ảnh trước khi đưa và slideshow chứ.. slideshow như cái khung để chứa ảnh (1 là bạn tùy biến ảnh cho phù hợp với khung 2 là bạn tùy biến khung cho phù hợp với ảnh) .. Cái này là qui luật tư nhiên mà.

      - Bạn bỏ viền đên chỉ cầ xóa đoạn CSS này và lưu lại là được !!
      box-shadow: 0px 0px 0px #303030;
      border: 1px solid #000000;

      !!!

      Delete
    6. cái đoạn code box-shadow sao tìm hoài ko thấy vậy admin ?

      Delete
    7. Bạn tìm trong template của Bạn ấy.. Cái lỗi này do Template bạn phát sinh ra chứ ko phải do lỗi thủ thuật đâu nhé !!!

      Delete
  5. cái này chạy có ảnh hưởng tới tốc độ load trang ko ad?

    ReplyDelete
    Replies
    1. Có nha bạn ,,, thêm một hiệu có 1 lượng JS lớn như thế này thì đương nhiên là có ảnh hưởng tới tốc độ load trang rồi bạn!!!

      Delete
  6. Tôi đã thử rất nhiều thủ thuật dành cho Blog của trang này đăng, kết quả khoảng 60% trang này hướng dẫn làm được thôi, tui cũng không hiểu thế nào nữa.... Do vậy, mọi người khi chinh sua blog mình cẩn thận nhé, nên làm từng bước, kiểm tra lại rồi hãy tiếp tục bo7c1 tiếp theo, cận thận hơn thì nên backup theme lại...

    ReplyDelete
    Replies
    1. Mình ko hiểu tại sao mấy bạn lại làm ko được ... Trong khi đó tất cả các thủ thuật mình đã để lại Demo cho các bạn xem trước (và các Demo đó hoạt động rất tốt và ko có vấn đề gì) .... !!! Các nên đọc kỹ tuần bước của mình đã hướng dẫn trước khi thực hiện thủ thuật .... Còn không rõ gì vui lòng để lại comment ngay bên dưới mình sẽ trả lời nhanh nhất có thể --- vì thời gian của mình khá hạn hẹp ko thể trả lời liền cho các bạn được !!!

      Delete
  7. Cảm ơn Bạn rất nhiều! Bạn có thể cập nhật tính năng chuyển hình có hiệu ứng được không? Cảm ơn bạn nhé!

    ReplyDelete
    Replies
    1. Bao nhiêu js đó đủ nặng rồi còn hiệu ứng nữa ~~

      Delete
  8. Admin cho mình hỏi là khi mình đưa đoạn code này vào bài đăng thì ở phần chính của blog không báo lỗi. Nhưng Em khi mình link nó vào menu thì sẽ báo lỗi như bên dưới:
    Error DIV with ID “simplegallery1” not found on page.
    Cách sữa lỗi như thế nào ? giúp mình với nhé.
    Cảm ơn nhiều !

    ReplyDelete
    Replies
    1. Chưa hiểu ý bạn lắm ... mà có liên quan gì tới menu đâu nhỉ! :(

      Delete