Memasang Recent Posts Slide Responsive By Label And Show On Label Pages

Ini ialah postingan lanjutan dari pembahasan sebelumnya Cara Memasang Recent Post Slider Responsive Support HTTPS, dimana sebelumnya sudah kita bahas dan kita modifikasi beberapa arahan script didalamnya biar support HTTPS dan tampilannya Responsive menyesuaikan dengan Device yang dipakai pengunjung. 

Di postingan kali ini kita akan membahas kembali dan sedikit menambhakan arahan scriptnya untuk menampilkan Recent posts dengan tampilan slider sesuai dengan label postingan yang ditampilkan. Untuk tampilan awal di Home Page tetap dengan Tampilan Recent Posts biasa namun ketika masuk ke Postingan akan kita kreasikan tampilan Recent Posts akan menampilkan sesuai dengan label yang telah kita tetapkan. 

Disini kita akan menambahkan juga Conditional Tag untuk halaman Homepage dan  untuk memanggil labelnya di Recent Post slider biar dapat tampil disetiap halaman sesuai dengan label yang sudah ditentukan disetiap Postingan dengan memodifikasi juga arahan Javascript nya. 

Langsung saja bagi yang mau mencobanya mari kita simak penerapannya Memasang Recent Posts Slide Responsive By Label And Show On Label Pages.

Langkah Pertama

Untuk yang pernah memasang arahan CSS ini di pembahasan sebelumnya arahan ini sama hanya sedikit ada modifikasi Conditional Tag Silahkan salin arahan CSS dibawah ini lalu ganti arahan yang sudah dipasang sebelumnya dan letakkan di atas arahan </head>.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'> <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://2.bp.blogspot.com/-j5_B6uRRf_I/WUnnQw-tddI/AAAAAAAArpQ/tN7vxuosXf0w2g4qOHqH6UD02hi-al-uACLcBGAs/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://4.bp.blogspot.com/-ZQB4gdDffz8/WWrzkJ1QceI/AAAAAAAAr2U/GANOfBvKSE0QY9S3jHroeylebqq6wRaJQCLcBGAs/s1600/code-less-than.png") center no-repeat;background-size:50px 50px} #nextx{right:50%;background:url("https://2.bp.blogspot.com/-64GKW6NEjcM/WWrzkROR2jI/AAAAAAAAr2Y/ufjUCKpoks0GFTQGiLw9QkvbvqdxTYpFQCLcBGAs/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>

Langkah Ke Dua
Silahkan salin arahan Javascript dibawah ini lalu letakkan diatas arahan </body>, Bagi yang sudah pernah memasang arahan javascript menyerupai ini silahkan ganti dengan arahan ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'> <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://1.bp.blogspot.com/-jHWwEwTEwQ4/WJJ4k71QSYI/AAAAAAAApVc/XO_OitR_VGQS_Wquq1pv1h1D-dgiejSuQCLcB/s1600/nothumb_large.png",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],};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="/-/"+label.tagName;if(label.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> <b:if cond='data:blog.url == data:blog.homepageUrl'> <script> //<![CDATA[ var label={    tagName:false }; //]]> </script> </b:if> <b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'> <script> //<![CDATA[ var label={    tagName:"Blogger" }; //]]> </script> </b:if> <b:if cond='data:blog.searchLabel == &quot;Tutorial CSS&quot;'> <script> //<![CDATA[ var label={    tagName:"Tutorial%20CSS" }; //]]> </script> </b:if>

Perhatikan arahan yang ditandai silahkan sesuiakan dengan label yang akan ditampilkan kemudian perhatikan juga penulisannya harus sesuai besar kecilnya alasannya ialah tidak akan tampil bila penulisannya tidak sama.

Jika ingin menampilkannya secara Slide untuk halaman label lainnya silahkan sahabat tambahkan arahan dibawah ini.

<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'> <script> //<![CDATA[ var label={    tagName:"Blogger" }; //]]> </script> </b:if>

Perhatikan kembali arahan yang ditandai silahkan sesuia kembali dengan label yang akan ditampilkan dan begitu seterusnya bila ada banyak label yang mau ditambahkan.

Langkah Ke Tiga
Silahkan salin arahan dibawah ini untuk menampilkan slide-nya letakkan dimana ingin ditampilkan umumnya ini di taruh di bawah Menu Header Blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='featuredpost'/> </b:if> <b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'> <div id='featuredpost'/> </b:if> <b:if cond='data:blog.searchLabel == &quot;Tutorial CSS&quot;'> <div id='featuredpost'/> </b:if>

Perhatikan kembali arahan yang ditandai silahkan sesuaikan, dan diatas hanya pola untuk Label Postingan dan bila mau menambahkan slidedi halaman label silahkan tambahkan arahan dibawah ini.

<b:if cond='data:blog.searchLabel == &quot;Blogger&quot;'> <div id='featuredpost'/> </b:if>

Dan seterusnya bila ada banyak label yang mau ditampilkan.

Perhatikan setiap langkah penerapannya, ada baiknya sebelum mencobanya dibackup terlebih dahulu templatenya antisipasi bila terjadi error setelah sesuai silahkan SAVE dan selesai. Selamat mencoba semoga bermanfaat.