Automated Responsive Blogger Recent Posts Slider And Support HTTPS

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/16/2017

Sebenarnya saya tidak mengetahui siapa sebenarnya yang pertama kali membuat responsive blogger recent posts slider ini (apresiasi sebesar-besarnya untuk author widget ini), namun yang saya tahu yang mempopulerkan widget ini dimulai oleh Arlina terlihat dari hampir semua post di Google menggunakan JS dari Arlina.

Namun sayang JS dari Arlina sudah tidak bisa digunakan sehingga slider-nya tidak berjalan.

Untuk itu kemudian saya mencoba menjalankannya kembali dan memodifikasi beberapa kodenya untuk mengubah responsive-nya dan agar menjadi support HTTPS serta menampilkan tombol next prev. Di layar dengan lebar kurang dari 640px, slider hanya menampilkan satu item agar kesannya tidak terlalu menumpuk.


Nah bagi yang ingin menggunakannya silahkan ikuti langkahnya di bawah ini.

Silahkan simpan kode CSS di bawah ini di atas kode </head>. Ini menggunakan tag conditional agar widget hanya tampil di halaman homepage.

<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/AVvXsEiWjteZ2wh3dGfUmNbXTtRBoX36n6QjXE35iOt93vxCxgteCYpbXijdE_s7-kqoXOujCApK0NCpiblEZvMhgoRg2wdavAYS2osie4qGPc_Q5XOsA8HWvg0dG7WOFr1aYoIqIirQ-Br89EU/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/AVvXsEi5_Ps84EfGcKptIk8KPSEoJ4FZaIhuUzYO1TNNGf8SuqUFokV877NryiXka89yZqf22YP7gih5dn5xSc2G2psN_Z4Cd93FuCYHdqIsLLLFE0K-Qa1tDj1fQo4y3UKAs_CVQtP-d1pUYWI/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}

#nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTPVJw7QboxETqrNvdUNURlFvo9KuIQ6ZnW8ByodB_Yu2ProlmBo4i5VGAgiSfKHy8TWZE4-BqgEh1D_gJLDwzELfHZz9AEfHRGB2KaR4t5GB4_pt3CeUJ-h0h1lwplDcBd1-jJ5gaJA/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>

Untuk merubah background tanggal agar lebih sesuai dengan warna tema blog Anda silahkan rubah background pada #slides li:nth-child(1) span.dd untuk tanggal pada item pertama dan background pada #slides .label_text untuk tanggal item lainnya.

Kemudian silahkan simpan kode javascript berikut di atas kode </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/AVvXsEj16AqPAEqfNVxmZ5Q3IEzYcCf0BkVZzfki24gnZ8Ztrww-0Y_8qzLYz5UQCubOZYRUOyTZuJHymuYpODsL7l0LII6k5aCfgEpKwf8hVh7lawgMX7AXMorvrqrU20c6d10YoC7Cby3L1WA/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>

Jika slider ingin otomatis bergeser, silahkan rubah kode autoplay:false menjadi autoplay:true. Setelah itu silahkan pasang kode berikut di mana Anda ingin menampilkan slide-nya, biasanya di bawah menu header.

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

Bagaimana, mudah bukan? Selamat mencoba...