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:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments