Tiện ích bài viết mới nhất cho blogspot bằng sidebar tự động

By Unknown

Thứ Sáu, 15 tháng 8, 2014

Bài viết mới nhất (Recent Post) được khá nhiều các blog viết đến, nhưng mỗi blogger điều có cách viết khác nhau và có mỗi ưu và nhược điểm riêng của nó .

Bài viết mới nhất (Recent Post) với hiệu ứng sidebar tự động chuyển bài có thumbnail rất đẹp mắt, tự động dừng lại khi chúng ta rê chuột vào ảnh của bài viết đó.

Tiện ích bài viết mới nhất cho blogspot bằng sidebar tự động

Code Recent Post được sử dụng  hiệu ứng của jQuery kết hợp với CSS và một phần của HTML chèn trong tiện ích Javascript của Widget

CSS Bài viết mới nhất (Recent Post)

/* CSS Recent Post */
#carousel {background:#ebebeb;width:300px; position: relative;margin: 0 auto;height:265px;overflow:hidden;}
#carousel .judul{margin:8px 0 0 5px;font-size:18px;padding:5px;color:#000;text-shadow:1px 1px 1px #fff}
#carousel .container {position: absolute;left: 0px;bottom:8px;width:100%;overflow:hidden;}
#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}
#carousel ul li {display: inline; float: left; margin:1px 7px 2px 10px; padding:8px; width: 265px; overflow: hidden;height:200px;background:#3B3B3B;border-radius:3px}
#carousel .thumb{height:160px;width: 265px;transition:all 400ms ease-in-out;}
#carousel .thumb:hover{opacity:.7;}
#carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQKGLHqdCFmXJv0SB9AOLdWirFq5wMpSGunhyphenhyphenNrg5RLH3pQ9eOjZrsmxT8fZSBNIBg2l7VkB8D9Px92hPy7_eqD8lxGRHWL6oTK5KAOspkiT4fSQx87-FB6c2bP8-2LecIOnH87u3zFbk/s1600/paginate.png) no-repeat; background-position: 0 0; }
#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyQKGLHqdCFmXJv0SB9AOLdWirFq5wMpSGunhyphenhyphenNrg5RLH3pQ9eOjZrsmxT8fZSBNIBg2l7VkB8D9Px92hPy7_eqD8lxGRHWL6oTK5KAOspkiT4fSQx87-FB6c2bP8-2LecIOnH87u3zFbk/s1600/paginate.png) no-repeat; background-position: -27px 0; }
#carousel #next_button:hover, #previous_button:hover { opacity: 0.8; transition: opacity .25s ease-in-out;}
#carousel ul li a.slider_title{color:#fff;display:block;text-align:center;font-size:12px;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#555;}

Các bạn đăng nhập vào tài khoản blogger của bạn chọn  Mẫu >> Chỉnh sửa HTML >> Ctrl+F >> Tìm đến thẻ ]]></b:skin> sau đó chèn đoạn CSS trên trước nó

Javascript bài viết mới nhất (Recent Post)

<script async='async' src='https://googledrive.com/host/0B1ap438NTONXNkd4S29fSmc4UnM' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUL4vSoXKiX7oPRyZe6WCnpPVdEcMor6cp9KnwgtnF-IeAhsbECOvJAnHkSF6Cxb3GRMwQMGA3nwOztjMsOE6X7HCqBspd9boGJJG-57dtBd7_649mBMPSzyImjA-H_MSeizw0jsB1hmbu/s1600/noImg.jpg";showRandomImg=true;aBold=true;numposts1=10;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 showrecent(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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="265" height="160" class="Thumbnail thumbnail carousel " src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
 document.write(trtd);
 j++;
}
 }
//]]>
</script>

Sau khi chèn CSS xong chúng ta tiếp tục tìm đến thẻ </head> và chèn đoạn code javascript vào trước nó sau đó lưu lại vậy là chúng ta đả hoàn thành trong trong template.

HTML bài viết mới nhất cho blogspot

<div id='carousel'>
<div class='judul'>Bài viết mới cập nhật</div>
<div id='previous_button'></div>
<div id='next_button'></div>
<div style='clear:both'></div>
<div class='container'>
<ul>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecent\"><\/script>");
</script>
</ul>
</div>
<div style='clear:both'></div>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
 $("#carousel .container").jCarouselLite({ auto:4000,scroll: 1,speed: 800,visible: 1,start: 0,circular: true,btnPrev: "#previous_button",btnNext: "#next_button"});
 })})(jQuery)
</script>

Sau khi chèn CSS và code Javascript xong các bạn vào Bố cục >> Thêm tiện ích >> HTML/Javascript sau đó chép code trên dán vào sau đó lưu lại.

DEMO

Lưu ý:
Đối với các template HTML5 khi các bạn thêm tiện ích các bạn vào Mẫu >> chỉnh sửa HTML tìm đoạn
<b:include name='quickedit'/> và xóa nó đi nhé.

Tag : Chia sẻ, CSS, jQuery