 |
| Cara Memasang Widget Recent Post Slider Pada Side Bar Blog |
AFP - こ ー ん ー に ー ち ー は 皆！ 🙋 Bagaimana kabar hari ini? Selalu jaga kesehatan mu ya. Mimin lagi semangat-semangatnya nih belajar blog. Tentu saja setelah mimin belajar dan mengerti, mimin akan langsung membuat postingan agar mimin sendiri tidak lupa hahaha. Kali ini mimin dapat ilmu dari kak Arlina Design tentang pemasangan widget recent post. Simak Cara Memasang Widget Recent Post Slider Pada Side Bar Blog ya.
Pertama-tama, bagi kamu-kamu yang belum tahu apa itu [RECENT POST], artinya adalah postingan atau artikel yang sudah kalian posting sebelumnya, semacam history gitu. Apa fungsinya? Fungsinya adalah agar pengunjung pada blog kalian dapat mengetahui postingan apa saja yang sebelumnya sudah kalian update. Nah, mimin juga sangat yakin sekali, di luar sana banyak master-master blogger yang menyediakan jenis widget ini dengan gaya yang unik dan extraordinary. Namun sejauh ini, mimin sangat suka dengan widget yang sudah mimin pasang pada blog ☔ Pluviophile 7 ini. Terima kasih kepada kak ARLINA atas widgetnya. :)))
Berikut langkah-langkah yang harus kalian lakukan :
1. Buka Blogger > Tata Letak > Tambahkan Gadget > pilih HTML/Javascript.
2. Copy dan Paste-kan script dibawah ini pada kolom HTML/Javascript.
<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box }ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative }ul.rcentside{width:100%;height:500px }ul.rcentside li{height: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 img{border:0;width:100%;height:auto}ul.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 li{transition:all .4s ease-in-out }ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiROiXSD6UJuQ1NuLpsPd3OvAYCiIGOKph1agjohrbhMz_to5Q6z2faCVAonERR5tb-VkylR9qpG7t8OGt3gargqugHCCulBLAHPObaNXGLEIddlqhOwB1z3iFEMziJm-12YhsQ9ALSD4s/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x }ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1).overlayx{background-position:50% 25% }ul.rcentside .overlayx:hover{opacity:.1 }ul.rcentside h4{position: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 .3s}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1)h4,ul.rcentside li:nth-child(4)h4{font-size:150% }ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2).autname,ul.rcentside li:nth-child(3).autname{display:none }.buttons{margin:5px 0 0 }.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative }.buttons a::before{content:"";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::before{border-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:"http://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;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=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: "http://adit-kun.blogspot.com",
MaxPost: 8,
idcontaint: "#featuredpostside",
ImageSize: 300,
interval: 5000,
autoplay: true,
tagName: false
});
//]]>
</script>
3. Beri nama jika kalian menginginkannya, atau biarkan jika kalian tidak ingin memberi nama pada widget ini. Pilih Simpan.
Catatan :
Ganti http://adit-kun.blogspot.com/ dengan URL blog kalian sendiri.
MaxPost: 8 : adalah jumlah post yang ingin kalian tampilkan pada widget.
ImageSize: 300 : adalah ukuran atau dimensi dari gambar dalam satuan pixels.
interval: 5000 : adalah waktu yang dibutuhkan saat post slider berpindah.
autoplay: true : adalah pengaturan agar post kalian berpindah (sliding) pada tampilan widget. Jika kalian ingin me-non aktifkan fungsi ini, ganti autoplay: true menjadi autoplay: false.
tagName: false : adalah untuk menambahkan postingan dengan label tertentu. Jika kalian hanya ingin postingan dengan label tertentu saja yang muncul, [contoh : label Blogging] rubah false dengan label yang kalian inginkan."
Yap, begitulah langkah-langkah Cara Memasang Widget Recent Post Slider Pada Side Bar Blog. Sekian postingan kali ini, kita berjumpa lagi pada postingan selanjutnya ya. Selamat mencoba! Salam hangat dari mimin. じゃ、またね。 😊😊
