
VIEW DEMO
¤ Thêm Simple Slider bài mới trượt cho blogspot ves3 cho blogger!
1- Đăng nhập vào blog2- Chọn Mẫu (Template)
3- Chọn chỉnh sủa HTML (Edit HTML)
4- Dán code sau trước thẻ ]]></b:skin> :
/* Slider */ .sompret-wrapper {float:right; position: relative;} .sompret { overflow: hidden; position: relative; width:300px; height:400px;} .image_reel { position: absolute; top: 0; left: 0; } .image_reel img {overflow: hidden;float: left;width:300px; height:auto;} .paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; } .paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWrlo_PGwElggd_Cv5qkyxa_C-wQJ0VDXzxxINabCvOZcRLWkOAHw7baSi8hVN6vg30g7ZifuOlG0ZGLGhZR8Gucx3s0tPMUHea1OvctPCiZVJU3rN4fn6lOGplAVx8urOIFHG1SNrN52E/s1600/slider_item_namkna-blogspot-com.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; } .paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnmPOkdj__h5VGnfu7n7APcEgIiwbkr6fxnkAMH90HZSNGnhOjvK7hh1LGJghcrX378HEYF8MERfkkEMQ-3e2dtrUHAr2tXOHiknznA0saReF0A3AvEMFSvrWbsx9juAIuAtxczBQOSU9/s1600/slider_item_active_namkna-blogspot-com.png) no-repeat center; border:none; outline:none;} .paging a:hover {font-weight: bold; border:none; outline:none;} .crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9a4rVK7FsanPjiz0AEFdoIe_skTn62OSKRUpYDc7EhkSwWXfC9LGlYSXXrAqr-lhiUbqBlFEzUZCg0FNAu2a8ZekCJ6QdFKGQ4nqucab9SQXcsXCEzc45kOYPlEO9uCQE4GDPVwwW2mfj/s1600/uj-opacity-40_namkna-blogspot-com.png);padding:5px 10px; } .crott a{color: #fff;font: 16px Oswald } .crott p{color: #fff;font: 12px Arial;}
5- Dán code bên dưới trước thẻ </head>:
<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function() { //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".sompret").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 + 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 a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) $(".crott").stop(true,true).slideUp('slow'); $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 10000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor }); }); //]]> </script> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6aE8XTRABIXziOTrQQFVyAYzKPodV-4mekpw3UQWrasyqCrr5uctk8LWubq7p61CwHfWtvBLTyo7ur8CDp5ly3ybY-IfdDlAUisf1IxDfFXLGLl5K5RQuQ0UQwmbD8X-4-zCDm-74GmGn/s1600/no+image-namkna-blogspot-com.jpg"; showRandomImg = true; aBold = true; summaryPost1 = 80; summaryTitle = 20; numposts1 = 6; function removeHtmlTag(strx,chop){ var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } s = s.join(""); s = s.substring(0,chop-1); return s; } function showrecentposts1(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; 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!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = m+ ' ' + day + ' ' + y ; var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++; } } function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; 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!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++; } } //]]> </script>
- summaryPost1 = 80; Là số ký tự mô tả khi dê chuột vào ảnh hoặc tiêu đề.
- summaryTitle = 20; Là số ký tự tiêu đề tối đa hiển thị trên slider. bạn nên để vừa phải không nên quá nhiều ký tự sẽ làm sấu slider.
- numposts1 = 6; là số bài viết hoặc ảnh thumbnail sẽ hiển thị trên slider. bạn không nên cho quá nhiều sẽ ảnh hưởng tới tốc độ load.
- Xóa màu xanh nếu đã có jquery
<div id='main-wrapper'>- Dán vào trước nó đoạn code bên dưới:
<b:if cond='data:blog.pageType == "item"'> <div class='sompret-wrapper'> <div class='sompret'> <div class='image_reel'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>"); </script></div> <div class='description'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script> </div> </div> <div class='paging'> <a href='#' rel='1'/> <a href='#' rel='2'/> <a href='#' rel='3'/> <a href='#' rel='4'/> <a href='#' rel='5'/> <a href='#' rel='6'/> </div> </div> </b:if>
- Nếu muốn tiện ích hiện ở cả trang chủ thì hãy xóa bỏ phần màu vàng đi.
- Phần này mình để lấu tất cả các bài viết thuộc các nhãn khác nhau. nếu muốn hiện theo một nhãn nhất định thì thêm phần /-/Tên nhãn vào sau default