Memasang Recent Post Slider Responsive Support HTTPS

Dipostingan kali ini kita akan membahas mengenai Widget Blog yang sering sekali dan mungkin bisa dikatakan wajib terpasang pada blog yaitu Widget Recent Posts. Ada banyak cara penempatannya dan itu sah saja dilakukan tergantung selera yang punya blog mau ditempatkan dimana Widget Recent Post tersebut.

Ini adalah lanjutan dari postingan sebelumnya yang sudah kita pernah bahas sebelumnya yaitu Cara Membuat Sticky Recent Post Slide Out On Scroll namun di postingan kali ini agak sedikit berbeda dan ada beberapa modifikasi didalamnya akan kita tambahakan gaya Responsive dan support HTTPS. Penggunaan Widget Recent post Responsive ini sangat berguna bagi pengunjung yang berasal dari smartphone yang akan memudahkan untuk terus mengunjungi blog kita.

Entah siapa pencipta script kode dan dari mana asalnya Widget Recent posts Responsive ini berasal namun yang saya tahu Widget Recent Post Responsive ini pertama kali di Populerkan oleh Arlina Design pada tahun 2014 lalu tepatnya kurang tahu, ada banyak Blogger yang menggunakan kode Js arlina dan bisa dikatakan hampir di semua post yang dishare ke google menggunakan Js Arlina. 

Namun seiring berjalannya waktu sepertinya sudah tidak bisa berfungsi lagi JS arlina Slidernya entah ada perubahan kode atau seperti apa, nah untuk itu disini kita akan coba mengaktifkan kembali kode JS Slidder tersebut dan ada beberapa modifikasi di dalam kode tersebut agar bisa responsive dan support HTTPS, kemudian akan kita tambahkan tombol Next Previous dan disetiap slidder hanya menampilkan satu gambar saja agar terlihat tidak menumpuk dan kesannya berantakan.

Baiklah bagi sobat yang penasaran dan mau mencobanya mari kita simak Cara Memasang Recent Post Slider Responsive Support HTTPS.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan kode tersebut diatas kode </head>.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
/*<![CDATA[*/
#slides li:nth-child(3),#slides li:nth-child(5){left:75%;width:25%;height:50%}
#featuredpost{margin:15px auto;width:100%;position: relative;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides li,#slides ul{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:350px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1),#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){top:50%}
#slides li:nth-child(1) h4{overflow:hidden;font-size:20px;bottom:0;color:#fafafa;width:100%;padding:10px 10px 10px 90px;text-align:left;background:rgba(0,0,0,.3);height:90px;text-shadow:2px 2px 0 rgba(0,0,0,.2);line-height:1.1;left:0}
#slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;padding:0;box-shadow:5px 3px 0 rgba(0,0,0,.2)}
#slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px 15px;background:#E53B2C;margin:0}
#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;padding:5px 21px;text-transform:uppercase;margin:0}
#slides li:nth-child(1) span.autname,#slides li:nth-child(1) span.dy{display:none}
#slides a,#slides img{display:block;width:100%}
#slides a{height:100%;overflow:hidden}
#slides img{height:100%;border:0;padding:0;background-color:#333;-moz-transform:scale(1) rotate(0);-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0);transition:all .6s linear}
#slides li:nth-child(1) .overlayx,#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none}
#slides li a:hover img{-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all .3s linear}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x}
#slides .label_text,#slides h4{z-index:3;left:10px;position:absolute;}
#slides h4{bottom:40px;margin:0 10px 0 0;font-size:13px;padding:5px 10px;color:#f9f9f9;line-height:1.1;font-weight:400;background:rgba(41,41,41,.7);text-align:left}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;background:#E53B2C;background:rgba(229,59,44,.8);padding:3px 6px}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:hover .overlayx{opacity:.1}
#featuredpost.loadingxx{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHPqFMpomCO9_by0BkGN8Xk3qnjh13gocPrcsk2yj1rEQd3Lr-USjB1jAAEcQDqCw41R4Ugmrc1_2sil9kG_KksPUF6e6EvBmtQuJs6Tr7tm-hy0E05Lacpw2aEknQweNz1bqHJNo0Ud8/s1600/loadingbox.gif) no-repeat 50% 50%;}
#buttons{opacity:0;transition:all .4s ease-in-out}
#featuredpost:hover #buttons{opacity:.7}
#nextx,#prevx{position:absolute;top:0;bottom:0;width:60px}
#prevx{left:0;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7dTSLFsIiF1yxwqpriIwreqUDzPmEskQKzDVpiMUkFybPsXrNcBlN_s6-hmkhxYc-zoqztF5sE40ev_BqKUSVrPsbRtFClosR_MRXXFt05OLYm0TnqJ5ijYf5QBmnFVNdr633Syc3h8/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4FSVoDx3H1TOfR6qBK62kMmEeLkObnpyf1_53XGwTNP7irc3dRS1luPOi8-tekX5GsVGLbRW9Qn7XYK8pCw0AeFOfvGiQ5kdTHNBLnOX_Wjb7VOhqazhlMOP9e7w9Pq2wPJYDMzAuMU/s1600/code-greater-than.png") center no-repeat;background-size:50px 50px}
@media only screen and (max-width:1024px){#slides ul{height:320px}
}
@media only screen and (max-width:800px){#slides li:nth-child(1) h4{font-size:18px;}
}
@media only screen and (max-width:640px){#slides ul{overflow:hidden}
#slides li:nth-child(1){width:100%;height:100%}
#slides li:nth-child(2),#slides li:nth-child(3),#slides li:nth-child(4),#slides li:nth-child(5){top:0;left:100%;height:100%}
#nextx{right:0;}
}
@media only screen and (max-width:480px){#slides ul{height:200px}
#slides li:nth-child(1) h4{font-size:13px;}
#nextx, #prevx{bottom:50%}
}
/*]]>*/
</style>
</b:if>

Kode diatas menggunakan tag conditional yang diatur agar hanya tampil pada halaman depan saja atau Home Page. Perhatikan kode yang ditandai silahkan sobat sesuaikan dan atur dengan warna template yang digunakan.


Langkah Ke Dua
Silahkan salin kode javascript dibawah ini lalu letakkan kode Javascript ini di atas </body>.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:window.location.origin,MaxPost:15,idcontaint:"#featuredpost",ImageSize:600,interval:4000,autoplay:false,loadingClass:"loadingxx",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMgRmiiv1nNRPwlQQtWk8lJOEqmmIRS1n8RU1ihWxToX3hyphenhyphenVwrgdbFXREkqOTEJF0a0QK_rnlcoKRIi7WrBTpFoII1JfR2tBtrbWaukBoXoRv2MX1WZK-tMLajZK8eDtTgdqh_hUN7LL4/s1600/nothumb_large.png",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 c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);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(/.*?:\/\//g , "//").replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize)}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+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><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)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e());e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
$(document).ready(function () {
FeaturedPost();
});
//]]>
</script>
</b:if>

Perhaikan kode yang ditandai autoplay:false itu untuk mengatur tampilan slide jika ingin mau mengubahnya menjadi tampilan otomatis berubah silahkan ganti menjadi autoplay:true.


Langkah Ketiga
Silahkan sobat salin kode dibawah ini untuk menampilkan Widget Recent Posts Slidernya, biasanya banyak yang ditaruh di bawah menu header.

<div id="featuredpost"></div>

Perhatikan penerapan pemasangan kodenya jika sudah sesuai petunjuk silahkan SAVE dan selesai, selamat mencoba semoga bermanfaat.