• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Slider-Images Thu-Thuat [Tips] - Slider Image đơn giản cho blogspot

[Tips] - Slider Image đơn giản cho blogspot

Đỗ Mạnh Hồng May 31, 2015 Blog Series Blog-Tips Slider-Images Thu-Thuat
Đỗ Mạnh Hồng
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ọ.
slider image cho blogspot
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/AVvXsEjlB9YHrgEi9bZbWmpJwr2LJ5-4BfBYi-KoUJXzO0KRd6EiQoJPxz29wzsg4e_xlYryYcWRi1n_1bbIHnosWYIb5RDV2AFvUNKoAKZvOmF-r9VynnQDMGlko4uaNzFYAwSvoFGNuUJRHlfN/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/AVvXsEigSjFd0xbSX0ektS7eMBUDMJ7QvKTrPZqZl11YpB84vcMF5w2qTKfTtM2GUK19sBSoqkVm8Kal3xEkUVxhJvXFNOcHnaBzLG8dwVSaLsGLNaS1SNwhCRn2I4vGkmoEK0O4LBka8S7Vm_VI/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/AVvXsEizAJVMdrGVGm2eyYbTVwS5rgQ1AtdAZUpJR4aJzoeDULM1OKqfa2jlX9BETkLwZIXpcoaU8XP3oGKq3Huj7vBbj6ZaYg5eSo8dzDCW3AhXnETj5UJ3l121CgKvBVXzQB2aJpQaO7ZpWCIw/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/AVvXsEhZe08NjJ6PLGKDMeJWn8Mj_cdaznAQpPzq4jo_RGUZRx9VnJ_Z_G61ceTe92pPGD8kWNZgdqIdohTMlyNuF6WOhFGjAMZQ0C22zOZ-5mN4rNe6KxkAlTE8dg44ahlKK9cQ1AH0H9YJkBSu/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKBlozmU4v6E2gliB91n-exQbXlb7cYTDa16wWrVJfjcgRDnaqZqktU-jNuZczXBfpcWC5fPYdtFV7_oUwhpLqp6K7dWU-EixvCY0tmLc8dyX3k6NG4wSpTYQFgv0GPcwSSOYbaRSo_bJC/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/AVvXsEgahAIEslxqP5KFQpN0KTsCbaJYHl4Jhz_AIf9Fj6JCjEMyEG9SzPmi7Lap2Cv0868uz-Yk-kNjbBcfdSGfChXBRCzHLI0QqvTU3Gs2SrSlRCH4bgVnP5DKc_qnmY3S-93yj_7MWbAcK4gY/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

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

  • [Tips] - 4 Cách làm đẹp Popular Posts cho blogspot Popular Posts hay còn gọi là bài viết xem nhiều ở trong Blogspot là một widget mà không thể thiếu cho bất kỳ blog nào, ...
  • [Tips] - Hướng dẫn tạo slider ảnh chuyên nghiệpSlider 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 ản ...
  • [Tips] - Tối ưu seo blogspot search labelSearch label hay còn gọi là trang nhãn trong blog, những người làm seo blogspot thì ít ai nghĩ đến việc seo trang này. ...
  • [Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thư ...
  • [Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspotChào các bạn nói đến cách tích hợp Responsive vào blogspot thì khi bạn search google tìm được rất nhiều kết quả, nhưng ...
Next
[Share] - Templates blogspot chuẩn seo chia sẻ thủ thuật
Previous
[Tips] Menu phân cấp cho blogspot
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

  • Phương pháp xây dựng backlink 4 tầng hiệu quả
  • [Tips] - Hướng dẫn tích hợp AncPlayer cho Blogspot
  • [Vip1] - Giao diện blogspot bán hàng chuyên nghiệp
  • [Share] - Templates blogspot chia sẻ ebook
  • [Tips] - Tối ưu title cho bài viết blogspot chuẩn seo

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu