Membuat Carousel Recent Posts Di Sidebar Blogger

Ketika membuka kembali blog-blog demo dari template yang aku buat atau modifikasi, ada satu widget yang menciptakan aku berpikir untuk memodifikasinya. Sebuah widget carousel yang letaknya di bawah postingan blog Kompi Wide. Kayaknya anggun juga jikalau carousel recent posts ini disimpan di sidebar blog.

Untuk itu lalu aku modifikasi carousel recent posts-nya semoga dapat disimpan di sidebar sekalian memperbaiki kode-kodenya. Silahkan lihat demonya pada link demo di bawah ini dan silahkan lihat pada sidebar-nya.

DEMO

Tertarik untuk mencobanya? Silahkan copy kode-kodenya di bawah ini.

Kode CSS

 #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/AVvXsEh9ybc008u_jIv668MdSWc1vGH_BgXZ1wKe4FyBbs87d9kw2e6jDruIbx8a_KiVcE-JfS5SXUIjaUD21YFeYSDzpBgLCighDOZH2ZIUA5AgEW_VxPkOXX0IsVIMFwo5_X9SlHQT8xo-feMb/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/AVvXsEh9ybc008u_jIv668MdSWc1vGH_BgXZ1wKe4FyBbs87d9kw2e6jDruIbx8a_KiVcE-JfS5SXUIjaUD21YFeYSDzpBgLCighDOZH2ZIUA5AgEW_VxPkOXX0IsVIMFwo5_X9SlHQT8xo-feMb/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;}

Kode Javascript
Silahkan simpan di atas instruksi </head>

 <script async='async' src='http://yourjavascript.com/14380451251/carousellite.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk3GdpHq4LZY3CZHk29NWpV-3QdqHiDhdEb2Lhgm70OGRBIWSOmxnOMlCVDKWQfura9XAjV4W_Evkh-zsupCxVGZe2VkpeZ9TjGX5lTAFHOsYytLvvhFuUN4QQrW8kPOWwCel3RqRvyQrx/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> 

Kode HTML
Silahkan menuju ke Tata Letak >> Add a gadget >> Pilih HTML/JavaScript lalu simpan instruksi HTML di bawah ini.

 <div id='carousel'>
 <div class='judul'>The Hottest Posts</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>

Selamat mencoba...

Sumber https://www.kompiajaib.com/

Share this post