Automated Responsive Blogger Recent Posts Slider And Support Https

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

Namun sayang JS dari Arlina sudah tidak dapat dipakai sehingga slider-nya tidak berjalan.

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

DEMO

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

Silahkan simpan isyarat CSS di bawah ini di atas isyarat </head>. Ini memakai tag conditional biar 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/AVvXsEhvpbUJcGaWpmbYqy2aCqMIcq0TI-tDPvuDAcnuqu6FqQT0N_Ds4F9yi4GkPDt-grO-8knDbtCXbX9ye-7JgqWkQNxlT5CbbRY9eSqfc47hXQDt6VG17Zav-QgEqpgXe2qM58_GmyrIjVw/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/AVvXsEgEeib9E8ajRLFmWPsNM-fJ63tuLmFi3TZIzlf8U8xeTR9_3knzYHR9XJF0tOUwJxeu481IHlwZs7JGnP1XXLaXjf5XIZU1r0czee8ePcmQCjyMb7Y2CGhCxBUj1WXopU2yqezqtX4gdEI/s1600/code-less-than.png") center no-repeat;background-size:50px 50px}
 #nextx{right:50%;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2jYnVqI7z6T4cN2ezpJa9KHMYCff7nzX_LpCT-KHiUxsBZ7h3SUatUpSzfoE5zz9lIdvj5zQBEvN2mXGgZ9SzIvkFaLGWVkvt65TfkliJU8S_Dzu0hz4s3vA-Ijzm_Zhgc2YERZ4GQi0/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 biar 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 isyarat javascript berikut di atas isyarat </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/AVvXsEjA5WGPwtbRWRudNcYOSwvfaD7UYjWqXPNAo98fU5wZZnyHDJc3cBTxsgCuXnvsLL0CiVwfVRu37Sv03uChACl_c6PovZyt2xRdFn2kGDs_cIzUcEE8M6ALIuXtvgpBV_X02-1dxNoUdxE/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="Automated Responsive Blogger Recent Posts Slider And Support HTTPS"></a><a href="#" id="nextx" title="Automated Responsive Blogger Recent Posts Slider And Support HTTPS"></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="Automated Responsive Blogger Recent Posts Slider And Support HTTPS"><div class="overlayx"></div><img class="random" src="'+u+'" title="Automated Responsive Blogger Recent Posts Slider And Support HTTPS"><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 isyarat autoplay:false menjadi autoplay:true. Setelah itu silahkan pasang isyarat berikut di mana Anda ingin menampilkan slide-nya, biasanya di bawah hidangan header.

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

Bagaimana, gampang bukan? Selamat mencoba...


Sumber https://www.kompiajaib.com/

Share this post