Slider Image đơn giản cho blogspot

<b>Slider Image (slider ảnh)</b> 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 <b><a href="http://www.thuthuatseo.tk/search/label/SEO%20Blogspot">seo blogspot</a></b> thì hộ thường chọn những slider image đơn giản nhất để góp phần <b><a href="http://www.khamphablog.com/2015/05/toi-uu-css-va-js-cho-blogspot.html">tối ưu seo cho blogspot</a></b> của họ.<br /><div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif; margin-left: 1em; margin-right: 1em;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2HwL7eQW5cntz0Kf3SMnD8IhFjRljTrjq0I-vLo7qANzjRJjEcsvEj2ibijbw5Tzn6MzSxo09J8Pvs_HMtfOgz99XoKbQfguIjjbcRQVzLYvRdHmsdsRA8ngQwDWCSCKFVQ0SXmOY4c/s1600/slider-image-don-gian-blogspot.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="slider image cho blogspot" border="0" height="237" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq2HwL7eQW5cntz0Kf3SMnD8IhFjRljTrjq0I-vLo7qANzjRJjEcsvEj2ibijbw5Tzn6MzSxo09J8Pvs_HMtfOgz99XoKbQfguIjjbcRQVzLYvRdHmsdsRA8ngQwDWCSCKFVQ0SXmOY4c/s400/slider-image-don-gian-blogspot.JPG" title="slider ảnh cho blogspot" width="400" /></a></span></div><div class="separator" style="clear: both; text-align: center;"><a name="more"></a><br /></div><br /><h2><span style="font-family: Arial, Helvetica, sans-serif;">Thêm slider image cho blogspot</span></h2><h3><span style="font-family: Arial, Helvetica, sans-serif;">1. Thêm css</span></h3><span style="font-family: Arial, Helvetica, sans-serif;">Tìm đế thẻ ]]></b:skin> trong templates blogspot và thêm đoạn code này ngay trên nó</span><br /><br /><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;">#featured {height: 1px; width: 1px; overflow: hidden;}<br />div.orbit {<br />width: 1px;<br />height: 1px;<br />position: relative;<br />overflow: hidden;<br />}<br />div.orbit img {<br />position: absolute;<br />top: 0;<br />left: 0;<br />}<br />div.orbit a img {border: none;}<br />div.timer {<br />width: 40px;<br />height: 40px;<br />overflow: hidden;<br />position: absolute;<br />top: 10px;<br />right:10px;<br />opacity: .6;<br />cursor: pointer;<br />z-index: 1001;<br />}<br />span.rotator {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: -20px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl3fF3shlOik3VgrqQxb2R8LcFoJ3lZ_Hs6l5qmp4hdhrnRIk2bCyfUhDNE5XjAeJCuy1sMgQix7kj5BjcHZMuaRkm-jgIqLQs92KQaIuPURWK8RRJUcNb2lXRaLDXaiUaI_OsclD7py8M/s1600/timer-icon.png);<br />background-repeat: no-repeat;<br />z-index: 3;<br />}<br />span.mask {<br />display: block;<br />width: 20px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />right: 0;<br />z-index: 2;<br />overflow: hidden;<br />}<br />span.rotator.move {left: 0;}<br />span.mask.move {<br />width: 40px;<br />left: 0;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJEq9hA-89qMAIx5k78NaPOhJ5QAArwBhAIcs2sUgT28_z6YJSUj-amDrLZG9Ta1F5WbqBmkd4gbm3jl5gIu7u47vsoRqtyHj6jnimf4L7iOiv0zjEapTbqfsiqy6jWQDp7gpnrGhHT0u/s1600/timer-right.png);<br />background-repeat: repeat;<br />background-position: 0px 0px;<br />}<br />span.pause {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: 0px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPLqgJONMd95h0-Sb_1pWiMOlc8WW2DwVUnAkcT2St3pbklFR7aSftvA6fAOxL7ssR2agprUWyUCnvHzYnyFQJNC4f3EvwCdQap34pdcseHof3mjPBl5jmucpoAiLkeDCl7bvAm4E8PbLZ/s1600/pause-icon.png);<br />background-repeat: no-repeat;<br />z-index: 4;<br />opacity: 0;<br />}<br />div.timer:hover span.pause,<br />span.pause.active,<br />div.timer:hover span.pause.active { opacity: 1; }<br />div.caption {<br />background: #000;<br />background: rgba(0,0,0,.6);<br />width: 100%;<br />z-index: 1000;<br />position: absolute;<br />bottom:-100px;<br />color: #fff;<br />padding: 8px 0;<br />text-align: center;<br />}<br />div.caption span {<br />padding: 0 10px;<br />font-size: 14px;<br />text-shadow: 0px 1px 0px rgba(0,0,0,.8);<br />margin: 0;<br />}<br />.orbit-caption { display: none; }<br />div.orbit:hover div.slider-nav { display: block; }<br />div.slider-nav { display: none; }<br />div.slider-nav span {<br />width: 33px;<br />height: 33px;<br />text-indent: -9999px;<br />position: absolute;<br />z-index: 1000;<br />top: 43%;<br />cursor: pointer;<br />}<br />div.slider-nav span.right {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-jeujnNdFuSagWxzkF5aHtA9JWdPXYdESM4TQYGKAsQTR4WgQtEQdyJLbi-T-FSUuvu7CnJioyDZ8CMWylB6QZYxGO9u_g5k9bD5QRVozWUj49XFaqCfjK3TOovm1WGYu2T1oE90O6qx/s1600/arrow-right.png);<br />right: 10px;<br />}<br />div.slider-nav span.left {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsyHsAMZ2SP-W4_7DTudnXw5-GxJNJecc4_X6OZNhYdodEfgeWEcCPOdpTAw8xl4QJDPU5Th9srl3pZEtmLv_Av50PuRe6LAsPsCyyBguTcU-ty1woyQ3nBt7BwxpYWs1X083WfqDLF4a-/s1600/arrow-left.png);<br />left: 10px;<br />}<br />.orbit-bullets {<br />position: absolute;<br />z-index: 1000;<br />list-style: none;<br />top: 10px;<br />left: 7px;<br />margin: 0;<br />padding: 0;<br />}<br />.orbit-bullets li {<br />float: left;<br />margin-left: 5px;<br />cursor: pointer;<br />color: #999;<br />text-indent: -9999px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJgL5vxj3A8ACVacdeGzj2JbW4BHdBgmJlJkxbBui16inBuAXR9wdZ9lp5GA14C3izwuPRiYd37M4rpmgoVZwgGNU-esOlzLEK8UFfafCMF5xeVNrL_vwiromGAZ8Ti47FmfMavpbWIqKE/s1600/bullets.png);<br />background-repeat: no-repeat;<br />background-position: 0 0;<br />width: 7px;<br />height: 7px;<br />overflow: hidden;<br />}<br />.orbit-bullets li.active { color: #222; background-position: -7px 0; }</span></blockquote><br /><h3><span style="font-family: Arial, Helvetica, sans-serif;">2. Thêm scripts</span></h3><span style="font-family: Arial, Helvetica, sans-serif;">Tiếp tục tìm đến thẻ </head> và thêm trên nó đoạn code này</span><br /><br /><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /><!--[if IE]><br /><style type="text/css"><br />.timer { display: none !important; }<br />div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }<br /></style><br /><![endif]--><br /><script type='text/javascript'><br />$(window).load(function() {<br />$(&#39;#featured&#39;).orbit({<br />advanceSpeed: 5000,<br />&#39;bullets&#39;: true,<br />&#39;timer&#39; : true,<br />&#39;animation&#39; : &#39;horizontal-slide&#39;<br />});<br />});<br /></script><br /><script type='text/javascript'><br />//<![CDATA[<br />(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&<br />x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},<br />a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=<br />a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;<br />d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},<br />a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);<br />j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);<br />//]]><br /></script></span></blockquote><br /><h3><span style="font-family: Arial, Helvetica, sans-serif;">3. Đặt slider image</span></h3><span style="font-family: Arial, Helvetica, sans-serif;">Bây giờ bạn chỉ cần chịn một vị trí thích và chèn đoạn code bên dưới vào là xong</span><br /><br /><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><div id='featured'></span><span style="font-family: Arial, Helvetica, sans-serif;"><a href='<span style="color: red;">Link URL</span>'><img rel='photo1' src="<span style="color: red;">image URL</span>" style='height: 348px; width: 590px;'/></a></span><span style="font-family: Arial, Helvetica, sans-serif;"><span class='orbit-caption' id='photo1'><span style="color: red;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span></span><span style="font-family: Arial, Helvetica, sans-serif;"><a href="<span style="color: red;">Link URL</span>"><img rel='photo2' src="<span style="color: red;">image URL</span>" style='height: 348px; width: 590px;'/></a></span><span style="font-family: Arial, Helvetica, sans-serif;"><span class='orbit-caption' id='photo2'><span style="color: red;">This is an example of description with links</span>: <a href='Description Link URL' style='color: #09A7EA;'><span style="color: red;">Thu Thuat Seo .TK</span></a></span></span><span style="font-family: Arial, Helvetica, sans-serif;"><a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a></span><span style="font-family: Arial, Helvetica, sans-serif;"><span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span><span style="font-family: Arial, Helvetica, sans-serif;"><a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a></span><span style="font-family: Arial, Helvetica, sans-serif;"><span class='orbit-caption' id='photo4'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Helplogger</a></span></span><span style="font-family: Arial, Helvetica, sans-serif;"></div></span></blockquote><div><span style="font-family: Arial, Helvetica, sans-serif;">Trong đó</span></div><br /><div style="margin: 15px auto; text-align: center;"></div><div style="clear: both;"></div><center><a class="text" href="http://share123blog.blogspot.com/"><div class="adslot"><div class="adicon"><i class="fa fa-angle-right"></i></div></div></a></center><br /><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Link url : thay bằng link bài viết khi click vào ảnh</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">Image url : là url ảnh khi muốn chạy slider</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">Có 1 đoạn text : đó là description (mô tả) của ảnh</span></li></ul><span style="font-family: Arial, Helvetica, sans-serif;">Bây giờ lưu mẫu lại và kiểm tra thành quả thôi nào :D</span></div>

Slider Image đơn giản cho blogspot

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 thêm »