Memasang Recent Post Slider Responsive Support HTTPS

Dipostingan kali ini kita akan membahas mengenai Widget Blog yang sering sekali dan mungkin mampu 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 yaitu 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 berkhasiat bagi pengunjung yang berasal dari smartphone yang akan memudahkan untuk terus mengunjungi blog kita.

Entah siapa pencipta script isyarat 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 isyarat Js arlina dan mampu dikatakan hampir di semua post yang dishare ke google menggunakan Js Arlina. 

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

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

Langkah Pertama

Silahkan sahabat salin isyarat CSS dibawah ini lalu letakkan isyarat tersebut diatas isyarat </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/AVvXsEg8MRcw4I8Sy6m77zfO3LppTQI-565vProGGQlG5I407ap7DoF2Wh1NTRHeypuXaDMjvjMvzfPW5hc2ZdhWW7nrsqlcsysRIc5zVzyxLfCfG3lrTX_AsqRd_builRqdjKG2XdTw1UqGG10/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/AVvXsEjLyImI9oqhSMWGFz9ndrmk9Eb0juhEj3SYQx8sNpE4eS4tC5PEf5J4SEi95X_IKTBNx6MmcbL7MiSX24JFMpX-dxG9bdFJmb7U-obZouTOHHtOpXooVzbnYuWoE0jiBLcwgj8zkMgrrPE/s1600/code-less-than.png") center no-repeat;background-size:50px 50px} #nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhph-NA0VUJBSAbCwdi8DEw3_5MM8X8VjWk2N5Y0EfpLN2GOwdWy8oZ6uYolxC_w-3DDffrj0ucVeb-SPakLcDlWWLn2yjsA61iuOvNLI3OhNSXagr_OBIoFl42P1yUWii48ZSKuO5MUmY/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 semoga hanya tampil pada halaman depan saja atau Home Page. Perhatikan isyarat yang ditandai silahkan sahabat sesuaikan dan atur dengan warna template yang digunakan.


Langkah Ke Dua
Silahkan salin isyarat javascript dibawah ini lalu letakkan isyarat 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/AVvXsEhKg4hA9bBctHr49jWDBoPWI0rO74YFxMawMrOJp57G8d91bbe2BQAUaxeeHs97kuQCClmqf_yWB9OmAes_THt6XGApk6PyAEkH_VFFf8Y6ebShl8sF6n_2nsTObHs9D_UF-w1ltLrSTjU/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 isyarat yang ditandai autoplay:false itu untuk mengatur tampilan slide jikalau ingin mau mengubahnya menjadi tampilan otomatis berubah silahkan ganti menjadi autoplay:true.


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

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

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