Slider ảnh tuyệt đẹp cho blogger

Slider ảnh là một phần không thể thiếu cho một blogger chuyên nghiệp, rất thích hợp cho website/blogspot bán hàng hoặc giới thiệu sản phẩm. Tuy mẫu này có dùng Javascrip nhưng tốc độ load vẫn rất nhanh, không ảnh hưởng gì tới việc SEO blog cả.

Cách thêm Slider ảnh đẹp cho blogger

Bước 1 :

Đăng nhập vào Blogger => Mẫu => Chỉnh sửa HTML. Tìm đến thẻ </head> và thêm đoạn code này trên thẻ </head>

<script type='text/javascript'>
//<![CDATA[
// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){

// Get a reference to the chathongdesigner.
var chathongdesigner = $( "#chathongdesigner" );

// Bind the link to toggle the slide.
$( "a.openchat" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();

// Toggle the slide based on its current
// visibility.
if (chathongdesigner.is( ":visible" )){

// Hide - slide up.
chathongdesigner.slideUp( 100 );

} else {

// Show - slide down.
chathongdesigner.slideDown( 100 );}});

});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="640"></div>';
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRMbMOSyFbi-DFVwQFulOPJCxzUFXTMTRbPcM2TqCfR7oVH1WENSsbWwTnIzL_nN6spV-xGA5iiTlJin1U7VvY9Qhx7SxwFuGhWkpHIca7XhFQ9huJjgXQfxKDIHNyLzNNl0VQ67H3Ro/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Liên quan";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRMbMOSyFbi-DFVwQFulOPJCxzUFXTMTRbPcM2TqCfR7oVH1WENSsbWwTnIzL_nN6spV-xGA5iiTlJin1U7VvY9Qhx7SxwFuGhWkpHIca7XhFQ9huJjgXQfxKDIHNyLzNNl0VQ67H3Ro/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="float: left;width:64px;height:53px;padding: 3px;border: 1px solid #ddd;" src="'+thumburl[r]+'"/><br/><div style="width:233px;float: left;overflow: hidden;margin-left:5px;height:65px;border: 0pt none; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging_btrix a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging_btrix a.active').next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger the paging_btrix and slider function
}, 5000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging_btrix a").click(function() {
$active = $(this); //Activate the clicked paging_btrix
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>

Bước 2 :

Code này bạn thêm vào chổ nào muốn hiển thị slider

<div id='slidertop-trungtam'>
<div class='container1'>
<style>
#slidertop-trungtam {float: left;width: 438px;height: 282px;overflow: hidden;margin-left: 10px;}
.container1 {width:438px;padding: 0;margin: 0 auto;}
.folio_block {position: absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {position: relative;}
.window {height:282px; width:438px;overflow: hidden;position: relative;}
.image_reel {position: absolute;top: 0; left: 0;}
.image_reel img {float: left;width: 438px;height: 282px;}
.paging_btrix {position: absolute;bottom:-20px;left:-30px;width: 130px; height:47px;z-index: 100;text-align: center;line-height: 40px;}
.paging_btrix a {padding:4px;margin: 5px;text-decoration: none;color: #fff;background: #333;border-radius: 30px;float: right;width: 5px;height: 5px;}
.paging_btrix a.active {font-weight: bold; background:#FE026C;border-radius: 30px;}
.paging_btrix a:hover {font-weight: bold;}
</style>
<div class='main_view'>
<div class='window'>
<div class='image_reel'>
<a href='LINK LIÊN KẾT 1'>
<img src='LINK ẢNH HIỂN THỊ 1'/>
</a>
<a href='LINK LIÊN KẾT 2'>
<img src='LINK ẢNH HIỂN THỊ 2'/>
</a>
<a href='LINK LIÊN KẾT 3'>
<img src='LINK ẢNH HIỂN THỊ 3'/>
</a>
<a href='LINK LIÊN KẾT 4'>
<img src='LINK ẢNH HIỂN THỊ 4'/>
</a>
</div>
</div>
<div class='paging_btrix'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
</div>
</div>
</div>
</div>

Thay những link trên thành link của bạn. Ở đây mình demo 4 ảnh, các bạn muốn thêm thì cứ thêm vào nhé. Chúc bạn bạn thành công !

Chào mừng và rất vui các bạn đến với blog chia sẻ mình!

Tham quan du ngoạn từ Nam chí Bắc:

An Giang || Bà Rịa - Vũng Tàu || Bắc Giang || Bắc Kạn || Bạc Liêu || Bắc Ninh || Bến Tre || Bình Dương || Bình Định || Bình Phước || Bình Thuận || Cà Mau || Cao Bằng || Cần Thơ || Đà Nẵng || Đắk Lắk || Đắk Nông || Điện Biên || Đồng Nai || Đồng Tháp || Hà Giang || Hà Nam || Hà Tĩnh || Hải Dương || Hậu Giang || Hòa Bình || Hưng Yên || Khánh Hòa || Kiên Giang || Kon Tum || Lai Châu || Lâm Đồng || Lạng Sơn || Lào Cai || Long An || Về Miền Tây || Nam Định || Nghệ An || Ninh Bình || Ninh Thuận || Phú Thọ || Quảng Bình || Quảng Nam || Quảng Ngãi || Quảng Ninh || Quảng Trị || Sóc Trăng || Sơn La || Về Tây Nguyên || Tây Ninh || Thái Bình || Thái Nguyên || Thanh Hóa || Thừa Thiên Huế || Thành phố Hồ Chí Minh || Thủ Đô Hà Nội || Tiền Giang || Trà Vinh || Tuyên Quang || Vĩnh Long || Vĩnh Phúc || Yên Bái

|| || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || || ||

Bộ sưu tập ảnh hot:

Album nghệ thuật Dương Quốc Định Full || Albums Quang Linh || Ảnh chỉ có Việt Nam || Ảnh cưới Collection || Ảnh đẹp Phương Tây || Ảnh đẹp Victoria’s Sceret tổng hợp || Ảnh độc cười ra nước mắt || Ảnh giải trí Châu Á || Ảnh giải trí Hàn Quốc || Ảnh giải trí Nhật Bản || Ảnh giải trí Thái Lan || Ảnh giải trí Trung Quốc || Ảnh nền PC || Ảnh nghệ thuật 3D || Ảnh Nude || Hoa đẹp bốn mùa nên xem || Hoa hậu thế giới Collection || Hoa hậu Việt Nam Collection || Hoa Phong Lan || Thư viện ảnh || Thời sự qua ảnh || Tranh đẹp của họa sĩ nổi tiếng

|| || || || || || || || || || || || || || || || || ||

Like bài viết nếu bạn thấy hay và có ích :

Admin: Haitaynamkg

Thích ngắm biển chiều hoàng hôn Tây Nam (Rạch Giá - Kiên Giang) và viết lách blog để chia sẻ kiến thức của nhân loại cùng mọi người. Sống thì phải lao động dù điều đó có thể đem lại cho bạn bao buồn vui... mệt mỏi... nghỉ ngơi chỉ để dành cho những người die thui...