Tạo đơn giản hình ảnh tự động trượt dọc cho blogger/blogspot

Tweet

[tintuc] Kali tôi 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. 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 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 sản xuất:
1. Sau khi đăng nhập vào Blogger , chọn blog bạn muốn thêm thanh trượt này.
2. Sau đó đi đến mẫu >> Chỉnh sửa HTML (đánh dấu vào ô mở rộng mẫu tiện ích )
3. 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ó.
4. 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/AVvXsEiaPxfp_QRG2HsBV8_rC3QhEcDLDTuEA4OmvR3QIaqI9daDJp3in7pQ7o_gNNPo9_LXLW9Dj2ceZsov72DOepB3LNcbkqBVzP5UtA7_eIIoYnIifTXDa_lTrzQyE4YWb_SdASBcaQGjLJk/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/AVvXsEjosGp4XRwg5XCms2fxg33H4Vzk0uf_9CHVp88aDdDeQoNFrMu1BsHtW_593Wt9-8lHJjwj5fVPOtKwmMKHjUrypthv-GFAWhDBfRHgKmfihm_OgtcMMZmOAMwP-PoJ9bE7AhRiqS64pYQ/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/AVvXsEhAqG3lI1Z1U6o0pbc369-BlEgTnr1zB1hTXBhOzNwQN6r8nEJFBy4-lL_mdR743j-6um7yYUXY7aY4jh1CY36o0iUDXy2VXP0PYqilYkSOCWBuKdsu_WfMB7fIfz0hlTpccUVstcTmQkEy/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}



1. 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.
2. 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/AVvXsEiFGPewZ03HEhHDXl56RbSgXR8HkQZSZC9q8g_s9SDEHfbpPfmxjAHXSKTzoZmxwCswO-m2ZnqfDpx4GpbvfH3SvR4yVhrJtZg9rYQg_z_UeeOWCEnFRSrYkte5KINrgEVotdEe8DADnHY/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>




- Tìm mã 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>    
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</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>
[/tintuc]