Membuat Carousel Recent Posts Di Sidebar Blogger

Membuat Carousel Recent Posts Di Sidebar Blogger

Bola Hero Gawai

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...

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

26 Comments Add Comment

Adeuuhh s akang ngabibita wae recent post na, eta kang nge berat eun loading moal?

Balas

Tentunya ada pengaruhnya juga kang jika menambahkan javascript ke template, tapi setelah saya coba ternyata carousellite.js nya bisa menggunakan asynchronous jadi agak mendingan untuk loading blog.

Balas

di template saya kok gak jadi mas....? @@,
widget yg lainnya malah jadi terbuka semua sebelum di klik

Balas

Bagus Kang, tapi kalo buat blog saya cocok nggak ya ?
Oiya kang sekalian mau nanya yang kemaren Gimana membuat header seperti blog ini ?

Balas

coba asynchronous nya di carousellite.js nya dihapus mas

Balas

Ma'af mas tadi ada kesalahan penulisan kode javascriptnya, coba copy ulang kode javascriptnya :)

Balas

tambahkan posisi fixed aja mas :)

Balas

:-bd
sudah jadi mas,tengkiyu

Balas

Hehehehe siip mas udah saya lihat keren :-d
Ma'af tadi ada sedikit kesalahan hehehe :)

Balas

Nggak bisa kang, malah jadi transparant Headernya =(

Balas

pengen pasang,, tapi setelah lihat demonya kok widgetnya gk bisa responsive saat browsernya dikecilin ya mas??

Balas

Beuh, mantep mas recent postnya, wajib dicoba :D

Balas

alus siganamah uy mun di pake.. :D

Balas

Wah boleh juga nich Kang....
Kebetulan saya blm punya widget sprti ini :)

Balas

Tinggal tambahin pengaturan css untuk masing2 devicenya mas :)

Balas

Silahkan dicoba kang :)

Balas

Sok atuh dicobian Kang hehehe :)

Balas

Silahkan dicoba dulu kang hehhehe :)

Balas

contohnya gimana mas cara nambahinnya,,??
masih bingung aku,, hehehe.. :)

Balas

Wah ada yg baru lagi ini.
ijin praktek nyah kang.

Balas

Jadi agenda tambahan untuk dicoba nih
Thanks for sharing

Balas

Saya sudah coba kang, kotak-nya nongol tapi gambar-nya kosong kang, tolong pencerahan kang..

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×