Thứ Năm, 6 tháng 11, 2014

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 == &quot;item&quot;'>      
<script type='text/javascript'>    
var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;    
var maxresults=6;    
var splittercolor=&quot;#d4eaf2&quot;;    
var relatedpoststitle=&quot;Liên quan&quot;;    
</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]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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
$(&quot;.paging_btrix&quot;).show();
$(&quot;.paging_btrix a:first&quot;).addClass(&quot;active&quot;);
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
//paging_btrix + Slider Function
rotate = function(){
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(&quot;.paging_btrix a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(&quot;.image_reel&quot;).animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging_btrix a.active&#39;).next();
if ( $active.length === 0) { //If paging_btrix reaches the end...
$active = $(&#39;.paging_btrix a:first&#39;); //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
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(&quot;.paging_btrix a&quot;).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 !

0 nhận xét:

Đăng nhận xét