[Tips] - 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á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ó

#featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}
div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}
div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}
span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lnUYedlC4ExCKXpkGbg0oe7n-Z9LwRA30W3T5-iCA2U7rwL3o287SmbxOGvRAoDVQs66qTI64H0CQVzEVm4qjRhnFcjJ5C8GQ-iATqZzfDco4lV2-QRx3d1ly3AI4OA4anpqSFN6qqwh/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}
span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}
span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8eD-b0Xpnys3tmrO4BlPeX0BXAIZE0J1hfzhb4LZEHMUCEFB98GEBVF2X2BnFKanMGCMKtCYiO52j6efWCmQw2p00EH1Bst8YUW0RXICYVR2LECiTbvLULV-5S98HwUg8HGhyphenhyphenVAODYlnK/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}
span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbEMkRMrn5aWyfeuh28DcySjoyHjJhYiadogVnVpdZDoP19m95GWr9Et-2vuNw_JdW4HKtqMm7HTnWK1e3qrG-7NJ_ciXQhakQ5-8Unji_tHMc0Ty0396zE2MzusK-ZGG5sZe4pNoSX_0z/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}
div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }
div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}
div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }
div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}
div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnBAPwwGJ_j7IcFeIJAB-tqL0pbA7GuTfKfxQCwD6wDLPpSwvGf1icNOWFrF9CpV87SKpxNO-YF15XR2qAlfXwp5oWiUct5uJ-1HbVrJ3OoY9DFf21gHW_ZAdx4JTjyvVJlCacuLLShLJR/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb607fPD4QI_j-zxZOOZ1jb-jVLUAOyLjgjhiXvW0N9dX0MF5DCfXGfHNfSWHa0xMEiAqlA44dGPehyfgq6_rwBYevwhiks1jmQPhObbdQmule-d5OLkishQ5mdOvFxtBLSDnyVe9Qu-DX/s1600/arrow-left.png);
left: 10px;
}
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioi5iWEQNzfbFfTbtvoDAW9JsaIOPA1q8q8_HWTx9J1bTVZKb315E-f8Dxp4BfWupTbMHvdNBwpSx2MM8cA1ZjfKtvu091f6rwHAnO_d2XjKwfak6JzbMQgBNTXlfITGXkh38TPlqoTTDV/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

2. Thêm scripts
Tiếp tục tìm đến thẻ </head> và thêm trên nó đoạn code này

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<!--[if IE]>
<style type="text/css">
.timer { display: none !important; }
div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
</style>
<![endif]-->
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#featured&#39;).orbit({
advanceSpeed: 5000,
&#39;bullets&#39;: true,
&#39;timer&#39; : true,
&#39;animation&#39; : &#39;horizontal-slide&#39;
});
});
</script>
<script type='text/javascript'>
//<![CDATA[
(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&&
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},
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=
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;
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},
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);
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);
//]]>
</script>

3. Đặt slider image
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

<div id='featured'><a href='Link URL'><img rel='photo1' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo1'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span><a href="Link URL"><img rel='photo2' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo2'>This is an example of description with links: <a href='Description Link URL' style='color: #09A7EA;'>Kham Pha Blog</a></span><a href="Link URL"><img rel='photo3' src="image URL" style='height: 348px; width: 590px;'/></a><span class='orbit-caption' id='photo3' style='text-align:center;'>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span><a href='Link URL'><img rel='photo4' src="image URL" style='height: 348px; width: 590px;'/></a><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></div>

Trong đó

• Link url : thay bằng link bài viết khi click vào ảnh
• Image url : là url ảnh khi muốn chạy slider
• Có 1 đoạn text : đó là description (mô tả) của ảnh

Bây giờ lưu mẫu lại và kiểm tra thành quả thôi nào :D

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề