Slider Image (slider ảnh) là một tiện ích được các blogger thường hay dùng để thêm phần chuyên nghiệp cho blog của mình hơn. Nhưng đối với các seoer làm seo blogspot thì hộ thường chọn những slider image đơn giản nhất để góp phần tối ưu seo cho blogspot của họ.
Thêm slider image cho blogspot 1. Thêm css Tìm đế thẻ ]]></b:skin> trong templates blogspot và thêm đoạn code này ngay trên nó
Slider images là một trong những tiện ích cần thiết cho blogspot, mặc dù là nó không có cũng không sao, nhưng slider ảnh đem tới một sự chuyên nghiệp cực kỳ cho blogspot, hôm nay mình giới thiệu cho các bạn một mẫu slider images chạy trên nền tản Javascipt và CSS load cực nhanh.
Cách thêm slider images vào blogspot
1. Đăng nhập vào blog
Để đăng nhập vào blog các bạn truy cập vào phần quản trị Blogger > Mẫu (templates) > Chỉnh sửa HTML
2. Thêm CSS
Để thêm css cho slider images vào templates các bạn bấm Ctrl + F và tìm đến thẻ ]]></b:skin> thêm đoạn code bên dưới ngay trên thẻ này.
Code Script thường được chèn bên trên thẻ </head> nên bạn tiếp tục tìm đến thẻ </head> và chèn code sau ngay trên nó.
<script type='text/javascript'> //<![CDATA[ var featuredcontentslider={ //3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page? settingcaches: {}, //object to cache "setting" object of each script instance jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) }, ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, setting){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting) } }, buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } }, buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } }, urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) }, setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value }, fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } }, cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass }, autorotate:function(setting){ window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1]) }, 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 }, init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) } } //]]> </script>
3. Hiển thị slider images
Để hiển thị được slider images thì các bạn chèn đoạn code sau ở nơi cần hiển thị slider
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='sliderthaiaiti-tophome'> <div class='sliderwrapper' id='slider4'> <div class='contentdiv'> <a href='url đích đến khi click'> <img alt='Thiết kế Web theo yêu cầu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimk1GIDfZQCanLm18NXPq2Gm6nNEQpllI4NXQLWqNLyW-u8EZ-CttWJ4efCq8-5l_kZ79zEajJw2rzCBqxSSuNCre1q2bXVGa0LXYsiix455IFACHR6zsbY-V4lwDsq09vc5FxJK-w_QI0/s0/thaiaitilmaj.jpg'/></a> </div> <div class='contentdiv'> <a href='url đích đến khi click'> <img alt='Kho giao diện Template Blogspot chuyên nghiệp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bOeHODRl47hAPQ_NB2J9LTVel8-UsIUjoyCaFNpGx7eNiuxsBMFVtWMRBBlao0Ob6rzxpIwuOKR1AzZKK__OkK8ZQRsFS4XUa_9-83PJ6my5z57DVLKaBRd300sNCUEsWIGS95R51FGs/s0/khotemp.jpg'/></a> </div> <div class='contentdiv'> <a href='url đích đến khi click'> <img alt='Thiết kế đồ họa' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FrMVv9MiFNP_vrJ_ZQnq5Au_1q5HQlw_hh8udW4ZQMDTRtbK6GjtywitF-02r7JVG1AbM6EY1uDm8WmG4_IdCahZWEquh8esb7u_4L7VU2K9cDI2F66syx9tGdebcU-UaSScBHwuMjaS/s0/GraphicsDesign.jpg'/></a> </div> <div class='contentdiv'> <a href='url đích đến khi click'> <img alt='Thiết kế Blogspot chuyên nghiệp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6nh5Y3Gnh2Hsfnn_6qaNjMUM9ruCOVACOHLwJi0JhzzPyRp1d6vSCHjH7N-29fmHSE6aPLN80qoTDgldqSMlUpJ5neqJGTt4XFpWVkFLSJGI1kR16p84tQXuknMPUuuwtehJ9-f33FD4/s0/thietkewebyeucau.jpg'/></a> </div> </div> <div id='paginate-slider4'> <a class='toc' href='#'> <img alt='Thiết kế Web theo yêu cầu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimk1GIDfZQCanLm18NXPq2Gm6nNEQpllI4NXQLWqNLyW-u8EZ-CttWJ4efCq8-5l_kZ79zEajJw2rzCBqxSSuNCre1q2bXVGa0LXYsiix455IFACHR6zsbY-V4lwDsq09vc5FxJK-w_QI0/h120/thaiaitilmaj.jpg'/></a> <a class='toc' href='#'> <img alt='Kho giao diện Template Blogspot chuyên nghiệp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8bOeHODRl47hAPQ_NB2J9LTVel8-UsIUjoyCaFNpGx7eNiuxsBMFVtWMRBBlao0Ob6rzxpIwuOKR1AzZKK__OkK8ZQRsFS4XUa_9-83PJ6my5z57DVLKaBRd300sNCUEsWIGS95R51FGs/h120/khotemp.jpg'/></a> <a class='toc' href='#'> <img alt='Thiết kế đồ họa' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4FrMVv9MiFNP_vrJ_ZQnq5Au_1q5HQlw_hh8udW4ZQMDTRtbK6GjtywitF-02r7JVG1AbM6EY1uDm8WmG4_IdCahZWEquh8esb7u_4L7VU2K9cDI2F66syx9tGdebcU-UaSScBHwuMjaS/h120/GraphicsDesign.jpg'/></a> <a class='toc' href='#'> <img alt='Thiết kế Blogspot chuyên nghiệp' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6nh5Y3Gnh2Hsfnn_6qaNjMUM9ruCOVACOHLwJi0JhzzPyRp1d6vSCHjH7N-29fmHSE6aPLN80qoTDgldqSMlUpJ5neqJGTt4XFpWVkFLSJGI1kR16p84tQXuknMPUuuwtehJ9-f33FD4/h120/thietkewebyeucau.jpg'/></a> </div> <script type='text/javascript'> featuredcontentslider.init({ id: "slider4", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.1], //[true/false, fadedegree] autorotate: [true, 5000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> </div> </b:if>
Thay url đích đến thành url của bạn, có nghĩa là khi click vào ảnh nó sẽ chạy đi đâu
Thay link ảnh luôn nhé
Xong rồi thì bấm lưu mẫu lại và xem thành quả nhé, và nó sẽ có demo như hình dưới. Chúc các bạn thành công :D
Thêm slider image cho blogspot
