Skip to main content
KOMPI AJAIB

follow us

Membuat Carousel Recent Posts Di Sidebar Blogger

Carousel Recent Posts
Ketika membuka kembali blog-blog demo dari template yang saya buat atau modifikasi, ada satu widget yang membuat saya berpikir untuk memodifikasinya. Sebuah widget carousel yang letaknya di bawah postingan blog Kompi Wide. Kayaknya bagus juga jika carousel recent posts ini disimpan di sidebar blog.

Untuk itu kemudian saya modifikasi carousel recent posts-nya agar bisa disimpan di sidebar sekalian memperbaiki kode-kodenya. Silahkan lihat demonya pada link demo di bawah ini dan silahkan lihat pada sidebar-nya.


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(http://4.bp.blogspot.com/-atI1zRgEc2E/UTdnxmCN1GI/AAAAAAAACdw/gdMd1oSe3Ac/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(http://4.bp.blogspot.com/-atI1zRgEc2E/UTdnxmCN1GI/AAAAAAAACdw/gdMd1oSe3Ac/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 kode </head>


<script async='async' src='http://yourjavascript.com/14380451251/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-02jT97yp-74/U-2_rDlZ_nI/AAAAAAAAdaU/pnNIeinEOGQ/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 kemudian simpan kode 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...

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar