Slider Photos đẹp có nút điều khiển cho Blogspot

Tweet

Mẫu Slider Photos giúp bạn hiển thi những hình ảnh quảng cáo ngoài Top home hoặc bất cứ đâu. Với Slider Photos này sẽ làm cho Website của bạn thêm phần thú vị và rất chuyên nghiệp. Phù hợp với các Website bán hàng, giới thiệu sản phẩm, Công ty, cá nhân. Tùy vào nhu cầu của bạn nhé.






- Cách thực hiện:
- Chèn đoạn Code sau vào nơi bạn cầ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='http://www.thaiaiti.com/2013/09/thiet-ke-website-tron-goi-gia-re.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw-pE7T5-M86iC-uSaxi8xs1xHzSyD5G4mOWpwbsN-9gHNoTR15YiZW9ZPNUi5aFCzTsim22nsxqBELIRxW4InmLiS5gTU3EonZcdI84jB9eq-q30BGM7ZYg8ylsPv_lPZSVjdRnE_gciM/s468/thietkewebtrongoi-thaiaiti.JPG'/>
</a>
<a href='http://www.thaiaiti.com/'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FRj_2tJBhiMxqyppQf23GEMPYeIyYjuN5SuuRFDchyvhvrbZv74-r_HkU8bDnJuYSB0tmGO4hST20sYDTBIEucNl30WqYt-u43SUrfX6BlqFGShbCP6pryo3AHEcz6NnIUm8k4Mq8O2b/s468/thaiaiti-tichhopbaokimnganluon.JPG'/>
</a>
<a href='http://www.thaiaiti.com/'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-kpyRaj38TP_ZxVxIEhTDmVAQtyf2Bd3niDhZCBfDVMkUAKe1KTaqOLN122mcEMoLcAgsc4tardQ4kE5zxFu_rGUtc_50MFNH8qf8U6hMsxj7lwTY2etRvOXN9jHG6_RpXuZtkIk1J_Y/s468/Entertainment_Media%2520copy.jpg'/>
</a>
<a href='http://www.thaiaiti.com/2013/09/thaiaiti-lam-nhung-gi-ban-ang-can-gi.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirh35Wm6AoFL607dQHe9E5kvH2MtNbWNy1OufOnCdS7xGeywjnqDTn0mUdPmmVVll3SZP1uPkAqT2KIvDhi-sBuiq2tMQ3TccBAQy36PUVjoQBpEqSPAsB7gABVojlG8WrCErh3TfPCvEF/s468/ok12%2520copy.JPG'/>
</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>
- Chèn tiếp đoạn code sau trên </head>

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

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


// 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 (chatthaiaiti.is( ":visible" )){

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

} else {

// Show - slide down.
chatthaiaiti.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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAZDBcfyXpkg5zn381dlmcc8fK8plc6nEhwOLdAZLBp6Q2nYDeMbf4I3pqhuf2ALMx2wTfDrtWm0UdA4z57lfEJyu8oPPAFGz4rgDZEN9DuahQcAKPCICBivU37noD-RnKZnaKU10EJU/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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguAZDBcfyXpkg5zn381dlmcc8fK8plc6nEhwOLdAZLBp6Q2nYDeMbf4I3pqhuf2ALMx2wTfDrtWm0UdA4z57lfEJyu8oPPAFGz4rgDZEN9DuahQcAKPCICBivU37noD-RnKZnaKU10EJU/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>
Ghi chú: Tuy nó sử dụng cả Javascip, nhưng tốc độ load vẫn rất nhẹ nhàng và mượt nhé, mọi người có thể View trực tiếp tại đây