Cara Memasang Widget Recent Post Slider Di Sidebar Blog

Jika sering kali widget recent post hanya berbentuk link beserta beberapa gambar tumbnail yg menuju ke postingan terbaru, namun pada kesempatan kali ini admin akan mencoba mengatakan sebuah cara buat membuat wigdet recent post slider.

Widget yang akan aku bagikan ini tidak sama dengan kebanyakan recent post yg ada. Widget ini berbentuk sebuah kotak dengan beberapa tumbnail postingan terbaru yang mampu digeser atau di slide baik secara otomatis maupun manual.

Widget recent post slider ini bersama-sama bukanlah hal baru, mungkin anda pernah melihat widget ini di beberapa situs di internet, namun kau tidak tahu apa nama widget tersebut, serta bagaimana cara mengolahnya?

Tapi tenang, karena dalam ketika ini admin akan mengatakan kepada anda cara membuat widget recent post slider tersebut. Penasaran bagaimana caranya? Silahkan ikuti panduannya dibawah ini:

1. Login ke blogger
2. Masuk ke Tata Letak>Tambahkan Gadget>HTML/Javascript
3. Copy aba-aba berikut, serta paste di halaman tadi

<style scoped="" type="text/css">ul.rcentside *-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box ul.rcentsidefont-size:11pxul.rcentside,ul.rcentside limargin:0;padding:0;list-style:none;position:relative ul.rcentsidewidth:100%;height:500px ul.rcentside liheight:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4)display:block ul.rcentside imgborder:0;width:100%;height:autoul.rcentside li:nth-child(1)width:100%;height:49.5%;margin:0 0 2px;left:0;top:0 ul.rcentside li:nth-child(2)left:0;top:50% ul.rcentside li:nth-child(3)left:50.5%;top:50% ul.rcentside li:nth-child(4)width:100%;left:0;top:75% ul.rcentside .overlayx,ul.rcentside litransition:all .4s ease-in-out ul.rcentside .overlayxwidth:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAt5JW3x7j9bE6l03S88L6pb8-oOsfRd9_eKbEX5-AkbsWw005xl2tyBUCDuZfeiMgEquZ9-V5H6tyB3FKd9Cfzxn91iPn9c5L9M6YcXtMtoccHh-NX3OxRyPENw_GnasVF9_Qq0Mk2-A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x ul.rcentside .overlayx,ul.rcentside imgmargin:3pxul.rcentside li:nth-child(1).overlayxbackground-position:50% 25% ul.rcentside .overlayx:hoveropacity:.1 ul.rcentside h4position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3sul.rcentside li:hover h4bottom:30pxul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4font-size:150% ul.rcentside .label_textposition:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3sul.rcentside li:hover .label_textbottom:20px;opacity:1ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autnamedisplay:none .buttonsmargin:5px 0 0 .buttons adisplay:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative .buttons a::beforecontent:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50% .buttons a.nextx::beforeborder-color:transparent transparent transparent #535353;margin-left:-3px </style><div id="featuredpostside"></div><script type='text/javascript'>function FeaturedPostSide(a)(function(e)var h=blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false;h=e.extend(,h,a);var g=e(h.idcontaint);var d=h.maxpost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w)var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++)for(var n=0;n<s[o].link.length;n++)if(s[o].link[n].rel=="alternate")q=s[o].link[n].href;breakif("media$thumbnail" in s[o])u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.imageSize+"-c")elseu=h.pblank.replace(//s[0-9]+(-ck=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.monthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"e("ul",g).append(l).addclass(h.loadingClass);var c=function()e(h.idcontaint+" .nextx").click();var b=function()e.get((h.blogURL===""?Window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagname===false?"":"/-/"+h.tagname)+"?Max-results="+h.maxpost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function()e(h.idcontaint+" .prevx").click(function()e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false);e(h.idcontaint+" .nextx").click(function()e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false);if(h.autoplay)var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function()clearInterval(j),function()j=setInterval(c,i))e("ul",g).removeClass(h.loadingClass),d);e(document).ready(b))(jQuery);//<![CDATA[FeaturedPostSide( blogURL: "https://www.kostandroid.com", MaxPost: 8, idcontaint: "#featuredpostside", ImageSize: 300, interval: 5000, autoplay: true, tagName: false);//]]></script>

Keterangan:

blogURL: ganti dengan URL blog anda
MaxPost: Jumlah postingan
ImageSize: kapasitas gambar
interval: waktu yang diharapkan dikala post slider berpindah
autoplay: true : mengaktifkan auto slider, buat merubahnya ubah menjadi "autoplay:false"
tagName: false : mematikan nama label, untuk menambahkan artikel terbaru menurut label, ubah false menjadi nama label yang diinginkan. Misal: blogger

4. Simpan widget, serta lihat balasannya pada blog anda

KOSTANDROID

Cara Memasang Widget Recent Post Slider Di Sidebar Blog

Artikel Terkait