Thủ thuật blog sẽ cung cấp cho bạn thêm một hướng dẫn để thực hiện thanh trượt hình ảnh tự động hoặc hình ảnh theo chiều dọc. Slide đơn giản hình ảnh tự động trượt dọc này phù hợp cho blog phim.Trước đây, tôi xin lỗi không thể trả lời tất cả các câu hỏi mà đi bởi vì rất nhiều các hoạt động bên ngoài tôi phải làm. Và tất nhiên tôi cũng đã không thể đáp ứng nhu cầu của những người bạn muốn một mẫu cụ thể hoặc thay đổi mẫu hiện có thành một bản mẫu đó là SEO thân thiện và HTML hợp lệ.
Thanh trượt này là rất đơn giản, cũng như trước đó trượt thanh trượt , thanh trượt ngay cả khi làm việc này tự động dựa trên các bài viết mới nhất và các chuyên mục cụ thể. Để biết thêm chi tiết xin vui lòng click vào giới thiệu ở trên, tôi đặt các thanh trượt trên bên phải có chiều rộng của 300px . Cái nhìn thanh trượt này trông giống như một thanh trượt mà tồn tại trong các mẫu từ thiết kế Ấn Độ như Lasantha sân bay ,Lansindu , Sameera và những người khác, mà còn bao gồm hình ảnh và URL bằng tay. Nếu người dùng của bạn làm mẫu của họ, và muốn thay thế thanh trượt hoạt động tự động, xin vui lòng tham khảo các bước sau đây:
- Sau khi đăng nhập vào Blogger , chọn blog bạn muốn thêm thanh trượt này.
- Sau đó đi đến mẫu >> Chỉnh sửa HTML (đánh dấu vào ô mở rộng mẫu tiện ích )
- Sao lưu hoặc lưu trữ mẫu đầu tiên, nếu bất cứ lúc nào các lỗi có thể được trở lại hình dạng ban đầu của nó.
- Click "Open" và nhập mã sau đây trên mã ]]> </ 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/AVvXsEigdteUfxr-XdzqC6dPoxMt1fNX7CSQZdikmMl-TzcGrgN4Sl1xQd8dJc5VPXaI6u0ymUaghJOi6bPxEiylWfxuKI2sAXWhk7YY-eM4ytCnjTlGaK1aDkhF5h4zZs6lBUQgeAzvI8dFl1Y/s1600/slider_item.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/AVvXsEijYOPrn-k4t5x3IELAYt4c263vnoDJ1Rc4NlVVqqS-C2zsb8gOW4MWFl_ZJ3t4rr43VfI3EwkGAA3c7Ys8zpzangbFOe2hHXgw64HsiJM2ARhS-PXtBeve7LI8YjYYuXqGBEu3eXwhQK4/s1600/slider_item_active.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/AVvXsEgALxBEfsB_k8p9QBGMPff6VpkAQ61YsGbr61TWNnNwgcbalvdFIWwQWbiBvdWtn4ZWXWBSs2gn76UtTedxtOwMHDlS6vf6IJtw70ug6kfmurCCF08pozwMNAwtpwSndvc-SIqUWLmauMwd/s1600/uj-opacity-40.png);padding:5px 10px; }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}
- Mã màu đỏ là kích thước của thanh trượt ở trên, cho chiều rộng 300px và chiều cao 400px . Lưu ý tất cả và bạn phải điều chỉnh kích thước của các bên trên mẫu bạn đang sử dụng.
- Vẫn còn trong Edit HTML , vào đoạn mã script sau đây trên </ 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/AVvXsEjIKGtNPMMlni5LjGsMpsA-WxhSGqOtGbmE1Nfy3X3AHPsnEGqvjy802K6YRYaCyhS0a95F3Poreo29K0_jPQfPoqLvjbsbhlqKr7_ZMwaEUWfRBXISBc2JHowB3fOuxHMKQnfOdt-lRoc/s1600/no+image.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>- Lưu ý các mã kịch bản đỏ ở đầu trang, nếu mẫu bạn đã cài đặt kịch bản phim nào, các mã kịch bản nên không được bao gồm, chỉ có một jquery hiện trên một mẫu nếu có hai hoặc nhiều hơn sẽ đụng độ và một trong những chức năng của nó không phải là cách .. numposts : 6; là số lượng bài viết xuất hiện trên thanh trượt
- Bây giờ bạn muốn đặt nó, nơi các thanh trượt, nếu bạn muốn đặt trong thanh bên phải ở phía trên như thể hiện trong bản demo. Tìm mã <div id='sidebar-wrapper'> hoặc bên gói mã hiện có trong mẫu của bạn, sau đó đặt code sau vào trước hoặc trên <div id='sidebar-wrapper'> :
- <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> - Mô tả:Hiển thị thanh trượt bằng cách sử dụng mã trên chỉ có thể nhìn thấy trong bài viết, nếu bạn muốn nhìn vào thanh trượt trang web loại bỏ các mã đầu tiên và cuối cùng ánh sáng màu xanh. Thanh trượt ở trên sẽ hiển thị bài viết mới nhất của bạn, nếu bạn muốn thay đổi phải được thực hiện theo các nhãn bạn chỉ cần thêm mã / nhãn -/your giữa các mã mặc định và ? , trông như thế này mặc định / - / nhãn hiệu của bạn tối đa kết quả? như đoạn mã trên có hai, bạn phải thay thế cả.
- Cuối cùng tiết kiệm , thực hiện.
Thanh trượt ở trên, bạn có thể thay đổi chính mình, bạn cũng có thể sử dụng thanh trượt để hình ảnh ngang (dọc không nên) cố gắng để có nhiều sáng tạo bằng cách thay đổi chiều dài và chiều rộng của hiện trong hướng dẫn này hoặc thêm trang trí băng như nhìn thấy trong bản demo này , vì vậy nó trông thú vị hơn. Đó là một hướng dẫn để thực hiện một thanh trượt đơn giản thời gian này, nếu có peasan ít rõ ràng hơn xin vui lòng để lại trong lĩnh vực ý kiến dưới đây.Và cho bạn bè của tôi, những người đã tham gia và làm sinh động các diễn đàn thảo luận trên blog này, tôi xin cảm ơn, xin vui lòng thảo luận với tự do và lành mạnh. Đối với một trong khi tôi đã không thể theo dõi hoặc bị trượt bởi vì có rất nhiều công việc mà tôi phải hoàn thành .
